Merge pull request #1493 from adumesny/develop

GridStackWidget use w,h,minW,minH

Author: adumesny

README.md

@@ -92,16 +92,16 @@ creating items dynamically...
 
 // ...in your script
 var grid = GridStack.init();
-grid.addWidget({width: 2, content: 'item 1'});
+grid.addWidget({w: 2, content: 'item 1'});
 ```
 
 ... or creating from list
 
 ```js
 // using serialize data instead of .addWidget()
 const serializedData = [
-  {x: 0, y: 0, width: 2, height: 2},
-  {x: 2, y: 3, width: 3, content: 'item 2'},
+  {x: 0, y: 0, w: 2, h: 2},
+  {x: 2, y: 3, w: 3, content: 'item 2'},
   {x: 1, y: 3}
 ];
 
@@ -315,7 +315,7 @@ var grid = $('.grid-stack').data('gridstack');
 var grid = GridStack.init(opts?, element?);
 
 // returns DOM element
-grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
+grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {w: 2});
 
 // event handler
 grid.on('added', function(e, items) {/* items contains info */});
@@ -362,7 +362,7 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
 
 make sure to read v2 migration first!
 
-v3 has a new HTML5 drag&drop plugging (65k total, all native code), while still allowing you to use the legacy jquery-ui version (188k), or a new static grid version (35k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same as `gridstack-jq.js`) - see include info at top.
+v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version (186k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same as `gridstack-jq.js`) - see include info at top.
 
 Some breaking changes:
 
@@ -372,6 +372,8 @@ Some breaking changes:
 
 3. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require typing and more efficient.
 
+4. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
+
 # jQuery Application
 
 We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) in `gridstack-jq.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).

demo/advance.html

@@ -71,17 +71,17 @@ <h1>Advanced Demo</h1>
     });
 
     let items = [
-      {x: 0, y: 0, width: 4, height: 2, content: '1'},
-      {x: 4, y: 0, width: 4, height: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
-      {x: 8, y: 0, width: 2, height: 2, minWidth: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
-      {x: 10, y: 0, width: 2, height: 2, content: '4'},
-      {x: 0, y: 2, width: 2, height: 2, content: '5'},
-      {x: 2, y: 2, width: 2, height: 4, content: '6'},
-      {x: 8, y: 2, width: 4, height: 2, content: '7'},
-      {x: 0, y: 4, width: 2, height: 2, content: '8'},
-      {x: 4, y: 4, width: 4, height: 2, content: '9'},
-      {x: 8, y: 4, width: 2, height: 2, content: '10'},
-      {x: 10, y: 4, width: 2, height: 2, content: '11'},
+      {x: 0, y: 0, w: 4, h: 2, content: '1'},
+      {x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
+      {x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
+      {x: 10, y: 0, w: 2, h: 2, content: '4'},
+      {x: 0, y: 2, w: 2, h: 2, content: '5'},
+      {x: 2, y: 2, w: 2, h: 4, content: '6'},
+      {x: 8, y: 2, w: 4, h: 2, content: '7'},
+      {x: 0, y: 4, w: 2, h: 2, content: '8'},
+      {x: 4, y: 4, w: 4, h: 2, content: '9'},
+      {x: 8, y: 4, w: 2, h: 2, content: '10'},
+      {x: 10, y: 4, w: 2, h: 2, content: '11'},
     ];
     grid.load(items);
 

demo/anijs.html

@@ -38,7 +38,7 @@ <h4>Widget added</h4>
     });
 
     function addWidget() {
-      grid.addWidget({width: Math.floor(1 + 3 * Math.random()), height: Math.floor(1 + 3 * Math.random())});
+      grid.addWidget({w: Math.floor(1 + 3 * Math.random()), h: Math.floor(1 + 3 * Math.random())});
     };
 
     let animationHelper = AniJS.getHelper();

demo/column.html

@@ -53,19 +53,19 @@ <h1>column() grid demo</h1>
 
     let items = [
       /* match karma testing
-      {x: 0, y: 0, width: 4, height: 2},
-      {x: 4, y: 0, width: 4, height: 4},
+      {x: 0, y: 0, w: 4, h: 2},
+      {x: 4, y: 0, w: 4, h: 4},
       {text: ' auto'},
       */
-      {x: 0, y: 0, width: 2, height: 2},
-      {x: 2, y: 0, width: 2, height: 1},
-      {x: 5, y: 1, width: 1, height: 1},
-      {x: 5, y: 0, width: 2, height: 1},
-      // {x: 0, y: 0, width: 1, height: 1}, // conflict
+      {x: 0, y: 0, w: 2, h: 2},
+      {x: 2, y: 0, w: 2},
+      {x: 5, y: 1},
+      {x: 5, y: 0, w: 2},
+      // {x: 0, y: 0}, // conflict
       {text: ' auto'}, // autoPosition testing
-      // {x: 4, y: 0, width: 1, height: 1}, // same auto-pos
-      {x: 5, y: 3, width: 2, height: 1},
-      {x: 0, y: 4, width: 12, height: 1}
+      // {x: 4, y: 0}, // same auto-pos
+      {x: 5, y: 3, w: 2},
+      {x: 0, y: 4, w: 12}
     ];
     let count = 0;
     grid.batchUpdate();
@@ -76,8 +76,8 @@ <h1>column() grid demo</h1>
       let n = items[count] || {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
-        width: Math.round(1 + 3 * Math.random()),
-        height: Math.round(1 + 3 * Math.random())
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
       };
       n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
       grid.addWidget(n);

demo/events.js

@@ -3,7 +3,7 @@ function addEvents(grid, id) {
 
   grid.on('added removed change', function(event, items) {
     let str = '';
-    items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.width + 'x' + item.height + ')'; });
+    items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; });
     console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str );
   });
 

demo/float.html

@@ -26,20 +26,20 @@ <h1>Float grid demo</h1>
     addEvents(grid);
 
     let items = [
-      {x: 1, y: 1, width: 1, height: 1},
-      {x: 2, y: 2, width: 3, height: 1},
-      {x: 4, y: 2, width: 1, height: 1},
-      {x: 3, y: 1, width: 1, height: 2},
-      {x: 0, y: 6, width: 2, height: 2}
+      {x: 1, y: 1},
+      {x: 2, y: 2, w: 3},
+      {x: 4, y: 2},
+      {x: 3, y: 1, h: 2},
+      {x: 0, y: 6, w: 2, h: 2}
     ];
     let count = 0;
 
     addNewWidget = function() {
       let n = items[count] || {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
-        width: Math.round(1 + 3 * Math.random()),
-        height: Math.round(1 + 3 * Math.random())
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
       };
       n.content = String(count++);
       grid.addWidget(n);

demo/knockout.html

@@ -49,7 +49,7 @@ <h1>knockout.js Demo</h1>
       template:
         [
           '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
-          '   <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.width, \'gs-h\': $data.height, \'gs-auto-position\': $data.auto_position, \'gs-id\': $data.id}">',
+          '   <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.w, \'gs-h\': $data.h, \'gs-auto-position\': $data.auto_position, \'gs-id\': $data.id}">',
           '     <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
           '   </div>',
           '</div> '
@@ -65,8 +65,8 @@ <h1>knockout.js Demo</h1>
         this.widgets.push({
           x: 0,
           y: 0,
-          width: Math.floor(1 + 3 * Math.random()),
-          height: Math.floor(1 + 3 * Math.random()),
+          w: Math.floor(1 + 3 * Math.random()),
+          h: Math.floor(1 + 3 * Math.random()),
           auto_position: true
         });
         return false;
@@ -79,10 +79,10 @@ <h1>knockout.js Demo</h1>
     };
 
     let widgets = [
-      {x: 0, y: 0, width: 2, height: 2, id: '0'},
-      {x: 2, y: 0, width: 4, height: 2, id: '1'},
-      {x: 6, y: 0, width: 2, height: 4, id: '2'},
-      {x: 1, y: 2, width: 4, height: 2, id: '3'}
+      {x: 0, y: 0, w: 2, h: 2, id: '0'},
+      {x: 2, y: 0, w: 4, h: 2, id: '1'},
+      {x: 6, y: 0, w: 2, h: 4, id: '2'},
+      {x: 1, y: 2, w: 4, h: 2, id: '3'}
     ];
 
     let controller = new Controller(widgets);

demo/locked.html

@@ -31,20 +31,20 @@ <h1>Locked demo</h1>
     });
 
     let items = [
-      {x: 0, y: 1, width: 12, height: 1, locked: 'yes', noMove: true, noResize: true, text: 'locked, noResize, noMove'},
-      {x: 1, y: 0, width: 2, height: 3},
-      {x: 4, y: 2, width: 1, height: 1},
-      {x: 3, y: 1, width: 1, height: 2},
-      {x: 0, y: 6, width: 2, height: 2}
+      {x: 0, y: 1, w: 12, locked: 'yes', noMove: true, noResize: true, text: 'locked, noResize, noMove'},
+      {x: 1, y: 0, w: 2, h: 3},
+      {x: 4, y: 2},
+      {x: 3, y: 1, h: 2},
+      {x: 0, y: 6, w: 2, h: 2}
     ];
     let count = 0;
 
     addNewWidget = function() {
       let n = items[count] || {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
-        width: Math.round(1 + 3 * Math.random()),
-        height: Math.round(1 + 3 * Math.random())
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
       };
       n.content = n.text ? n.text : String(count);
       grid.addWidget(n);

demo/nested.html

@@ -70,8 +70,8 @@ <h1>Nested grids demo</h1>
       let node = {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
-        width: Math.round(1 + 3 * Math.random()),
-        height: Math.round(1 + 3 * Math.random())
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
       };
       // Note: we have additional style .sub here so add the HTML passed directly...
       grid.addWidget('<div class="grid-stack-item sub"><div class="grid-stack-item-content">' + count++ + '</div></div>', node);

demo/react.html

@@ -23,11 +23,11 @@
         count: 0,
         info: "",
         items: [
-          { x: 2, y: 1, height: 2 },
-          { x: 2, y: 4, width: 3 },
-          { x: 4, y: 2, width: 1 },
-          { x: 3, y: 1, height: 2 },
-          { x: 0, y: 6, width: 2, height: 2 },
+          { x: 2, y: 1, h: 2 },
+          { x: 2, y: 4, w: 3 },
+          { x: 4, y: 2 },
+          { x: 3, y: 1, h: 2 },
+          { x: 0, y: 6, w: 2, h: 2 },
         ],
       };
 
@@ -60,8 +60,8 @@
         const node = this.state.items[this.state.count] || {
           x: Math.round(12 * Math.random()),
           y: Math.round(5 * Math.random()),
-          width: Math.round(1 + 3 * Math.random()),
-          height: Math.round(1 + 3 * Math.random()),
+          w: Math.round(1 + 3 * Math.random()),
+          h: Math.round(1 + 3 * Math.random()),
         };
         node.id = node.content = String(this.state.count);
         this.setState((prevState) => ({