Angular wrapper

We now ship an Angular Component - to make it supper easy for that framework (Vue and React examples are above)

These are complete Angular projects with multiple options. use `yarn` and `yarn start` in angular demo sub-project to run them

Old v5.1.1 Jquery Demos

diff --git a/demo/lazy_load.html b/demo/lazy_load.html index 40f42caf5..e4794856d 100644 --- a/demo/lazy_load.html +++ b/demo/lazy_load.html @@ -8,28 +8,36 @@ -

Lazy loading demo

Lazy loading + renderCB demo

New V11 GridStackWidget.lazyLoad feature. open console and see widget content (or angular components) created as they become visible.

diff --git a/demo/mobile.html b/demo/mobile.html index 6018bc3f6..6cbdb36aa 100644 --- a/demo/mobile.html +++ b/demo/mobile.html @@ -7,7 +7,6 @@ Codestin Search App - diff --git a/demo/nested.html b/demo/nested.html index 0300a3695..d8a099c72 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -6,7 +6,6 @@ Codestin Search App - @@ -25,6 +24,11 @@

Nested grids demo

+ Grid Mode: + static + editable +

entire save/re-create: Save Destroy @@ -39,26 +43,30 @@

Nested grids demo

diff --git a/demo/two.html b/demo/two.html index 335fa3c79..bd3bf9caa 100644 --- a/demo/two.html +++ b/demo/two.html @@ -8,7 +8,6 @@ - @@ -30,14 +29,14 @@

Two grids demo

- +

DOM gs-w:3

DOM w:2

@@ -107,7 +106,7 @@

Two grids demo

// clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used. function myClone(el) { if (el.getAttribute('gs-id') === 'manual') { - return GridStack.Utils.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called + return grids[0].createWidgetDivs({w:2, content:'manual'}); // RenderCB() will be called } el = el.cloneNode(true); // el.setAttribute('gs-id', 'foo'); // help debug #2231 diff --git a/demo/vue3js_dynamic-modern-renderCB.html b/demo/vue3js_dynamic-modern-renderCB.html new file mode 100644 index 000000000..8fc0e628e --- /dev/null +++ b/demo/vue3js_dynamic-modern-renderCB.html @@ -0,0 +1,157 @@ + + + + + + + Codestin Search App + + + + + +

+ Back to All Demos +

Vue3: Gridstack Controls Vue Rendering Grid Items

+ Use Vue3 render functions with GridStack.renderCB
+ GridStack handles widget creation and Vue handles rendering the content using the modern (since V11) GridStack.renderCB. +

+ Helpful Resources: +

+ {{ info }} +

+ + + + \ No newline at end of file diff --git a/demo/web1.html b/demo/web1.html index 659c89f6b..91247cc36 100644 --- a/demo/web1.html +++ b/demo/web1.html @@ -13,9 +13,7 @@ - - - + diff --git a/demo/web2.html b/demo/web2.html index 0f420d3d1..682816684 100644 --- a/demo/web2.html +++ b/demo/web2.html @@ -13,9 +13,7 @@ - - - + +`; + + this.shadowRoot.innerHTML = `${styleBlocks}

`; + const gridEl = this.shadowRoot.querySelector("div"); + const items = [ + { + content: "my first widget", + }, // will default to location (0,0) and 1x1 + { + w: 2, + content: "another longer widget!", + }, // will be placed next at (1,0) and 2x1 + { + content: "3rd Widget", + }, + ]; + const grid = GridStack.init( + { + disableOneColumnMode: true, + draggable: { + appendTo: "parent", + }, + cellHeight: 100, + }, + gridEl + ); + grid.load(items); + } + } + + customElements.define("demo-gridstack", HTMLDemoGridStack); + + + diff --git a/spec/gridstack-engine-spec.ts b/spec/gridstack-engine-spec.ts index 990cbcb43..14d55403e 100644 --- a/spec/gridstack-engine-spec.ts +++ b/spec/gridstack-engine-spec.ts @@ -1,382 +1,404 @@ -import { GridStackEngine } from '../src/gridstack-engine'; -import { GridStackNode } from '../src/types'; - -describe('gridstack engine', function() { - 'use strict'; - let engine: GridStackEngine; - // old hacky JS code that's not happy in TS. just cast to `any` and skip warnings - let e: any = GridStackEngine; - let w: any = window; - - let findNode = function(engine, id) { - return engine.nodes.find((i) => i.id === id); +import { GridStackEngine } from'../src/gridstack-engine'; +import { GridStackNode } from'../src/types'; + +describe('gridstack engine:', function() { + 'use strict'; + let e: GridStackEngine; + let ePriv: any; // cast engine for private vars access + let findNode = function(id: string) { + return e.nodes.find(n => n.id === id); }; it('should exist setup function.', function() { - expect(e).not.toBeNull(); - expect(typeof e).toBe('function'); + expect(GridStackEngine).not.toBeNull(); + expect(typeof GridStackEngine).toBe('function'); }); - describe('test constructor', function() { + describe('test constructor >', function() { it('should be setup properly', function() { - engine = new GridStackEngine(); - expect(engine.column).toEqual(12); - expect(engine.float).toEqual(false); - expect(engine.maxRow).toEqual(undefined); - expect(engine.nodes).toEqual([]); - expect(engine.batchMode).toEqual(undefined); - expect((engine as any).onChange).toEqual(undefined); + ePriv = e = new GridStackEngine(); + expect(e.column).toEqual(12); + expect(e.float).toEqual(false); + expect(e.maxRow).toEqual(undefined!); + expect(e.nodes).toEqual([]); + expect(e.batchMode).toEqual(undefined!); + expect(ePriv.onChange).toEqual(undefined); }); it('should set params correctly.', function() { let fkt = function() { }; let arr: any = [1,2,3]; - engine = new GridStackEngine({column: 1, onChange:fkt, float:true, maxRow:2, nodes:arr}); - expect(engine.column).toEqual(1); - expect(engine.float).toBe(true); - expect(engine.maxRow).toEqual(2); - expect(engine.nodes).toEqual(arr); - expect(engine.batchMode).toEqual(undefined); - expect((engine as any).onChange).toEqual(fkt); + ePriv = e = new GridStackEngine({column: 1, onChange:fkt, float:true, maxRow:2, nodes:arr}); + expect(e.column).toEqual(1); + expect(e.float).toBe(true); + expect(e.maxRow).toEqual(2); + expect(e.nodes).toEqual(arr); + expect(e.batchMode).toEqual(undefined); + expect(ePriv.onChange).toEqual(fkt); }); }); describe('batch update', function() { it('should set float and batchMode when calling batchUpdate.', function() { - engine = new GridStackEngine({float: true}); - engine.batchUpdate(); - expect(engine.float).toBe(true); - expect(engine.batchMode).toBeTrue(); + ePriv = e = new GridStackEngine({float: true}); + e.batchUpdate(); + expect(e.float).toBe(true); + expect(e.batchMode).toBeTrue(); }); }); - describe('test prepareNode', function() { + describe('test prepareNode >', function() { beforeAll(function() { - engine = new GridStackEngine(); + ePriv = e = new GridStackEngine(); }); it('should prepare a node', function() { - expect(engine.prepareNode({}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({x: 10}, false)).toEqual(jasmine.objectContaining({x: 10, y: 0, h: 1})); - expect(engine.prepareNode({x: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({y: 10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 10, h: 1})); - expect(engine.prepareNode({y: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({w: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 3, h: 1})); - expect(engine.prepareNode({w: 100}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1})); - expect(engine.prepareNode({w: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({w: -190}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({h: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 3})); - expect(engine.prepareNode({h: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({h: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(engine.prepareNode({x: 4, w: 10}, false)).toEqual(jasmine.objectContaining({x: 2, y: 0, w: 10, h: 1})); - expect(engine.prepareNode({x: 4, w: 10}, true)).toEqual(jasmine.objectContaining({x: 4, y: 0, w: 8, h: 1})); + expect(e.prepareNode({}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({x: 10}, false)).toEqual(jasmine.objectContaining({x: 10, y: 0, h: 1})); + expect(e.prepareNode({x: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({y: 10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 10, h: 1})); + expect(e.prepareNode({y: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({w: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 3, h: 1})); + expect(e.prepareNode({w: 100}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1})); + expect(e.prepareNode({w: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({w: -190}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({h: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 3})); + expect(e.prepareNode({h: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({h: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(e.prepareNode({x: 4, w: 10}, false)).toEqual(jasmine.objectContaining({x: 2, y: 0, w: 10, h: 1})); + expect(e.prepareNode({x: 4, w: 10}, true)).toEqual(jasmine.objectContaining({x: 4, y: 0, w: 8, h: 1})); }); }); - describe('sorting of nodes', function() { - // Note: legacy weird call on global window to hold data + describe('sorting of nodes >', function() { + beforeAll(function() { + ePriv = e = new GridStackEngine(); + e.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}]; + }); + it('should sort ascending with 12 columns.', function() { - w.column = 12; - w.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}]; - engine.sortNodes.call(w, 1); - expect(w.nodes).toEqual([{x: 7, y: 0}, {x: 9, y: 0}, {x: 0, y: 1}, {x: 4, y: 4}]); + e.sortNodes(1); + expect(e.nodes).toEqual([{x: 7, y: 0}, {x: 9, y: 0}, {x: 0, y: 1}, {x: 4, y: 4}]); }); it('should sort descending with 12 columns.', function() { - w.column = 12; - w.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}]; - engine.sortNodes.call(w, -1); - expect(w.nodes).toEqual([{x: 4, y: 4}, {x: 0, y: 1}, {x: 9, y: 0}, {x: 7, y: 0}]); - }); - - it('should sort ascending with 1 columns.', function() { - w.column = 1; - w.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}]; - engine.sortNodes.call(w, 1); - expect(w.nodes).toEqual([{x: 0, y: 1}, {x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}]); - }); - - it('should sort descending with 1 columns.', function() { - w.column = 1; - w.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}]; - engine.sortNodes.call(w, -1); - expect(w.nodes).toEqual([{x: 9, y: 0}, {x: 4, y: 4}, {x: 7, y: 0}, {x: 0, y: 1}]); + e.sortNodes(-1); + expect(e.nodes).toEqual([{x: 4, y: 4}, {x: 0, y: 1}, {x: 9, y: 0}, {x: 7, y: 0}]); }); it('should sort ascending without columns.', function() { - w.column = undefined; - w.nodes = [{x: 7, y: 0, w: 1}, {x: 4, y: 4, w: 1}, {x: 9, y: 0, w: 1}, {x: 0, y: 1, w: 1}]; - engine.sortNodes.call(w, 1); - expect(w.nodes).toEqual([{x: 7, y: 0, w: 1}, {x: 9, y: 0, w: 1}, {x: 0, y: 1, w: 1}, {x: 4, y: 4, w: 1}]); + ePriv.column = undefined; + e.sortNodes(1); + expect(e.nodes).toEqual([{x: 7, y: 0}, {x: 9, y: 0}, {x: 0, y: 1}, {x: 4, y: 4}]); }); it('should sort descending without columns.', function() { - w.column = undefined; - w.nodes = [{x: 7, y: 0, w: 1}, {x: 4, y: 4, w: 1}, {x: 9, y: 0, w: 1}, {x: 0, y: 1, w: 1}]; - engine.sortNodes.call(w, -1); - expect(w.nodes).toEqual([{x: 4, y: 4, w: 1}, {x: 0, y: 1, w: 1}, {x: 9, y: 0, w: 1}, {x: 7, y: 0, w: 1}]); + ePriv.column = undefined; + e.sortNodes(-1); + expect(e.nodes).toEqual([{x: 4, y: 4}, {x: 0, y: 1}, {x: 9, y: 0}, {x: 7, y: 0}]); }); }); - describe('test isAreaEmpty', function() { + describe('test isAreaEmpty >', function() { beforeAll(function() { - engine = new GridStackEngine({float:true}); - engine.nodes = [ - engine.prepareNode({x: 3, y: 2, w: 3, h: 2}) + ePriv = e = new GridStackEngine({float:true}); + e.nodes = [ + e.prepareNode({x: 3, y: 2, w: 3, h: 2}) ]; }); it('should be true', function() { - expect(engine.isAreaEmpty(0, 0, 3, 2)).toEqual(true); - expect(engine.isAreaEmpty(3, 4, 3, 2)).toEqual(true); + expect(e.isAreaEmpty(0, 0, 3, 2)).toEqual(true); + expect(e.isAreaEmpty(3, 4, 3, 2)).toEqual(true); }); it('should be false', function() { - expect(engine.isAreaEmpty(1, 1, 3, 2)).toEqual(false); - expect(engine.isAreaEmpty(2, 3, 3, 2)).toEqual(false); + expect(e.isAreaEmpty(1, 1, 3, 2)).toEqual(false); + expect(e.isAreaEmpty(2, 3, 3, 2)).toEqual(false); }); }); - describe('test cleanNodes/getDirtyNodes', function() { + describe('test cleanNodes/getDirtyNodes >', function() { beforeAll(function() { - engine = new GridStackEngine({float:true}); - engine.nodes = [ - engine.prepareNode({x: 0, y: 0, id: 1, _dirty: true}), - engine.prepareNode({x: 3, y: 2, w: 3, h: 2, id: 2, _dirty: true}), - engine.prepareNode({x: 3, y: 7, w: 3, h: 2, id: 3}) + ePriv = e = new GridStackEngine({float:true}); + e.nodes = [ + e.prepareNode({x: 0, y: 0, id: '1', _dirty: true}), + e.prepareNode({x: 3, y: 2, w: 3, h: 2, id: '2', _dirty: true}), + e.prepareNode({x: 3, y: 7, w: 3, h: 2, id: '3'}) ]; }); beforeEach(function() { - delete engine.batchMode; + delete ePriv.batchMode; }); it('should return all dirty nodes', function() { - let nodes = engine.getDirtyNodes(); + let nodes = e.getDirtyNodes(); expect(nodes.length).toEqual(2); - expect(nodes[0].id).toEqual(1); - expect(nodes[1].id).toEqual(2); + expect(nodes[0].id).toEqual('1'); + expect(nodes[1].id).toEqual('2'); }); it('should\'n clean nodes if batchMode true', function() { - engine.batchMode = true; - engine.cleanNodes(); - expect(engine.getDirtyNodes().length).toBeGreaterThan(0); + e.batchMode = true; + e.cleanNodes(); + expect(e.getDirtyNodes().length).toBeGreaterThan(0); }); it('should clean all dirty nodes', function() { - engine.cleanNodes(); - expect(engine.getDirtyNodes().length).toEqual(0); + e.cleanNodes(); + expect(e.getDirtyNodes().length).toEqual(0); }); }); - describe('test batchUpdate/commit', function() { + describe('test batchUpdate/commit >', function() { beforeAll(function() { - engine = new GridStackEngine(); + ePriv = e = new GridStackEngine(); }); it('should work on not float grids', function() { - expect(engine.float).toEqual(false); - engine.batchUpdate(); - engine.batchUpdate(); // double for code coverage - expect(engine.batchMode).toBeTrue(); - expect(engine.float).toEqual(true); - engine.batchUpdate(false); - engine.batchUpdate(false); - expect(engine.batchMode).not.toBeTrue(); - expect(engine.float).not.toBeTrue; + expect(e.float).toEqual(false); + e.batchUpdate(); + e.batchUpdate(); // double for code coverage + expect(e.batchMode).toBeTrue(); + expect(e.float).toEqual(true); + e.batchUpdate(false); + e.batchUpdate(false); + expect(e.batchMode).not.toBeTrue(); + expect(e.float).not.toBeTrue; }); it('should work on float grids', function() { - engine.float = true; - engine.batchUpdate(); - expect(engine.batchMode).toBeTrue(); - expect(engine.float).toEqual(true); - engine.batchUpdate(false); - expect(engine.batchMode).not.toBeTrue(); - expect(engine.float).toEqual(true); + e.float = true; + e.batchUpdate(); + expect(e.batchMode).toBeTrue(); + expect(e.float).toEqual(true); + e.batchUpdate(false); + expect(e.batchMode).not.toBeTrue(); + expect(e.float).toEqual(true); }); }); - describe('test batchUpdate/commit', function() { + describe('test batchUpdate/commit >', function() { beforeAll(function() { - engine = new GridStackEngine({float:true}); + ePriv = e = new GridStackEngine({float:true}); }); it('should work on float grids', function() { - expect(engine.float).toEqual(true); - engine.batchUpdate(); - expect(engine.batchMode).toBeTrue(); - expect(engine.float).toEqual(true); - engine.batchUpdate(false); - expect(engine.batchMode).not.toBeTrue(); - expect(engine.float).toEqual(true); + expect(e.float).toEqual(true); + e.batchUpdate(); + expect(e.batchMode).toBeTrue(); + expect(e.float).toEqual(true); + e.batchUpdate(false); + expect(e.batchMode).not.toBeTrue(); + expect(e.float).toEqual(true); }); }); - describe('test _notify', function() { + describe('test _notify >', function() { let spy; beforeEach(function() { spy = { callback: function() {} }; - spyOn(spy, 'callback'); - engine = new GridStackEngine({float:true, onChange: spy.callback}); - engine.nodes = [ - engine.prepareNode({x: 0, y: 0, id: 1, _dirty: true}), - engine.prepareNode({x: 3, y: 2, w: 3, h: 2, id: 2, _dirty: true}), - engine.prepareNode({x: 3, y: 7, w: 3, h: 2, id: 3}) + spyOn(spy,'callback'); + ePriv = e = new GridStackEngine({float:true, onChange: spy.callback}); + e.nodes = [ + e.prepareNode({x: 0, y: 0, id: '1', _dirty: true}), + e.prepareNode({x: 3, y: 2, w: 3, h: 2, id: '2', _dirty: true}), + e.prepareNode({x: 3, y: 7, w: 3, h: 2, id: '3'}) ]; }); it('should\'n be called if batchMode true', function() { - engine.batchMode = true; - (engine as any)._notify(); + e.batchMode = true; + ePriv._notify(); expect(spy.callback).not.toHaveBeenCalled(); }); it('should by called with dirty nodes', function() { - (engine as any)._notify(); - expect(spy.callback).toHaveBeenCalledWith([engine.nodes[0], engine.nodes[1]]); + ePriv._notify(); + expect(spy.callback).toHaveBeenCalledWith([e.nodes[0], e.nodes[1]]); }); it('should by called with extra passed node to be removed', function() { let n1 = {id: -1}; - (engine as any)._notify([n1]); - expect(spy.callback).toHaveBeenCalledWith([n1, engine.nodes[0], engine.nodes[1]]); + ePriv._notify([n1]); + expect(spy.callback).toHaveBeenCalledWith([n1, e.nodes[0], e.nodes[1]]); }); }); - describe('test _packNodes', function() { - describe('using not float mode', function() { + describe('test _packNodes >', function() { + describe('using float:false mode >', function() { beforeEach(function() { - engine = new GridStackEngine({float:false}); + ePriv = e = new GridStackEngine({float:false}); }); it('shouldn\'t pack one node with y coord eq 0', function() { - engine.nodes = [ - {x: 0, y: 0, w:1, h:1, id: 1}, + e.nodes = [ + e.prepareNode({x: 0, y: 0, w:1, h:1, id: '1'}), ]; - (engine as any)._packNodes(); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); - expect(findNode(engine, 1)._dirty).toBeFalsy(); + ePriv._packNodes(); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 0, y: 0, h: 1})); + expect(findNode('1')!._dirty).toBeFalsy(); }); it('should pack one node correctly', function() { - engine.nodes = [ - {x: 0, y: 1, w:1, h:1, id: 1}, + e.nodes = [ + e.prepareNode({x: 0, y: 1, w:1, h:1, id: '1'}), ]; - (engine as any)._packNodes(); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); + ePriv._packNodes(); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); }); it('should pack nodes correctly', function() { - engine.nodes = [ - {x: 0, y: 1, w:1, h:1, id: 1}, - {x: 0, y: 5, w:1, h:1, id: 2}, + e.nodes = [ + e.prepareNode({x: 0, y: 1, w:1, h:1, id: '1'}), + e.prepareNode({x: 0, y: 5, w:1, h:1, id: '2'}), ]; - (engine as any)._packNodes(); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); - expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 1, _dirty: true})); + ePriv._packNodes(); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); + expect(findNode('2')).toEqual(jasmine.objectContaining({x: 0, y: 1, _dirty: true})); }); - it('should pack nodes correctly', function() { - engine.nodes = [ - {x: 0, y: 5, w:1, h:1, id: 1}, - {x: 0, y: 1, w:1, h:1, id: 2}, + it('should pack reverse nodes correctly', function() { + e.nodes = [ + e.prepareNode({x: 0, y: 5, w:1, h:1, id: '1'}), + e.prepareNode({x: 0, y: 1, w:1, h:1, id: '2'}), ]; - (engine as any)._packNodes(); - expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, _dirty: true})); + ePriv._packNodes(); + expect(findNode('2')).toEqual(jasmine.objectContaining({x: 0, y: 0, _dirty: true})); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 0, y: 1, _dirty: true})); }); it('should respect locked nodes', function() { - engine.nodes = [ - {x: 0, y: 1, w:1, h:1, id: 1, locked: true}, - {x: 0, y: 5, w:1, h:1, id: 2}, + e.nodes = [ + e.prepareNode({x: 0, y: 1, w:1, h:1, id: '1', locked: true}), + e.prepareNode({x: 0, y: 5, w:1, h:1, id: '2'}), ]; - (engine as any)._packNodes(); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, h: 1})); - expect(findNode(engine, 1)._dirty).toBeFalsy(); - expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 2, _dirty: true})); + ePriv._packNodes(); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 0, y: 1, h: 1})); + expect(findNode('1')!._dirty).toBeFalsy(); + expect(findNode('2')).toEqual(jasmine.objectContaining({x: 0, y: 2, _dirty: true})); }); }); }); - describe('test changedPos', function() { + describe('test changedPos >', function() { beforeAll(function() { - engine = new GridStackEngine(); + ePriv = e = new GridStackEngine(); }); it('should return true for changed x', function() { let widget = { x: 1, y: 2, w: 3, h: 4 }; - expect(engine.changedPosConstrain(widget, {x:2, y:2})).toEqual(true); + expect(e.changedPosConstrain(widget, {x:2, y:2})).toEqual(true); }); it('should return true for changed y', function() { let widget = { x: 1, y: 2, w: 3, h: 4 }; - expect(engine.changedPosConstrain(widget, {x:1, y:1})).toEqual(true); + expect(e.changedPosConstrain(widget, {x:1, y:1})).toEqual(true); }); it('should return true for changed width', function() { let widget = { x: 1, y: 2, w: 3, h: 4 }; - expect(engine.changedPosConstrain(widget, {x:2, y:2, w:4, h:4})).toEqual(true); + expect(e.changedPosConstrain(widget, {x:2, y:2, w:4, h:4})).toEqual(true); }); it('should return true for changed height', function() { let widget = { x: 1, y: 2, w: 3, h: 4 }; - expect(engine.changedPosConstrain(widget, {x:1, y:2, w:3, h:3})).toEqual(true); + expect(e.changedPosConstrain(widget, {x:1, y:2, w:3, h:3})).toEqual(true); }); it('should return false for unchanged position', function() { let widget = { x: 1, y: 2, w: 3, h: 4 }; - expect(engine.changedPosConstrain(widget, {x:1, y:2, w:3, h:4})).toEqual(false); + expect(e.changedPosConstrain(widget, {x:1, y:2, w:3, h:4})).toEqual(false); }); }); - describe('test locked widget', function() { + describe('test locked widget >', function() { beforeAll(function() { - engine = new GridStackEngine(); + ePriv = e = new GridStackEngine(); }); it('should add widgets around locked one', function() { let nodes: GridStackNode[] = [ - {x: 0, y: 1, w: 12, h: 1, locked: true, noMove: true, noResize: true, id: 0}, - {x: 1, y: 0, w: 2, h: 3, id: 1} + {x: 0, y: 1, w: 12, h: 1, locked: true, noMove: true, noResize: true, id: '0'}, + {x: 1, y: 0, w: 2, h: 3, id: '1'} ]; // add locked item - engine.addNode(nodes[0]) - expect(findNode(engine, 0)).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12, h: 1, locked: true})); + e.addNode(nodes[0]) + expect(findNode('0')).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12, h: 1, locked: true})); // add item that moves past locked one - engine.addNode(nodes[1]) - expect(findNode(engine, 0)).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12, h: 1, locked: true})); - expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 1, y: 2, h: 3})); + e.addNode(nodes[1]) + expect(findNode('0')).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12, h: 1, locked: true})); + expect(findNode('1')).toEqual(jasmine.objectContaining({x: 1, y: 2, h: 3})); // locked item can still be moved directly (what user does) - let node0 = findNode(engine, 0); - expect(engine.moveNode(node0, {y:6})).toEqual(true); - expect(findNode(engine, 0)).toEqual(jasmine.objectContaining({x: 0, y: 6, h: 1, locked: true})); + let node0 = findNode('0'); + expect(e.moveNode(node0!, {y:6})).toEqual(true); + expect(findNode('0')).toEqual(jasmine.objectContaining({x: 0, y: 6, h: 1, locked: true})); // but moves regular one past it - let node1 = findNode(engine, 1); - expect(engine.moveNode(node1, {x:6, y:6})).toEqual(true); + let node1 = findNode('1'); + expect(e.moveNode(node1!, {x:6, y:6})).toEqual(true); expect(node1).toEqual(jasmine.objectContaining({x: 6, y: 7, w: 2, h: 3})); // but moves regular one before (gravity ON) - engine.float = false; - expect(engine.moveNode(node1, {x:7, y:3})).toEqual(true); + e.float = false; + expect(e.moveNode(node1!, {x:7, y:3})).toEqual(true); expect(node1).toEqual(jasmine.objectContaining({x: 7, y: 0, w: 2, h: 3})); // but moves regular one before (gravity OFF) - engine.float = true; - expect(engine.moveNode(node1, {x:7, y:3})).toEqual(true); + e.float = true; + expect(e.moveNode(node1!, {x:7, y:3})).toEqual(true); expect(node1).toEqual(jasmine.objectContaining({x: 7, y: 3, w: 2, h: 3})); }); }); - describe('test compact', function() { + describe('test columnChanged >', function() { + beforeAll(function() { + }); + it('12 to 1 and back', function() { + ePriv = e = new GridStackEngine({ column: 12 }); + // Add two side-by-side components 6+6 = 12 columns + const left = e.addNode({ x: 0, y: 0, w: 6, h: 1, id: 'left' }); + const right = e.addNode({ x: 6, y: 0, w: 6, h: 1, id: 'right' }); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1})); + // Resize to 1 column + e.column = 1; + e.columnChanged(12, 1); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1})); + // Resize back to 12 column + e.column = 12; + e.columnChanged(1, 12); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1})); + }); + it('24 column to 1 and back', function() { + ePriv = e = new GridStackEngine({ column: 24 }); + // Add two side-by-side components 12+12 = 24 columns + const left = e.addNode({ x: 0, y: 0, w: 12, h: 1, id: 'left' }); + const right = e.addNode({ x: 12, y: 0, w: 12, h: 1, id: 'right' }); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1})); + // Resize to 1 column + e.column = 1; + e.columnChanged(24, 1); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1})); + // Resize back to 24 column + e.column = 24; + e.columnChanged(1, 24); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1})); + }); + }); + + describe('test compact >', function() { beforeAll(function() { - engine = new GridStackEngine(); + ePriv = e = new GridStackEngine(); }); it('do nothing', function() { - engine.compact(); + e.compact(); }); }); diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts index 534ebe6db..bfbe3668c 100644 --- a/spec/gridstack-spec.ts +++ b/spec/gridstack-spec.ts @@ -1,10 +1,18 @@ import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget } from '../src/gridstack'; import { Utils } from '../src/utils'; -import '../dist/gridstack.css'; -describe('gridstack', function() { +describe('gridstack >', function() { 'use strict'; + let grid: GridStack; + let grids: GridStack[]; + let find = function(id: string): GridStackNode { + return grid.engine.nodes.find(n => n.id === id)!; + }; + let findEl = function(id: string): GridItemHTMLElement { + return find(id).el!; + }; + // grid has 4x2 and 4x4 top-left aligned - used on most test cases let gridHTML = '

' + @@ -40,98 +48,94 @@ describe('gridstack', function() { // generic widget with no param let widgetHTML = '

hello

'; - describe('grid.init() / initAll()', function() { + describe('grid.init() / initAll() >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('use selector', function() { - let grid = GridStack.init(undefined, '.grid-stack'); + it('use selector >', function() { + grid = GridStack.init(undefined, '.grid-stack'); expect(grid).not.toBe(null); }); - it('use selector no dot', function() { - let grid = GridStack.init(null, 'grid-stack'); + it('use selector no dot >', function() { + grid = GridStack.init(null, 'grid-stack'); expect(grid).not.toBe(null); }); - it('use wrong selector', function() { - let grid = GridStack.init(null, 'BAD_SELECTOR_TEST'); + it('use wrong selector >', function() { + grid = GridStack.init(null, 'BAD_SELECTOR_TEST'); expect(grid).toEqual(null); }); - it('initAll use selector', function() { - let grids = GridStack.initAll(undefined, '.grid-stack'); + it('initAll use selector >', function() { + grids = GridStack.initAll(undefined, '.grid-stack'); expect(grids.length).toBe(1); }); - it('initAll use selector no dot', function() { - let grids = GridStack.initAll(undefined, 'grid-stack'); + it('initAll use selector no dot >', function() { + grids = GridStack.initAll(undefined, 'grid-stack'); expect(grids.length).toBe(1); }); - it('initAll use wrong selector', function() { - let grids = GridStack.initAll(undefined, 'BAD_SELECTOR_TEST'); - expect(grids.length).toBe(0); - }); }); - describe('grid.setAnimation', function() { + describe('grid.setAnimation >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should add class grid-stack-animate to the container.', function() { - let grid = GridStack.init({animate: true}); + it('should add class grid-stack-animate to the container. >', function() { + grid = GridStack.init({animate: true}); expect(grid.el.classList.contains('grid-stack-animate')).toBe(true); grid.el.classList.remove('grid-stack-animate'); expect(grid.el.classList.contains('grid-stack-animate')).toBe(false); grid.setAnimation(true); expect(grid.el.classList.contains('grid-stack-animate')).toBe(true); }); - it('should remove class grid-stack-animate from the container.', function() { - let grid = GridStack.init({animate: true}); + it('should remove class grid-stack-animate from the container. >', function() { + grid = GridStack.init({animate: true}); grid.setAnimation(false); expect(grid.el.classList.contains('grid-stack-animate')).toBe(false); }); }); - describe('grid._setStaticClass', function() { + describe('grid._setStaticClass >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should add class grid-stack-static to the container.', function() { - let grid = GridStack.init({staticGrid: true}); + it('should add class grid-stack-static to the container. >', function() { + grid = GridStack.init({staticGrid: true}); expect(grid.el.classList.contains('grid-stack-static')).toBe(true); grid.setStatic(false); expect(grid.el.classList.contains('grid-stack-static')).toBe(false); grid.setStatic(true); expect(grid.el.classList.contains('grid-stack-static')).toBe(true); }); - it('should remove class grid-stack-static from the container.', function() { - let grid = GridStack.init({staticGrid: false}); + it('should remove class grid-stack-static from the container. >', function() { + grid = GridStack.init({staticGrid: false}); expect(grid.el.classList.contains('grid-stack-static')).toBe(false); grid.setStatic(true); expect(grid.el.classList.contains('grid-stack-static')).toBe(true); }); }); - describe('grid.getCellFromPixel', function() { + describe('grid.getCellFromPixel >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should return {x: 4, y: 5}.', function() { + it('should return {x: 4, y: 5}. >', function() { let cellHeight = 80; let options = { - cellHeight: cellHeight, + cellHeight, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let rect = grid.el.getBoundingClientRect(); let smudge = 5; let pixel = {left: 4 * rect.width / 12 + rect.x + smudge, top: 5 * cellHeight + rect.y + smudge}; @@ -159,180 +163,175 @@ describe('gridstack', function() { }); }); - describe('grid.cellWidth', function() { + describe('grid.cellWidth >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should return 1/12th of container width (not rounded anymore).', function() { + it('should return 1/12th of container width (not rounded anymore). >', function() { let options = { cellHeight: 80, margin: 5, column: 12 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let res = grid.el.offsetWidth / 12; expect(grid.cellWidth()).toBe(res); }); - it('should return 1/10th of container width.', function() { + it('should return 1/10th of container width. >', function() { let options = { cellHeight: 80, margin: 5, column: 10 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let res = Math.round(grid.el.offsetWidth / 10); expect(grid.cellWidth()).toBe(res); }); }); - describe('grid.cellHeight', function() { + describe('grid.cellHeight >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should start at 80 then become 120', function() { + it('should start at 80 then become 120 >', function() { let cellHeight = 80; let margin = 5; let options = { - cellHeight: cellHeight, - margin: margin, + cellHeight, + margin, column: 12 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let rows = parseInt(grid.el.getAttribute('gs-current-row')); expect(grid.getRow()).toBe(rows); expect(grid.getCellHeight()).toBe(cellHeight); - expect(parseInt(getComputedStyle(grid.el)['min-height'])).toBe(rows * cellHeight); + expect(parseInt(getComputedStyle(grid.el)['height'])).toBe(rows * cellHeight); grid.cellHeight( grid.getCellHeight() ); // should be no-op expect(grid.getCellHeight()).toBe(cellHeight); - expect(parseInt(getComputedStyle(grid.el)['min-height'])).toBe(rows * cellHeight); + expect(parseInt(getComputedStyle(grid.el)['height'])).toBe(rows * cellHeight); cellHeight = 120; // should change and CSS actual height grid.cellHeight( cellHeight ); expect(grid.getCellHeight()).toBe(cellHeight); - expect(parseInt(getComputedStyle(grid.el)['min-height'])).toBe(rows * cellHeight); + expect(parseInt(getComputedStyle(grid.el)['height'])).toBe(rows * cellHeight); cellHeight = 20; // should change and CSS actual height grid.cellHeight( cellHeight ); expect(grid.getCellHeight()).toBe(cellHeight); - expect(parseInt(getComputedStyle(grid.el)['min-height'])).toBe(rows * cellHeight); + expect(parseInt(getComputedStyle(grid.el)['height'])).toBe(rows * cellHeight); }); - it('should be square', function() { - let grid = GridStack.init({cellHeight: 'auto'}); + it('should be square >', function() { + grid = GridStack.init({cellHeight: 'auto'}); expect(grid.cellWidth()).toBe( grid.getCellHeight()); }); }); - describe('grid.column', function() { + describe('grid.column >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should have no changes', function() { - let grid = GridStack.init(); + it('should have no changes >', function() { + grid = GridStack.init(); expect(grid.getColumn()).toBe(12); grid.column(12); expect(grid.getColumn()).toBe(12); }); - it('should set construct CSS class', function() { - let grid = GridStack.init({column: 1}); + it('should set construct CSS class >', function() { + grid = GridStack.init({column: 1}); expect(grid.el.classList.contains('gs-1')).toBe(true); grid.column(2); expect(grid.el.classList.contains('gs-1')).toBe(false); expect(grid.el.classList.contains('gs-2')).toBe(true); }); - it('should set CSS class', function() { - let grid = GridStack.init(); + it('should set CSS class >', function() { + grid = GridStack.init(); expect(grid.el.classList.contains('grid-stack')).toBe(true); grid.column(1); expect(grid.el.classList.contains('gs-1')).toBe(true); }); - it('should SMALL change column number, no relayout', function() { + it('should SMALL change column number, no relayout >', function() { let options = { column: 12 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); grid.column(9); expect(grid.getColumn()).toBe(9); - for (let j = 0; j < items.length; j++) { - expect(parseInt(items[j].getAttribute('gs-y'), 10)).toBe(0); - } + items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null)); grid.column(12); expect(grid.getColumn()).toBe(12); - for (let j = 0; j < items.length; j++) { - expect(parseInt(items[j].getAttribute('gs-y'), 10)).toBe(0); - } + items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null)); }); - it('no sizing, no moving', function() { - let grid = GridStack.init({column: 12}); + it('no sizing, no moving >', function() { + grid = GridStack.init({column: 12}); let items = Utils.getElements('.grid-stack-item'); grid.column(8, 'none'); expect(grid.getColumn()).toBe(8); - for (let j = 0; j < items.length; j++) { - expect(parseInt(items[j].getAttribute('gs-w'), 10)).toBe(4); - expect(parseInt(items[j].getAttribute('gs-y'), 10)).toBe(0); - } + items.forEach(el => { + expect(parseInt(el.getAttribute('gs-w'))).toBe(4); + expect(el.getAttribute('gs-y')).toBe(null); + }); }); - it('no sizing, but moving down', function() { - let grid = GridStack.init({column: 12}); + it('no sizing, but moving down >', function() { + grid = GridStack.init({column: 12}); let items = Utils.getElements('.grid-stack-item'); - grid.column(7, 'none'); + grid.column(7, 'move'); expect(grid.getColumn()).toBe(7); - for (let j = 0; j < items.length; j++) { - expect(parseInt(items[j].getAttribute('gs-w'), 10)).toBe(4); - } - expect(parseInt(items[0].getAttribute('gs-y'), 10)).toBe(0); - expect(parseInt(items[1].getAttribute('gs-y'), 10)).toBe(2); + items.forEach(el => expect(parseInt(el.getAttribute('gs-w'))).toBe(4)); + expect(items[0].getAttribute('gs-y')).toBe(null); + expect(parseInt(items[1].getAttribute('gs-y'))).toBe(2); }); - it('should change column number and re-layout items', function() { + it('should change column number and re-layout items >', function() { let options = { column: 12, float: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let el1 = document.getElementById('item1') let el2 = document.getElementById('item2') // items start at 4x2 and 4x4 - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); - expect(parseInt(el1.getAttribute('gs-y'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(parseInt(el1.getAttribute('gs-w'))).toBe(4); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); expect(parseInt(el2.getAttribute('gs-x'))).toBe(4); - expect(parseInt(el2.getAttribute('gs-y'))).toBe(0); + expect(el2.getAttribute('gs-y')).toBe(null); expect(parseInt(el2.getAttribute('gs-w'))).toBe(4); expect(parseInt(el2.getAttribute('gs-h'))).toBe(4); + // 1 column will have item1, item2 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(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(el1.getAttribute('gs-w')).toBe(null); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); - expect(parseInt(el2.getAttribute('gs-x'))).toBe(0); + expect(el2.getAttribute('gs-x')).toBe(null); expect(parseInt(el2.getAttribute('gs-y'))).toBe(2); 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(); + let el3 = grid.addWidget({content:'new'}); expect(el3).not.toBe(null); - expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); + expect(el3.getAttribute('gs-x')).toBe(null); expect(parseInt(el3.getAttribute('gs-y'))).toBe(6); expect(el3.getAttribute('gs-w')).toBe(null); expect(el3.getAttribute('gs-h')).toBe(null); @@ -340,53 +339,55 @@ describe('gridstack', function() { // back to 12 column and initial layout (other than new item3) grid.column(12); expect(grid.getColumn()).toBe(12); - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); - expect(parseInt(el1.getAttribute('gs-y'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(parseInt(el1.getAttribute('gs-w'))).toBe(4); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); expect(parseInt(el2.getAttribute('gs-x'))).toBe(4); - expect(parseInt(el2.getAttribute('gs-y'))).toBe(0); + expect(el2.getAttribute('gs-y')).toBe(null); expect(parseInt(el2.getAttribute('gs-w'))).toBe(4); expect(parseInt(el2.getAttribute('gs-h'))).toBe(4); - // 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); + // TODO: we don't remembers autoPlacement (cleared multiple places) + // expect(parseInt(el3.getAttribute('gs-x'))).toBe(8); + // expect(el3.getAttribute('gs-y')).toBe(null); + expect(el3.getAttribute('gs-x')).toBe(null); + expect(parseInt(el3.getAttribute('gs-y'))).toBe(6); 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(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(el1.getAttribute('gs-w')).toBe(null); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); - expect(parseInt(el2.getAttribute('gs-x'))).toBe(0); + expect(el2.getAttribute('gs-x')).toBe(null); expect(parseInt(el2.getAttribute('gs-y'))).toBe(2); expect(el2.getAttribute('gs-w')).toBe(null); expect(parseInt(el2.getAttribute('gs-h'))).toBe(4); - expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); + expect(el3.getAttribute('gs-x')).toBe(null); expect(parseInt(el3.getAttribute('gs-y'))).toBe(6); 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(el3.getAttribute('gs-x')).toBe(null); + expect(el3.getAttribute('gs-y')).toBe(null); expect(el3.getAttribute('gs-w')).toBe(null); expect(el3.getAttribute('gs-h')).toBe(null); - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); expect(parseInt(el1.getAttribute('gs-y'))).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(el2.getAttribute('gs-x')).toBe(null); expect(parseInt(el2.getAttribute('gs-y'))).toBe(3); expect(el2.getAttribute('gs-w')).toBe(null); expect(parseInt(el2.getAttribute('gs-h'))).toBe(4); @@ -394,12 +395,12 @@ describe('gridstack', function() { // 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(el3.getAttribute('gs-x')).toBe(null); // 8 TEST WHY + expect(el3.getAttribute('gs-y')).toBe(null); expect(el3.getAttribute('gs-w')).toBe(null); expect(el3.getAttribute('gs-h')).toBe(null); - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); expect(parseInt(el1.getAttribute('gs-w'))).toBe(4); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); @@ -414,12 +415,12 @@ describe('gridstack', function() { grid.column(2); expect(grid.getColumn()).toBe(2); - expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); // 1 TEST WHY - expect(parseInt(el3.getAttribute('gs-y'))).toBe(0); + expect(el3.getAttribute('gs-x')).toBe(null); // 1 TEST WHY + expect(el3.getAttribute('gs-y')).toBe(null); 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(el1.getAttribute('gs-x')).toBe(null); expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); expect(el1.getAttribute('gs-w')).toBe(null); expect(parseInt(el1.getAttribute('gs-h'))).toBe(2); @@ -431,19 +432,82 @@ describe('gridstack', function() { }); }); - // describe('oneColumnModeDomSort', function() { + describe('grid.column larger layout >', function() { + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); + }); + afterEach(function() { + document.body.removeChild(document.getElementById('gs-cont')); + }); + + it('24 layout in 12 column to 1 back 12 then 24 >', function() { + const children: GridStackWidget[] = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }]; + children.forEach(c => c.content = c.id); + + grid = GridStack.init({children}); + const left = find('left'); + const right = find('right'); + + // side-by-side components 12+12 = 24 columns but only have 12! + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12})); + // Resize to 1 column + grid.column(1); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1})); + // Resize back to 12 column + grid.column(12); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12})); + // Resize to 24 column + grid.column(24); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12})); + expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12})); + }); + it('24 column to 12, 1 back 12,24 >', function() { + const children: GridStackWidget[] = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }]; + children.forEach(c => c.content = c.id); + + grid = GridStack.init({column:24, children}); + const left = find('left'); + const right = find('right'); + + // side-by-side components 12+12 = 24 columns + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12})); + expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12})); + // Resize to 12 column + grid.column(12); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6})); + expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6})); + // Resize to 1 column + grid.column(1); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1})); + expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1})); + // back to 12 column + grid.column(12); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6})); + expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6})); + // back to 24 column + grid.column(24); + expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12})); + expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12})); + }); + + }); + + // describe('oneColumnModeDomSort >', function() { // beforeEach(function() { // document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); // }); // afterEach(function() { // document.body.removeChild(document.getElementById('gs-cont')); // }); - // it('should support default going to 1 column', function() { + // it('should support default going to 1 column >', function() { // let options = { // column: 12, // float: true // }; - // let grid = GridStack.init(options); + // grid = GridStack.init(options); // grid.batchUpdate(); // grid.batchUpdate(); // let el1 = grid.addWidget({w:1, h:1}); @@ -453,128 +517,128 @@ describe('gridstack', function() { // grid.batchUpdate(false); // // 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(el1.getAttribute('gs-x')).toBe(null); + // expect(el1.getAttribute('gs-y')).toBe(null); // 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(el3.getAttribute('gs-y')).toBe(null); // 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(el2.getAttribute('gs-y')).toBe(null); // expect(parseInt(el2.getAttribute('gs-w'))).toBe(2); // 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(el1.getAttribute('gs-x')).toBe(null); + // expect(el1.getAttribute('gs-y')).toBe(null); // expect(el1.getAttribute('gs-w')).toBe(null); // expect(el1.getAttribute('gs-h')).toBe(null); - // expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); + // expect(el3.getAttribute('gs-x')).toBe(null); // expect(parseInt(el3.getAttribute('gs-y'))).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(el2.getAttribute('gs-x')).toBe(null); // expect(parseInt(el2.getAttribute('gs-y'))).toBe(3); // expect(el2.getAttribute('gs-w')).toBe(null); // expect(el2.getAttribute('gs-h')).toBe(null); // }); - // it('should support oneColumnModeDomSort ON going to 1 column', function() { + // it('should support oneColumnModeDomSort ON going to 1 column >', function() { // let options = { // column: 12, // oneColumnModeDomSort: true, // float: true // }; - // let grid = GridStack.init(options); + // grid = GridStack.init(options); // let el1 = grid.addWidget({w:1, h:1}); // let el2 = grid.addWidget({x:2, y:0, w:2, h:1}); // let el3 = grid.addWidget({x:1, y:0, w:1, h:2}); // // 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(el1.getAttribute('gs-x')).toBe(null); + // expect(el1.getAttribute('gs-y')).toBe(null); // 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(el3.getAttribute('gs-y')).toBe(null); // 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(el2.getAttribute('gs-y')).toBe(null); // expect(parseInt(el2.getAttribute('gs-w'))).toBe(2); // 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(el1.getAttribute('gs-x')).toBe(null); + // expect(el1.getAttribute('gs-y')).toBe(null); // expect(el1.getAttribute('gs-w')).toBe(null); // expect(el1.getAttribute('gs-h')).toBe(null); - // expect(parseInt(el2.getAttribute('gs-x'))).toBe(0); + // expect(el2.getAttribute('gs-x')).toBe(null); // expect(parseInt(el2.getAttribute('gs-y'))).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(el3.getAttribute('gs-x')).toBe(null); // expect(parseInt(el3.getAttribute('gs-y'))).toBe(2); // expect(el3.getAttribute('gs-w')).toBe(null); // expect(parseInt(el3.getAttribute('gs-h'))).toBe(2); // }); // }); - // describe('disableOneColumnMode', function() { + // describe('disableOneColumnMode >', function() { // beforeEach(function() { // document.body.insertAdjacentHTML('afterbegin', gridstackSmallHTML); // smaller default to 1 column // }); // afterEach(function() { // document.body.removeChild(document.getElementById('gs-cont')); // }); - // it('should go to 1 column', function() { - // let grid = GridStack.init(); + // it('should go to 1 column >', function() { + // grid = GridStack.init(); // expect(grid.getColumn()).toBe(1); // }); - // it('should go to 1 column with large minW', function() { - // let grid = GridStack.init({oneColumnSize: 1000}); + // it('should go to 1 column with large minW >', function() { + // grid = GridStack.init({oneColumnSize: 1000}); // expect(grid.getColumn()).toBe(1); // }); - // it('should stay at 12 with minW', function() { - // let grid = GridStack.init({oneColumnSize: 300}); + // it('should stay at 12 with minW >', function() { + // grid = GridStack.init({oneColumnSize: 300}); // expect(grid.getColumn()).toBe(12); // }); - // it('should stay at 12 column', function() { - // let grid = GridStack.init({disableOneColumnMode: true}); + // it('should stay at 12 column >', function() { + // grid = GridStack.init({disableOneColumnMode: true}); // expect(grid.getColumn()).toBe(12); // }); // }); - describe('grid.minRow', function() { + describe('grid.minRow >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should default to row 0 when empty', function() { + it('should default to row 0 when empty >', function() { let options = {}; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.getRow()).toBe(4); expect(grid.opts.minRow).toBe(0); expect(grid.opts.maxRow).toBe(0); grid.removeAll(); expect(grid.getRow()).toBe(0); }); - it('should default to row 2 when empty', function() { + it('should default to row 2 when empty >', function() { let options = {minRow: 2}; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.getRow()).toBe(4); expect(grid.opts.minRow).toBe(2); expect(grid.opts.maxRow).toBe(0); @@ -582,9 +646,9 @@ describe('gridstack', function() { expect(grid.engine.getRow()).toBe(0); expect(grid.getRow()).toBe(2); }); - it('should set min = max = 3 rows', function() { + it('should set min = max = 3 rows >', function() { let options = {row: 3}; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.getRow()).toBe(3); // shrink elements to fit maxRow! expect(grid.opts.minRow).toBe(3); expect(grid.opts.maxRow).toBe(3); @@ -592,18 +656,18 @@ describe('gridstack', function() { expect(grid.engine.getRow()).toBe(0); expect(grid.getRow()).toBe(3); }); - it('willItFit()', function() { + it('willItFit() >', function() { // default 4x2 and 4x4 so anything pushing more than 1 will fail - let grid = GridStack.init({maxRow: 5}); + grid = GridStack.init({maxRow: 5}); expect(grid.willItFit({x:0, y:0, w:1, h:1})).toBe(true); expect(grid.willItFit({x:0, y:0, w:1, h:3})).toBe(true); expect(grid.willItFit({x:0, y:0, w:1, h:4})).toBe(false); expect(grid.willItFit({x:0, y:0, w:12, h:1})).toBe(true); expect(grid.willItFit({x:0, y:0, w:12, h:2})).toBe(false); }); - it('willItFit() not modifying node #1687', function() { + it('willItFit() not modifying node #1687 >', function() { // default 4x2 and 4x4 so anything pushing more than 1 will fail - let grid = GridStack.init({maxRow: 5}); + grid = GridStack.init({maxRow: 5}); let node: GridStackNode = {x:0, y:0, w:1, h:1, _id: 1, _temporaryRemoved: true}; expect(grid.willItFit(node)).toBe(true); expect(node._temporaryRemoved).toBe(true); @@ -612,17 +676,17 @@ describe('gridstack', function() { }); - describe('grid attributes', function() { + describe('grid attributes >', function() { afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should have row attr', function() { + it('should have row attr >', function() { let HTML = '

' + '

' + // old attr current-height '

'; document.body.insertAdjacentHTML('afterbegin', HTML); - let grid = GridStack.init(); + grid = GridStack.init(); expect(grid.getRow()).toBe(4); expect(grid.opts.minRow).toBe(4); expect(grid.opts.maxRow).toBe(4); @@ -632,107 +696,105 @@ describe('gridstack', function() { }); }); - describe('grid.min/max width/height', function() { + describe('grid.min/max width/height >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should set gs-min-w to 2.', function() { - let grid = GridStack.init(); + it('should set gs-min-w to 2. >', function() { + grid = GridStack.init(); let items: GridItemHTMLElement[] = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - grid.update(items[i], {minW: 2, maxW: 3, minH: 4, maxH: 5}); - } - for (let j = 0; j < items.length; j++) { - expect(items[j].gridstackNode.minW).toBe(2); - expect(items[j].gridstackNode.maxW).toBe(3); - expect(items[j].gridstackNode.minH).toBe(4); - expect(items[j].gridstackNode.maxH).toBe(5); - expect(items[j].getAttribute('gs-min-w')).toBe(null); - expect(items[j].getAttribute('gs-max-w')).toBe(null); - expect(items[j].getAttribute('gs-min-h')).toBe(null); - expect(items[j].getAttribute('gs-max-h')).toBe(null); - } + items.forEach(el => grid.update(el, {minW: 2, maxW: 3, minH: 4, maxH: 5})); + items.forEach(el => { + expect(el.gridstackNode!.minW).toBe(2); + expect(el.gridstackNode!.maxW).toBe(3); + expect(el.gridstackNode!.minH).toBe(4); + expect(el.gridstackNode!.maxH).toBe(5); + expect(el.getAttribute('gs-min-w')).toBe(null); + expect(el.getAttribute('gs-max-w')).toBe(null); + expect(el.getAttribute('gs-min-h')).toBe(null); + expect(el.getAttribute('gs-max-h')).toBe(null); + }); // remove all constrain grid.update('grid-stack-item', {minW: 0, maxW: null, minH: undefined, maxH: 0}); - for (let j = 0; j < items.length; j++) { - expect(items[j].gridstackNode.minW).toBe(undefined); - expect(items[j].gridstackNode.maxW).toBe(undefined); - expect(items[j].gridstackNode.minH).toBe(undefined); - expect(items[j].gridstackNode.maxH).toBe(undefined); - expect(items[j].getAttribute('gs-min-w')).toBe(null); - expect(items[j].getAttribute('gs-max-w')).toBe(null); - expect(items[j].getAttribute('gs-min-h')).toBe(null); - expect(items[j].getAttribute('gs-max-h')).toBe(null); - } + items.forEach(el => { + expect(el.gridstackNode!.minW).toBe(undefined); + expect(el.gridstackNode!.maxW).toBe(undefined); + expect(el.gridstackNode!.minH).toBe(undefined); + expect(el.gridstackNode!.maxH).toBe(undefined); + expect(el.getAttribute('gs-min-w')).toBe(null); + expect(el.getAttribute('gs-max-w')).toBe(null); + expect(el.getAttribute('gs-min-h')).toBe(null); + expect(el.getAttribute('gs-max-h')).toBe(null); + }); }); }); - describe('grid.isAreaEmpty', function() { + describe('grid.isAreaEmpty >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should set return false.', function() { + it('should set return false. >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let shouldBeFalse = grid.isAreaEmpty(1, 1, 1, 1); expect(shouldBeFalse).toBe(false); }); - it('should set return true.', function() { + it('should set return true. >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let shouldBeTrue = grid.isAreaEmpty(5, 5, 1, 1); expect(shouldBeTrue).toBe(true); }); }); - describe('grid.removeAll', function() { + describe('grid.removeAll >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should remove all children by default', function() { - let grid = GridStack.init(); + it('should remove all children by default >', function() { + grid = GridStack.init(); grid.removeAll(); expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).toBe(null); }); - it('should remove all children', function() { - let grid = GridStack.init(); + it('should remove all children >', function() { + grid = GridStack.init(); grid.removeAll(true); expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).toBe(null); }); - it('should remove gridstack part, leave DOM behind', function() { - let grid = GridStack.init(); + it('should remove gridstack part, leave DOM behind >', function() { + grid = GridStack.init(); grid.removeAll(false); expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).not.toBe(null); }); }); - describe('grid.removeWidget', function() { + describe('grid.removeWidget >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should remove first item (default), then second (true), then third (false)', function() { - let grid = GridStack.init(); + it('should remove first item (default), then second (false) >', function() { + grid = GridStack.init(); expect(grid.engine.nodes.length).toEqual(2); let el1 = document.getElementById('item1'); @@ -743,295 +805,294 @@ describe('gridstack', function() { expect(document.getElementById('item2')).not.toBe(null); let el2 = document.getElementById('item2'); - grid.removeWidget(el2, true); - expect(grid.engine.nodes.length).toEqual(0); - expect(document.getElementById('item2')).toBe(null); - - let el3 = grid.addWidget(widgetHTML); - expect(el3).not.toBe(null); - grid.removeWidget(el3, false); + grid.removeWidget(el2, false); expect(grid.engine.nodes.length).toEqual(0); - expect(document.getElementById('item3')).not.toBe(null); + expect(document.getElementById('item2')).not.toBe(null); }); }); - describe('grid method _packNodes with float', function() { + describe('grid method _packNodes with float >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should allow same x, y coordinates for widgets.', function() { + it('should allow same x, y coordinates for widgets. >', function() { let options = { cellHeight: 80, margin: 5, float: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - let el = grid.addWidget(items[i]); - let oldEl = items[i]; - expect(parseInt(oldEl.getAttribute('gs-x'), 10)).toBe(parseInt(el.getAttribute('gs-x'), 10)); - expect(parseInt(oldEl.getAttribute('gs-y'), 10)).toBe(parseInt(el.getAttribute('gs-y'), 10)); - } - }); - it('should not allow same x, y coordinates for widgets.', function() { + items.forEach(oldEl => { + let el = grid.makeWidget(oldEl); + expect(oldEl.getAttribute('gs-x')).toBe(el.getAttribute('gs-x')); + expect(oldEl.getAttribute('gs-y')).toBe(el.getAttribute('gs-y')); + }) + }); + it('should not allow same x, y coordinates for widgets. >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); - let items = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - let el = items[i].cloneNode(true) as HTMLElement; - el = grid.addWidget(el); - expect(parseInt(el.getAttribute('gs-y'), 10)).not.toBe(parseInt(items[i].getAttribute('gs-y'), 10)); - } + grid = GridStack.init(options); + let items = Utils.getElements('.grid-stack-item') as GridItemHTMLElement[]; + items.forEach(oldEl => { + let el = oldEl.cloneNode(true) as GridItemHTMLElement; + el = grid.makeWidget(el); + expect(el.gridstackNode?.x).not.toBe(oldEl.gridstackNode?.x); + }); }); }); - describe('grid method addWidget with all parameters', function() { + describe('grid method addWidget with all parameters >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should keep all widget options the same (autoPosition off', function() { - let grid = GridStack.init({float: true});; - let widget = grid.addWidget({x: 6, y:7, w:2, h:3, autoPosition:false, + it('should keep all widget options the same (autoPosition off >', function() { + grid = GridStack.init({float: true});; + let w = grid.addWidget({x: 6, y:7, w:2, h:3, autoPosition:false, minW:1, maxW:4, minH:2, maxH:5, id:'coolWidget'}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(6); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(7); - expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2); - expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3); - expect(widget.getAttribute('gs-auto-position')).toBe(null); - expect(widget.getAttribute('gs-id')).toBe('coolWidget'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(6); + expect(parseInt(w.getAttribute('gs-y'))).toBe(7); + expect(parseInt(w.getAttribute('gs-w'))).toBe(2); + expect(parseInt(w.getAttribute('gs-h'))).toBe(3); + expect(w.getAttribute('gs-auto-position')).toBe(null); + expect(w.getAttribute('gs-id')).toBe('coolWidget'); // should move widget to top with float=false expect(grid.getFloat()).toBe(true); grid.float(false); expect(grid.getFloat()).toBe(false); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(6); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(4); // <--- from 7 to 4 below second original widget - expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2); - expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3); - expect(widget.getAttribute('gs-auto-position')).toBe(null); - expect(widget.getAttribute('gs-id')).toBe('coolWidget'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(6); + expect(parseInt(w.getAttribute('gs-y'))).toBe(4); // <--- from 7 to 4 below second original widget + expect(parseInt(w.getAttribute('gs-w'))).toBe(2); + expect(parseInt(w.getAttribute('gs-h'))).toBe(3); + expect(w.getAttribute('gs-auto-position')).toBe(null); + expect(w.getAttribute('gs-id')).toBe('coolWidget'); // should not move again (no-op) grid.float(true); expect(grid.getFloat()).toBe(true); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(6); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(4); - expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2); - expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3); - expect(widget.getAttribute('gs-auto-position')).toBe(null); - expect(widget.getAttribute('gs-id')).toBe('coolWidget'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(6); + expect(parseInt(w.getAttribute('gs-y'))).toBe(4); + expect(parseInt(w.getAttribute('gs-w'))).toBe(2); + expect(parseInt(w.getAttribute('gs-h'))).toBe(3); + expect(w.getAttribute('gs-auto-position')).toBe(null); + expect(w.getAttribute('gs-id')).toBe('coolWidget'); }); }); - describe('grid method addWidget with autoPosition true', function() { + describe('grid method addWidget with autoPosition true >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should change x, y coordinates for widgets.', function() { - let grid = GridStack.init({float: true}); - let widget = grid.addWidget({x:9, y:7, w:2, h:3, autoPosition:true}); + it('should change x, y coordinates for widgets. >', function() { + grid = GridStack.init({float: true}); + let w = grid.addWidget({x:9, y:7, w:2, h:3, autoPosition:true}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).not.toBe(9); - expect(parseInt(widget.getAttribute('gs-y'), 10)).not.toBe(7); + expect(parseInt(w.getAttribute('gs-x'), 10)).not.toBe(9); + expect(parseInt(w.getAttribute('gs-y'), 10)).not.toBe(7); }); }); - describe('grid method addWidget with widget options', function() { + describe('grid method addWidget with widget options >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should autoPosition (missing X,Y)', function() { - let grid = GridStack.init(); - let widget = grid.addWidget({h: 2, id: 'optionWidget'}); + it('should autoPosition (missing X,Y) >', function() { + grid = GridStack.init(); + let w = grid.addWidget({h: 2, id: 'optionWidget'}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - 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'); - }); - it('should autoPosition (missing X)', function() { - let grid = GridStack.init(); - let widget = grid.addWidget({y: 9, h: 2, id: 'optionWidget'}); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(parseInt(w.getAttribute('gs-h'))).toBe(2); + // expect(w.getAttribute('gs-auto-position')).toBe('true'); + expect(w.getAttribute('gs-id')).toBe('optionWidget'); + }); + it('should autoPosition (missing X) >', function() { + grid = GridStack.init(); + let w = grid.addWidget({y: 9, h: 2, id: 'optionWidget'}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - 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'); - }); - it('should autoPosition (missing Y)', function() { - let grid = GridStack.init(); - let widget = grid.addWidget({x: 9, h: 2, id: 'optionWidget'}); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(parseInt(w.getAttribute('gs-h'))).toBe(2); + // expect(w.getAttribute('gs-auto-position')).toBe('true'); + expect(w.getAttribute('gs-id')).toBe('optionWidget'); + }); + it('should autoPosition (missing Y) >', function() { + grid = GridStack.init(); + let w = grid.addWidget({x: 9, h: 2, id: 'optionWidget'}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - 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'); - }); - it('should autoPosition (correct X, missing Y)', function() { - let grid = GridStack.init(); - let widget = grid.addWidget({x: 8, h: 2, id: 'optionWidget'}); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(parseInt(w.getAttribute('gs-h'))).toBe(2); + // expect(w.getAttribute('gs-auto-position')).toBe('true'); + expect(w.getAttribute('gs-id')).toBe('optionWidget'); + }); + it('should autoPosition (correct X, missing Y) >', function() { + grid = GridStack.init(); + let w = grid.addWidget({x: 8, h: 2, id: 'optionWidget'}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - 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'); - }); - it('should autoPosition (empty options)', function() { - let grid = GridStack.init(); - let widget = grid.addWidget(); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(parseInt(w.getAttribute('gs-h'))).toBe(2); + // expect(w.getAttribute('gs-auto-position')).toBe('true'); + expect(w.getAttribute('gs-id')).toBe('optionWidget'); + }); + it('should autoPosition (empty options) >', function() { + grid = GridStack.init(); + let w = grid.addWidget({ }); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - expect(widget.getAttribute('gs-w')).toBe(null); - expect(widget.getAttribute('gs-h')).toBe(null); - // expect(widget.getAttribute('gs-auto-position')).toBe('true'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(w.getAttribute('gs-h')).toBe(null); + // expect(w.getAttribute('gs-auto-position')).toBe('true'); }); }); - describe('addWidget()', function() { + describe('addWidget() >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('bad string options should use default', function() { - let grid = GridStack.init(); - let widget = grid.addWidget({x: 'foo', y: null, w: 'bar', h: ''} as any); + it('bad string options should use default >', function() { + grid = GridStack.init(); + let w = grid.addWidget({x: 'foo', y: null, w: 'bar', h: ''} as any); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - 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}); - let HTML = '

'; - let widget = grid.addWidget(HTML, {x:null, y:null, w:undefined}); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(w.getAttribute('gs-w')).toBe(null); + expect(w.getAttribute('gs-h')).toBe(null); + }); + it('makeWidget attr should be retained >', function() { // #1276 + grid = GridStack.init({float: true}); + const d = document.createElement('div'); + d.innerHTML = '

foo content

'; + grid.el.appendChild(d.firstChild); + let w = grid.makeWidget('foo'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(parseInt(w.getAttribute('gs-w'))).toBe(3); + expect(w.gridstackNode.maxW).toBe(4); + expect(w.getAttribute('gs-h')).toBe(null); + expect(w.getAttribute('gs-id')).toBe('gsfoo'); + }); + it('makeWidget width option override >', function() { + grid = GridStack.init({float: true}); + const d = document.createElement('div'); + d.innerHTML = '

foo content

'; + grid.el.appendChild(d.firstChild); + let w = grid.makeWidget('foo', {x:null, y:null, w:2}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(8); - expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(0); - }); - it('width attr should be retained', function() { // #1276 - let grid = GridStack.init({float: true}); - let HTML = '

'; - let widget = grid.addWidget(HTML, {x: 1, y: 5}); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(1); - 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(widget.getAttribute('gs-h')).toBe(null); - expect(widget.getAttribute('gs-id')).toBe('foo'); + expect(parseInt(w.getAttribute('gs-x'))).toBe(8); + expect(w.getAttribute('gs-y')).toBe(null); + expect(parseInt(w.getAttribute('gs-w'))).toBe(2); + expect(w.getAttribute('gs-h')).toBe(null); }); }); - describe('makeWidget()', function() { + describe('makeWidget() >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('passing element', function() { - let grid = GridStack.init(); + it('passing element >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget(el); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget(el); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing element float=true', function() { - let grid = GridStack.init({float: true}); + it('passing element float=true >', function() { + grid = GridStack.init({float: true}); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget(el); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget(el); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing class', function() { - let grid = GridStack.init(); + it('passing class >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget('.item'); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget('.item'); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing class no dot', function() { - let grid = GridStack.init(); + it('passing class no dot >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget('item'); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget('item'); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing id', function() { - let grid = GridStack.init(); + it('passing id >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget('#item'); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget('#item'); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing id no #', function() { - let grid = GridStack.init(); + it('passing id no # >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget('item'); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget('item'); + expect(w.getAttribute('gs-x')).toBe(null); }); - it('passing id as number', function() { - let grid = GridStack.init(); + it('passing id as number >', function() { + grid = GridStack.init(); let doc = document.implementation.createHTMLDocument(); doc.body.innerHTML = '

'; let el = doc.body.children[0] as HTMLElement; grid.el.appendChild(el); - let widget = grid.makeWidget('1'); - expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(0); + let w = grid.makeWidget('1'); + expect(w.getAttribute('gs-x')).toBe(null); }); }); - describe('method getFloat()', function() { + describe('method getFloat() >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should match true/false only', function() { - let grid = GridStack.init({float: true}); + it('should match true/false only >', function() { + grid = GridStack.init({float: true}); expect(grid.getFloat()).toBe(true); (grid as any).float(0); expect(grid.getFloat()).toBe(false); @@ -1044,31 +1105,31 @@ describe('gridstack', function() { }); }); - describe('grid.destroy', function() { + describe('grid.destroy >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.getElementById('gs-cont').remove(); }); - it('should cleanup gridstack', function() { + it('should cleanup gridstack >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let gridEl = grid.el; grid.destroy(); expect(gridEl.parentElement).toBe(null); expect(grid.el).toBe(undefined); expect(grid.engine).toBe(undefined); }); - it('should cleanup gridstack but leave elements', function() { + it('should cleanup gridstack but leave elements >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let gridEl = grid.el; grid.destroy(false); expect(gridEl.parentElement).not.toBe(null); @@ -1079,67 +1140,67 @@ describe('gridstack', function() { }); }); - describe('grid.resize', function() { + describe('grid.resize >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should resize widget', function() { + it('should resize widget >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); grid.update(items[0], {w:5, h:5}); - expect(parseInt(items[0].getAttribute('gs-w'), 10)).toBe(5); - expect(parseInt(items[0].getAttribute('gs-h'), 10)).toBe(5); + expect(parseInt(items[0].getAttribute('gs-w'))).toBe(5); + expect(parseInt(items[0].getAttribute('gs-h'))).toBe(5); }); }); - describe('grid.move', function() { + describe('grid.move >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should move widget', function() { + it('should move widget >', function() { let options = { cellHeight: 80, margin: 5, float: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); grid.update(items[0], {x:5, y:5}); - expect(parseInt(items[0].getAttribute('gs-x'), 10)).toBe(5); - expect(parseInt(items[0].getAttribute('gs-y'), 10)).toBe(5); + expect(parseInt(items[0].getAttribute('gs-x'))).toBe(5); + expect(parseInt(items[0].getAttribute('gs-y'))).toBe(5); }); }); - describe('grid.update', function() { + describe('grid.update >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should move and resize widget', function() { - let grid = GridStack.init({float: true}); + it('should move and resize widget >', function() { + grid = GridStack.init({float: true}); let el = Utils.getElements('.grid-stack-item')[1]; - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4); + expect(parseInt(el.getAttribute('gs-w'))).toBe(4); grid.update(el, {x: 5, y: 4, h: 2}); - expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(5); - expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(2); + expect(parseInt(el.getAttribute('gs-x'))).toBe(5); + expect(parseInt(el.getAttribute('gs-y'))).toBe(4); + expect(parseInt(el.getAttribute('gs-w'))).toBe(4); + expect(parseInt(el.getAttribute('gs-h'))).toBe(2); }); - it('should change noMove', function() { - let grid = GridStack.init({float: true}); + it('should change noMove >', function() { + grid = GridStack.init({float: true}); let items = Utils.getElements('.grid-stack-item'); let el = items[1]; let dd = GridStack.getDD(); @@ -1152,53 +1213,51 @@ describe('gridstack', function() { expect(dd.isResizable(items[0])).toBe(true); expect(dd.isDraggable(items[0])).toBe(true); - expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0); - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4); + expect(parseInt(el.getAttribute('gs-x'))).toBe(4); + expect(el.getAttribute('gs-y')).toBe(null); + expect(parseInt(el.getAttribute('gs-w'))).toBe(4); + expect(parseInt(el.getAttribute('gs-h'))).toBe(4); }); - it('should change content and id, and move', function() { - let grid = GridStack.init({float: true}); - let items = Utils.getElements('.grid-stack-item'); - let el = items[1]; + it('should change content and id, and move >', function() { + grid = GridStack.init({float: true}); + let el = findEl('gsItem2'); let sub = el.querySelector('.grid-stack-item-content'); grid.update(el, {id: 'newID', y: 1, content: 'new content'}); + expect(el.gridstackNode.id).toBe('newID'); expect(el.getAttribute('gs-id')).toBe('newID'); expect(sub.innerHTML).toBe('new content'); - expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(1); - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4); - }); - it('should change max and constrain a wanted resize', function() { - let grid = GridStack.init({float: true}); - let items = Utils.getElements('.grid-stack-item'); - let el: GridItemHTMLElement = items[1]; + expect(parseInt(el.getAttribute('gs-x'))).toBe(4); + expect(parseInt(el.getAttribute('gs-y'))).toBe(1); + expect(parseInt(el.getAttribute('gs-w'))).toBe(4); + expect(parseInt(el.getAttribute('gs-h'))).toBe(4); + }); + it('should change max and constrain a wanted resize >', function() { + grid = GridStack.init({float: true}); + let el = findEl('gsItem2'); expect(el.getAttribute('gs-max-w')).toBe(null); grid.update(el, {maxW: 2, w: 5}); - expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0); - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(2); - expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4); + expect(parseInt(el.getAttribute('gs-x'))).toBe(4); + expect(el.getAttribute('gs-y')).toBe(null); + expect(parseInt(el.getAttribute('gs-w'))).toBe(2); + expect(parseInt(el.getAttribute('gs-h'))).toBe(4); expect(el.gridstackNode.maxW).toBe(2); }); - it('should change max and constrain existing', function() { - let grid = GridStack.init({float: true}); - let items = Utils.getElements('.grid-stack-item'); - let el: GridItemHTMLElement = items[1]; + it('should change max and constrain existing >', function() { + grid = GridStack.init({float: true}); + let el = findEl('gsItem2'); expect(el.getAttribute('gs-max-w')).toBe(null); grid.update(el, {maxW: 2}); - expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4); - expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0); - expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4); + expect(parseInt(el.getAttribute('gs-x'))).toBe(4); + expect(el.getAttribute('gs-y')).toBe(null); + expect(parseInt(el.getAttribute('gs-w'))).toBe(2); + expect(parseInt(el.getAttribute('gs-h'))).toBe(4); expect(el.gridstackNode.maxW).toBe(2); - expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(2); }); - it('should change all max and move', function() { - let grid = GridStack.init({float: true}); + it('should change all max and move, no inf loop! >', function() { + grid = GridStack.init({float: true}); let items = Utils.getElements('.grid-stack-item'); items.forEach(item => { @@ -1207,66 +1266,65 @@ describe('gridstack', function() { }); grid.update('.grid-stack-item', {maxW: 2, maxH: 2}); - expect(parseInt(items[0].getAttribute('gs-x'), 10)).toBe(0); - expect(parseInt(items[1].getAttribute('gs-x'), 10)).toBe(4); + expect(items[0].getAttribute('gs-x')).toBe(null); + expect(parseInt(items[1].getAttribute('gs-x'))).toBe(4); items.forEach((item: GridItemHTMLElement) => { - expect(parseInt(item.getAttribute('gs-y'), 10)).toBe(0); - expect(parseInt(item.getAttribute('gs-h'), 10)).toBe(2); - expect(parseInt(item.getAttribute('gs-w'), 10)).toBe(2); + expect(item.getAttribute('gs-y')).toBe(null); + expect(parseInt(item.getAttribute('gs-h'))).toBe(2); + expect(parseInt(item.getAttribute('gs-w'))).toBe(2); expect(item.gridstackNode.maxW).toBe(2); expect(item.gridstackNode.maxH).toBe(2); }); }); - }); - describe('grid.margin', function() { + describe('grid.margin >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should return margin', function() { + it('should return margin >', function() { let options = { cellHeight: 80, margin: 12 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.getMargin()).toBe(12); }); - it('should return update margin', function() { + it('should return update margin >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); grid.margin('11rem'); expect(grid.getMargin()).toBe(11); }); - it('should change unit', function() { + it('should change unit >', function() { let options = { cellHeight: 80, margin: 10, }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.getMargin()).toBe(10); grid.margin('10rem'); expect(grid.getMargin()).toBe(10); }); - it('should not update styles, with same value', function() { + it('should not update css vars, with same value >', function() { let options = { cellHeight: 80, margin: 5 }; let grid: any = GridStack.init(options); expect(grid.getMargin()).toBe(5); - spyOn(grid, '_updateStyles'); + spyOn(grid, '_initMargin'); grid.margin('5px'); - expect(grid._updateStyles).not.toHaveBeenCalled(); + expect(grid._initMargin).not.toHaveBeenCalled(); expect(grid.getMargin()).toBe(5); }); - it('should set top/bot/left value directly', function() { + it('should set top/bot/left value directly >', function() { let options = { cellHeight: 80, marginTop: 5, @@ -1280,7 +1338,7 @@ describe('gridstack', function() { expect(grid.opts.marginLeft).toBe(1); expect(grid.opts.marginRight).toBe(10); // default value }); - it('should set all 4 sides, and overall margin', function() { + it('should set all 4 sides, and overall margin >', function() { let options = { cellHeight: 80, marginTop: 5, @@ -1295,7 +1353,7 @@ describe('gridstack', function() { expect(grid.opts.marginLeft).toBe(5); expect(grid.opts.marginRight).toBe(5); }); - it('init 2 values', function() { + it('init 2 values >', function() { let options = { cellHeight: 80, margin: '5px 10' @@ -1307,28 +1365,26 @@ describe('gridstack', function() { expect(grid.opts.marginLeft).toBe(10); expect(grid.opts.marginRight).toBe(10); }); - it('init 4 values', function() { + it('init 4 values >', function() { let options = { cellHeight: 80, margin: '1 2 0em 3' }; - let grid: any = GridStack.init(options); + let grid = GridStack.init(options); expect(grid.getMargin()).toBe(undefined); expect(grid.opts.marginTop).toBe(1); expect(grid.opts.marginRight).toBe(2); expect(grid.opts.marginBottom).toBe(0); expect(grid.opts.marginLeft).toBe(3); }); - it('set 2 values, should update style', function() { + it('set 2 values, should update css vars >', function() { let options = { cellHeight: 80, margin: 5 }; let grid = GridStack.init(options); expect(grid.getMargin()).toBe(5); - spyOn(grid as any, '_updateStyles'); grid.margin('1px 0'); - expect((grid as any)._updateStyles).toHaveBeenCalled(); expect(grid.getMargin()).toBe(undefined); expect(grid.opts.marginTop).toBe(1); expect(grid.opts.marginBottom).toBe(1); @@ -1337,76 +1393,31 @@ describe('gridstack', function() { }); }); - describe('grid.opts.rtl', function() { + describe('grid.opts.rtl >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should add grid-stack-rtl class', function() { + it('should add grid-stack-rtl class >', function() { let options = { cellHeight: 80, margin: 5, rtl: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.el.classList.contains('grid-stack-rtl')).toBe(true); }); - it('should not add grid-stack-rtl class', function() { + it('should not add grid-stack-rtl class >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.el.classList.contains('grid-stack-rtl')).toBe(false); }); - }); - - describe('grid.opts.styleInHead', function() { - beforeEach(function() { - document.body.insertAdjacentHTML('afterbegin', gridstackHTML); - }); - afterEach(function() { - document.body.removeChild(document.getElementById('gs-cont')); - }); - it('should add STYLE to parent node as a default', function() { - var options = { - cellHeight: 80, - verticalMargin: 10, - float: false, - }; - var grid = GridStack.init(options); - expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('DIV'); // any to access private _styles - }); - it('should add STYLE to HEAD if styleInHead === true', function() { - var options = { - cellHeight: 80, - verticalMargin: 10, - float: false, - styleInHead: true - }; - var grid = GridStack.init(options); - expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('HEAD'); // any to access private _styles - }); - }); - - describe('grid.opts.styleInHead', function() { - beforeEach(function() { - document.body.insertAdjacentHTML('afterbegin', gridstackHTML); - }); - afterEach(function() { - document.body.removeChild(document.getElementById('gs-cont')); - }); - it('should add STYLE to parent node as a default', function() { - var grid = GridStack.init(); - expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('DIV'); - }); - it('should add STYLE to HEAD if styleInHead === true', function() { - var grid = GridStack.init({styleInHead: true}); - expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('HEAD'); - }); - }); + }); describe('grid.enableMove', function() { beforeEach(function() { @@ -1421,145 +1432,134 @@ describe('gridstack', function() { margin: 5, disableDrag: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - expect(items[i].classList.contains('ui-draggable-disabled')).toBe(true); - } + items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(true)); expect(grid.opts.disableDrag).toBe(true); grid.enableMove(true); - for (let i = 0; i < items.length; i++) { - expect(items[i].classList.contains('ui-draggable-disabled')).toBe(false); - } - expect(grid.opts.disableDrag).toBe(false); + items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(false)); + expect(grid.opts.disableDrag).not.toBe(true); }); - it('should disable move for existing only', function() { + it('should disable move for existing only >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - expect(items[i].classList.contains('ui-draggable-disabled')).toBe(false); - } + items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(false)); expect(grid.opts.disableDrag).toBeFalsy(); grid.enableMove(false); - for (let i = 0; i < items.length; i++) { - expect(items[i].classList.contains('ui-draggable-disabled')).toBe(true); - } + items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(true)); expect(grid.opts.disableDrag).toBe(true); }); }); - describe('grid.enableResize', function() { + describe('grid.enableResize >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should enable resize', function() { + it('should enable resize >', function() { let options = { cellHeight: 80, margin: 5, disableResize: true }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.opts.disableResize).toBe(true); let items = Utils.getElements('.grid-stack-item'); let dd = GridStack.getDD(); - // expect(dd).toBe(null); // sanity test to verify type - for (let i = 0; i < items.length; i++) { - expect(dd.isResizable(items[i])).toBe(false); - expect(dd.isDraggable(items[i])).toBe(true); - } + expect(dd).not.toBe(null); // sanity test to verify type + items.forEach(el => { + expect(dd.isResizable(el)).toBe(false); + expect(dd.isDraggable(el)).toBe(true); + }); grid.enableResize(true); - expect(grid.opts.disableResize).toBe(false); - for (let i = 0; i < items.length; i++) { - expect(dd.isResizable(items[i])).toBe(true); - expect(dd.isDraggable(items[i])).toBe(true); - } + expect(grid.opts.disableResize).not.toBe(true); + items.forEach(el => { + expect(dd.isResizable(el)).toBe(true); + expect(dd.isDraggable(el)).toBe(true); + }); }); - it('should disable resize', function() { + it('should disable resize >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); expect(grid.opts.disableResize).toBeFalsy(); let items = Utils.getElements('.grid-stack-item'); let dd = GridStack.getDD(); - for (let i = 0; i < items.length; i++) { - expect(dd.isResizable(items[i])).toBe(true); - expect(dd.isDraggable(items[i])).toBe(true); - } + items.forEach(el => expect(dd.isResizable(el)).toBe(true)); grid.enableResize(false); expect(grid.opts.disableResize).toBe(true); - for (let i = 0; i < items.length; i++) { - expect(dd.isResizable(items[i])).toBe(false); - expect(dd.isDraggable(items[i])).toBe(true); - } + items.forEach(el => { + expect(dd.isResizable(el)).toBe(false); + expect(dd.isDraggable(el)).toBe(true); + }); }); }); - describe('grid.enable', function() { + describe('grid.enable >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should enable movable and resizable', function() { + it('should enable movable and resizable >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); let items = Utils.getElements('.grid-stack-item'); let dd = GridStack.getDD(); grid.enableResize(false); grid.enableMove(false); - for (let i = 0; i < items.length; i++) { - expect(items[i].classList.contains('ui-draggable-disabled')).toBe(true); - expect(dd.isResizable(items[i])).toBe(false); - expect(dd.isDraggable(items[i])).toBe(false); - } + items.forEach(el => { + expect(el.classList.contains('ui-draggable-disabled')).toBe(true); + expect(dd.isResizable(el)).toBe(false); + expect(dd.isDraggable(el)).toBe(false); + }); grid.enable(); - for (let j = 0; j < items.length; j++) { - expect(items[j].classList.contains('ui-draggable-disabled')).toBe(false); - expect(dd.isResizable(items[j])).toBe(true); - expect(dd.isDraggable(items[j])).toBe(true); - } + items.forEach(el => { + expect(el.classList.contains('ui-draggable-disabled')).toBe(false); + expect(dd.isResizable(el)).toBe(true); + expect(dd.isDraggable(el)).toBe(true); + }); }); }); - describe('grid.enable', function() { + describe('grid.enable >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should lock widgets', function() { + it('should lock widgets >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); grid.update('.grid-stack-item', {locked: true}); Utils.getElements('.grid-stack-item').forEach(item => { expect(item.getAttribute('gs-locked')).toBe('true'); }) }); - it('should unlock widgets', function() { + it('should unlock widgets >', function() { let options = { cellHeight: 80, margin: 5 }; - let grid = GridStack.init(options); + grid = GridStack.init(options); grid.update('.grid-stack-item', {locked: false}); Utils.getElements('.grid-stack-item').forEach(item => { expect(item.getAttribute('gs-locked')).toBe(null); @@ -1567,7 +1567,7 @@ describe('gridstack', function() { }); }); - describe('custom grid placement #1054', function() { + describe('custom grid placement #1054 >', function() { let HTML = '

' + '

' + @@ -1592,26 +1592,26 @@ describe('gridstack', function() { afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should have correct position', function() { + it('should have correct position >', function() { let items = Utils.getElements('.grid-stack-item'); - for (let i = 0; i < items.length; i++) { - expect(parseInt(items[i].getAttribute('gs-x'))).toBe(pos[i].x); - expect(parseInt(items[i].getAttribute('gs-y'))).toBe(pos[i].y); - expect(parseInt(items[i].getAttribute('gs-w'))).toBe(pos[i].w); - expect(parseInt(items[i].getAttribute('gs-h'))).toBe(pos[i].h); - } + items.forEach((el, i) => { + expect(parseInt(el.getAttribute('gs-x'))).toBe(pos[i].x); + expect(parseInt(el.getAttribute('gs-y'))).toBe(pos[i].y); + expect(parseInt(el.getAttribute('gs-w'))).toBe(pos[i].w); + expect(parseInt(el.getAttribute('gs-h'))).toBe(pos[i].h); + }); }); }); - describe('grid.compact', function() { + describe('grid.compact >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should move all 3 items to top-left with no space', function() { - let grid = GridStack.init({float: true}); + it('should move all 3 items to top-left with no space >', function() { + grid = GridStack.init({float: true}); let el3 = grid.addWidget({x: 3, y: 5}); expect(parseInt(el3.getAttribute('gs-x'))).toBe(3); @@ -1619,10 +1619,10 @@ describe('gridstack', function() { grid.compact(); expect(parseInt(el3.getAttribute('gs-x'))).toBe(8); - expect(parseInt(el3.getAttribute('gs-y'))).toBe(0); + expect(el3.getAttribute('gs-y')).toBe(null); }); - it('not move locked item', function() { - let grid = GridStack.init({float: true}); + it('not move locked item >', function() { + grid = GridStack.init({float: true}); let el3 = grid.addWidget({x: 3, y: 5, locked: true, noMove: true}); expect(parseInt(el3.getAttribute('gs-x'))).toBe(3); @@ -1634,21 +1634,21 @@ describe('gridstack', function() { }); }); - describe('gridOption locked #1181', function() { + describe('gridOption locked #1181 >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('not move locked item, size down added one', function() { - let grid = GridStack.init(); + it('not move locked item, size down added one >', function() { + grid = GridStack.init(); let el1 = grid.addWidget({x: 0, y: 1, w: 12, locked: true}); - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); let el2 = grid.addWidget({x: 2, y: 0, h: 3}); - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); expect(parseInt(el2.getAttribute('gs-x'))).toBe(2); expect(parseInt(el2.getAttribute('gs-y'))).toBe(2); @@ -1657,22 +1657,22 @@ describe('gridstack', function() { }); - describe('nested grids', function() { + describe('nested grids >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackNestedHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('should both init, second with nested class', function() { - let grids = GridStack.initAll(); + it('should both init, second with nested class >', function() { + grids = GridStack.initAll(); expect(grids.length).toBe(2); expect(grids[0].el.classList.contains('grid-stack-nested')).toBe(false); expect(grids[1].el.classList.contains('grid-stack-nested')).toBe(true); }); }); - describe('two grids', function() { + describe('two grids >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridHTML); document.body.insertAdjacentHTML('afterbegin', gridHTML); @@ -1682,8 +1682,8 @@ describe('gridstack', function() { expect(els.length).toBe(2); els.forEach(g => g.remove()); }); - it('should not remove incorrect child', function() { - let grids = GridStack.initAll(); + it('should not remove incorrect child >', function() { + grids = GridStack.initAll(); expect(grids.length).toBe(2); expect(grids[0].engine.nodes.length).toBe(2); expect(grids[1].engine.nodes.length).toBe(2); @@ -1700,8 +1700,8 @@ describe('gridstack', function() { expect(grids[1].engine.nodes.length).toBe(0); expect(grids[1].el.children.length).toBe(0); }); - it('should remove 1 child', function() { - let grids = GridStack.initAll(); + it('should remove 1 child >', function() { + grids = GridStack.initAll(); grids[1].removeWidget( grids[1].engine.nodes[0].el ); expect(grids[0].engine.nodes.length).toBe(2); expect(grids[0].el.children.length).toBe(2); @@ -1710,22 +1710,22 @@ describe('gridstack', function() { }); }); - describe('grid.on events', function() { + describe('grid.on events >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('add 3 single events', function() { - let grid = GridStack.init(); + it('add 3 single events >', function() { + grid = GridStack.init(); let fcn = (event: Event) => {}; grid.on('added', fcn).on('enable', fcn).on('dragstart', fcn); expect((grid as any)._gsEventHandler.enable).not.toBe(undefined); grid.off('added').off('enable').off('dragstart'); expect((grid as any)._gsEventHandler.enable).toBe(undefined); }); - it('add 3 events', function() { + it('add 3 events >', function() { let grid: any = GridStack.init(); // prevent TS check for string combine... let fcn = (event: CustomEvent) => {}; grid.on('added enable dragstart', fcn); @@ -1736,15 +1736,15 @@ describe('gridstack', function() { }); - describe('save & load', function() { + describe('save & load >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('save layout', function() { - let grid = GridStack.init({maxRow: 10}); + it('save layout >', function() { + grid = GridStack.init({maxRow: 10}); let layout = grid.save(false); expect(layout).toEqual([{x:0, y:0, w:4, h:2, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]); layout = grid.save(); @@ -1752,64 +1752,64 @@ describe('gridstack', function() { layout = grid.save(true); expect(layout).toEqual([{x:0, y:0, w:4, h:2, id:'gsItem1', content:'item 1 text'}, {x:4, y:0, w:4, h:4, id:'gsItem2', content:'item 2 text'}]); }); - it('save layout full', function() { - let grid = GridStack.init({maxRow: 10, _foo: 'bar'} as any); // using bogus 'internal' field (stripped) + it('save layout full >', function() { + grid = GridStack.init({maxRow: 10, _foo: 'bar'} as any); // using bogus 'internal' field (stripped) let layout = grid.save(false, true); expect(layout).toEqual({maxRow: 10, children: [{x:0, y:0, w:4, h:2, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]}); layout = grid.save(true, true); expect(layout).toEqual({maxRow: 10, children: [{x:0, y:0, w:4, h:2, id:'gsItem1', content:'item 1 text'}, {x:4, y:0, w:4, h:4, id:'gsItem2', content:'item 2 text'}]}); }); - it('load move 1 item, delete others', function() { - let grid = GridStack.init(); + it('load move 1 item, delete others >', function() { + grid = GridStack.init(); grid.load([{x:2, h:1, id:'gsItem2'}]); let layout = grid.save(false); - expect(layout).toEqual([{x:2, y:0, w:4, id:'gsItem2'}]); + expect(layout).toEqual([{x:0, y:0, id:'gsItem2'}]); }); - it('load add new, delete others', function() { - let grid = GridStack.init(); - grid.load([{w:2, h:1, id:'gsItem3'}], true); + it('load add new, delete others >', function() { + grid = GridStack.init(); + grid.load([{w:2, y:0, h:1, id:'gsItem3'}], true); let layout = grid.save(false); expect(layout).toEqual([{x:0, y:0, w:2, id:'gsItem3'}]); }); - it('load size 1 item only', function() { - let grid = GridStack.init(); + it('load 1 item only, no remove >', function() { + grid = GridStack.init(); grid.load([{h:3, id:'gsItem1'}], false); let layout = grid.save(false); - expect(layout).toEqual([{x:0, y:0, w:4, h:3, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]); + expect(layout).toEqual([{x:0, y:0, h:3, id:'gsItem1'}, {x:4, y:0, w:4, h:4, id:'gsItem2'}]); }); - it('load size 1 item only with callback', function() { - let grid = GridStack.init(); + it('load 1 item only with callback >', function() { + grid = GridStack.init(); grid.load([{h:3, id:'gsItem1'}], () => null); let layout = grid.save(false); - expect(layout).toEqual([{x:0, y:0, w:4, h:3, id:'gsItem1'}]); + expect(layout).toEqual([{x:0, y:0, h:3, id:'gsItem1'}]); }); }); - describe('load', function() { + describe('load >', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('after init #1693', function() { - let grid = GridStack.init(); + it('after init #1693 >', function() { + grid = GridStack.init(); grid.load([{id:'gsItem1',x:0,y:0,w:5,h:1},{id:'gsItem2',x:6,y:0,w:2,h:2}]); let el1 = document.getElementById('item1') - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); - expect(parseInt(el1.getAttribute('gs-y'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(parseInt(el1.getAttribute('gs-w'))).toBe(5); expect(el1.getAttribute('gs-h')).toBe(null); let el2 = document.getElementById('item2') expect(parseInt(el2.getAttribute('gs-x'))).toBe(6); - expect(parseInt(el2.getAttribute('gs-y'))).toBe(0); + expect(el2.getAttribute('gs-y')).toBe(null); expect(parseInt(el2.getAttribute('gs-w'))).toBe(2); expect(parseInt(el2.getAttribute('gs-h'))).toBe(2); }); - it('after init replace nodes', function() { - let grid = GridStack.init(); + it('after init replace nodes >', function() { + grid = GridStack.init(); expect(document.getElementById('item1')).not.toBe(null); expect(document.getElementById('item2')).not.toBe(null); @@ -1819,41 +1819,43 @@ describe('gridstack', function() { expect(document.getElementById('item1')).toBe(null); let el1 = grid.engine.nodes.find(n => n.id === 'new1').el; - expect(parseInt(el1.getAttribute('gs-x'))).toBe(0); - expect(parseInt(el1.getAttribute('gs-y'))).toBe(0); + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); expect(parseInt(el1.getAttribute('gs-w'))).toBe(5); expect(el1.getAttribute('gs-h')).toBe(null); expect(document.getElementById('item2')).toBe(null); let el2 = grid.engine.nodes.find(n => n.id === 'new2').el; expect(parseInt(el2.getAttribute('gs-x'))).toBe(6); - expect(parseInt(el2.getAttribute('gs-y'))).toBe(0); + expect(el2.getAttribute('gs-y')).toBe(null); expect(parseInt(el2.getAttribute('gs-w'))).toBe(2); expect(parseInt(el2.getAttribute('gs-h'))).toBe(2); }); }); - describe('load empty', function() { - let items: GridStackWidget[] = [ - {id: '0', x: 0, y: 0}, - {id: '1', x: 0, y: 1}, - {id: '2', x: 0, y: 2}, - {id: '3', x: 0, y: 3}, - ]; + describe('load empty >', function() { + let items: GridStackWidget[]; let grid: GridStack; const test = () => { - items.forEach(i => { - const n = grid.engine.nodes.find(n => n.id === i.id); - expect(parseInt(n.el.getAttribute('gs-y'))).toBe(i.y); + items.forEach(item => { + const n = grid.engine.nodes.find(n => n.id === item.id); + if (item.y) expect(parseInt(n.el.getAttribute('gs-y'))).toBe(item.y!); + else expect(n.el.getAttribute('gs-y')).toBe(null); }); } beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); + items = [ + {id: '0', x: 0, y: 0}, + {id: '1', x: 0, y: 1}, + {id: '2', x: 0, y: 2}, + {id: '3', x: 0, y: 3}, + ]; }); afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('update collision', function() { + it('update collision >', function() { grid = GridStack.init({children: items}); const n = grid.engine.nodes[0]; test(); @@ -1866,7 +1868,7 @@ describe('gridstack', function() { items[1].y = 1; items[2].y = 2; items[3].y = 3; test(); }); - it('load collision 2208', function() { + it('load collision 2208 >', function() { grid = GridStack.init({children: items}); test(); @@ -1880,7 +1882,7 @@ describe('gridstack', function() { items[1].y = 1; items[2].y = 2; items[3].y = 3; test(); }); - it('load full collision 2208', function() { + it('load full collision 2208 >', function() { grid = GridStack.init({children: items}); test(); @@ -1903,7 +1905,7 @@ describe('gridstack', function() { }); // ..and finally track log warnings at the end, instead of displaying them.... - describe('obsolete warnings', function() { + describe('obsolete warnings >', function() { console.warn = jasmine.createSpy('log'); // track warnings instead of displaying them beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); @@ -1911,13 +1913,13 @@ describe('gridstack', function() { afterEach(function() { document.body.removeChild(document.getElementById('gs-cont')); }); - it('willItFit() legacy', function() { - let grid = GridStack.init({maxRow: 5}); + it('willItFit() legacy >', function() { + grid = GridStack.init({maxRow: 5}); expect((grid as any).willItFit(0, 0, 1, 3, false)).toBe(true); expect((grid as any).willItFit(0, 0, 1, 4, false)).toBe(false); }); - it('warning if OLD commit() is called', function() { - let grid = GridStack.init(); + it('warning if OLD commit() is called >', function() { + grid = GridStack.init(); grid.batchUpdate(true); expect(grid.engine.batchMode).toBe(true); grid.commit(); // old API @@ -1926,7 +1928,7 @@ describe('gridstack', function() { }); /* saving as example - it('warning if OLD setGridWidth is called', function() { + it('warning if OLD setGridWidth is called >', function() { let grid: any = GridStack.init(); grid.setGridWidth(11); // old 0.5.2 API expect(grid.getColumn()).toBe(11); @@ -1934,4 +1936,54 @@ describe('gridstack', function() { }); */ }); + + describe('stylesheet', function() { + let grid: GridStack; + let root: HTMLElement; + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackHTML); + grid = GridStack.init({ cellHeight: 30 }); + root = document.getElementById('gs-cont')!; + }); + afterEach(function() { + document.body.removeChild(root); + }); + it('not getting lost in case of node detach/attach', function() { + expect(window.getComputedStyle(grid.el.querySelector("#item1")!).height).toBe("60px"); + const oldParent = root.parentElement; + root.remove(); + oldParent!.appendChild(root); + expect(window.getComputedStyle(grid.el.querySelector("#item1")!).height).toBe("60px"); + }); + }); + + + describe('updateOptions()', function() { + let grid: GridStack; + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackHTML); + grid = GridStack.init({ cellHeight: 30 }); + }); + afterEach(function() { + document.body.removeChild(document.getElementById('gs-cont')); + }); + it('update all values supported', function() { + grid.updateOptions({ + cellHeight: '40px', + margin: 8, + column: 11, + float: true, + row: 10, + }); + expect(grid.getCellHeight(true)).toBe(40); + expect(grid.getMargin()).toBe(8); + expect(grid.opts.marginTop).toBe(8); + expect(grid.getColumn()).toBe(11); + expect(grid.getFloat()).toBe(true); + expect(grid.opts.row).toBe(10); + expect(grid.opts.minRow).toBe(10); + expect(grid.opts.maxRow).toBe(10); + }); + }); + }); diff --git a/spec/regression-spec.ts b/spec/regression-spec.ts new file mode 100644 index 000000000..d63c53f77 --- /dev/null +++ b/spec/regression-spec.ts @@ -0,0 +1,111 @@ +import { GridItemHTMLElement, GridStack, GridStackWidget } from '../src/gridstack'; + +describe('regression >', function() { + 'use strict'; + + let grid: GridStack; + let findEl = function(id: string): GridItemHTMLElement { + return grid.engine.nodes.find(n => n.id === id)!.el!; + }; + let findSubEl = function(id: string, index = 0): GridItemHTMLElement { + return grid.engine.nodes[index].subGrid?.engine.nodes.find(n => n.id === id)!.el!; + }; + + + // empty grid + let gridstackEmptyHTML = + '

' + + '

'; + + describe('2492 load() twice >', function() { + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); + }); + afterEach(function() { + document.body.removeChild(document.getElementById('gs-cont')); + }); + it('', function() { + let items: GridStackWidget[] = [ + {x: 0, y: 0, w:2, content: '0 wide'}, + {x: 1, y: 0, content: '1 over'}, + {x: 2, y: 1, content: '2 float'}, + ]; + let count = 0; + items.forEach(n => n.id = String(count++)); + grid = GridStack.init({cellHeight: 70, margin: 5}).load(items); + + let el0 = findEl('0'); + let el1 = findEl('1'); + let el2 = findEl('2'); + + expect(el0.getAttribute('gs-x')).toBe(null); + expect(el0.getAttribute('gs-y')).toBe(null); + expect(el0.children[0].innerHTML).toBe(items[0].content!); + expect(parseInt(el1.getAttribute('gs-x'))).toBe(1); + expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); + expect(parseInt(el2.getAttribute('gs-x'))).toBe(2); + expect(el2.getAttribute('gs-y')).toBe(null); + + // loading with changed content should be same positions + items.forEach(n => n.content += '*') + grid.load(items); + expect(el0.getAttribute('gs-x')).toBe(null); + expect(el0.getAttribute('gs-y')).toBe(null); + expect(el0.children[0].innerHTML).toBe(items[0].content!); + expect(parseInt(el1.getAttribute('gs-x'))).toBe(1); + expect(parseInt(el1.getAttribute('gs-y'))).toBe(1); + expect(parseInt(el2.getAttribute('gs-x'))).toBe(2); + expect(el2.getAttribute('gs-y')).toBe(null); + }); + }); + + describe('2865 nested grid resize >', function() { + beforeEach(function() { + document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML); + }); + afterEach(function() { + document.body.removeChild(document.getElementById('gs-cont')); + }); + it('', function() { + let children: GridStackWidget[] = [{},{},{}]; + let items: GridStackWidget[] = [ + {x: 0, y: 0, w:3, h:5, sizeToContent: true, subGridOpts: {children, column: 'auto'}} + ]; + let count = 0; + [...items, ...children].forEach(n => n.id = String(count++)); + grid = GridStack.init({cellHeight: 70, margin: 5, children: items}); + + let nested = findEl('0'); + let el1 = findSubEl('1'); + let el2 = findSubEl('2'); + let el3 = findSubEl('3'); + expect(nested.getAttribute('gs-x')).toBe(null); + expect(nested.getAttribute('gs-y')).toBe(null); + expect(parseInt(nested.getAttribute('gs-w'))).toBe(3); + // TODO: sizeToContent doesn't seem to be called in headless mode ??? works in browser. + // expect(nested.getAttribute('gs-h')).toBe(null); // sizeToContent 5 -> 1 which is null + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); + expect(parseInt(el2.getAttribute('gs-x'))).toBe(1); + expect(el2.getAttribute('gs-y')).toBe(null); + expect(parseInt(el3.getAttribute('gs-x'))).toBe(2); + expect(el3.getAttribute('gs-y')).toBe(null); + + // now resize the nested grid to 2 -> should reflow el3 + grid.update(nested, {w:2}); + expect(nested.getAttribute('gs-x')).toBe(null); + expect(nested.getAttribute('gs-y')).toBe(null); + expect(parseInt(nested.getAttribute('gs-w'))).toBe(2); + // TODO: sizeToContent doesn't seem to be called in headless mode ??? works in browser. + // expect(parseInt(nested.getAttribute('gs-h'))).toBe(2); + expect(el1.getAttribute('gs-x')).toBe(null); + expect(el1.getAttribute('gs-y')).toBe(null); + expect(parseInt(el2.getAttribute('gs-x'))).toBe(1); + expect(el2.getAttribute('gs-y')).toBe(null); + // 3rd item pushed to next row + expect(el3.getAttribute('gs-x')).toBe(null); + expect(parseInt(el3.getAttribute('gs-y'))).toBe(1); + }); + }); +}); diff --git a/spec/test.html b/spec/test.html new file mode 100644 index 000000000..a50e9cf35 --- /dev/null +++ b/spec/test.html @@ -0,0 +1,43 @@ + + + + + + + Codestin Search App + + + + +

Grid Spec test

+ step1 + step2 +

+ +

+ + + diff --git a/spec/utils-spec.ts b/spec/utils-spec.ts index f3590e815..3aa4f3111 100644 --- a/spec/utils-spec.ts +++ b/spec/utils-spec.ts @@ -48,23 +48,6 @@ describe('gridstack utils', function() { }); }); - describe('test createStylesheet/removeStylesheet', function() { - - it('should create/remove style DOM', function() { - let _id = 'test-123'; - Utils.createStylesheet(_id); - - let style = document.querySelector('STYLE[gs-style-id=' + _id + ']'); - expect(style).not.toBe(null); - // expect(style.prop('tagName')).toEqual('STYLE'); - - Utils.removeStylesheet(_id) - style = document.querySelector('STYLE[gs-style-id=' + _id + ']'); - expect(style).toBe(null); - }); - - }); - describe('test parseHeight', function() { it('should parse height value', function() { @@ -79,7 +62,7 @@ describe('gridstack utils', function() { expect(Utils.parseHeight('12.5cm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'cm'})); expect(Utils.parseHeight('12.5mm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'mm'})); expect(Utils.parseHeight('12.5')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'px'})); - expect(function() { Utils.parseHeight('12.5 df'); }).toThrowError('Invalid height'); + expect(function() { Utils.parseHeight('12.5 df'); }).toThrowError('Invalid height val = 12.5 df'); }); it('should parse negative height value', function() { @@ -94,7 +77,7 @@ describe('gridstack utils', function() { expect(Utils.parseHeight('-12.3cm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'cm'})); expect(Utils.parseHeight('-12.3mm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'mm'})); expect(Utils.parseHeight('-12.5')).toEqual(jasmine.objectContaining({h: -12.5, unit: 'px'})); - expect(function() { Utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height'); + expect(function() { Utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height val = -12.5 df'); }); }); diff --git a/src/dd-base-impl.ts b/src/dd-base-impl.ts index 2be367c81..f417de9fb 100644 --- a/src/dd-base-impl.ts +++ b/src/dd-base-impl.ts @@ -1,5 +1,5 @@ /** - * dd-base-impl.ts 11.0.1 + * dd-base-impl.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 460fcc4d9..ad3606c4f 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -1,5 +1,5 @@ /** - * dd-draggable.ts 11.0.1 + * dd-draggable.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -9,6 +9,7 @@ import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl'; import { GridItemHTMLElement, DDUIData, GridStackNode, GridStackPosition, DDDragOpt } from './types'; import { DDElementHost } from './dd-element'; import { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch'; +import { GridHTMLElement } from './gridstack'; interface DragOffset { left: number; @@ -224,7 +225,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt protected _mouseUp(e: MouseEvent): void { document.removeEventListener('mousemove', this._mouseMove, true); document.removeEventListener('mouseup', this._mouseUp, true); - if (isTouch) { + if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp e.currentTarget.removeEventListener('touchmove', touchmove, true); e.currentTarget.removeEventListener('touchend', touchend, true); } @@ -264,17 +265,16 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */ protected _keyEvent(e: KeyboardEvent): void { const n = this.el.gridstackNode as GridStackNodeRotate; - if (!n?.grid) return; - const grid = n.grid; + const grid = n?.grid || (DDManager.dropElement?.el as GridHTMLElement)?.gridstack; if (e.key === 'Escape') { - if (n._origRotate) { + if (n && n._origRotate) { n._orig = n._origRotate; delete n._origRotate; } - grid.engine.restoreInitial(); + grid?.cancelDrag(); this._mouseUp(this.mouseDownEvent); - } else if (e.key === 'r' || e.key === 'R') { + } else if (n && grid && (e.key === 'r' || e.key === 'R')) { if (!Utils.canBeRotated(n)) return; n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise) @@ -299,7 +299,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt } else if (this.option.helper === 'clone') { helper = Utils.cloneNode(this.el); } - if (!document.body.contains(helper)) { + if (!helper.parentElement) { Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo); } this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]); @@ -312,7 +312,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593 const style = this.helper.style; style.pointerEvents = 'none'; // needed for over items to get enter/leave - // style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (done in CSS as well) + // style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op) style.width = this.dragOffset.width + 'px'; style.height = this.dragOffset.height + 'px'; style.willChange = 'left, top'; diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts index 29efcbc5e..f29835c9b 100644 --- a/src/dd-droppable.ts +++ b/src/dd-droppable.ts @@ -1,5 +1,5 @@ /** - * dd-droppable.ts 11.0.1 + * dd-droppable.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-element.ts b/src/dd-element.ts index 9b87f96ed..c6b9f83b7 100644 --- a/src/dd-element.ts +++ b/src/dd-element.ts @@ -1,5 +1,5 @@ /** - * dd-elements.ts 11.0.1 + * dd-elements.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-gridstack.ts b/src/dd-gridstack.ts index fcb2f57d2..67347fa24 100644 --- a/src/dd-gridstack.ts +++ b/src/dd-gridstack.ts @@ -1,5 +1,5 @@ /** - * dd-gridstack.ts 11.0.1 + * dd-gridstack.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -8,6 +8,7 @@ import { GridItemHTMLElement, GridStackElement, DDDragOpt } from './types'; import { Utils } from './utils'; import { DDManager } from './dd-manager'; import { DDElement, DDElementHost } from './dd-element'; +import { GridHTMLElement } from './gridstack'; /** Drag&Drop drop options */ export type DDDropOpt = { @@ -32,7 +33,7 @@ export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: Grid export class DDGridStack { public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack { - this._getDDElements(el).forEach(dEl => { + this._getDDElements(el, opts).forEach(dEl => { if (opts === 'disable' || opts === 'enable') { dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable() } else if (opts === 'destroy') { @@ -67,7 +68,7 @@ export class DDGridStack { } public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack { - this._getDDElements(el).forEach(dEl => { + this._getDDElements(el, opts).forEach(dEl => { if (opts === 'disable' || opts === 'enable') { dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable() } else if (opts === 'destroy') { @@ -100,13 +101,11 @@ export class DDGridStack { opts._accept = opts.accept; opts.accept = (el) => opts._accept(el); } - this._getDDElements(el).forEach(dEl => { + this._getDDElements(el, opts).forEach(dEl => { if (opts === 'disable' || opts === 'enable') { dEl.ddDroppable && dEl.ddDroppable[opts](); } else if (opts === 'destroy') { - if (dEl.ddDroppable) { // error to call destroy if not there - dEl.cleanDroppable(); - } + dEl.ddDroppable && dEl.cleanDroppable(); } else if (opts === 'option') { dEl.setupDroppable({ [key]: value }); } else { @@ -148,12 +147,13 @@ export class DDGridStack { return this; } - /** @internal returns a list of DD elements, creating them on the fly by default */ - protected _getDDElements(els: GridStackElement, create = true): DDElement[] { + /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */ + protected _getDDElements(els: GridStackElement, opts?: DDOpts): DDElement[] { + // don't force create if we're going to destroy it, unless it's a grid which is used as drop target for it's children + const create = (els as GridHTMLElement).gridstack || opts !== 'destroy' && opts !== 'disable'; const hosts = Utils.getElements(els) as DDElementHost[]; if (!hosts.length) return []; - const list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null)); - if (!create) { list.filter(d => d); } // remove nulls + const list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null)).filter(d => d); // remove nulls return list; } } diff --git a/src/dd-manager.ts b/src/dd-manager.ts index 19b773a99..6f13f40c1 100644 --- a/src/dd-manager.ts +++ b/src/dd-manager.ts @@ -1,5 +1,5 @@ /** - * dd-manager.ts 11.0.1 + * dd-manager.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts index 9afd2577c..4e3ae9ec0 100644 --- a/src/dd-resizable-handle.ts +++ b/src/dd-resizable-handle.ts @@ -1,5 +1,5 @@ /** - * dd-resizable-handle.ts 11.0.1 + * dd-resizable-handle.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -118,9 +118,9 @@ export class DDResizableHandle { this._mouseUp(this.mouseDownEvent); } } - - - + + + /** @internal */ protected _triggerEvent(name: string, event: MouseEvent): DDResizableHandle { if (this.option[name]) this.option[name](event); diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts index 1ef89bb3b..d99b0df12 100644 --- a/src/dd-resizable.ts +++ b/src/dd-resizable.ts @@ -1,5 +1,5 @@ /** - * dd-resizable.ts 11.0.1 + * dd-resizable.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -201,12 +201,13 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt /** @internal */ protected _resizeStop(event: MouseEvent): DDResizable { const ev = Utils.initEvent(event, { type: 'resizestop', target: this.el }); + // Remove style attr now, so the stop handler can rebuild style attrs + this._cleanHelper(); if (this.option.stop) { this.option.stop(ev); // Note: ui() not used by gridstack so don't pass } this.el.classList.remove('ui-resizable-resizing'); this.triggerEvent('resizestop', ev); - this._cleanHelper(); delete this.startEvent; delete this.originalRect; delete this.temporalRect; diff --git a/src/dd-touch.ts b/src/dd-touch.ts index c3abbc7e8..9e1fb71b1 100644 --- a/src/dd-touch.ts +++ b/src/dd-touch.ts @@ -1,9 +1,10 @@ /** - * touch.ts 11.0.1 + * touch.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ import { DDManager } from './dd-manager'; +import { Utils } from './utils'; /** * Detect touch support - Windows Surface devices and other touch devices @@ -11,15 +12,15 @@ import { DDManager } from './dd-manager'; * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) */ export const isTouch: boolean = typeof window !== 'undefined' && typeof document !== 'undefined' && -( 'ontouchstart' in document - || 'ontouchstart' in window - // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this - // eslint-disable-next-line @typescript-eslint/no-explicit-any - || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch) - || navigator.maxTouchPoints > 0 - // eslint-disable-next-line @typescript-eslint/no-explicit-any - || (navigator as any).msMaxTouchPoints > 0 -); + ( 'ontouchstart' in document + || 'ontouchstart' in window + // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this + // eslint-disable-next-line @typescript-eslint/no-explicit-any + || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch) + || navigator.maxTouchPoints > 0 + // eslint-disable-next-line @typescript-eslint/no-explicit-any + || (navigator as any).msMaxTouchPoints > 0 + ); // interface TouchCoord {x: number, y: number}; @@ -51,29 +52,8 @@ function simulateMouseEvent(e: TouchEvent, simulatedType: string) { // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors if (e.cancelable) e.preventDefault(); - const touch = e.changedTouches[0], simulatedEvent = document.createEvent('MouseEvents'); - - // Initialize the simulated mouse event using the touch event's coordinates - simulatedEvent.initMouseEvent( - simulatedType, // type - true, // bubbles - true, // cancelable - window, // view - 1, // detail - touch.screenX, // screenX - touch.screenY, // screenY - touch.clientX, // clientX - touch.clientY, // clientY - false, // ctrlKey - false, // altKey - false, // shiftKey - false, // metaKey - 0, // button - null // relatedTarget - ); - // Dispatch the simulated event to the target element - e.target.dispatchEvent(simulatedEvent); + Utils.simulateMouseEvent(e.changedTouches[0], simulatedType); } /** @@ -86,29 +66,8 @@ function simulatePointerMouseEvent(e: PointerEvent, simulatedType: string) { // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors if (e.cancelable) e.preventDefault(); - const simulatedEvent = document.createEvent('MouseEvents'); - - // Initialize the simulated mouse event using the touch event's coordinates - simulatedEvent.initMouseEvent( - simulatedType, // type - true, // bubbles - true, // cancelable - window, // view - 1, // detail - e.screenX, // screenX - e.screenY, // screenY - e.clientX, // clientX - e.clientY, // clientY - false, // ctrlKey - false, // altKey - false, // shiftKey - false, // metaKey - 0, // button - null // relatedTarget - ); - // Dispatch the simulated event to the target element - e.target.dispatchEvent(simulatedEvent); + Utils.simulateMouseEvent(e, simulatedType); } diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index 80917d6be..02a7bf2fd 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -1,5 +1,5 @@ /** - * gridstack-engine.ts 11.0.1 + * gridstack-engine.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -31,6 +31,7 @@ export class GridStackEngine { public addedNodes: GridStackNode[] = []; public removedNodes: GridStackNode[] = []; public batchMode: boolean; + public defaultColumn = 12; /** @internal callback to update the DOM attributes */ protected onChange: OnChangeCB; /** @internal */ @@ -43,13 +44,16 @@ export class GridStackEngine { public _loading?: boolean /** @internal true while we are resizing widgets during column resize to skip certain parts */ protected _inColumnResize?: boolean; + /** true when grid.load() already cached the layout and can skip out of bound caching info */ + public skipCacheUpdate?: boolean; /** @internal true if we have some items locked */ protected _hasLocked: boolean; /** @internal unique global internal _id counter */ public static _idSeq = 0; public constructor(opts: GridStackEngineOptions = {}) { - this.column = opts.column || 12; + this.column = opts.column || this.defaultColumn; + if (this.column > this.defaultColumn) this.defaultColumn = this.column; this.maxRow = opts.maxRow; this._float = opts.float; this.nodes = opts.nodes || []; @@ -100,15 +104,23 @@ export class GridStackEngine { let didMove = false; const newOpt: GridStackMoveOpts = {nested: true, pack: false}; + let counter = 0; while (collide = collide || this.collide(node, area, opt.skip)) { // could collide with more than 1 item... so repeat for each + if (counter++ > this.nodes.length * 2) { + throw new Error("Infinite collide check"); + } let moved: boolean; // if colliding with a locked item OR loading (move after) OR moving down with top gravity (and collide could move up) -> skip past the collide, // but remember that skip down so we only do this once (and push others otherwise). if (collide.locked || this._loading || node._moving && !node._skipDown && nn.y > node.y && !this.float && // can take space we had, or before where we're going (!this.collide(collide, {...collide, y: node.y}, node) || !this.collide(collide, {...collide, y: nn.y - collide.h}, node))) { + node._skipDown = (node._skipDown || nn.y > node.y); - moved = this.moveNode(node, {...nn, y: collide.y + collide.h, ...newOpt}); + const newNN = {...nn, y: collide.y + collide.h, ...newOpt}; + // pretent we moved to where we are now so we can continue any collision checks #2492 + moved = this._loading && Utils.samePos(node, newNN) ? true : this.moveNode(node, newNN); + if ((collide.locked || this._loading) && moved) { Utils.copyPos(nn, node); // moving after lock become our new desired location } else if (!collide.locked && moved && opt.pack) { @@ -122,7 +134,9 @@ export class GridStackEngine { // move collide down *after* where we will be, ignoring where we are now (don't collide with us) moved = this.moveNode(collide, {...collide, y: nn.y + nn.h, skip: node, ...newOpt}); } - if (!moved) { return didMove; } // break inf loop if we couldn't move after all (ex: maxRow, fixed) + + if (!moved) return didMove; // break inf loop if we couldn't move after all (ex: maxRow, fixed) + collide = undefined; } return didMove; @@ -394,21 +408,21 @@ export class GridStackEngine { const before = node._orig || Utils.copyPos({}, node); - if (node.maxW) { node.w = Math.min(node.w, node.maxW); } - if (node.maxH) { node.h = Math.min(node.h, node.maxH); } - if (node.minW && node.minW <= this.column) { node.w = Math.max(node.w, node.minW); } - if (node.minH) { node.h = Math.max(node.h, node.minH); } + if (node.maxW) { node.w = Math.min(node.w || 1, node.maxW); } + if (node.maxH) { node.h = Math.min(node.h || 1, node.maxH); } + if (node.minW) { node.w = Math.max(node.w || 1, node.minW); } + if (node.minH) { node.h = Math.max(node.h || 1, node.minH); } // if user loaded a larger than allowed widget for current # of columns, // remember it's position & width so we can restore back (1 -> 12 column) #1655 #1985 // IFF we're not in the middle of column resizing! const saveOrig = (node.x || 0) + (node.w || 1) > this.column; - if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) { + if (saveOrig && this.column < this.defaultColumn && !this._inColumnResize && !this.skipCacheUpdate && node._id && this.findCacheLayout(node, this.defaultColumn) === -1) { const copy = {...node}; // need _id + positions if (copy.autoPosition || copy.x === undefined) { delete copy.x; delete copy.y; } - else copy.x = Math.min(11, copy.x); - copy.w = Math.min(12, copy.w || 1); - this.cacheOneLayout(copy, 12); + else copy.x = Math.min(this.defaultColumn - 1, copy.x); + copy.w = Math.min(this.defaultColumn, copy.w || 1); + this.cacheOneLayout(copy, this.defaultColumn); } if (node.w > this.column) { @@ -494,7 +508,7 @@ export class GridStackEngine { /** @internal restore all the nodes back to initial values (called when we leave) */ public restoreInitial(): GridStackEngine { this.nodes.forEach(n => { - if (Utils.samePos(n, n._orig)) return; + if (!n._orig || Utils.samePos(n, n._orig)) return; Utils.copyPos(n, n._orig); n._dirty = true; }); @@ -715,7 +729,7 @@ export class GridStackEngine { } // now move (to the original ask vs the collision version which might differ) and repack things - if (needToMove) { + if (needToMove && !Utils.samePos(node, nn)) { node._dirty = true; Utils.copyPos(node, nn); } @@ -817,9 +831,6 @@ export class GridStackEngine { public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine { if (!this.nodes.length || !column || prevColumn === column) return this; - // in this mode no layout is done whatsoever, up to the caller to handle it - if (layout === 'none') return this; - // simpler shortcuts layouts const doCompact = layout === 'compact' || layout === 'list'; if (doCompact) { @@ -888,7 +899,7 @@ export class GridStackEngine { if (typeof layout === 'function') { layout(column, prevColumn, newNodes, nodes); } else { - const ratio = doCompact ? 1 : column / prevColumn; + const ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn; const move = (layout === 'move' || layout === 'moveScale'); const scale = (layout === 'scale' || layout === 'moveScale'); nodes.forEach(node => { diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss deleted file mode 100644 index 422588fae..000000000 --- a/src/gridstack-extra.scss +++ /dev/null @@ -1,25 +0,0 @@ -/** - * default to generate [2-11] columns as 1 (oneColumnMode) and 12 (default) are in the main css - * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license - */ -$start: 2 !default; -$end: 11 !default; - -@function fixed($float) { - @return calc(round($float * 1000) / 1000); // total 4-5 digits being % -} - -@mixin grid-stack-items($columns) { - .gs-#{$columns} > .grid-stack-item { - width: fixed(calc(100% / $columns)); - - @for $i from 1 through $columns - 1 { - &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); } - &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); } - } - } -} - -@for $j from $start through $end { - @include grid-stack-items($j) -} diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js deleted file mode 100644 index 83efd8928..000000000 --- a/src/gridstack-poly.js +++ /dev/null @@ -1,356 +0,0 @@ -/** - * gridstack-poly.ts 11.0.1 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) - * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license - */ - -/* eslint-disable prefer-rest-params */ -/* eslint-disable no-var */ - -// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent -(function () { - if (typeof window.CustomEvent === "function") { - return false; - } - - function CustomEvent (event, params) { - params = params || {bubbles: false, cancelable: false, detail: null}; - var evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); - return evt; - } - - window.CustomEvent = CustomEvent; -})(); - -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN -Number.isNaN = Number.isNaN || function isNaN(input) { - return typeof input === 'number' && input !== input; -} - -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find -if (!Array.prototype.find) { - Object.defineProperty(Array.prototype, 'find', { - value: function (predicate) { - // 1. Let O be ? ToObject(this value). - if (this == null) { - throw TypeError('"this" is null or not defined'); - } - - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If IsCallable(predicate) is false, throw a TypeError exception. - if (typeof predicate !== 'function') { - throw TypeError('predicate must be a function'); - } - - // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. - var thisArg = arguments[1]; - - // 5. Let k be 0. - var k = 0; - - // 6. Repeat, while k < len - while (k < len) { - // a. Let Pk be ! ToString(k). - // b. Let kValue be ? Get(O, Pk). - // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). - // d. If testResult is true, return kValue. - var kValue = o[k]; - if (predicate.call(thisArg, kValue, k, o)) { - return kValue; - } - // e. Increase k by 1. - k++; - } - - // 7. Return undefined. - return undefined; - }, - configurable: true, - writable: true - }); -} - -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex -if (!Array.prototype.findIndex) { - Object.defineProperty(Array.prototype, 'findIndex', { - value: function(predicate) { - // 1. Let O be ? ToObject(this value). - if (this == null) { - throw new TypeError('"this" is null or not defined'); - } - - var o = Object(this); - - // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; - - // 3. If IsCallable(predicate) is false, throw a TypeError exception. - if (typeof predicate !== 'function') { - throw new TypeError('predicate must be a function'); - } - - // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. - var thisArg = arguments[1]; - - // 5. Let k be 0. - var k = 0; - - // 6. Repeat, while k < len - while (k < len) { - // a. Let Pk be ! ToString(k). - // b. Let kValue be ? Get(O, Pk). - // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). - // d. If testResult is true, return k. - var kValue = o[k]; - if (predicate.call(thisArg, kValue, k, o)) { - return k; - } - // e. Increase k by 1. - k++; - } - - // 7. Return -1. - return -1; - }, - configurable: true, - writable: true - }); -} - -// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]); - -// from: https://github.com/jserz/js_piece/blob/master/DOM/Element/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - item.prepend = item.prepend || function () { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - }; - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]); - -// Production steps of ECMA-262, Edition 5, 15.4.4.1-dev8 -// Reference: http://es5.github.io/#x15.4.4.1-dev8 - -if (!Array.prototype['forEach']) { - - Array.prototype.forEach = function(callback, thisArg) { - - if (this == null) { throw new TypeError('Array.prototype.forEach called on null or undefined'); } - - var T, k; - // 1. Let O be the result of calling toObject() passing the - // |this| value as the argument. - var O = Object(this); - - // 2. Let lenValue be the result of calling the Get() internal - // method of O with the argument "length". - // 3. Let len be toUint32(lenValue). - var len = O.length >>> 0; - - // 4. If isCallable(callback) is false, throw a TypeError exception. - // See: http://es5.github.com/#x9.11 - if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function'); } - - // 5. If thisArg was supplied, let T be thisArg; else let - // T be undefined. - if (arguments.length > 1) { T = thisArg; } - - // 6. Let k be 0 - k = 0; - - // 7. Repeat, while k < len - while (k < len) { - - var kValue; - - // a. Let Pk be ToString(k). - // This is implicit for LHS operands of the in operator - // b. Let kPresent be the result of calling the HasProperty - // internal method of O with argument Pk. - // This step can be combined with c - // c. If kPresent is true, then - if (k in O) { - - // i. Let kValue be the result of calling the Get internal - // method of O with argument Pk. - kValue = O[k]; - - // ii. Call the Call internal method of callback with T as - // the this value and argument list containing kValue, k, and O. - callback.call(T, kValue, k, O); - } - // d. Increase k by 1. - k++; - } - // 8. return undefined - }; -} - -// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent -(function(){ - try{ - new window.CustomEvent('T'); - }catch(e){ - var CustomEvent = function(event, params){ - params = params || { bubbles: false, cancelable: false, detail: undefined }; - - var evt = document.createEvent('CustomEvent'); - - evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); - - return evt; - }; - - CustomEvent.prototype = window.Event.prototype; - - window.CustomEvent = CustomEvent; - } -})(); - -// https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]); - -// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches -if (!Element.prototype.matches) { - Element.prototype.matches = - Element.prototype.matchesSelector || - Element.prototype.mozMatchesSelector || - Element.prototype.msMatchesSelector || - Element.prototype.oMatchesSelector || - Element.prototype.webkitMatchesSelector || - function(s) { - var matches = (this.document || this.ownerDocument).querySelectorAll(s), - i = matches.length; - while (--i >= 0 && matches.item(i) !== this) {} - return i > -1; - }; -} - -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from -// Production steps of ECMA-262, Edition 6, 22.1.2.1 -if (!Array.from) { - Array.from = (function () { - var toStr = Object.prototype.toString; - var isCallable = function (fn) { - return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; - }; - var toInteger = function (value) { - var number = Number(value); - if (isNaN(number)) { return 0; } - if (number === 0 || !isFinite(number)) { return number; } - return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); - }; - var maxSafeInteger = Math.pow(2, 53) - 1; - var toLength = function (value) { - var len = toInteger(value); - return Math.min(Math.max(len, 0), maxSafeInteger); - }; - - // The length property of the from method is 1. - return function from(arrayLike/*, mapFn, thisArg */) { - // 1. Let C be the this value. - var C = this; - - // 2. Let items be ToObject(arrayLike). - var items = Object(arrayLike); - - // 3. ReturnIfAbrupt(items). - if (arrayLike == null) { - throw new TypeError("Array.from requires an array-like object - not null or undefined"); - } - - // 4. If mapfn is undefined, then let mapping be false. - var mapFn = arguments.length > 1 ? arguments[1] : void undefined; - var T; - if (typeof mapFn !== 'undefined') { - // 5. else - // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. - if (!isCallable(mapFn)) { - throw new TypeError('Array.from: when provided, the second argument must be a function'); - } - - // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. - if (arguments.length > 2) { - T = arguments[2]; - } - } - - // 10. Let lenValue be Get(items, "length"). - // 11. Let len be ToLength(lenValue). - var len = toLength(items.length); - - // 13. If IsConstructor(C) is true, then - // 13. a. Let A be the result of calling the [[Construct]] internal method - // of C with an argument list containing the single item len. - // 14. a. Else, Let A be ArrayCreate(len). - var A = isCallable(C) ? Object(new C(len)) : new Array(len); - - // 16. Let k be 0. - var k = 0; - // 17. Repeat, while k < len… (also steps a - h) - var kValue; - while (k < len) { - kValue = items[k]; - if (mapFn) { - A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); - } else { - A[k] = kValue; - } - k += 1; - } - // 18. Let putStatus be Put(A, "length", len, true). - A.length = len; - // 20. Return A. - return A; - }; - }()); -} \ No newline at end of file diff --git a/src/gridstack.scss b/src/gridstack.scss index 5f7b37074..6700d7477 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,9 +1,8 @@ /** - * gridstack SASS styles 11.0.1 + * gridstack SASS styles 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ -$columns: 12 !default; $animation_speed: .3s !default; @function fixed($float) { @@ -41,6 +40,9 @@ $animation_speed: .3s !default; .grid-stack > .grid-stack-item { position: absolute; padding: 0; + top: 0; left: 0; // some default to reduce at least first row/column inline styles + width: var(--gs-column-width); // reduce 1x1 items inline styles + height: var(--gs-cell-height); > .grid-stack-item-content { margin: 0; @@ -54,6 +56,16 @@ $animation_speed: .3s !default; } } +.grid-stack { + > .grid-stack-item > .grid-stack-item-content, + > .grid-stack-placeholder > .placeholder-content { + top: var(--gs-item-margin-top); + right: var(--gs-item-margin-right); + bottom: var(--gs-item-margin-bottom); + left: var(--gs-item-margin-left); + } +} + .grid-stack-item { > .ui-resizable-handle { position: absolute; @@ -76,27 +88,27 @@ $animation_speed: .3s !default; } > .ui-resizable-ne { - @include vendor(transform, translate(0, 10px) rotate(45deg)); + @include vendor(transform, rotate(45deg)); } > .ui-resizable-sw { @include vendor(transform, rotate(45deg)); } > .ui-resizable-nw { - @include vendor(transform, translate(0, 10px) rotate(-45deg)); + @include vendor(transform, rotate(-45deg)); } > .ui-resizable-se { @include vendor(transform, rotate(-45deg)); } - > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: 0; } - > .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; } - > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: 0; } - > .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; } - > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px;} - > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; } - > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px;} - > .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; } + > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); } + > .ui-resizable-n { cursor: n-resize; height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; } + > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); } + > .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; right: var(--gs-item-margin-right);} + > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); right: var(--gs-item-margin-right); } + > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; } + > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); } + > .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); } &.ui-draggable-dragging { &> .ui-resizable-handle { @@ -106,7 +118,6 @@ $animation_speed: .3s !default; &.ui-draggable-dragging { will-change: left, top; - cursor: move; } &.ui-resizable-resizing { @@ -144,14 +155,3 @@ $animation_speed: .3s !default; left: 0%; } -.gs-#{$columns} > .grid-stack-item { - width: fixed(calc(100% / $columns)); - @for $i from 1 through ($columns - 1) { - &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); } - &[gs-w='#{$i + 1}'] { width: fixed(calc(100% / $columns) * ($i + 1)); } - } -} - -.gs-1 > .grid-stack-item { - width: 100%; -} diff --git a/src/gridstack.ts b/src/gridstack.ts index 30a862fd2..39096f5d8 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1,5 +1,5 @@ /*! - * GridStack 11.0.1 + * GridStack 12.2.1 * https://gridstackjs.com/ * * Copyright (c) 2021-2024 Alain Dumesny @@ -23,7 +23,7 @@ import { import { DDGridStack } from './dd-gridstack'; import { isTouch } from './dd-touch'; import { DDManager } from './dd-manager'; -import { DDElementHost } from './dd-element';/** global instance */ +import { DDElementHost } from './dd-element'; /** global instance */ const dd = new DDGridStack; // export all dependent file as well to make it easier for users to just import the main file @@ -51,26 +51,11 @@ export interface CellPosition { y: number; } -interface GridCSSStyleSheet extends CSSStyleSheet { - _max?: number; // internal tracker of the max # of rows we created -} - // extend with internal fields we need - TODO: move other items in here interface InternalGridStackOptions extends GridStackOptions { _alwaysShowResizeHandle?: true | false | 'mobile'; // so we can restore for save } -// temporary legacy (<10.x) support -interface OldOneColumnOpts extends GridStackOptions { - /** disables the onColumnMode when the grid width is less (default?: false) */ - disableOneColumnMode?: boolean; - /** minimal width before grid will be shown in one column mode (default?: 768) */ - oneColumnSize?: number; - /** set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column - layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false) */ - oneColumnModeDomSort?: boolean; -} - /** * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid. * Note: your grid elements MUST have the following classes for the CSS layout to work: @@ -202,6 +187,9 @@ export class GridStack { */ public static renderCB?: RenderFcn = (el: HTMLElement, w: GridStackNode) => { if (el && w?.content) el.textContent = w.content; }; + /** called after a widget has been updated (eg: load() into an existing list of children) so application can do extra work */ + public static updateCB?: (w: GridStackNode) => void; + /** callback to use for resizeToContent instead of the built in one */ public static resizeToContentCB?: ResizeToContentFcn; /** parent class for sizing content. defaults to '.grid-stack-item-content' */ @@ -219,36 +207,32 @@ export class GridStack { /** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */ public parentGridNode?: GridStackNode; + /** time to wait for animation (if enabled) to be done so content sizing can happen */ + public animationDelay = 300 + 10; + protected static engineClass: typeof GridStackEngine; protected resizeObserver: ResizeObserver; - /** @internal unique class name for our generated CSS style sheet */ - protected _styleSheetClass?: string; /** @internal true if we got created by drag over gesture, so we can removed on drag out (temporary) */ public _isTemp?: boolean; /** @internal create placeholder DIV as needed */ public get placeholder(): GridItemHTMLElement { if (!this._placeholder) { - const placeholderChild = document.createElement('div'); // child so padding match item-content - placeholderChild.className = 'placeholder-content'; + this._placeholder = Utils.createDiv([this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass]); + const placeholderChild = Utils.createDiv(['placeholder-content'], this._placeholder); if (this.opts.placeholderText) { placeholderChild.textContent = this.opts.placeholderText; } - this._placeholder = document.createElement('div'); - this._placeholder.classList.add(this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass); - this.placeholder.appendChild(placeholderChild); } return this._placeholder; } /** @internal */ - protected _placeholder: HTMLElement; + protected _placeholder: GridItemHTMLElement; /** @internal prevent cached layouts from being updated when loading into small column layouts */ protected _ignoreLayoutsNodeChange: boolean; /** @internal */ public _gsEventHandler = {}; - /** @internal */ - protected _styles: GridCSSStyleSheet; /** @internal flag to keep cells square during resize */ protected _isAutoCellHeight: boolean; /** @internal limit auto cell resizing method */ @@ -261,6 +245,7 @@ export class GridStack { protected _autoColumn?: boolean; /** @internal meant to store the scale of the active grid */ protected dragTransform: DragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 }; + protected responseLayout: ColumnOptions; private _skipInitialResize: boolean; /** @@ -270,7 +255,7 @@ export class GridStack { */ public constructor(public el: GridHTMLElement, public opts: GridStackOptions = {}) { el.gridstack = this; - opts = opts || {}; // handles null/undefined/0 + this.opts = opts = opts || {}; // handles null/undefined/0 if (!el.classList.contains('grid-stack')) { this.el.classList.add('grid-stack'); @@ -291,37 +276,18 @@ export class GridStack { if (opts.alwaysShowResizeHandle !== undefined) { (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle; } - let bk = opts.columnOpts?.breakpoints; - // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over - const oldOpts: OldOneColumnOpts = opts; - if (oldOpts.oneColumnModeDomSort) { - delete oldOpts.oneColumnModeDomSort; - console.log('warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.') - } - if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) { - const oneSize = oldOpts.oneColumnSize || 768; - delete oldOpts.oneColumnSize; - delete oldOpts.disableOneColumnMode; - opts.columnOpts = opts.columnOpts || {}; - bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || []; - let oneColumn = bk.find(b => b.c === 1); - if (!oneColumn) { - oneColumn = { c: 1, w: oneSize }; - bk.push(oneColumn, { c: 12, w: oneSize + 1 }); - } else oneColumn.w = oneSize; - } - //...end LEGACY + // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize) const resp = opts.columnOpts; if (resp) { - if (!resp.columnWidth && !resp.breakpoints?.length) { + const bk = resp.breakpoints; + if (!resp.columnWidth && !bk?.length) { delete opts.columnOpts; - bk = undefined; } else { resp.columnMax = resp.columnMax || 12; + if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0)); } } - if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0)); // elements DOM attributes override any passed options (like CSS style) - merge the two together const defaults: GridStackOptions = { @@ -330,6 +296,7 @@ export class GridStack { minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow, maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow, staticGrid: Utils.toBool(el.getAttribute('gs-static')) || gridDefaults.staticGrid, + sizeToContent: Utils.toBool(el.getAttribute('gs-size-to-content')) || undefined, draggable: { handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle, }, @@ -345,9 +312,9 @@ export class GridStack { opts = Utils.defaults(opts, defaults); this._initMargin(); // part of settings defaults... - // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column) + // Now check if we're loading into !12 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column) this.checkDynamicColumn(); - this.el.classList.add('gs-' + opts.column); + this._updateColumnVar(opts); if (opts.rtl === 'auto') { opts.rtl = (el.style.direction === 'rtl'); @@ -369,14 +336,16 @@ export class GridStack { this._isAutoCellHeight = (opts.cellHeight === 'auto'); if (this._isAutoCellHeight || opts.cellHeight === 'initial') { // make the cell content square initially (will use resize/column event to keep it square) - this.cellHeight(undefined, false); + this.cellHeight(undefined); } else { // append unit if any are set if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) { opts.cellHeight = opts.cellHeight + opts.cellHeightUnit; delete opts.cellHeightUnit; } - this.cellHeight(opts.cellHeight, false); + const val = opts.cellHeight; + delete opts.cellHeight; // force initial cellHeight() call to set the value + this.cellHeight(val); } // see if we need to adjust auto-hide @@ -384,9 +353,6 @@ export class GridStack { opts.alwaysShowResizeHandle = isTouch; } - this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++; - this.el.classList.add(this._styleSheetClass); - this._setStaticClass(); const engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine; @@ -395,8 +361,6 @@ export class GridStack { float: opts.float, maxRow: opts.maxRow, onChange: (cbNodes) => { - let maxH = 0; - this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) }); cbNodes.forEach(n => { const el = n.el; if (!el) return; @@ -407,13 +371,10 @@ export class GridStack { this._writePosAttr(el, n); } }); - this._updateStyles(false, maxH); // false = don't recreate, just append if need be + this._updateContainerHeight(); } }); - // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly - this._updateStyles(false, 0); - if (opts.auto) { this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check... this.engine._loading = true; // loading collision check @@ -429,7 +390,6 @@ export class GridStack { if (children.length) this.load(children); // don't load empty } - // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB this.setAnimation(); // dynamic grids require pausing during drag to detect over to nest vs push @@ -441,6 +401,11 @@ export class GridStack { this._updateResizeEvent(); } + private _updateColumnVar(opts: GridStackOptions = this.opts): void { + this.el.classList.add('gs-' + opts.column); + if (typeof opts.column === 'number') this.el.style.setProperty('--gs-column-width', `${100/opts.column}%`); + } + /** * add a new widget and returns it. * @@ -453,7 +418,6 @@ export class GridStack { * grid.addWidget({w: 3, content: 'hello'}); * * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead. - * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget */ public addWidget(w: GridStackWidget): GridItemHTMLElement { if (typeof w === 'string') { console.error('V11: GridStack.addWidget() does not support string anymore. see #2736'); return; } @@ -467,7 +431,7 @@ export class GridStack { } else if (GridStack.addRemoveCB) { el = GridStack.addRemoveCB(this.el, w, true, false); } else { - el = Utils.createWidgetDivs(this.opts.itemClass, node); + el = this.createWidgetDivs(node); } if (!el) return; @@ -482,7 +446,7 @@ export class GridStack { const domAttr = this._readAttr(el); Utils.defaults(w, domAttr); this.engine.prepareNode(w); - this._writeAttr(el, w); + // this._writeAttr(el, w); why write possibly incorrect values back when makeWidget() will ? this.el.appendChild(el); @@ -491,6 +455,26 @@ export class GridStack { return el; } + /** create the default grid item divs, and content (possibly lazy loaded) by using GridStack.renderCB() */ + public createWidgetDivs(n: GridStackNode): HTMLElement { + const el = Utils.createDiv(['grid-stack-item', this.opts.itemClass]); + const cont = Utils.createDiv(['grid-stack-item-content'], el); + + if (Utils.lazyLoad(n)) { + if (!n.visibleObservable) { + n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { + n.visibleObservable?.disconnect(); + delete n.visibleObservable; + GridStack.renderCB(cont, n); + n.grid?.prepareDragDrop(n.el); + }}); + window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes + } + } else GridStack.renderCB(cont, n); + + return el; + } + /** * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them * from the parent's subGrid options. @@ -515,7 +499,12 @@ export class GridStack { grid = grid.parentGridNode?.grid; } //... and set the create options - ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) }); + ops = Utils.cloneDeep({ + // by default sub-grid inherit from us | parent, other than id, children, etc... + ...this.opts, id: undefined, children: undefined, column: 'auto', columnOpts: undefined, layout: 'list', subGridOpts: undefined, + ...(subGridTemplate || {}), + ...(ops || node.subGridOpts || {}) + }); node.subGridOpts = ops; // if column special case it set, remember that flag and set default @@ -546,7 +535,7 @@ export class GridStack { newItem.appendChild(content); content = Utils.createDiv(['grid-stack-item-content'], node.el); } - this._prepareDragDropByNode(node); // ... and restore original D&D + this.prepareDragDrop(node.el); // ... and restore original D&D } // if we're adding an additional item, make the container large enough to have them both @@ -577,6 +566,10 @@ export class GridStack { subGrid.makeWidget(node.el, node); } } + + // if sizedToContent, we need to re-calc the size of ourself + this.resizeToContentCheck(false, node); + return subGrid; } @@ -670,8 +663,8 @@ export class GridStack { /** * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there. * - * @param layout list of widgets definition to update/create - * @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving + * @param items list of widgets definition to update/create + * @param addRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving * the user control of insertion. * * @example @@ -687,13 +680,22 @@ export class GridStack { // sort items. those without coord will be appended last items = Utils.sort(items); + this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = true; // skip layout update + // if we're loading a layout into for example 1 column and items don't fit, make sure to save // the original wanted layout so we can scale back up correctly #1471 let maxColumn = 0; items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) }); + if (maxColumn > this.engine.defaultColumn) this.engine.defaultColumn = maxColumn; if (maxColumn > column) { - this._ignoreLayoutsNodeChange = true; // skip layout update - this.engine.cacheLayout(items, maxColumn, true); + // if we're loading (from empty) into a smaller column, check for special responsive layout + if (this.engine.nodes.length === 0 && this.responseLayout) { + this.engine.nodes = items; + this.engine.columnChanged(maxColumn, column, this.responseLayout); + items = this.engine.nodes; + this.engine.nodes = []; + delete this.responseLayout; + } else this.engine.cacheLayout(items, maxColumn, true); } // if given a different callback, temporally set it as global option so creating will use it @@ -705,7 +707,8 @@ export class GridStack { // if we are loading from empty temporarily remove animation const blank = !this.engine.nodes.length; - if (blank) this.setAnimation(false); + const noAnim = blank && this.opts.animate; + if (noAnim) this.setAnimation(false); // see if any items are missing from new layout and need to be removed first if (!blank && addRemove) { @@ -744,11 +747,13 @@ export class GridStack { // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now this.engine.nodes.push(item); - if (Utils.samePos(item, w)) { + if (Utils.samePos(item, w) && this.engine.nodes.length > 1) { this.moveNode(item, { ...w, forceCollide: true }); + Utils.copyPos(w, item); // use possily updated values before update() is called next (no-op since already moved) } this.update(item.el, w); + if (w.subGridOpts?.children) { // update any sub grid as well const sub = item.el.querySelector('.grid-stack') as GridHTMLElement; if (sub && sub.gridstack) { @@ -766,9 +771,9 @@ export class GridStack { // after commit, clear that flag delete this._ignoreLayoutsNodeChange; + delete this.engine.skipCacheUpdate; prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB; - // delay adding animation back - if (blank && this.opts?.animate) this.setAnimation(this.opts.animate, true); + if (noAnim) this.setAnimation(true, true); // delay adding animation back return this; } @@ -827,17 +832,16 @@ export class GridStack { * * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin), * if pass 0 the CSS will be generated by the application instead. - * @param update (Optional) if false, styles will not be updated * * @example * grid.cellHeight(100); // same as 100px * grid.cellHeight('70px'); * grid.cellHeight(grid.cellWidth() * 1.2); */ - public cellHeight(val?: numberOrString, update = true): GridStack { + public cellHeight(val?: numberOrString): GridStack { // if not called internally, check if we're changing mode - if (update && val !== undefined) { + if (val !== undefined) { if (this._isAutoCellHeight !== (val === 'auto')) { this._isAutoCellHeight = (val === 'auto'); this._updateResizeEvent(); @@ -859,11 +863,11 @@ export class GridStack { this.opts.cellHeightUnit = data.unit; this.opts.cellHeight = data.h; + // finally update var and container + this.el.style.setProperty('--gs-cell-height', `${this.opts.cellHeight}${this.opts.cellHeightUnit}`); + this._updateContainerHeight(); this.resizeToContentCheck(); - if (update) { - this._updateStyles(true); // true = force re-create for current # of rows - } return this; } @@ -918,8 +922,6 @@ export class GridStack { /** * set the number of columns in the grid. Will update existing widgets to conform to new number of columns, * as well as cache the original layout so you can revert back to previous positions without loss. - * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11], - * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns) * @param column - Integer > 0 (default 12). * @param layout specify the type of re-layout that will happen (position, size, etc...). * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column @@ -929,16 +931,18 @@ export class GridStack { const oldColumn = this.getColumn(); this.opts.column = column; - if (!this.engine) return this; // called in constructor, noting else to do + if (!this.engine) { + // called in constructor, noting else to do but remember that breakpoint layout + this.responseLayout = layout; + return this; + } this.engine.column = column; this.el.classList.remove('gs-' + oldColumn); - this.el.classList.add('gs-' + column); + this._updateColumnVar(); - // update the items now, checking if we have a custom children layout - /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children; - if (newChildren) this.load(newChildren); - else*/ this.engine.columnChanged(oldColumn, column, layout); + // update the items now + this.engine.columnChanged(oldColumn, column, layout); if (this._isAutoCellHeight) this.cellHeight(); this.resizeToContentCheck(true); // wait for width resizing @@ -962,6 +966,9 @@ export class GridStack { .filter((el: HTMLElement) => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[]; } + /** true if changeCB should be ignored due to column change, sizeToContent, loading, etc... which caller can ignore for dirty flag case */ + public isIgnoreChangeCB(): boolean { return this._ignoreLayoutsNodeChange; } + /** * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members. * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`). @@ -974,15 +981,14 @@ export class GridStack { this.setAnimation(false); if (!removeDOM) { this.removeAll(removeDOM); - this.el.classList.remove(this._styleSheetClass); this.el.removeAttribute('gs-current-row'); } else { this.el.parentNode.removeChild(this.el); } - this._removeStylesheet(); if (this.parentGridNode) delete this.parentGridNode.subGrid; delete this.parentGridNode; delete this.opts; + delete this._placeholder?.gridstackNode; delete this._placeholder; delete this.engine; delete this.el.gridstack; // remove circular dependency that would prevent a freeing @@ -1039,7 +1045,7 @@ export class GridStack { /** returns the current number of rows, which will be at least `minRow` if set */ public getRow(): number { - return Math.max(this.engine.getRow(), this.opts.minRow); + return Math.max(this.engine.getRow(), this.opts.minRow || 0); } /** @@ -1062,14 +1068,13 @@ export class GridStack { * * @example * const grid = GridStack.init(); - * grid.el.appendChild('

'); - * grid.el.appendChild('

'); + * grid.el.innerHtml = '

'; * grid.makeWidget('1'); * grid.makeWidget('2', {w:2, content: 'hello'}); */ public makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement { const el = GridStack.getElement(els); - if (!el) return; + if (!el || el.gridstackNode) return el; if (!el.parentElement) this.el.appendChild(el); this._prepareElement(el, true, options); const node = el.gridstackNode; @@ -1083,12 +1088,13 @@ export class GridStack { // if we're adding an item into 1 column make sure // we don't override the larger 12 column layout that was already saved. #1985 - if (this.opts.column === 1) { - this._ignoreLayoutsNodeChange = true; + let resetIgnoreLayoutsNodeChange: boolean; + if (this.opts.column === 1 && !this._ignoreLayoutsNodeChange) { + resetIgnoreLayoutsNodeChange = this._ignoreLayoutsNodeChange = true; } this._triggerAddEvent(); this._triggerChangeEvent(); - delete this._ignoreLayoutsNodeChange; + if (resetIgnoreLayoutsNodeChange) delete this._ignoreLayoutsNodeChange; return el; } @@ -1179,7 +1185,7 @@ export class GridStack { */ public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack { if (!els) { console.error('Error: GridStack.removeWidget(undefined) called'); return this; } - + GridStack.getElements(els).forEach(el => { if (el.parentElement && el.parentElement !== this.el) return; // not our child! let node = el.gridstackNode; @@ -1243,6 +1249,7 @@ export class GridStack { } else { this.el.classList.remove('grid-stack-animate'); } + this.opts.animate = doAnimate; return this; } @@ -1262,13 +1269,49 @@ export class GridStack { this._setupRemoveDrop(); this._setupAcceptWidget(); this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); // either delete or init Drag&drop + this.prepareDragDrop(n.el); // either delete or init Drag&drop if (n.subGrid && recurse) n.subGrid.setStatic(val, updateClass, recurse); }); if (updateClass) { this._setStaticClass(); } return this; } + /** + * Updates the passed in options on the grid (similar to update(widget) for for the grid options). + * @param options PARTIAL grid options to update - only items specified will be updated. + * NOTE: not all options updating are currently supported (lot of code, unlikely to change) + */ + public updateOptions(o: GridStackOptions): GridStack { + const opts = this.opts; + if (o === opts) return this; // nothing to do + if (o.acceptWidgets !== undefined) { opts.acceptWidgets = o.acceptWidgets; this._setupAcceptWidget(); } + if (o.animate !== undefined) this.setAnimation(o.animate); + if (o.cellHeight) this.cellHeight(o.cellHeight); + if (o.class !== undefined && o.class !== opts.class) { if (opts.class) this.el.classList.remove(opts.class); if (o.class) this.el.classList.add(o.class); } + // responsive column take over actual count (keep what we have now) + if (o.columnOpts) { + this.opts.columnOpts = o.columnOpts; + this.checkDynamicColumn(); + } else if (o.columnOpts === null && this.opts.columnOpts) { + delete this.opts.columnOpts; + this._updateResizeEvent(); + } else if (typeof(o.column) === 'number') this.column(o.column); + if (o.margin !== undefined) this.margin(o.margin); + if (o.staticGrid !== undefined) this.setStatic(o.staticGrid); + if (o.disableDrag !== undefined && !o.staticGrid) this.enableMove(!o.disableDrag); + if (o.disableResize !== undefined && !o.staticGrid) this.enableResize(!o.disableResize); + if (o.float !== undefined) this.float(o.float); + if (o.row !== undefined) { opts.minRow = opts.maxRow = opts.row = o.row; } + else { + if (o.minRow !== undefined) opts.minRow = o.minRow; + if (o.maxRow !== undefined) opts.maxRow = o.maxRow; + } + if (o.children?.length) this.load(o.children); + // TBD if we have a real need for these (more complex code) + // alwaysShowResizeHandle, draggable, handle, handleClass, itemClass, layout, placeholderClass, placeholderText, resizable, removable, row,... + return this; + } + /** * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed. * @param els widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted) @@ -1276,23 +1319,12 @@ export class GridStack { */ public update(els: GridStackElement, opt: GridStackWidget): GridStack { - // support legacy call for now ? - if (arguments.length > 2) { - console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon'); - // eslint-disable-next-line prefer-rest-params - const a = arguments; - let i = 1; - opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] }; - return this.update(els, opt); - } - GridStack.getElements(els).forEach(el => { const n = el?.gridstackNode; if (!n) return; - const w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items + const w = {...Utils.copyPos({}, n), ...Utils.cloneDeep(opt)}; // make a copy we can modify in case they re-use it or multiple items this.engine.nodeBoundFix(w); delete w.autoPosition; - delete w.id; // move/resize widget if anything changed const keys = ['x', 'y', 'w', 'h']; @@ -1313,11 +1345,12 @@ export class GridStack { if (w.content !== undefined) { const itemContent = el.querySelector('.grid-stack-item-content') as HTMLElement; if (itemContent && itemContent.textContent !== w.content) { + n.content = w.content; GridStack.renderCB(itemContent, w); // restore any sub-grid back if (n.subGrid?.el) { itemContent.appendChild(n.subGrid.el); - if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create + n.subGrid._updateContainerHeight(); } } delete w.content; @@ -1339,15 +1372,21 @@ export class GridStack { if (m) { const widthChanged = (m.w !== undefined && m.w !== n.w); this.moveNode(n, m); - this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width + if (widthChanged && n.subGrid) { + // if we're animating the client size hasn't changed yet, so force a change (not exact size) + n.subGrid.onResize(this.hasAnimationCSS() ? n.w : undefined); + } else { + this.resizeToContentCheck(widthChanged, n); + } delete n._orig; // clear out original position now that we moved #2669 } if (m || changed) { this._writeAttr(el, n); } if (ddChanged) { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); } + if (GridStack.updateCB) GridStack.updateCB(n); // call user callback so they know widget got updated }); return this; @@ -1389,8 +1428,11 @@ export class GridStack { const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish) let wantedH: number; if (n.subGrid) { - // sub-grid - use their actual row count * their cell height + // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text) wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true); + const subRec = n.subGrid.el.getBoundingClientRect(); + const parentRec = el.getBoundingClientRect(); + wantedH += subRec.top - parentRec.top; } else if (n.subGridOpts?.children?.length) { // not sub-grid just yet (case above) wait until we do return; @@ -1457,7 +1499,7 @@ export class GridStack { */ public margin(value: numberOrString): GridStack { const isMultiValue = (typeof value === 'string' && value.split(' ').length > 1); - // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle) + // check if we can skip... won't check if multi values (too much hassle) if (!isMultiValue) { const data = Utils.parseHeight(value); if (this.opts.marginUnit === data.unit && this.opts.margin === data.h) return; @@ -1467,8 +1509,6 @@ export class GridStack { this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined; this._initMargin(); - this._updateStyles(true); // true = force re-create - return this; } @@ -1543,82 +1583,11 @@ export class GridStack { /** @internal */ protected _triggerEvent(type: string, data?: GridStackNode[]): GridStack { const event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type); - this.el.dispatchEvent(event); - return this; - } - - /** @internal called to delete the current dynamic style sheet used for our layout */ - protected _removeStylesheet(): GridStack { - - if (this._styles) { - const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement; - Utils.removeStylesheet(this._styleSheetClass, styleLocation); - delete this._styles; - } - return this; - } - - /** @internal updated/create the CSS styles for row based layout and initial margin setting */ - protected _updateStyles(forceUpdate = false, maxH?: number): GridStack { - // call to delete existing one if we change cellHeight / margin - if (forceUpdate) { - this._removeStylesheet(); - } - - if (maxH === undefined) maxH = this.getRow(); - this._updateContainerHeight(); - - // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ?? - if (this.opts.cellHeight === 0) { - return this; - } - - const cellHeight = this.opts.cellHeight as number; - const cellHeightUnit = this.opts.cellHeightUnit; - const prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`; - - // create one as needed - if (!this._styles) { - // insert style to parent (instead of 'head' by default) to support WebComponent - const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement; - this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, { - nonce: this.opts.nonce, - }); - if (!this._styles) return this; - this._styles._max = 0; - - // these are done once only - Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`); - // content margins - const top: string = this.opts.marginTop + this.opts.marginUnit; - const bottom: string = this.opts.marginBottom + this.opts.marginUnit; - const right: string = this.opts.marginRight + this.opts.marginUnit; - const left: string = this.opts.marginLeft + this.opts.marginUnit; - const content = `${prefix} > .grid-stack-item-content`; - const placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`; - Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`); - Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`); - // resize handles offset (to match margin) - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`); - Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`); - } - - // now update the height specific fields - maxH = maxH || this._styles._max; - if (maxH > this._styles._max) { - const getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit; - for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1 - Utils.addCSSRule(this._styles, `${prefix}[gs-y="${i}"]`, `top: ${getHeight(i)}`); - Utils.addCSSRule(this._styles, `${prefix}[gs-h="${i + 1}"]`, `height: ${getHeight(i + 1)}`); // start at 2 - } - this._styles._max = maxH; - } + // check if we're nested, and if so call the outermost grid to trigger the event + // eslint-disable-next-line @typescript-eslint/no-this-alias + let grid: GridStack = this; + while (grid.parentGridNode) grid = grid.parentGridNode.grid; + grid.el.dispatchEvent(event); return this; } @@ -1651,7 +1620,7 @@ export class GridStack { } // if we're a nested grid inside an sizeToContent item, tell it to resize itself too - if (parent && !parent.grid.engine.batchMode && Utils.shouldSizeToContent(parent)) { + if (parent && Utils.shouldSizeToContent(parent)) { parent.grid.resizeToContentCBCheck(parent.el); } @@ -1673,21 +1642,31 @@ export class GridStack { sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content'); if (sizeToContent) this.resizeToContentCheck(false, node); - this._prepareDragDropByNode(node); + if (!Utils.lazyLoad(node)) this.prepareDragDrop(node.el); + return this; } - /** @internal call to write position x,y,w,h attributes back to element */ - protected _writePosAttr(el: HTMLElement, n: GridStackPosition): GridStack { - if (n.x !== undefined && n.x !== null) { el.setAttribute('gs-x', String(n.x)); } - if (n.y !== undefined && n.y !== null) { el.setAttribute('gs-y', String(n.y)); } + /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */ + protected _writePosAttr(el: HTMLElement, n: GridStackNode): GridStack { + // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder + if ((!n._moving && !n._resizing) || this._placeholder === el) { + // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars + el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null; + el.style.left = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null; + el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null; + el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null; + } + // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS + n.x > 0 ? el.setAttribute('gs-x', String(n.x)) : el.removeAttribute('gs-x'); + n.y > 0 ? el.setAttribute('gs-y', String(n.y)) : el.removeAttribute('gs-y'); n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w'); n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h'); return this; } /** @internal call to write any default attributes back to element */ - protected _writeAttr(el: HTMLElement, node: GridStackWidget): GridStack { + protected _writeAttr(el: HTMLElement, node: GridStackNode): GridStack { if (!node) return this; this._writePosAttr(el, node); @@ -1697,6 +1676,7 @@ export class GridStack { noMove: 'gs-no-move', locked: 'gs-locked', id: 'gs-id', + sizeToContent: 'gs-size-to-content', }; for (const key in attrs) { if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway @@ -1719,6 +1699,11 @@ export class GridStack { n.noResize = Utils.toBool(el.getAttribute('gs-no-resize')); n.noMove = Utils.toBool(el.getAttribute('gs-no-move')); n.locked = Utils.toBool(el.getAttribute('gs-locked')); + const attr = el.getAttribute('gs-size-to-content'); + if (attr) { + if (attr === 'true' || attr === 'false') n.sizeToContent = Utils.toBool(attr); + else n.sizeToContent = parseInt(attr, 10); + } n.id = el.getAttribute('gs-id'); // read but never written out @@ -1737,10 +1722,10 @@ export class GridStack { if (n.minH) el.removeAttribute('gs-min-h'); } - // remove any key not found (null or false which is default) + // remove any key not found (null or false which is default, unless sizeToContent=false override) for (const key in n) { if (!n.hasOwnProperty(key)) return; - if (!n[key] && n[key] !== 0) { // 0 can be valid value (x,y only really) + if (!n[key] && n[key] !== 0 && key !== 'gs-size-to-content') { // 0 can be valid value (x,y only really) delete n[key]; } } @@ -1768,11 +1753,11 @@ export class GridStack { * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square) * or `sizeToContent` gridItem options. */ - public onResize(): GridStack { - if (!this.el?.clientWidth) return; // return if we're gone or no size yet (will get called again) - if (this.prevWidth === this.el.clientWidth) return; // no-op - this.prevWidth = this.el.clientWidth - // console.log('onResize ', this.el.clientWidth); + public onResize(clientWidth = this.el?.clientWidth): GridStack { + if (!clientWidth) return; // return if we're gone or no size yet (will get called again) + if (this.prevWidth === clientWidth) return; // no-op + this.prevWidth = clientWidth + // console.log('onResize ', clientWidth); this.batchUpdate(); @@ -1780,7 +1765,7 @@ export class GridStack { let columnChanged = false; if (this._autoColumn && this.parentGridNode) { if (this.opts.column !== this.parentGridNode.w) { - this.column(this.parentGridNode.w, 'none'); + this.column(this.parentGridNode.w, this.opts.layout || 'list'); columnChanged = true; } } else { @@ -1810,7 +1795,7 @@ export class GridStack { // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ? - if (delay && this.hasAnimationCSS()) return setTimeout(() => this.resizeToContentCheck(false, n), 300 + 10); + if (delay && this.hasAnimationCSS()) return setTimeout(() => this.resizeToContentCheck(false, n), this.animationDelay); if (n) { if (Utils.shouldSizeToContent(n)) this.resizeToContentCBCheck(n.el); @@ -1820,7 +1805,9 @@ export class GridStack { nodes.forEach(n => { if (Utils.shouldSizeToContent(n)) this.resizeToContentCBCheck(n.el); }); + this._ignoreLayoutsNodeChange = true; // loop through each node will set/reset around each move, so set it here again this.batchUpdate(false); + this._ignoreLayoutsNodeChange = false; } // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize if (this._gsEventHandler['resizecontent']) this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes); @@ -1858,7 +1845,6 @@ export class GridStack { /** @internal initialize margin top/bottom/left/right and units */ protected _initMargin(): GridStack { - let data: HeightData; let margin = 0; @@ -1882,45 +1868,32 @@ export class GridStack { } // see if top/bottom/left/right need to be set as well - if (this.opts.marginTop === undefined) { - this.opts.marginTop = margin; - } else { - data = Utils.parseHeight(this.opts.marginTop); - this.opts.marginTop = data.h; - delete this.opts.margin; - } - - if (this.opts.marginBottom === undefined) { - this.opts.marginBottom = margin; - } else { - data = Utils.parseHeight(this.opts.marginBottom); - this.opts.marginBottom = data.h; - delete this.opts.margin; - } - - if (this.opts.marginRight === undefined) { - this.opts.marginRight = margin; - } else { - data = Utils.parseHeight(this.opts.marginRight); - this.opts.marginRight = data.h; - delete this.opts.margin; - } - - if (this.opts.marginLeft === undefined) { - this.opts.marginLeft = margin; - } else { - data = Utils.parseHeight(this.opts.marginLeft); - this.opts.marginLeft = data.h; - delete this.opts.margin; - } + const keys = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']; + keys.forEach(k => { + if (this.opts[k] === undefined) { + this.opts[k] = margin; + } else { + data = Utils.parseHeight(this.opts[k]); + this.opts[k] = data.h; + delete this.opts.margin; + } + }); this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead... if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) { this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin() } + + // finally Update the CSS margin variables (inside the cell height) */ + const style = this.el.style; + style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`); + style.setProperty('--gs-item-margin-bottom', `${this.opts.marginBottom}${this.opts.marginUnit}`); + style.setProperty('--gs-item-margin-right', `${this.opts.marginRight}${this.opts.marginUnit}`); + style.setProperty('--gs-item-margin-left', `${this.opts.marginLeft}${this.opts.marginUnit}`); + return this; } - static GDRev = '11.0.1'; + static GDRev = '12.2.1'; /* =========================================================================================== * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts @@ -1967,7 +1940,7 @@ export class GridStack { const n = el.gridstackNode; if (!n) return; val ? delete n.noMove : n.noMove = true; - this._prepareDragDropByNode(n); // init DD if need be, and adjust + this.prepareDragDrop(n.el); // init DD if need be, and adjust }); return this; } @@ -1983,7 +1956,7 @@ export class GridStack { const n = el.gridstackNode; if (!n) return; val ? delete n.noResize : n.noResize = true; - this._prepareDragDropByNode(n); // init DD if need be, and adjust + this.prepareDragDrop(n.el); // init DD if need be, and adjust }); return this; } @@ -2030,7 +2003,7 @@ export class GridStack { if (this.opts.staticGrid) return this; // can't move a static grid! doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658 this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); if (n.subGrid && recurse) n.subGrid.enableMove(doEnable, recurse); }); return this; @@ -2044,12 +2017,28 @@ export class GridStack { if (this.opts.staticGrid) return this; // can't size a static grid! doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658 this.engine.nodes.forEach(n => { - this._prepareDragDropByNode(n); + this.prepareDragDrop(n.el); if (n.subGrid && recurse) n.subGrid.enableResize(doEnable, recurse); }); return this; } + /** @internal call when drag (and drop) needs to be cancelled (Esc key) */ + public cancelDrag() { + const n = this._placeholder?.gridstackNode; + if (!n) return; + if (n._isExternal) { + // remove any newly inserted nodes (from outside) + n._isAboutToRemove = true; + this.engine.removeNode(n); + } else if (n._isAboutToRemove) { + // restore any temp removed (dragged over trash) + GridStack._itemRemoving(n.el, false); + } + + this.engine.restoreInitial(); + } + /** @internal removes any drag&drop present (called during destroy) */ protected _removeDD(el: DDElementHost): GridStack { dd.draggable(el, 'destroy').resizable(el, 'destroy'); @@ -2162,6 +2151,12 @@ export class GridStack { return false; // prevent parent from receiving msg (which may be a grid as well) } + // If sidebar item, restore the sidebar node size to ensure consistent behavior when dragging between grids + if (node?._sidebarOrig) { + node.w = node._sidebarOrig.w; + node.h = node._sidebarOrig.h; + } + // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now if (node?.grid && node.grid !== this && !node._temporaryRemoved) { // console.log('dropover without leave'); // TEST @@ -2174,17 +2169,21 @@ export class GridStack { cellWidth = this.cellWidth(); cellHeight = this.getCellHeight(true); - // sidebar items: load any element attributes if we don't have a node + // sidebar items: load any element attributes if we don't have a node on first enter from the sidebar if (!node) { - if (helper.hasAttribute('gridstacknode')) { + const attr = helper.getAttribute('data-gs-widget') || helper.getAttribute('gridstacknode'); // TBD: temp support for old V11.0.0 attribute + if (attr) { try { - node = JSON.parse(helper.getAttribute('gridstacknode')); + node = JSON.parse(attr); } catch (error) { - console.error("Gridstack dropover: Bad JSON format: ", helper.getAttribute('gridstacknode')); + console.error("Gridstack dropover: Bad JSON format: ", attr); } + helper.removeAttribute('data-gs-widget'); helper.removeAttribute('gridstacknode'); } if (!node) node = this._readAttr(helper); // used to pass false for #2354, but now we clone top level node + // On first grid enter from sidebar, set the initial sidebar item size properties for the node + node._sidebarOrig = { w: node.w, h: node.h } } if (!node.grid) { // sidebar item if (!node.el) node = {...node}; // clone first time we're coming from sidebar (since 'clone' doesn't copy vars) @@ -2253,10 +2252,13 @@ export class GridStack { const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419 const wasSidebar = el !== helper; this.placeholder.remove(); + delete this.placeholder.gridstackNode; // disable animation when replacing a placeholder (already positioned) with actual content - const noAnim = wasAdded && this.opts.animate; - if (noAnim) this.setAnimation(false); + if (wasAdded && this.opts.animate) { + this.setAnimation(false); + this.setAnimation(true, true); // delay adding back + } // notify previous grid of removal // console.log('drop delete _gridstackNodeOrig') // TEST @@ -2306,7 +2308,6 @@ export class GridStack { this.resizeToContentCheck(false, node); if (subGrid) { subGrid.parentGridNode = node; - if (!subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved } this._updateContainerHeight(); } @@ -2319,9 +2320,6 @@ export class GridStack { this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node); } - // delay adding animation back - if (noAnim) this.setAnimation(this.opts.animate, true); - return false; // prevent parent from receiving msg (which may be grid as well) }); return this; @@ -2353,20 +2351,26 @@ export class GridStack { return this; } - /** @internal prepares the element for drag&drop */ - protected _prepareDragDropByNode(node: GridStackNode): GridStack { - const el = node.el; + /** + * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading + * @param el GridItemHTMLElement of the widget + * @param [force=false] + * */ + public prepareDragDrop(el: GridItemHTMLElement, force = false): GridStack { + const node = el?.gridstackNode; + if (!node) return; const noMove = node.noMove || this.opts.disableDrag; const noResize = node.noResize || this.opts.disableResize; // check for disabled grid first - if (this.opts.staticGrid || (noMove && noResize)) { + const disable = this.opts.staticGrid || (noMove && noResize); + if (force || disable) { if (node._initDD) { this._removeDD(el); // nukes everything instead of just disable, will add some styles back next delete node._initDD; } - el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435 - return this; + if (disable) el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435 + if (!force) return this; } if (!node._initDD) { @@ -2377,9 +2381,7 @@ export class GridStack { /** called when item starts moving/resizing */ const onStartMoving = (event: Event, ui: DDUIData) => { // trigger any 'dragstart' / 'resizestart' manually - if (this._gsEventHandler[event.type]) { - this._gsEventHandler[event.type](event, event.target); - } + this.triggerEvent(event, event.target as GridItemHTMLElement); cellWidth = this.cellWidth(); cellHeight = this.getCellHeight(true); // force pixels for calculations @@ -2394,7 +2396,9 @@ export class GridStack { /** called when the item stops moving/resizing */ const onEndMoving = (event: Event) => { this.placeholder.remove(); + delete this.placeholder.gridstackNode; delete node._moving; + delete node._resizing; delete node._event; delete node._lastTried; const widthChanged = node.w !== node._orig.w; @@ -2423,9 +2427,7 @@ export class GridStack { // move to new placeholder location this._writePosAttr(target, node); } - if (this._gsEventHandler[event.type]) { - this._gsEventHandler[event.type](event, target); - } + this.triggerEvent(event, target); } // @ts-ignore this._extraDragRow = 0;// @ts-ignore @@ -2494,6 +2496,7 @@ export class GridStack { node._lastUiPosition = ui.position; node._prevYPix = ui.position.top; node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way) + node._resizing = (event.type === 'resizestart'); delete node._lastTried; if (event.type === 'dropover' && node._temporaryRemoved) { @@ -2599,10 +2602,21 @@ export class GridStack { this._updateContainerHeight(); const target = event.target as GridItemHTMLElement;// @ts-ignore - this._writePosAttr(target, node); - if (this._gsEventHandler[event.type]) { - this._gsEventHandler[event.type](event, target); + // Do not write sidebar item attributes back to the original sidebar el + if (!node._sidebarOrig) { + this._writePosAttr(target, node); } + this.triggerEvent(event, target); + } + } + + /** call given event callback on our main top-most grid (if we're nested) */ + protected triggerEvent(event: Event, target: GridItemHTMLElement) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + let grid: GridStack = this; + while (grid.parentGridNode) grid = grid.parentGridNode.grid; + if (grid._gsEventHandler[event.type]) { + grid._gsEventHandler[event.type](event, target); } } @@ -2625,7 +2639,10 @@ export class GridStack { this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged + const sidebarOrig = node._sidebarOrig; if (node._isExternal) this.engine.cleanupNode(node); + // Restore sidebar item initial size info to stay consistent when dragging between multiple grids + node._sidebarOrig = sidebarOrig; if (this.opts.removable === true) { // boolean vs a class string // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so diff --git a/src/types.ts b/src/types.ts index 13883ddf7..b59735e5a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ /** - * types.ts 11.0.1 + * types.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ @@ -35,7 +35,6 @@ export const gridDefaults: GridStackOptions = { // handleClass: null, // removable: false, // staticGrid: false, - // styleInHead: false, //removable }; @@ -153,7 +152,7 @@ export interface GridStackOptions { /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns. * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside - * items always to same. flag is not supported for regular non-nested grids. + * items always the same. flag is NOT supported for regular non-nested grids. */ column?: number | 'auto'; @@ -191,6 +190,9 @@ export interface GridStackOptions { /** additional widget class (default?: 'grid-stack-item') */ itemClass?: string; + /** re-layout mode when we're a subgrid and we are being resized. default to 'list' */ + layout?: ColumnOptions; + /** true when widgets are only created when they scroll into view (visible) */ lazyLoad?: boolean; @@ -253,8 +255,9 @@ export interface GridStackOptions { rtl?: boolean | 'auto'; /** set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars. - Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) */ - sizeToContent?: boolean; + * Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) + */ + sizeToContent?: boolean; /** * makes grid static (default?: false). If `true` widgets are not movable/resizable. @@ -263,7 +266,9 @@ export interface GridStackOptions { */ staticGrid?: boolean; - /** if `true` will add style element to `` otherwise will add it to element's parent node (default `false`). */ + /** + * @deprecated Not used anymore, styles are now implemented with local CSS variables + */ styleInHead?: boolean; /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */ @@ -328,7 +333,7 @@ export interface GridStackWidget extends GridStackPosition { noResize?: boolean; /** prevents direct moving by the user (default?: undefined = un-constrained) */ noMove?: boolean; - /** same as noMove+noResize but also prevents being pushed by other widgets or api (default?: undefined = un-constrained) */ + /** prevents being pushed by other widgets or api (default?: undefined = un-constrained), which is different from `noMove` (user action only) */ locked?: boolean; /** value for `gs-id` stored on the widget (default?: undefined) */ id?: string; @@ -434,6 +439,8 @@ export interface GridStackNode extends GridStackWidget { _event?: MouseEvent; /** @internal moving vs resizing */ _moving?: boolean; + /** @internal is resizing? */ + _resizing?: boolean; /** @internal true if we jumped down past item below (one time jump so we don't have to totally pass it) */ _skipDown?: boolean; /** @internal original values before a drag/size */ @@ -452,6 +459,8 @@ export interface GridStackNode extends GridStackWidget { _temporaryRemoved?: boolean; /** @internal true if we should remove DOM element on _notify() rather than clearing _id (old way) */ _removeDOM?: boolean; + /** @internal original position/size of item if dragged from sidebar */ + _sidebarOrig?: GridStackPosition; /** @internal had drag&drop been initialized */ _initDD?: boolean; } diff --git a/src/utils.ts b/src/utils.ts index af10e59e4..4014a1891 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,9 +1,8 @@ /** - * utils.ts 11.0.1 + * utils.ts 12.2.1 * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license */ -import { GridStack } from './gridstack'; import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types'; export interface HeightData { @@ -110,24 +109,9 @@ export class Utils { return els; } - /** create the default grid item divs, and content possibly lazy loaded calling GridStack.renderCB */ - static createWidgetDivs(itemClass: string, n: GridStackNode): HTMLElement { - const el = Utils.createDiv(['grid-stack-item', itemClass]); - const cont = Utils.createDiv(['grid-stack-item-content'], el); - - const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false; - if (lazyLoad) { - if (!n.visibleObservable) { - n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { - n.visibleObservable?.disconnect(); - delete n.visibleObservable; - GridStack.renderCB(cont, n) - }}); - window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes - } - } else GridStack.renderCB(cont, n); - - return el; + /** true if widget (or grid) makes this item lazyLoad */ + static lazyLoad(n: GridStackNode): boolean { + return n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false; } /** create a div with the given classes */ @@ -190,51 +174,6 @@ export class Utils { return id ? nodes.find(n => n.id === id) : undefined; } - /** - * creates a style sheet with style id under given parent - * @param id will set the 'gs-style-id' attribute to that id - * @param parent to insert the stylesheet as first child, - * if none supplied it will be appended to the document head instead. - */ - static createStylesheet(id: string, parent?: HTMLElement, options?: { nonce?: string }): CSSStyleSheet { - const style: HTMLStyleElement = document.createElement('style'); - const nonce = options?.nonce - if (nonce) style.nonce = nonce - style.setAttribute('type', 'text/css'); - style.setAttribute('gs-style-id', id); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - if ((style as any).styleSheet) { // TODO: only CSSImportRule have that and different beast ?? - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (style as any).styleSheet.cssText = ''; - } else { - style.appendChild(document.createTextNode('')); // WebKit hack - } - if (!parent) { - // default to head - parent = document.getElementsByTagName('head')[0]; - parent.appendChild(style); - } else { - parent.insertBefore(style, parent.firstChild); - } - return style.sheet as CSSStyleSheet; - } - - /** removed the given stylesheet id */ - static removeStylesheet(id: string, parent?: HTMLElement): void { - const target = parent || document; - const el = target.querySelector('STYLE[gs-style-id=' + id + ']'); - if (el && el.parentNode) el.remove(); - } - - /** inserts a CSS rule */ - static addCSSRule(sheet: CSSStyleSheet, selector: string, rules: string): void { - if (typeof sheet.addRule === 'function') { - sheet.addRule(selector, rules); - } else if (typeof sheet.insertRule === 'function') { - sheet.insertRule(`${selector}{${rules}}`); - } - } - // eslint-disable-next-line @typescript-eslint/no-explicit-any static toBool(v: unknown): boolean { if (typeof v === 'boolean') { @@ -564,26 +503,27 @@ export class Utils { return {...evt, ...obj} as unknown as T; } - /** copies the MouseEvent properties and sends it as another event to the given target */ - public static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void { - const simulatedEvent = document.createEvent('MouseEvents'); - simulatedEvent.initMouseEvent( - simulatedType, // type - true, // bubbles - true, // cancelable - window, // view - 1, // detail - e.screenX, // screenX - e.screenY, // screenY - e.clientX, // clientX - e.clientY, // clientY - e.ctrlKey, // ctrlKey - e.altKey, // altKey - e.shiftKey, // shiftKey - e.metaKey, // metaKey - 0, // button - e.target // relatedTarget - ); + /** copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target */ + public static simulateMouseEvent(e: MouseEvent | Touch, simulatedType: string, target?: EventTarget): void { + const me = e as MouseEvent; + const simulatedEvent = new MouseEvent(simulatedType, { + bubbles: true, + composed: true, + cancelable: true, + view: window, + detail: 1, + screenX: e.screenX, + screenY: e.screenY, + clientX: e.clientX, + clientY: e.clientY, + ctrlKey: me.ctrlKey??false, + altKey: me.altKey??false, + shiftKey: me.shiftKey??false, + metaKey: me.metaKey??false, + button: 0, + relatedTarget: e.target + }); + (target || e.target).dispatchEvent(simulatedEvent); } diff --git a/tsconfig.json b/tsconfig.json index 5737f75f4..4b5c75da6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,9 +15,6 @@ "strict": false, "target": "ES2020" }, - "exclude": [ - "./src/**/*.spec.ts", - ], "include": [ "./src/**/*.ts" ], diff --git a/yarn.lock b/yarn.lock index 9fc628875..92c317055 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1830,9 +1830,9 @@ electron-to-chromium@^1.5.4: integrity sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q== elliptic@^6.5.3, elliptic@^6.5.4: - version "6.5.7" - resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b" - integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q== + version "6.6.1" + resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.6.1.tgz#3b8ffb02670bf69e382c7f65bf524c97c5405c06" + integrity sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g== dependencies: bn.js "^4.11.9" brorand "^1.1.0" @@ -4930,9 +4930,9 @@ send@0.18.0: statuses "2.0.1" serialize-javascript@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c" - integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w== + version "6.0.2" + resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2" + integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g== dependencies: randombytes "^2.1.0"

Demo showcasing how to use gridstack.js attributes in CSS

Demos

Demos

Demos

Angular wrapper

React wrapper

Old v5.1.1 Jquery Demos

Lazy loading demo

Lazy loading + renderCB demo

Nested grids demo

Nested grids demo

Two grids demo

Two grids demo

Vue3: Gridstack Controls Vue Rendering Grid Items

Grid Spec test