Merge pull request #1492 from adumesny/develop

'data-gs-min-width' to 'gs-min-w' attr rename

Author: adumesny

README.md

@@ -42,6 +42,7 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Migrating to v0.6](#migrating-to-v06)
   - [Migrating to v1](#migrating-to-v1)
   - [Migrating to v2](#migrating-to-v2)
+  - [Migrating to v3](#migrating-to-v3)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -115,7 +116,7 @@ grid.load(serializedData);
   <div class="grid-stack-item">
     <div class="grid-stack-item-content">Item 1</div>
   </div>
-  <div class="grid-stack-item" data-gs-width="2">
+  <div class="grid-stack-item" gs-w="2">
     <div class="grid-stack-item-content">Item 2 wider</div>
   </div>
 </div>
@@ -173,30 +174,30 @@ See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.htm
 
 ## Custom columns CSS
 
-If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]`.
+If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
 
 For instance for 3-column grid you need to rewrite CSS to be:
 
 ```css
-.grid-stack-item[data-gs-width="3"]  { width: 100% }
-.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
-.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }
+.grid-stack-item[gs-w="3"]  { width: 100% }
+.grid-stack-item[gs-w="2"]  { width: 66.66666667% }
+.grid-stack-item[gs-w="1"]  { width: 33.33333333% }
 
-.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
-.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }
+.grid-stack-item[gs-x="2"]  { left: 66.66666667% }
+.grid-stack-item[gs-x="1"]  { left: 33.33333333% }
 ```
 
 For 4-column grid it should be:
 
 ```css
-.grid-stack-item[data-gs-width="4"]  { width: 100% }
-.grid-stack-item[data-gs-width="3"]  { width: 75% }
-.grid-stack-item[data-gs-width="2"]  { width: 50% }
-.grid-stack-item[data-gs-width="1"]  { width: 25% }
-
-.grid-stack-item[data-gs-x="3"]  { left: 75% }
-.grid-stack-item[data-gs-x="2"]  { left: 50% }
-.grid-stack-item[data-gs-x="1"]  { left: 25% }
+.grid-stack-item[gs-w="4"]  { width: 100% }
+.grid-stack-item[gs-w="3"]  { width: 75% }
+.grid-stack-item[gs-w="2"]  { width: 50% }
+.grid-stack-item[gs-w="1"]  { width: 25% }
+
+.grid-stack-item[gs-x="3"]  { left: 75% }
+.grid-stack-item[gs-x="2"]  { left: 50% }
+.grid-stack-item[gs-x="1"]  { left: 25% }
 ```
 
 and so on.
@@ -211,10 +212,10 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
   min-width: (100% / $gridstack-columns);
 
   @for $i from 1 through $gridstack-columns {
-    &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
-    &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-    &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-    &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+    &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
+    &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
+    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
   }
 }
 ```
@@ -357,6 +358,20 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
 
 **Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
 
+## Migrating to v3
+
+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.
+
+Some breaking changes:
+
+1. include (as mentioned) need to change
+
+2. `GridStack.update(el, opt)` now takes `GridStackWidget` options instead, BUT legacy call in JS will continue working the same for now
+
+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.
+
 # 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/events.js

@@ -14,15 +14,15 @@ function addEvents(grid, id) {
 
   grid.on('dragstart', function(event, el) {
     let node = el.gridstackNode;
-    let x = el.getAttribute('data-gs-x');
-    let y= el.getAttribute('data-gs-y');
+    let x = el.getAttribute('gs-x');
+    let y= el.getAttribute('gs-y');
     console.log(g + 'dragstart ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
   });
 
   grid.on('dragstop', function(event, el) {
     let node = el.gridstackNode;
-    let x = el.getAttribute('data-gs-x');
-    let y= el.getAttribute('data-gs-y');
+    let x = el.getAttribute('gs-x');
+    let y= el.getAttribute('gs-y');
     console.log(g + 'dragstop ' + el.textContent + ' pos: (' + node.x + ',' + node.y + ') vs (' + x + ',' + y + ')');
   });
 
@@ -41,14 +41,14 @@ function addEvents(grid, id) {
   });
 
   grid.on('resizestart', function(event, el) {
-    let w = el.getAttribute('data-gs-width');
-    let h = el.getAttribute('data-gs-height');
+    let w = el.getAttribute('gs-w');
+    let h = el.getAttribute('gs-h');
     console.log(g + 'resizestart ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
   });
 
   grid.on('resizestop', function(event, el) {
-    let w = el.getAttribute('data-gs-width');
-    let h = el.getAttribute('data-gs-height');
+    let w = el.getAttribute('gs-w');
+    let h = el.getAttribute('gs-h');
     console.log(g + 'resizestop ' + el.textContent + ' size: (' + w + ' x ' + h + ')');
   });
 }

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: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position, \'data-gs-id\': $data.id}">',
+          '   <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-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
           '   </div>',
           '</div> '

demo/nested.html

@@ -26,28 +26,28 @@ <h1>Nested grids demo</h1>
     <br><br>
 
     <div class="grid-stack top">
-      <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1">
+      <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="1">
         <div class="grid-stack-item-content">regular item</div>
       </div>
-      <div class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="4" data-gs-height="4">
+      <div class="grid-stack-item" gs-x="1" gs-y="0" gs-w="4" gs-h="4">
         <div class="grid-stack-item-content">
           nested 1 - can drag items out
           <div class="grid-stack nested1">
-            <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
-            <div class="grid-stack-item sub" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
-            <div class="grid-stack-item sub" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
-            <div class="grid-stack-item sub" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
-            <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
-            <div class="grid-stack-item sub" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
+            <div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">1</div></div>
+            <div class="grid-stack-item sub" gs-x="3" gs-y="0" gs-w="3"><div class="grid-stack-item-content">2</div></div>
+            <div class="grid-stack-item sub" gs-x="6" gs-y="0" gs-w="3"><div class="grid-stack-item-content">3</div></div>
+            <div class="grid-stack-item sub" gs-x="9" gs-y="0" gs-w="3"><div class="grid-stack-item-content">4</div></div>
+            <div class="grid-stack-item sub" gs-x="0" gs-y="1" gs-w="3"><div class="grid-stack-item-content">5</div></div>
+            <div class="grid-stack-item sub" gs-x="3" gs-y="1" gs-w="3"><div class="grid-stack-item-content">6</div></div>
           </div>
         </div>
     </div>
-    <div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="3" data-gs-height="4">
+    <div class="grid-stack-item" gs-x="5" gs-y="0" gs-w="3" gs-h="4">
       <div class="grid-stack-item-content">
         nested 2 - constrained to parent (default)
         <div class="grid-stack nested2">
-          <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">7</div></div>
-          <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="3" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">8</div></div>
+          <div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">7</div></div>
+          <div class="grid-stack-item sub" gs-x="0" gs-y="3" gs-w="3"><div class="grid-stack-item-content">8</div></div>
         </div>
       </div>
     </div>

demo/right-to-left(rtl).html

@@ -54,7 +54,7 @@ <h1>RTL Demo</h1>
       template:
         [
           '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
-          '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
+          '   <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}">',
           '     <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
           '   </div>',
           '</div> '

demo/static.html

@@ -19,14 +19,14 @@ <h1>Static vs can move/drag Demo</h1>
       <a class="btn btn-primary" onclick="grid.setStatic(false)" id="float" href="#">Editable</a>
     </div>
     <br><br>
-    <div class="grid-stack" data-gs-static-grid="true"></div>
+    <div class="grid-stack" gs-static="true"></div>
   </div>
   <script src="events.js"></script>
   <script type="text/javascript">
     let grid = GridStack.init({
       float: true,
       cellHeight: 70,
-      //staticGrid: true // same but testing data-gs above
+      //staticGrid: true // same but testing gs above
     });
     addEvents(grid);
 

demo/two-jq.html

@@ -56,7 +56,7 @@ <h1>Two grids demo</h1>
             <div class="grid-stack-item-content">Drag me</div>
           </div>
           <!-- manually force a drop size of 2x1 -->
-          <div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
+          <div class="grid-stack-item" gs-w="2" gs-h="1">
             <div class="grid-stack-item-content">Drag me 2x1</div>
           </div>
 

demo/two.html

@@ -56,7 +56,7 @@ <h1>Two grids demo</h1>
             <div class="grid-stack-item-content">Drag me</div>
           </div>
           <!-- manually force a drop size of 2x1 -->
-          <div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
+          <div class="grid-stack-item" gs-w="2" gs-h="1">
             <div class="grid-stack-item-content">Drag me 2x1</div>
           </div>
 

doc/CHANGES.md

@@ -50,6 +50,7 @@ Change log
 - fix [1235](https://github.com/gridstack/gridstack.js/issues/1235) `update(el, opts)` re-write to take all `GridStackWidget` options (not just x,y,width,height) and do everything efficiently.
 Hiding `locked()`, `move()`, `resize()`, `minWidth()`, etc... as they just simply call update() which does all the constrain now as well!
 - del `ddPlugin` grid option as we only have one drag&drop plugin at runtime, which is defined by the include you use (HTML5 vs jquery vs none)
+-  change 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 [1491](https://github.com/gridstack/gridstack.js/pull/1491)
 
 ## 2.2.0 (2020-11-7)
 

doc/README.md

@@ -109,10 +109,10 @@ gridstack.js API
 
 ## Grid attributes
 
-most of the above options are also available as HTML attributes using the `data-gs-` name prefix with standard dash lower case naming convention (ex: `data-gs-column`, `data-gs-min-row`, `data-gs-static-grid`, etc..).
+most of the above options are also available as HTML attributes using the `gs-` name prefix with standard dash lower case naming convention (ex: `gs-column`, `gs-min-row`, `gs-static`, etc..).
 
 Extras:
-- `data-gs-current-row` - (internal) current rows amount. Set by the library only. Can be used by the CSS rules.
+- `gs-current-row` - (internal) current rows amount. Set by the library only. Can be used by the CSS rules.
 
 ## Item Options
 
@@ -133,7 +133,7 @@ You need to add `noResize` and `noMove` attributes to completely lock the widget
 
 ## Item attributes
 
-all item options are also available as HTML attributes using the `data-gs-` name prefix with standard dash lower case naming convention (ex: `data-gs-x`, `data-gs-min-width`, etc..).
+all item options are also available as HTML attributes using the `gs-` name prefix with standard dash lower case naming convention (ex: `gs-x`, `gs-min-w`, etc..).
 
 ## Events
 
@@ -187,7 +187,7 @@ called after the user is done moving the item, with updated DOM attributes.
 
 ```js
 grid.on('dragstop', function(event: Event, el: GridItemHTMLElement) {
-  let x = parseInt(el.getAttribute('data-gs-x')) || 0;
+  let x = parseInt(el.getAttribute('gs-x')) || 0;
   // or all values...
   let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
 });
@@ -237,7 +237,7 @@ called after the user is done resizing the item, with updated DOM attributes.
 
 ```js
 grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
-  let width = parseInt(el.getAttribute('data-gs-width')) || 0;
+  let width = parseInt(el.getAttribute('gs-w')) || 0;
   // or all values...
   let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
 });
@@ -402,7 +402,7 @@ Parameters:
 
 ```js
 let grid = GridStack.init();
-grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"></div>')
+grid.el.appendChild('<div id="gsi-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true"></div>')
 grid.makeWidget('#gsi-1');
 ```