Skip to content

Commit

Permalink
removed gs-w='1'
Browse files Browse the repository at this point in the history 
* fix gridstack#2243
* also removed `gs-w='1'` and `gs-h='1'` dom attribute writing since we already have min-width/min-height set, no need to set more attributes.
  • Loading branch information
@adumesny
adumesny committed Apr 9, 2023
1 parent 5d24e85 commit 32ccecc
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 93 deletions.
6 changes: 0 additions & 6 deletions demo/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@ function addEvents(grid, id) {
})
.on('resizestart', function(event, el) {
let n = el.gridstackNode;
let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
let h = parseInt(el.getAttribute('gs-h'));
if (w !== n.w || h !== n.h) alert('resizestart missmatch');
let rec = el.getBoundingClientRect();
console.log(`${g} resizestart ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);

Expand All @@ -56,9 +53,6 @@ function addEvents(grid, id) {
})
.on('resizestop', function(event, el) {
let n = el.gridstackNode;
let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
let h = parseInt(el.getAttribute('gs-h'));
if (w !== n.w || h !== n.h) alert('resizestop missmatch');
let rec = el.getBoundingClientRect();
console.log(`${g} resizestop ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
});
Expand Down
3 changes: 2 additions & 1 deletion doc/CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ Change log
<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## 7.3.0-dev (TBD)
* feat [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row styles in half!
* feat [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row CSS in half!
* feat: also removed `gs-w='1'` and `gs-h='1'` dom attribute writing since we already have min-width/min-height set, no need to set more attributes.

## 7.3.0 (2023-04-01)
* feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)
Expand Down
8 changes: 1 addition & 7 deletions spec/e2e/html/810-many-columns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,8 @@ <h1>Many Columns demo</h1>
};
let grid = GridStack.init(options);

addNewWidget = function() {
grid.addWidget({content: String(count++)});
};

grid.batchUpdate();
for (; count <= COLUMNS;) {
this.addNewWidget();
}
for (; count <= COLUMNS;) grid.addWidget({content: String(count++)});
grid.batchUpdate(false);
</script>
</body>
Expand Down
98 changes: 49 additions & 49 deletions spec/gridstack-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,21 +321,21 @@ describe('gridstack', function() {
expect(grid.getColumn()).toBe(1);
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);

// add default 1x1 item to the end (1 column)
let el3 = grid.addWidget();
expect(el3).not.toBe(null);
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(el3.getAttribute('gs-h')).toBe(null);

// back to 12 column and initial layout (other than new item3)
grid.column(12);
Expand All @@ -353,51 +353,51 @@ describe('gridstack', function() {
// remembers autoPlacement so finds next slot on 12 layout after 4x2 + 4x4
expect(parseInt(el3.getAttribute('gs-x'))).toBe(8);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(el3.getAttribute('gs-h')).toBe(null);

// back to 1 column
grid.column(1);
expect(grid.getColumn()).toBe(1);
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);

expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(el3.getAttribute('gs-h')).toBe(null);

// move item2 to beginning to [3][1][2] vertically
grid.update(el3, {x:0, y:0});
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(el3.getAttribute('gs-h')).toBe(null);

expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);

// back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still
grid.column(12);
expect(grid.getColumn()).toBe(12);
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); // 8 TEST WHY
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(el3.getAttribute('gs-h')).toBe(null);

expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
Expand All @@ -416,17 +416,17 @@ describe('gridstack', function() {

expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); // 1 TEST WHY
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1); // 1 as we scaled from 12 columns
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null); // 1 as we scaled from 12 columns
expect(el3.getAttribute('gs-h')).toBe(null);

expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(1);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
});
});
Expand Down Expand Up @@ -455,35 +455,35 @@ describe('gridstack', function() {
// items are item1[1x1], item3[1x1], item2[2x1]
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(el1.getAttribute('gs-h')).toBe(null);

expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
expect(el2.getAttribute('gs-h')).toBe(null);

// items are item1[1x1], item3[1x2], item2[1x1] in 1 column
grid.column(1);
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(el1.getAttribute('gs-h')).toBe(null);

expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(el2.getAttribute('gs-h')).toBe(null);
});
it('should support oneColumnModeDomSort ON going to 1 column', function() {
let options = {
Expand All @@ -499,34 +499,34 @@ describe('gridstack', function() {
// items are item1[1x1], item3[1x1], item2[2x1]
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(el1.getAttribute('gs-h')).toBe(null);

expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
expect(el2.getAttribute('gs-h')).toBe(null);

// items are item1[1x1], item2[1x1], item3[1x2] in 1 column dom ordered
grid.column(1);
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-w')).toBe(null);
expect(el1.getAttribute('gs-h')).toBe(null);

expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
expect(el2.getAttribute('gs-w')).toBe(null);
expect(el2.getAttribute('gs-h')).toBe(null);

expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el3.getAttribute('gs-y'))).toBe(2);
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
expect(el3.getAttribute('gs-w')).toBe(null);
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
});
});
Expand Down Expand Up @@ -863,7 +863,7 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
expect(widget.getAttribute('gs-id')).toBe('optionWidget');
Expand All @@ -874,7 +874,7 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
expect(widget.getAttribute('gs-id')).toBe('optionWidget');
Expand All @@ -885,7 +885,7 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
expect(widget.getAttribute('gs-id')).toBe('optionWidget');
Expand All @@ -896,7 +896,7 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
expect(widget.getAttribute('gs-id')).toBe('optionWidget');
Expand All @@ -907,8 +907,8 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(widget.getAttribute('gs-h')).toBe(null);
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
});

Expand All @@ -927,8 +927,8 @@ describe('gridstack', function() {

expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
expect(widget.getAttribute('gs-w')).toBe(null);
expect(widget.getAttribute('gs-h')).toBe(null);
});
it('null options should clear x position', function() {
let grid = GridStack.init({float: true});
Expand All @@ -946,7 +946,7 @@ describe('gridstack', function() {
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(5);
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(3);
expect(widget.gridstackNode.maxW).toBe(4);
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
expect(widget.getAttribute('gs-h')).toBe(null);
expect(widget.getAttribute('gs-id')).toBe('foo');
});
});
Expand Down Expand Up @@ -1800,7 +1800,7 @@ describe('gridstack', function() {
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-h')).toBe(null);

let el2 = document.getElementById('item2')
expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
Expand All @@ -1822,7 +1822,7 @@ describe('gridstack', function() {
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
expect(el1.getAttribute('gs-h')).toBe(null);

expect(document.getElementById('item2')).toBe(null);
let el2 = grid.engine.nodes.find(n => n.id === 'new2').el;
Expand Down
2 changes: 1 addition & 1 deletion src/gridstack.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ $animation_speed: .3s !default;
&.grid-stack-1>.grid-stack-item {
min-width: 100%;
&[gs-w='1'] { width: 100%; }
&[gs-x='1'] { left: 100%; }
&[gs-x='0'] { left: 0; }
}

&.grid-stack-animate,
Expand Down
Loading

0 comments on commit 32ccecc

Please sign in to comment.