| 1 | function addEvents(grid, id) { |
| 2 | let g = (id !== undefined ? 'grid' + id : ''); |
| 3 | |
| 4 | grid.on('added removed change', function(event, items) { |
| 5 | let str = ''; |
| 6 | items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; }); |
| 7 | console.log((g || items[0].grid.opts.id) + ' ' + event.type + ' ' + items.length + ' items (x,y w h):' + str ); |
| 8 | }) |
| 9 | .on('enable', function(event) { |
| 10 | let el = event.target; |
| 11 | console.log((g || el.gridstackNode.grid.opts.id) + ' enable'); |
| 12 | }) |
| 13 | .on('disable', function(event) { |
| 14 | let el = event.target; |
| 15 | console.log((g || el.gridstackNode.grid.opts.id) + ' disable'); |
| 16 | }) |
| 17 | .on('dragstart', function(event, el) { |
| 18 | let n = el.gridstackNode; |
| 19 | let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same |
| 20 | let y = el.getAttribute('gs-y'); |
| 21 | console.log((g || el.gridstackNode.grid.opts.id) + ' dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); |
| 22 | }) |
| 23 | .on('drag', function(event, el) { |
| 24 | let n = el.gridstackNode; |
| 25 | let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same |
| 26 | let y = el.getAttribute('gs-y'); |
| 27 | // console.log((g || el.gridstackNode.grid.opts.id) + ' drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); |
| 28 | }) |
| 29 | .on('dragstop', function(event, el) { |
| 30 | let n = el.gridstackNode; |
| 31 | let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same |
| 32 | let y = el.getAttribute('gs-y'); |
| 33 | console.log((g || el.gridstackNode.grid.opts.id) + ' dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); |
| 34 | }) |
| 35 | .on('dropped', function(event, previousNode, newNode) { |
| 36 | if (previousNode) { |
| 37 | console.log((g || previousNode.grid.opts.id) + ' dropped - Removed widget from grid:', previousNode); |
| 38 | } |
| 39 | if (newNode) { |
| 40 | console.log((g || newNode.grid.opts.id) + ' dropped - Added widget in grid:', newNode); |
| 41 | } |
| 42 | }) |
| 43 | .on('resizestart', function(event, el) { |
| 44 | let n = el.gridstackNode; |
| 45 | let rec = el.getBoundingClientRect(); |
| 46 | console.log(`${g || el.gridstackNode.grid.opts.id} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); |
| 47 | |
| 48 | }) |
| 49 | .on('resize', function(event, el) { |
| 50 | let n = el.gridstackNode; |
| 51 | let rec = el.getBoundingClientRect(); |
| 52 | console.log(`${g || el.gridstackNode.grid.opts.id} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); |
| 53 | }) |
| 54 | .on('resizestop', function(event, el) { |
| 55 | let n = el.gridstackNode; |
| 56 | let rec = el.getBoundingClientRect(); |
| 57 | console.log(`${g || el.gridstackNode.grid.opts.id} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); |
| 58 | }); |
| 59 | } |