Skip to content

Commit 32ccecc

Browse files
adumesnyadumesny
committed
removed gs-w='1'
* fix #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.
1 parent 5d24e85 commit 32ccecc

File tree

7 files changed

+84
-93
lines changed

7 files changed

+84
-93
lines changed

‎demo/events.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,6 @@ function addEvents(grid, id) {
4242
})
4343
.on('resizestart', function(event, el) {
4444
let n = el.gridstackNode;
45-
let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
46-
let h = parseInt(el.getAttribute('gs-h'));
47-
if (w !== n.w || h !== n.h) alert('resizestart missmatch');
4845
let rec = el.getBoundingClientRect();
4946
console.log(`${g} resizestart ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
5047

@@ -56,9 +53,6 @@ function addEvents(grid, id) {
5653
})
5754
.on('resizestop', function(event, el) {
5855
let n = el.gridstackNode;
59-
let w = parseInt(el.getAttribute('gs-w')); // verify node (easiest) and attr are the same
60-
let h = parseInt(el.getAttribute('gs-h'));
61-
if (w !== n.w || h !== n.h) alert('resizestop missmatch');
6256
let rec = el.getBoundingClientRect();
6357
console.log(`${g} resizestop ${el.textContent} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`);
6458
});

‎doc/CHANGES.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ Change log
8484
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8585

8686
## 7.3.0-dev (TBD)
87-
* 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!
87+
* 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!
88+
* 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.
8889

8990
## 7.3.0 (2023-04-01)
9091
* feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)

‎spec/e2e/html/810-many-columns.html

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,8 @@ <h1>Many Columns demo</h1>
3030
};
3131
let grid = GridStack.init(options);
3232

33-
addNewWidget = function() {
34-
grid.addWidget({content: String(count++)});
35-
};
36-
3733
grid.batchUpdate();
38-
for (; count <= COLUMNS;) {
39-
this.addNewWidget();
40-
}
34+
for (; count <= COLUMNS;) grid.addWidget({content: String(count++)});
4135
grid.batchUpdate(false);
4236
</script>
4337
</body>

‎spec/gridstack-spec.ts

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -321,21 +321,21 @@ describe('gridstack', function() {
321321
expect(grid.getColumn()).toBe(1);
322322
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
323323
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
324-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
324+
expect(el1.getAttribute('gs-w')).toBe(null);
325325
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
326326

327327
expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
328328
expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
329-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
329+
expect(el2.getAttribute('gs-w')).toBe(null);
330330
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
331331

332332
// add default 1x1 item to the end (1 column)
333333
let el3 = grid.addWidget();
334334
expect(el3).not.toBe(null);
335335
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
336336
expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
337-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
338-
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
337+
expect(el3.getAttribute('gs-w')).toBe(null);
338+
expect(el3.getAttribute('gs-h')).toBe(null);
339339

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

359359
// back to 1 column
360360
grid.column(1);
361361
expect(grid.getColumn()).toBe(1);
362362
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
363363
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
364-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
364+
expect(el1.getAttribute('gs-w')).toBe(null);
365365
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
366366

367367
expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
368368
expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
369-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
369+
expect(el2.getAttribute('gs-w')).toBe(null);
370370
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
371371

372372
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
373373
expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
374-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
375-
expect(parseInt(el3.getAttribute('gs-h'))).toBe(1);
374+
expect(el3.getAttribute('gs-w')).toBe(null);
375+
expect(el3.getAttribute('gs-h')).toBe(null);
376376

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

384384
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
385385
expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
386-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
386+
expect(el1.getAttribute('gs-w')).toBe(null);
387387
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
388388

389389
expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
390390
expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
391-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
391+
expect(el2.getAttribute('gs-w')).toBe(null);
392392
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
393393

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

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

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

422422
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
423423
expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
424-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
424+
expect(el1.getAttribute('gs-w')).toBe(null);
425425
expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
426426

427427
expect(parseInt(el2.getAttribute('gs-x'))).toBe(1);
428428
expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
429-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
429+
expect(el2.getAttribute('gs-w')).toBe(null);
430430
expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
431431
});
432432
});
@@ -455,35 +455,35 @@ describe('gridstack', function() {
455455
// items are item1[1x1], item3[1x1], item2[2x1]
456456
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
457457
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
458-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
459-
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
458+
expect(el1.getAttribute('gs-w')).toBe(null);
459+
expect(el1.getAttribute('gs-h')).toBe(null);
460460

461461
expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
462462
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
463-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
463+
expect(el3.getAttribute('gs-w')).toBe(null);
464464
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
465465

466466
expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
467467
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
468468
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
469-
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
469+
expect(el2.getAttribute('gs-h')).toBe(null);
470470

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

478478
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
479479
expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
480-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
480+
expect(el3.getAttribute('gs-w')).toBe(null);
481481
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
482482

483483
expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
484484
expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
485-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
486-
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
485+
expect(el2.getAttribute('gs-w')).toBe(null);
486+
expect(el2.getAttribute('gs-h')).toBe(null);
487487
});
488488
it('should support oneColumnModeDomSort ON going to 1 column', function() {
489489
let options = {
@@ -499,34 +499,34 @@ describe('gridstack', function() {
499499
// items are item1[1x1], item3[1x1], item2[2x1]
500500
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
501501
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
502-
expect(parseInt(el1.getAttribute('gs-w'))).toBe(1);
503-
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
502+
expect(el1.getAttribute('gs-w')).toBe(null);
503+
expect(el1.getAttribute('gs-h')).toBe(null);
504504

505505
expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
506506
expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
507-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
507+
expect(el3.getAttribute('gs-w')).toBe(null);
508508
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
509509

510510
expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
511511
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
512512
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
513-
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
513+
expect(el2.getAttribute('gs-h')).toBe(null);
514514

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

522522
expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
523523
expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
524-
expect(parseInt(el2.getAttribute('gs-w'))).toBe(1);
525-
expect(parseInt(el2.getAttribute('gs-h'))).toBe(1);
524+
expect(el2.getAttribute('gs-w')).toBe(null);
525+
expect(el2.getAttribute('gs-h')).toBe(null);
526526

527527
expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
528528
expect(parseInt(el3.getAttribute('gs-y'))).toBe(2);
529-
expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
529+
expect(el3.getAttribute('gs-w')).toBe(null);
530530
expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
531531
});
532532
});
@@ -863,7 +863,7 @@ describe('gridstack', function() {
863863

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

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

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

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

908908
expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
909909
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
910-
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
911-
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
910+
expect(widget.getAttribute('gs-w')).toBe(null);
911+
expect(widget.getAttribute('gs-h')).toBe(null);
912912
// expect(widget.getAttribute('gs-auto-position')).toBe('true');
913913
});
914914

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

928928
expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8);
929929
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0);
930-
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
931-
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
930+
expect(widget.getAttribute('gs-w')).toBe(null);
931+
expect(widget.getAttribute('gs-h')).toBe(null);
932932
});
933933
it('null options should clear x position', function() {
934934
let grid = GridStack.init({float: true});
@@ -946,7 +946,7 @@ describe('gridstack', function() {
946946
expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(5);
947947
expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(3);
948948
expect(widget.gridstackNode.maxW).toBe(4);
949-
expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
949+
expect(widget.getAttribute('gs-h')).toBe(null);
950950
expect(widget.getAttribute('gs-id')).toBe('foo');
951951
});
952952
});
@@ -1800,7 +1800,7 @@ describe('gridstack', function() {
18001800
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
18011801
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
18021802
expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
1803-
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
1803+
expect(el1.getAttribute('gs-h')).toBe(null);
18041804

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

18271827
expect(document.getElementById('item2')).toBe(null);
18281828
let el2 = grid.engine.nodes.find(n => n.id === 'new2').el;

‎src/gridstack.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ $animation_speed: .3s !default;
9797
&.grid-stack-1>.grid-stack-item {
9898
min-width: 100%;
9999
&[gs-w='1'] { width: 100%; }
100-
&[gs-x='1'] { left: 100%; }
100+
&[gs-x='0'] { left: 0; }
101101
}
102102

103103
&.grid-stack-animate,

0 commit comments

Comments
 (0)