Skip to content

fix to getElements() methods #1372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Sep 21, 2020
+31 −21
Merged

fix to getElements() methods #1372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion doc/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ Parameters:
```js
let grid = GridStack.init();
grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"></div>')
grid.makeWidget('gsi-1');
grid.makeWidget('#gsi-1');
```

### margin(value: numberOrString)
Expand Down
4 changes: 2 additions & 2 deletions spec/gridstack-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand Down
46 changes: 28 additions & 18 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -703,10 +703,10 @@ export class GridStack {
* @example
* let grid = GridStack.init();
* grid.el.appendChild('<div id="gsi-1" data-gs-width="3"></div>');
* 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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand Down