Skip to content

Commit

Permalink
Merge pull request #1592 from adumesny/develop
Browse files Browse the repository at this point in the history 
create placeholder divs on the fly
  • Loading branch information
@adumesny
adumesny authored Jan 26, 2021
2 parents 115b9c4 + c2a3a04 commit 2839cdd
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 82 deletions.
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ Change log
- 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`
into the JQ version (only 2k) so mobile devices (android, iphone, ipad, ms surface, etc...) are supported out of the box.
HTML5 version will require re-write to plain `mousemove` & mobile `touchmove` instead of drag events in a future release.
- small optimizations (create placeholder content on the fly, moved more DD code into draggable class)

## 3.1.5 (2021-1-23)

Expand Down
65 changes: 65 additions & 0 deletions src/gridstack-dd.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -567,3 +567,68 @@ GridStack.prototype.resizable = function(els: GridStackElement, val: boolean): G
});
return this;
}


/**
* Temporarily disables widgets moving/resizing.
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
* Note: no-op for static grid
* This is a shortcut for:
* @example
* grid.enableMove(false);
* grid.enableResize(false);
*/
GridStack.prototype.disable = function(): GridStack {
if (this.opts.staticGrid) return;
this.enableMove(false);
this.enableResize(false);
this._triggerEvent('disable');
return this;
}

/**
* Re-enables widgets moving/resizing - see disable().
* Note: no-op for static grid.
* This is a shortcut for:
* @example
* grid.enableMove(true);
* grid.enableResize(true);
*/
GridStack.prototype.enable = function(): GridStack {
if (this.opts.staticGrid) return;
this.enableMove(true);
this.enableResize(true);
this._triggerEvent('enable');
return this;
}

/**
* Enables/disables widget moving. No-op for static grids.
*
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableDrag grid option (default: true).
*/
GridStack.prototype.enableMove = function(doEnable: boolean, includeNewWidgets = true): GridStack {
if (this.opts.staticGrid) return this; // can't move a static grid!
this.getGridItems().forEach(el => this.movable(el, doEnable));
if (includeNewWidgets) {
this.opts.disableDrag = !doEnable;
}
return this;
}

/**
* Enables/disables widget resizing. No-op for static grids.
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableResize grid option (default: true).
*/
GridStack.prototype.enableResize = function(doEnable: boolean, includeNewWidgets = true): GridStack {
if (this.opts.staticGrid) return this; // can't size a static grid!
this.getGridItems().forEach(el => this.resizable(el, doEnable));
if (includeNewWidgets) {
this.opts.disableResize = !doEnable;
}
return this;
}
134 changes: 52 additions & 82 deletions src/gridstack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,22 @@ export class GridStack {
/** grid options - public for classes to access, but use methods to modify! */
public opts: GridStackOptions;

/** @internal create placeholder DIV as needed */
public get placeholder(): HTMLElement {
if (!this._placeholder) {
let placeholderChild = document.createElement('div'); // child so padding match item-content
placeholderChild.className = 'placeholder-content';
if (this.opts.placeholderText) {
placeholderChild.innerHTML = 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 */
public placeholder: HTMLElement;
private _placeholder: HTMLElement;
/** @internal */
private _oneColumnMode: boolean;
/** @internal */
Expand Down Expand Up @@ -330,13 +344,6 @@ export class GridStack {

this.setAnimation(this.opts.animate);

let placeholderChild = document.createElement('div');
placeholderChild.className = 'placeholder-content';
placeholderChild.innerHTML = this.opts.placeholderText;
this.placeholder = document.createElement('div');
this.placeholder.classList.add(this.opts.placeholderClass, defaults.itemClass, this.opts.itemClass);
this.placeholder.appendChild(placeholderChild);

this._updateStyles();
if (this.opts.column != 12) {
this.el.classList.add('grid-stack-' + this.opts.column);
Expand Down Expand Up @@ -688,88 +695,17 @@ export class GridStack {
this._removeStylesheet();
delete this.opts._isNested;
delete this.opts;
delete this.placeholder;
delete this._placeholder;
delete this.engine;
delete this.el.gridstack; // remove circular dependency that would prevent a freeing
delete this.el;
return this;
}

/**
* Temporarily disables widgets moving/resizing.
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
* Note: no-op for static grid
* This is a shortcut for:
* @example
* grid.enableMove(false);
* grid.enableResize(false);
*/
public disable(): GridStack {
if (this.opts.staticGrid) return;
this.enableMove(false);
this.enableResize(false);
this._triggerEvent('disable');
return this;
}

/**
* Re-enables widgets moving/resizing - see disable().
* Note: no-op for static grid.
* This is a shortcut for:
* @example
* grid.enableMove(true);
* grid.enableResize(true);
*/
public enable(): GridStack {
if (this.opts.staticGrid) return;
this.enableMove(true);
this.enableResize(true);
this._triggerEvent('enable');
return this;
}

/**
* Enables/disables widget moving. No-op for static grids.
*
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableDrag grid option (default: true).
*/
public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack {
if (this.opts.staticGrid) return this; // can't move a static grid!
this.getGridItems().forEach(el => this.movable(el, doEnable));
if (includeNewWidgets) {
this.opts.disableDrag = !doEnable;
}
return this;
}

/**
* Enables/disables widget resizing. No-op for static grids.
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableResize grid option (default: true).
*/
public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack {
if (this.opts.staticGrid) return this; // can't size a static grid!
this.getGridItems().forEach(el => this.resizable(el, doEnable));
if (includeNewWidgets) {
this.opts.disableResize = !doEnable;
}
return this;
}

/**
* enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
*/
public float(val: boolean): GridStack {
/*
if (val === undefined) {
// TODO: should we support and/or change signature ? figure this soon...
console.warn('gridstack.ts: getter `float()` is deprecated in 2.x and has been replaced by `getFloat()`. It will be **completely** removed soon');
return this.getFloat();
}
*/
this.engine.float = val;
this._triggerChangeEvent();
return this;
Expand Down Expand Up @@ -1491,7 +1427,7 @@ export class GridStack {
* so we don't incur the load unless needed.
* NOTE: had to make those methods public in order to define them else as
* GridStack.prototype._setupAcceptWidget = function()
* maybe there is a better way....
* maybe there is a better way ????
*/
/* eslint-disable @typescript-eslint/no-unused-vars */

Expand All @@ -1507,6 +1443,40 @@ export class GridStack {
* @param val if true widget will be resizable.
*/
public resizable(els: GridStackElement, val: boolean): GridStack { return this }
/**
* Temporarily disables widgets moving/resizing.
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
* Note: no-op for static grid
* This is a shortcut for:
* @example
* grid.enableMove(false);
* grid.enableResize(false);
*/
public disable(): GridStack { return this }
/**
* Re-enables widgets moving/resizing - see disable().
* Note: no-op for static grid.
* This is a shortcut for:
* @example
* grid.enableMove(true);
* grid.enableResize(true);
*/
public enable(): GridStack { return this }
/**
* Enables/disables widget moving. No-op for static grids.
*
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableDrag grid option (default: true).
*/
public enableMove(doEnable: boolean, includeNewWidgets = true): GridStack { return this }
/**
* Enables/disables widget resizing. No-op for static grids.
* @param doEnable
* @param includeNewWidgets will force new widgets to be draggable as per
* doEnable`s value by changing the disableResize grid option (default: true).
*/
public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack { return this }
/** @internal called to add drag over support to support widgets */
public _setupAcceptWidget(): GridStack { return this }
/** @internal called to setup a trash drop zone if the user specifies it */
Expand All @@ -1516,7 +1486,7 @@ export class GridStack {
/** @internal */
public _clearRemovingTimeout(el: GridItemHTMLElement): GridStack { return this }
/** @internal call to setup dragging in from the outside (say toolbar), with options */
public _setupDragIn(): GridStack {return this; }
public _setupDragIn(): GridStack { return this }
/** @internal prepares the element for drag&drop **/
public _prepareDragDropByNode(node: GridStackNode): GridStack { return this }

Expand Down

0 comments on commit 2839cdd

Please sign in to comment.