Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2839cdd

Browse files
adumesnyadumesny
authored
Merge pull request #1592 from adumesny/develop
create placeholder divs on the fly
2 parents 115b9c4 + c2a3a04 commit 2839cdd

File tree

3 files changed

+118
-82
lines changed

3 files changed

+118
-82
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Change log
5151
- fix [1413](https://github.com/gridstack/gridstack.js/issues/1413) website & lib works on mobile. We now compile the latest v1.0.8 `jquery.ui.touch-punch`
5252
into the JQ version (only 2k) so mobile devices (android, iphone, ipad, ms surface, etc...) are supported out of the box.
5353
HTML5 version will require re-write to plain `mousemove` & mobile `touchmove` instead of drag events in a future release.
54+
- small optimizations (create placeholder content on the fly, moved more DD code into draggable class)
5455

5556
## 3.1.5 (2021-1-23)
5657

‎src/gridstack-dd.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,3 +567,68 @@ GridStack.prototype.resizable = function(els: GridStackElement, val: boolean): G
567567
});
568568
return this;
569569
}
570+
571+
572+
/**
573+
* Temporarily disables widgets moving/resizing.
574+
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
575+
* Note: no-op for static grid
576+
* This is a shortcut for:
577+
* @example
578+
* grid.enableMove(false);
579+
* grid.enableResize(false);
580+
*/
581+
GridStack.prototype.disable = function(): GridStack {
582+
if (this.opts.staticGrid) return;
583+
this.enableMove(false);
584+
this.enableResize(false);
585+
this._triggerEvent('disable');
586+
return this;
587+
}
588+
589+
/**
590+
* Re-enables widgets moving/resizing - see disable().
591+
* Note: no-op for static grid.
592+
* This is a shortcut for:
593+
* @example
594+
* grid.enableMove(true);
595+
* grid.enableResize(true);
596+
*/
597+
GridStack.prototype.enable = function(): GridStack {
598+
if (this.opts.staticGrid) return;
599+
this.enableMove(true);
600+
this.enableResize(true);
601+
this._triggerEvent('enable');
602+
return this;
603+
}
604+
605+
/**
606+
* Enables/disables widget moving. No-op for static grids.
607+
*
608+
* @param doEnable
609+
* @param includeNewWidgets will force new widgets to be draggable as per
610+
* doEnable`s value by changing the disableDrag grid option (default: true).
611+
*/
612+
GridStack.prototype.enableMove = function(doEnable: boolean, includeNewWidgets = true): GridStack {
613+
if (this.opts.staticGrid) return this; // can't move a static grid!
614+
this.getGridItems().forEach(el => this.movable(el, doEnable));
615+
if (includeNewWidgets) {
616+
this.opts.disableDrag = !doEnable;
617+
}
618+
return this;
619+
}
620+
621+
/**
622+
* Enables/disables widget resizing. No-op for static grids.
623+
* @param doEnable
624+
* @param includeNewWidgets will force new widgets to be draggable as per
625+
* doEnable`s value by changing the disableResize grid option (default: true).
626+
*/
627+
GridStack.prototype.enableResize = function(doEnable: boolean, includeNewWidgets = true): GridStack {
628+
if (this.opts.staticGrid) return this; // can't size a static grid!
629+
this.getGridItems().forEach(el => this.resizable(el, doEnable));
630+
if (includeNewWidgets) {
631+
this.opts.disableResize = !doEnable;
632+
}
633+
return this;
634+
}

‎src/gridstack.ts

Lines changed: 52 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -194,8 +194,22 @@ export class GridStack {
194194
/** grid options - public for classes to access, but use methods to modify! */
195195
public opts: GridStackOptions;
196196

197+
/** @internal create placeholder DIV as needed */
198+
public get placeholder(): HTMLElement {
199+
if (!this._placeholder) {
200+
let placeholderChild = document.createElement('div'); // child so padding match item-content
201+
placeholderChild.className = 'placeholder-content';
202+
if (this.opts.placeholderText) {
203+
placeholderChild.innerHTML = this.opts.placeholderText;
204+
}
205+
this._placeholder = document.createElement('div');
206+
this._placeholder.classList.add(this.opts.placeholderClass, GridDefaults.itemClass, this.opts.itemClass);
207+
this.placeholder.appendChild(placeholderChild);
208+
}
209+
return this._placeholder;
210+
}
197211
/** @internal */
198-
public placeholder: HTMLElement;
212+
private _placeholder: HTMLElement;
199213
/** @internal */
200214
private _oneColumnMode: boolean;
201215
/** @internal */
@@ -330,13 +344,6 @@ export class GridStack {
330344

331345
this.setAnimation(this.opts.animate);
332346

333-
let placeholderChild = document.createElement('div');
334-
placeholderChild.className = 'placeholder-content';
335-
placeholderChild.innerHTML = this.opts.placeholderText;
336-
this.placeholder = document.createElement('div');
337-
this.placeholder.classList.add(this.opts.placeholderClass, defaults.itemClass, this.opts.itemClass);
338-
this.placeholder.appendChild(placeholderChild);
339-
340347
this._updateStyles();
341348
if (this.opts.column != 12) {
342349
this.el.classList.add('grid-stack-' + this.opts.column);
@@ -688,88 +695,17 @@ export class GridStack {
688695
this._removeStylesheet();
689696
delete this.opts._isNested;
690697
delete this.opts;
691-
delete this.placeholder;
698+
delete this._placeholder;
692699
delete this.engine;
693700
delete this.el.gridstack; // remove circular dependency that would prevent a freeing
694701
delete this.el;
695702
return this;
696703
}
697704

698-
/**
699-
* Temporarily disables widgets moving/resizing.
700-
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
701-
* Note: no-op for static grid
702-
* This is a shortcut for:
703-
* @example
704-
* grid.enableMove(false);
705-
* grid.enableResize(false);
706-
*/
707-
public disable(): GridStack {
708-
if (this.opts.staticGrid) return;
709-
this.enableMove(false);
710-
this.enableResize(false);
711-
this._triggerEvent('disable');
712-
return this;
713-
}
714-
715-
/**
716-
* Re-enables widgets moving/resizing - see disable().
717-
* Note: no-op for static grid.
718-
* This is a shortcut for:
719-
* @example
720-
* grid.enableMove(true);
721-
* grid.enableResize(true);
722-
*/
723-
public enable(): GridStack {
724-
if (this.opts.staticGrid) return;
725-
this.enableMove(true);
726-
this.enableResize(true);
727-
this._triggerEvent('enable');
728-
return this;
729-
}
730-
731-
/**
732-
* Enables/disables widget moving. No-op for static grids.
733-
*
734-
* @param doEnable
735-
* @param includeNewWidgets will force new widgets to be draggable as per
736-
* doEnable`s value by changing the disableDrag grid option (default: true).
737-
*/
738-
public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack {
739-
if (this.opts.staticGrid) return this; // can't move a static grid!
740-
this.getGridItems().forEach(el => this.movable(el, doEnable));
741-
if (includeNewWidgets) {
742-
this.opts.disableDrag = !doEnable;
743-
}
744-
return this;
745-
}
746-
747-
/**
748-
* Enables/disables widget resizing. No-op for static grids.
749-
* @param doEnable
750-
* @param includeNewWidgets will force new widgets to be draggable as per
751-
* doEnable`s value by changing the disableResize grid option (default: true).
752-
*/
753-
public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack {
754-
if (this.opts.staticGrid) return this; // can't size a static grid!
755-
this.getGridItems().forEach(el => this.resizable(el, doEnable));
756-
if (includeNewWidgets) {
757-
this.opts.disableResize = !doEnable;
758-
}
759-
return this;
760-
}
761-
762705
/**
763706
* enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
764707
*/
765708
public float(val: boolean): GridStack {
766-
/*
767-
if (val === undefined) {
768-
// TODO: should we support and/or change signature ? figure this soon...
769-
console.warn('gridstack.ts: getter `float()` is deprecated in 2.x and has been replaced by `getFloat()`. It will be **completely** removed soon');
770-
return this.getFloat();
771-
}
772-
*/
773709
this.engine.float = val;
774710
this._triggerChangeEvent();
775711
return this;
@@ -1491,7 +1427,7 @@ export class GridStack {
14911427
* so we don't incur the load unless needed.
14921428
* NOTE: had to make those methods public in order to define them else as
14931429
* GridStack.prototype._setupAcceptWidget = function()
1494-
* maybe there is a better way....
1430+
* maybe there is a better way ????
14951431
*/
14961432
/* eslint-disable @typescript-eslint/no-unused-vars */
14971433

@@ -1507,6 +1443,40 @@ export class GridStack {
15071443
* @param val if true widget will be resizable.
15081444
*/
15091445
public resizable(els: GridStackElement, val: boolean): GridStack { return this }
1446+
/**
1447+
* Temporarily disables widgets moving/resizing.
1448+
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
1449+
* Note: no-op for static grid
1450+
* This is a shortcut for:
1451+
* @example
1452+
* grid.enableMove(false);
1453+
* grid.enableResize(false);
1454+
*/
1455+
public disable(): GridStack { return this }
1456+
/**
1457+
* Re-enables widgets moving/resizing - see disable().
1458+
* Note: no-op for static grid.
1459+
* This is a shortcut for:
1460+
* @example
1461+
* grid.enableMove(true);
1462+
* grid.enableResize(true);
1463+
*/
1464+
public enable(): GridStack { return this }
1465+
/**
1466+
* Enables/disables widget moving. No-op for static grids.
1467+
*
1468+
* @param doEnable
1469+
* @param includeNewWidgets will force new widgets to be draggable as per
1470+
* doEnable`s value by changing the disableDrag grid option (default: true).
1471+
*/
1472+
public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack { return this }
1473+
/**
1474+
* Enables/disables widget resizing. No-op for static grids.
1475+
* @param doEnable
1476+
* @param includeNewWidgets will force new widgets to be draggable as per
1477+
* doEnable`s value by changing the disableResize grid option (default: true).
1478+
*/
1479+
public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack { return this }
15101480
/** @internal called to add drag over support to support widgets */
15111481
public _setupAcceptWidget(): GridStack { return this }
15121482
/** @internal called to setup a trash drop zone if the user specifies it */
@@ -1516,7 +1486,7 @@ export class GridStack {
15161486
/** @internal */
15171487
public _clearRemovingTimeout(el: GridItemHTMLElement): GridStack { return this }
15181488
/** @internal call to setup dragging in from the outside (say toolbar), with options */
1519-
public _setupDragIn(): GridStack {return this; }
1489+
public _setupDragIn(): GridStack { return this }
15201490
/** @internal prepares the element for drag&drop **/
15211491
public _prepareDragDropByNode(node: GridStackNode): GridStack { return this }
15221492

0 commit comments

Comments
 (0)