diff --git a/doc/README.md b/doc/README.md index 08a2ac8fa..d8d22afde 100644 --- a/doc/README.md +++ b/doc/README.md @@ -411,7 +411,7 @@ Parameters: ```js let grid = GridStack.init(); grid.el.appendChild('
') -grid.makeWidget('gsi-1'); +grid.makeWidget('#gsi-1'); ``` ### margin(value: numberOrString) diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts index d1e480ec7..7e8aacbcb 100644 --- a/spec/gridstack-spec.ts +++ b/spec/gridstack-spec.ts @@ -52,7 +52,7 @@ describe('gridstack', function() { }); it('use selector no dot', function() { let grid = GridStack.init(null, 'grid-stack'); - expect(grid).toEqual(null); + expect(grid).not.toBe(null); }); it('use wrong selector', function() { let grid = GridStack.init(null, 'FOO'); @@ -64,7 +64,7 @@ describe('gridstack', function() { }); it('initAll use selector no dot', function() { let grids = GridStack.initAll(undefined, 'grid-stack'); - expect(grids.length).toBe(0); + expect(grids.length).toBe(1); }); it('initAll use wrong selector', function() { let grids = GridStack.initAll(undefined, 'FOO'); diff --git a/src/gridstack.ts b/src/gridstack.ts index 8f52f2010..93cfd31bf 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -681,7 +681,7 @@ export class GridStack { * @param val if true widget will be locked. */ public locked(els: GridStackElement, val: boolean): GridStack { - this.getElements(els).forEach(el => { + GridStack.getElements(els).forEach(el => { let node = el.gridstackNode; if (!node) return; node.locked = (val || false); @@ -703,10 +703,10 @@ export class GridStack { * @example * let grid = GridStack.init(); * grid.el.appendChild(''); - * grid.makeWidget('gsi-1'); + * grid.makeWidget('#gsi-1'); */ public makeWidget(els: GridStackElement): GridItemHTMLElement { - let el = this.getElement(els); + let el = GridStack.getElement(els); this._prepareElement(el, true); this._updateContainerHeight(); this._triggerAddEvent(); @@ -756,7 +756,7 @@ export class GridStack { * @param val if true widget will be draggable. */ public movable(els: GridStackElement, val: boolean): GridStack { - this.getElements(els).forEach(el => { + GridStack.getElements(els).forEach(el => { let node = el.gridstackNode; if (!node) { return } node.noMove = !(val || false); @@ -861,7 +861,7 @@ export class GridStack { * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true). */ public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack { - this.getElements(els).forEach(el => { + GridStack.getElements(els).forEach(el => { if (el.parentElement !== this.el) return; // not our child! let node = el.gridstackNode; // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272 @@ -924,7 +924,7 @@ export class GridStack { * @param val if true widget will be resizable. */ public resizable(els: GridStackElement, val: boolean): GridStack { - this.getElements(els).forEach(el => { + GridStack.getElements(els).forEach(el => { let node = el.gridstackNode; if (!node) { return; } node.noResize = !(val || false); @@ -1450,7 +1450,7 @@ export class GridStack { /** @internal */ private _updateElement(els: GridStackElement, callback: (el: GridItemHTMLElement, node: GridStackNode) => void): GridStack { - let el = this.getElement(els); + let el = GridStack.getElement(els); if (!el) { return this; } let node = el.gridstackNode; if (!node) { return this; } @@ -1687,28 +1687,38 @@ export class GridStack { return this; } - /** @internal */ - private getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement { - return (typeof els === 'string' ? - (document.querySelector(els) || document.querySelector('#' + els) || document.querySelector('.' + els)) : els); + /** @internal convert a potential selector into actual element */ + private static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement { + if (typeof els === 'string') { + let el = document.querySelector(els); + if (!el && els[0] !== '.' && els[0] !== '#') { + el = document.querySelector('#' + els); + if (!el) { el = document.querySelector('.' + els) } + } + return el as GridItemHTMLElement; + } + return els; } - /** @internal */ - private getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] { + + /** @internal convert a potential selector into actual list of elements */ + private static getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] { if (typeof els === 'string') { let list = document.querySelectorAll(els); - if (!list.length) { list = document.querySelectorAll('.' + els) } - if (!list.length) { list = document.querySelectorAll('#' + els) } + if (!list.length && els[0] !== '.' && els[0] !== '#') { + list = document.querySelectorAll('.' + els); + if (!list.length) { list = document.querySelectorAll('#' + els) } + } return Array.from(list) as GridItemHTMLElement[]; } return [els]; } /** @internal */ private static getGridElement(els: string | HTMLElement = '.grid-stack'): GridHTMLElement { - return (typeof els === 'string' ? document.querySelector(els) : els); + return GridStack.getElement(els) as GridHTMLElement; } /** @internal */ private static getGridElements(els: string | HTMLElement = '.grid-stack'): GridHTMLElement[] { - return (typeof els === 'string') ? Array.from(document.querySelectorAll(els)) : [els]; + return GridStack.getElements(els) as GridHTMLElement[]; } /** @internal initialize margin top/bottom/left/right and units */ @@ -1755,7 +1765,7 @@ export class GridStack { /** @internal called to update an element(s) attributes and node values */ private _updateAttr(els: GridStackElement, val: number, attr: string, field: string): GridStack { - this.getElements(els).forEach(el => { + GridStack.getElements(els).forEach(el => { if (val) { el.setAttribute(attr, String(val)); } else {