From b9988ccc06575f5028216678f406479c70fe06e6 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 28 Nov 2020 20:11:07 -0800 Subject: [PATCH] 'data-gs-min-width' to 'gs-min-w' attr rename * removed 'data-' from all attributes (legacy JS style) and shorten width/height to w/h * make for smaller and more efiicient code and CSS. Easy enough to global replace in your code. --- README.md | 53 +- demo/events.js | 16 +- demo/knockout.html | 2 +- demo/nested.html | 22 +- demo/right-to-left(rtl).html | 2 +- demo/static.html | 4 +- demo/two-jq.html | 2 +- demo/two.html | 2 +- doc/CHANGES.md | 1 + doc/README.md | 12 +- .../1017-items-no-x-y-for-autoPosition.html | 10 +- spec/e2e/html/1142_change_event_missing.html | 8 +- .../html/1143_nested_acceptWidget_types.html | 16 +- spec/e2e/html/1286-load.html | 4 +- spec/e2e/html/810-many-columns.css | 488 +++++++------- spec/gridstack-spec.ts | 614 +++++++++--------- spec/utils-spec.ts | 4 +- src/gridstack-dd.ts | 12 +- src/gridstack-extra.scss | 8 +- src/gridstack.scss | 16 +- src/gridstack.ts | 102 +-- src/types.ts | 2 +- src/utils.ts | 6 +- 23 files changed, 711 insertions(+), 695 deletions(-) diff --git a/README.md b/README.md index 67d1842e0..31eb9241b 100644 --- a/README.md +++ b/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);
Item 1
-
+
Item 2 wider
@@ -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)). diff --git a/demo/events.js b/demo/events.js index 7e9230083..d007041ab 100644 --- a/demo/events.js +++ b/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 + ')'); }); } \ No newline at end of file diff --git a/demo/knockout.html b/demo/knockout.html index d31591aad..3c169cebb 100644 --- a/demo/knockout.html +++ b/demo/knockout.html @@ -49,7 +49,7 @@

knockout.js Demo

template: [ '
', - '
', + '
', '
', '
', '
' diff --git a/demo/nested.html b/demo/nested.html index 2742e5ae8..96647d710 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -26,28 +26,28 @@

Nested grids demo



-
+
regular item
-
+
nested 1 - can drag items out
-
1
-
2
-
3
-
4
-
5
-
6
+
1
+
2
+
3
+
4
+
5
+
6
-
+
nested 2 - constrained to parent (default)
-
7
-
8
+
7
+
8
diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html index a659d3438..9e59e77da 100644 --- a/demo/right-to-left(rtl).html +++ b/demo/right-to-left(rtl).html @@ -54,7 +54,7 @@

RTL Demo

template: [ '
', - '
', + '
', '


lorem ipsum

', '
', '
' diff --git a/demo/static.html b/demo/static.html index cac65ff44..b1ca043e1 100644 --- a/demo/static.html +++ b/demo/static.html @@ -19,14 +19,14 @@

Static vs can move/drag Demo

Editable


-
+