gridstack 8.0.1 → 8.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -11
- package/dist/dd-base-impl.d.ts +1 -1
- package/dist/dd-base-impl.js +1 -1
- package/dist/dd-base-impl.js.map +1 -1
- package/dist/dd-draggable.d.ts +3 -2
- package/dist/dd-draggable.js +9 -8
- package/dist/dd-draggable.js.map +1 -1
- package/dist/dd-droppable.d.ts +1 -1
- package/dist/dd-droppable.js +1 -1
- package/dist/dd-droppable.js.map +1 -1
- package/dist/dd-element.d.ts +1 -1
- package/dist/dd-element.js +1 -1
- package/dist/dd-element.js.map +1 -1
- package/dist/dd-gridstack.d.ts +1 -1
- package/dist/dd-gridstack.js +1 -1
- package/dist/dd-gridstack.js.map +1 -1
- package/dist/dd-manager.d.ts +1 -1
- package/dist/dd-manager.js +1 -1
- package/dist/dd-manager.js.map +1 -1
- package/dist/dd-resizable-handle.d.ts +1 -1
- package/dist/dd-resizable-handle.js +1 -1
- package/dist/dd-resizable-handle.js.map +1 -1
- package/dist/dd-resizable.d.ts +1 -1
- package/dist/dd-resizable.js +1 -1
- package/dist/dd-resizable.js.map +1 -1
- package/dist/dd-touch.d.ts +1 -1
- package/dist/dd-touch.js +1 -1
- package/dist/dd-touch.js.map +1 -1
- package/dist/es5/dd-base-impl.d.ts +1 -1
- package/dist/es5/dd-base-impl.js +1 -1
- package/dist/es5/dd-base-impl.js.map +1 -1
- package/dist/es5/dd-draggable.d.ts +3 -2
- package/dist/es5/dd-draggable.js +9 -8
- package/dist/es5/dd-draggable.js.map +1 -1
- package/dist/es5/dd-droppable.d.ts +1 -1
- package/dist/es5/dd-droppable.js +1 -1
- package/dist/es5/dd-droppable.js.map +1 -1
- package/dist/es5/dd-element.d.ts +1 -1
- package/dist/es5/dd-element.js +1 -1
- package/dist/es5/dd-element.js.map +1 -1
- package/dist/es5/dd-gridstack.d.ts +1 -1
- package/dist/es5/dd-gridstack.js +1 -1
- package/dist/es5/dd-gridstack.js.map +1 -1
- package/dist/es5/dd-manager.d.ts +1 -1
- package/dist/es5/dd-manager.js +1 -1
- package/dist/es5/dd-manager.js.map +1 -1
- package/dist/es5/dd-resizable-handle.d.ts +1 -1
- package/dist/es5/dd-resizable-handle.js +1 -1
- package/dist/es5/dd-resizable-handle.js.map +1 -1
- package/dist/es5/dd-resizable.d.ts +1 -1
- package/dist/es5/dd-resizable.js +1 -1
- package/dist/es5/dd-resizable.js.map +1 -1
- package/dist/es5/dd-touch.d.ts +1 -1
- package/dist/es5/dd-touch.js +1 -1
- package/dist/es5/dd-touch.js.map +1 -1
- package/dist/es5/gridstack-all.js +1 -1
- package/dist/es5/gridstack-all.js.LICENSE.txt +1 -1
- package/dist/es5/gridstack-all.js.map +1 -1
- package/dist/es5/gridstack-engine.d.ts +1 -1
- package/dist/es5/gridstack-engine.js +1 -1
- package/dist/es5/gridstack-engine.js.map +1 -1
- package/dist/es5/gridstack-poly.js +1 -1
- package/dist/es5/gridstack.d.ts +3 -3
- package/dist/es5/gridstack.js +4 -13
- package/dist/es5/gridstack.js.map +1 -1
- package/dist/es5/types.d.ts +5 -3
- package/dist/es5/types.js +1 -1
- package/dist/es5/types.js.map +1 -1
- package/dist/es5/utils.d.ts +3 -3
- package/dist/es5/utils.js +12 -10
- package/dist/es5/utils.js.map +1 -1
- package/dist/gridstack-all.js +1 -1
- package/dist/gridstack-all.js.LICENSE.txt +1 -1
- package/dist/gridstack-all.js.map +1 -1
- package/dist/gridstack-engine.d.ts +1 -1
- package/dist/gridstack-engine.js +1 -1
- package/dist/gridstack-engine.js.map +1 -1
- package/dist/gridstack-extra.css +180 -240
- package/dist/gridstack-extra.min.css +1 -1
- package/dist/gridstack.css +95 -118
- package/dist/gridstack.d.ts +3 -3
- package/dist/gridstack.js +4 -13
- package/dist/gridstack.js.map +1 -1
- package/dist/gridstack.min.css +1 -1
- package/dist/ng/gridstack-item.component.d.ts +1 -1
- package/dist/ng/gridstack-item.component.js +1 -1
- package/dist/ng/gridstack.component.d.ts +1 -1
- package/dist/ng/gridstack.component.js +1 -1
- package/dist/src/gridstack-extra.scss +9 -11
- package/dist/src/gridstack.scss +108 -97
- package/dist/types.d.ts +5 -3
- package/dist/types.js +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utils.d.ts +3 -3
- package/dist/utils.js +12 -10
- package/dist/utils.js.map +1 -1
- package/doc/CHANGES.md +7 -0
- package/doc/README.md +5 -4
- package/package.json +1 -1
- package/dist_save/angular/README.md +0 -94
- package/dist_save/angular/gridstack-item.component.ts +0 -72
- package/dist_save/angular/gridstack.component.ts +0 -199
- package/dist_save/dd-base-impl.d.ts +0 -20
- package/dist_save/dd-base-impl.js +0 -36
- package/dist_save/dd-base-impl.js.map +0 -1
- package/dist_save/dd-draggable.d.ts +0 -28
- package/dist_save/dd-draggable.js +0 -343
- package/dist_save/dd-draggable.js.map +0 -1
- package/dist_save/dd-droppable.d.ts +0 -26
- package/dist_save/dd-droppable.js +0 -149
- package/dist_save/dd-droppable.js.map +0 -1
- package/dist_save/dd-element.d.ts +0 -27
- package/dist_save/dd-element.js +0 -95
- package/dist_save/dd-element.js.map +0 -1
- package/dist_save/dd-gridstack.d.ts +0 -34
- package/dist_save/dd-gridstack.js +0 -125
- package/dist_save/dd-gridstack.js.map +0 -1
- package/dist_save/dd-manager.d.ts +0 -22
- package/dist_save/dd-manager.js +0 -14
- package/dist_save/dd-manager.js.map +0 -1
- package/dist_save/dd-resizable-handle.d.ts +0 -14
- package/dist_save/dd-resizable-handle.js +0 -106
- package/dist_save/dd-resizable-handle.js.map +0 -1
- package/dist_save/dd-resizable.d.ts +0 -28
- package/dist_save/dd-resizable.js +0 -294
- package/dist_save/dd-resizable.js.map +0 -1
- package/dist_save/dd-touch.d.ts +0 -33
- package/dist_save/dd-touch.js +0 -183
- package/dist_save/dd-touch.js.map +0 -1
- package/dist_save/es5/dd-base-impl.d.ts +0 -20
- package/dist_save/es5/dd-base-impl.js +0 -41
- package/dist_save/es5/dd-base-impl.js.map +0 -1
- package/dist_save/es5/dd-draggable.d.ts +0 -28
- package/dist_save/es5/dd-draggable.js +0 -366
- package/dist_save/es5/dd-draggable.js.map +0 -1
- package/dist_save/es5/dd-droppable.d.ts +0 -26
- package/dist_save/es5/dd-droppable.js +0 -180
- package/dist_save/es5/dd-droppable.js.map +0 -1
- package/dist_save/es5/dd-element.d.ts +0 -27
- package/dist_save/es5/dd-element.js +0 -96
- package/dist_save/es5/dd-element.js.map +0 -1
- package/dist_save/es5/dd-gridstack.d.ts +0 -34
- package/dist_save/es5/dd-gridstack.js +0 -145
- package/dist_save/es5/dd-gridstack.js.map +0 -1
- package/dist_save/es5/dd-manager.d.ts +0 -22
- package/dist_save/es5/dd-manager.js +0 -17
- package/dist_save/es5/dd-manager.js.map +0 -1
- package/dist_save/es5/dd-resizable-handle.d.ts +0 -14
- package/dist_save/es5/dd-resizable-handle.js +0 -107
- package/dist_save/es5/dd-resizable-handle.js.map +0 -1
- package/dist_save/es5/dd-resizable.d.ts +0 -28
- package/dist_save/es5/dd-resizable.js +0 -316
- package/dist_save/es5/dd-resizable.js.map +0 -1
- package/dist_save/es5/dd-touch.d.ts +0 -33
- package/dist_save/es5/dd-touch.js +0 -186
- package/dist_save/es5/dd-touch.js.map +0 -1
- package/dist_save/es5/gridstack-all.js +0 -3
- package/dist_save/es5/gridstack-all.js.LICENSE.txt +0 -7
- package/dist_save/es5/gridstack-all.js.map +0 -1
- package/dist_save/es5/gridstack-engine.d.ts +0 -102
- package/dist_save/es5/gridstack-engine.js +0 -997
- package/dist_save/es5/gridstack-engine.js.map +0 -1
- package/dist_save/es5/gridstack-poly.js +0 -356
- package/dist_save/es5/gridstack.d.ts +0 -376
- package/dist_save/es5/gridstack.js +0 -2238
- package/dist_save/es5/gridstack.js.map +0 -1
- package/dist_save/es5/types.d.ts +0 -284
- package/dist_save/es5/types.js +0 -36
- package/dist_save/es5/types.js.map +0 -1
- package/dist_save/es5/utils.d.ts +0 -95
- package/dist_save/es5/utils.js +0 -590
- package/dist_save/es5/utils.js.map +0 -1
- package/dist_save/gridstack-all.js +0 -3
- package/dist_save/gridstack-all.js.LICENSE.txt +0 -7
- package/dist_save/gridstack-all.js.map +0 -1
- package/dist_save/gridstack-engine.d.ts +0 -102
- package/dist_save/gridstack-engine.js +0 -956
- package/dist_save/gridstack-engine.js.map +0 -1
- package/dist_save/gridstack-extra.css +0 -433
- package/dist_save/gridstack-extra.min.css +0 -1
- package/dist_save/gridstack.css +0 -226
- package/dist_save/gridstack.d.ts +0 -376
- package/dist_save/gridstack.js +0 -2162
- package/dist_save/gridstack.js.map +0 -1
- package/dist_save/gridstack.min.css +0 -1
- package/dist_save/src/gridstack-extra.scss +0 -27
- package/dist_save/src/gridstack.scss +0 -131
- package/dist_save/types.d.ts +0 -284
- package/dist_save/types.js +0 -36
- package/dist_save/types.js.map +0 -1
- package/dist_save/utils.d.ts +0 -95
- package/dist_save/utils.js +0 -548
- package/dist_save/utils.js.map +0 -1
|
@@ -1,2238 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
-
if (k2 === undefined) k2 = k;
|
|
15
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
-
}) : (function(o, m, k, k2) {
|
|
17
|
-
if (k2 === undefined) k2 = k;
|
|
18
|
-
o[k2] = m[k];
|
|
19
|
-
}));
|
|
20
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
21
|
-
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
|
|
22
|
-
};
|
|
23
|
-
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
24
|
-
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
25
|
-
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
26
|
-
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
27
|
-
r[k] = a[j];
|
|
28
|
-
return r;
|
|
29
|
-
};
|
|
30
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
31
|
-
exports.GridStack = void 0;
|
|
32
|
-
/*!
|
|
33
|
-
* GridStack 7.3.0-dev
|
|
34
|
-
* https://gridstackjs.com/
|
|
35
|
-
*
|
|
36
|
-
* Copyright (c) 2021-2022 Alain Dumesny
|
|
37
|
-
* see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
|
|
38
|
-
*/
|
|
39
|
-
var gridstack_engine_1 = require("./gridstack-engine");
|
|
40
|
-
var utils_1 = require("./utils");
|
|
41
|
-
var types_1 = require("./types");
|
|
42
|
-
/*
|
|
43
|
-
* and include D&D by default
|
|
44
|
-
* TODO: while we could generate a gridstack-static.js at smaller size - saves about 31k (41k -> 72k)
|
|
45
|
-
* I don't know how to generate the DD only code at the remaining 31k to delay load as code depends on Gridstack.ts
|
|
46
|
-
* also it caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
|
|
47
|
-
*/
|
|
48
|
-
var dd_gridstack_1 = require("./dd-gridstack");
|
|
49
|
-
var dd_touch_1 = require("./dd-touch");
|
|
50
|
-
var dd_manager_1 = require("./dd-manager");
|
|
51
|
-
/** global instance */
|
|
52
|
-
var dd = new dd_gridstack_1.DDGridStack;
|
|
53
|
-
// export all dependent file as well to make it easier for users to just import the main file
|
|
54
|
-
__exportStar(require("./types"), exports);
|
|
55
|
-
__exportStar(require("./utils"), exports);
|
|
56
|
-
__exportStar(require("./gridstack-engine"), exports);
|
|
57
|
-
__exportStar(require("./dd-gridstack"), exports);
|
|
58
|
-
/**
|
|
59
|
-
* Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
|
|
60
|
-
* Note: your grid elements MUST have the following classes for the CSS layout to work:
|
|
61
|
-
* @example
|
|
62
|
-
* <div class="grid-stack">
|
|
63
|
-
* <div class="grid-stack-item">
|
|
64
|
-
* <div class="grid-stack-item-content">Item 1</div>
|
|
65
|
-
* </div>
|
|
66
|
-
* </div>
|
|
67
|
-
*/
|
|
68
|
-
var GridStack = /** @class */ (function () {
|
|
69
|
-
/**
|
|
70
|
-
* Construct a grid item from the given element and options
|
|
71
|
-
* @param el
|
|
72
|
-
* @param opts
|
|
73
|
-
*/
|
|
74
|
-
function GridStack(el, opts) {
|
|
75
|
-
var _this = this;
|
|
76
|
-
if (opts === void 0) { opts = {}; }
|
|
77
|
-
var _a, _b;
|
|
78
|
-
/** @internal */
|
|
79
|
-
this._gsEventHandler = {};
|
|
80
|
-
/** @internal extra row added when dragging at the bottom of the grid */
|
|
81
|
-
this._extraDragRow = 0;
|
|
82
|
-
this.el = el; // exposed HTML element to the user
|
|
83
|
-
opts = opts || {}; // handles null/undefined/0
|
|
84
|
-
if (!el.classList.contains('grid-stack')) {
|
|
85
|
-
this.el.classList.add('grid-stack');
|
|
86
|
-
}
|
|
87
|
-
// if row property exists, replace minRow and maxRow instead
|
|
88
|
-
if (opts.row) {
|
|
89
|
-
opts.minRow = opts.maxRow = opts.row;
|
|
90
|
-
delete opts.row;
|
|
91
|
-
}
|
|
92
|
-
var rowAttr = utils_1.Utils.toNumber(el.getAttribute('gs-row'));
|
|
93
|
-
// flag only valid in sub-grids (handled by parent, not here)
|
|
94
|
-
if (opts.column === 'auto') {
|
|
95
|
-
delete opts.column;
|
|
96
|
-
}
|
|
97
|
-
// 'minWidth' legacy support in 5.1
|
|
98
|
-
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
|
99
|
-
var anyOpts = opts;
|
|
100
|
-
if (anyOpts.minWidth !== undefined) {
|
|
101
|
-
opts.oneColumnSize = opts.oneColumnSize || anyOpts.minWidth;
|
|
102
|
-
delete anyOpts.minWidth;
|
|
103
|
-
}
|
|
104
|
-
// save original setting so we can restore on save
|
|
105
|
-
if (opts.alwaysShowResizeHandle !== undefined) {
|
|
106
|
-
opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
|
|
107
|
-
}
|
|
108
|
-
// elements DOM attributes override any passed options (like CSS style) - merge the two together
|
|
109
|
-
var defaults = __assign(__assign({}, utils_1.Utils.cloneDeep(types_1.gridDefaults)), { column: utils_1.Utils.toNumber(el.getAttribute('gs-column')) || types_1.gridDefaults.column, minRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-min-row')) || types_1.gridDefaults.minRow, maxRow: rowAttr ? rowAttr : utils_1.Utils.toNumber(el.getAttribute('gs-max-row')) || types_1.gridDefaults.maxRow, staticGrid: utils_1.Utils.toBool(el.getAttribute('gs-static')) || types_1.gridDefaults.staticGrid, draggable: {
|
|
110
|
-
handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || types_1.gridDefaults.draggable.handle,
|
|
111
|
-
}, removableOptions: {
|
|
112
|
-
accept: opts.itemClass ? '.' + opts.itemClass : types_1.gridDefaults.removableOptions.accept,
|
|
113
|
-
} });
|
|
114
|
-
if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
|
|
115
|
-
defaults.animate = utils_1.Utils.toBool(el.getAttribute('gs-animate'));
|
|
116
|
-
}
|
|
117
|
-
this.opts = utils_1.Utils.defaults(opts, defaults);
|
|
118
|
-
opts = null; // make sure we use this.opts instead
|
|
119
|
-
this._initMargin(); // part of settings defaults...
|
|
120
|
-
// 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)
|
|
121
|
-
if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {
|
|
122
|
-
this._prevColumn = this.getColumn();
|
|
123
|
-
this.opts.column = 1;
|
|
124
|
-
}
|
|
125
|
-
if (this.opts.rtl === 'auto') {
|
|
126
|
-
this.opts.rtl = (el.style.direction === 'rtl');
|
|
127
|
-
}
|
|
128
|
-
if (this.opts.rtl) {
|
|
129
|
-
this.el.classList.add('grid-stack-rtl');
|
|
130
|
-
}
|
|
131
|
-
// check if we're been nested, and if so update our style and keep pointer around (used during save)
|
|
132
|
-
var parentGridItem = (_a = utils_1.Utils.closestUpByClass(this.el, types_1.gridDefaults.itemClass)) === null || _a === void 0 ? void 0 : _a.gridstackNode;
|
|
133
|
-
if (parentGridItem) {
|
|
134
|
-
parentGridItem.subGrid = this;
|
|
135
|
-
this.parentGridItem = parentGridItem;
|
|
136
|
-
this.el.classList.add('grid-stack-nested');
|
|
137
|
-
parentGridItem.el.classList.add('grid-stack-sub-grid');
|
|
138
|
-
}
|
|
139
|
-
this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
|
|
140
|
-
if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
|
|
141
|
-
// make the cell content square initially (will use resize/column event to keep it square)
|
|
142
|
-
this.cellHeight(undefined, false);
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
// append unit if any are set
|
|
146
|
-
if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== types_1.gridDefaults.cellHeightUnit) {
|
|
147
|
-
this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
|
|
148
|
-
delete this.opts.cellHeightUnit;
|
|
149
|
-
}
|
|
150
|
-
this.cellHeight(this.opts.cellHeight, false);
|
|
151
|
-
}
|
|
152
|
-
// see if we need to adjust auto-hide
|
|
153
|
-
if (this.opts.alwaysShowResizeHandle === 'mobile') {
|
|
154
|
-
this.opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
|
|
155
|
-
}
|
|
156
|
-
this._styleSheetClass = 'grid-stack-instance-' + gridstack_engine_1.GridStackEngine._idSeq++;
|
|
157
|
-
this.el.classList.add(this._styleSheetClass);
|
|
158
|
-
this._setStaticClass();
|
|
159
|
-
var engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
|
|
160
|
-
this.engine = new engineClass({
|
|
161
|
-
column: this.getColumn(),
|
|
162
|
-
float: this.opts.float,
|
|
163
|
-
maxRow: this.opts.maxRow,
|
|
164
|
-
onChange: function (cbNodes) {
|
|
165
|
-
var maxH = 0;
|
|
166
|
-
_this.engine.nodes.forEach(function (n) { maxH = Math.max(maxH, n.y + n.h); });
|
|
167
|
-
cbNodes.forEach(function (n) {
|
|
168
|
-
var el = n.el;
|
|
169
|
-
if (!el)
|
|
170
|
-
return;
|
|
171
|
-
if (n._removeDOM) {
|
|
172
|
-
if (el)
|
|
173
|
-
el.remove();
|
|
174
|
-
delete n._removeDOM;
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
_this._writePosAttr(el, n);
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
_this._updateStyles(false, maxH); // false = don't recreate, just append if need be
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
|
-
if (this.opts.auto) {
|
|
184
|
-
this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
|
|
185
|
-
this.getGridItems().forEach(function (el) { return _this._prepareElement(el); });
|
|
186
|
-
this.batchUpdate(false);
|
|
187
|
-
}
|
|
188
|
-
// load any passed in children as well, which overrides any DOM layout done above
|
|
189
|
-
if (this.opts.children) {
|
|
190
|
-
var children = this.opts.children;
|
|
191
|
-
delete this.opts.children;
|
|
192
|
-
if (children.length)
|
|
193
|
-
this.load(children); // don't load empty
|
|
194
|
-
}
|
|
195
|
-
this.setAnimation(this.opts.animate);
|
|
196
|
-
this._updateStyles();
|
|
197
|
-
if (this.opts.column != 12) {
|
|
198
|
-
this.el.classList.add('grid-stack-' + this.opts.column);
|
|
199
|
-
}
|
|
200
|
-
// legacy support to appear 'per grid` options when really global.
|
|
201
|
-
if (this.opts.dragIn)
|
|
202
|
-
GridStack.setupDragIn(this.opts.dragIn, this.opts.dragInOptions);
|
|
203
|
-
delete this.opts.dragIn;
|
|
204
|
-
delete this.opts.dragInOptions;
|
|
205
|
-
// dynamic grids require pausing during drag to detect over to nest vs push
|
|
206
|
-
if (this.opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
|
|
207
|
-
dd_manager_1.DDManager.pauseDrag = true;
|
|
208
|
-
if (((_b = this.opts.draggable) === null || _b === void 0 ? void 0 : _b.pause) !== undefined)
|
|
209
|
-
dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
|
|
210
|
-
this._setupRemoveDrop();
|
|
211
|
-
this._setupAcceptWidget();
|
|
212
|
-
this._updateWindowResizeEvent();
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
|
|
216
|
-
* simply return the existing instance (ignore any passed options). There is also an initAll() version that support
|
|
217
|
-
* multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
|
|
218
|
-
* @param options grid options (optional)
|
|
219
|
-
* @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
|
|
220
|
-
*
|
|
221
|
-
* @example
|
|
222
|
-
* let grid = GridStack.init();
|
|
223
|
-
*
|
|
224
|
-
* Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
|
|
225
|
-
* let grid = document.querySelector('.grid-stack').gridstack;
|
|
226
|
-
*/
|
|
227
|
-
GridStack.init = function (options, elOrString) {
|
|
228
|
-
if (options === void 0) { options = {}; }
|
|
229
|
-
if (elOrString === void 0) { elOrString = '.grid-stack'; }
|
|
230
|
-
var el = GridStack.getGridElement(elOrString);
|
|
231
|
-
if (!el) {
|
|
232
|
-
if (typeof elOrString === 'string') {
|
|
233
|
-
console.error('GridStack.initAll() no grid was found with selector "' + elOrString + '" - element missing or wrong selector ?' +
|
|
234
|
-
'\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.');
|
|
235
|
-
}
|
|
236
|
-
else {
|
|
237
|
-
console.error('GridStack.init() no grid element was passed.');
|
|
238
|
-
}
|
|
239
|
-
return null;
|
|
240
|
-
}
|
|
241
|
-
if (!el.gridstack) {
|
|
242
|
-
el.gridstack = new GridStack(el, utils_1.Utils.cloneDeep(options));
|
|
243
|
-
}
|
|
244
|
-
return el.gridstack;
|
|
245
|
-
};
|
|
246
|
-
/**
|
|
247
|
-
* Will initialize a list of elements (given a selector) and return an array of grids.
|
|
248
|
-
* @param options grid options (optional)
|
|
249
|
-
* @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
|
|
250
|
-
*
|
|
251
|
-
* @example
|
|
252
|
-
* let grids = GridStack.initAll();
|
|
253
|
-
* grids.forEach(...)
|
|
254
|
-
*/
|
|
255
|
-
GridStack.initAll = function (options, selector) {
|
|
256
|
-
if (options === void 0) { options = {}; }
|
|
257
|
-
if (selector === void 0) { selector = '.grid-stack'; }
|
|
258
|
-
var grids = [];
|
|
259
|
-
GridStack.getGridElements(selector).forEach(function (el) {
|
|
260
|
-
if (!el.gridstack) {
|
|
261
|
-
el.gridstack = new GridStack(el, utils_1.Utils.cloneDeep(options));
|
|
262
|
-
delete options.dragIn;
|
|
263
|
-
delete options.dragInOptions; // only need to be done once (really a static global thing, not per grid)
|
|
264
|
-
}
|
|
265
|
-
grids.push(el.gridstack);
|
|
266
|
-
});
|
|
267
|
-
if (grids.length === 0) {
|
|
268
|
-
console.error('GridStack.initAll() no grid was found with selector "' + selector + '" - element missing or wrong selector ?' +
|
|
269
|
-
'\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.');
|
|
270
|
-
}
|
|
271
|
-
return grids;
|
|
272
|
-
};
|
|
273
|
-
/**
|
|
274
|
-
* call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
|
|
275
|
-
* grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
|
|
276
|
-
* JSON serialized data, including options.
|
|
277
|
-
* @param parent HTML element parent to the grid
|
|
278
|
-
* @param opt grids options used to initialize the grid, and list of children
|
|
279
|
-
*/
|
|
280
|
-
GridStack.addGrid = function (parent, opt) {
|
|
281
|
-
if (opt === void 0) { opt = {}; }
|
|
282
|
-
if (!parent)
|
|
283
|
-
return null;
|
|
284
|
-
// create the grid element, but check if the passed 'parent' already has grid styling and should be used instead
|
|
285
|
-
var el = parent;
|
|
286
|
-
var parentIsGrid = parent.classList.contains('grid-stack');
|
|
287
|
-
if (!parentIsGrid || opt.addRemoveCB) {
|
|
288
|
-
if (opt.addRemoveCB) {
|
|
289
|
-
el = opt.addRemoveCB(parent, opt, true, true);
|
|
290
|
-
}
|
|
291
|
-
else {
|
|
292
|
-
var doc = document.implementation.createHTMLDocument(''); // IE needs a param
|
|
293
|
-
doc.body.innerHTML = "<div class=\"grid-stack " + (opt.class || '') + "\"></div>";
|
|
294
|
-
el = doc.body.children[0];
|
|
295
|
-
parent.appendChild(el);
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
// create grid class and load any children
|
|
299
|
-
var grid = GridStack.init(opt, el);
|
|
300
|
-
return grid;
|
|
301
|
-
};
|
|
302
|
-
/** call this method to register your engine instead of the default one.
|
|
303
|
-
* See instead `GridStackOptions.engineClass` if you only need to
|
|
304
|
-
* replace just one instance.
|
|
305
|
-
*/
|
|
306
|
-
GridStack.registerEngine = function (engineClass) {
|
|
307
|
-
GridStack.engineClass = engineClass;
|
|
308
|
-
};
|
|
309
|
-
Object.defineProperty(GridStack.prototype, "placeholder", {
|
|
310
|
-
/** @internal create placeholder DIV as needed */
|
|
311
|
-
get: function () {
|
|
312
|
-
if (!this._placeholder) {
|
|
313
|
-
var placeholderChild = document.createElement('div'); // child so padding match item-content
|
|
314
|
-
placeholderChild.className = 'placeholder-content';
|
|
315
|
-
if (this.opts.placeholderText) {
|
|
316
|
-
placeholderChild.innerHTML = this.opts.placeholderText;
|
|
317
|
-
}
|
|
318
|
-
this._placeholder = document.createElement('div');
|
|
319
|
-
this._placeholder.classList.add(this.opts.placeholderClass, types_1.gridDefaults.itemClass, this.opts.itemClass);
|
|
320
|
-
this.placeholder.appendChild(placeholderChild);
|
|
321
|
-
}
|
|
322
|
-
return this._placeholder;
|
|
323
|
-
},
|
|
324
|
-
enumerable: false,
|
|
325
|
-
configurable: true
|
|
326
|
-
});
|
|
327
|
-
/**
|
|
328
|
-
* add a new widget and returns it.
|
|
329
|
-
*
|
|
330
|
-
* Widget will be always placed even if result height is more than actual grid height.
|
|
331
|
-
* You need to use `willItFit()` before calling addWidget for additional check.
|
|
332
|
-
* See also `makeWidget()`.
|
|
333
|
-
*
|
|
334
|
-
* @example
|
|
335
|
-
* let grid = GridStack.init();
|
|
336
|
-
* grid.addWidget({w: 3, content: 'hello'});
|
|
337
|
-
* grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">hello</div></div>', {w: 3});
|
|
338
|
-
*
|
|
339
|
-
* @param el GridStackWidget (which can have content string as well), html element, or string definition to add
|
|
340
|
-
* @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget
|
|
341
|
-
*/
|
|
342
|
-
GridStack.prototype.addWidget = function (els, options) {
|
|
343
|
-
function isGridStackWidget(w) {
|
|
344
|
-
return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
|
|
345
|
-
}
|
|
346
|
-
var el;
|
|
347
|
-
var node;
|
|
348
|
-
if (typeof els === 'string') {
|
|
349
|
-
var doc = document.implementation.createHTMLDocument(''); // IE needs a param
|
|
350
|
-
doc.body.innerHTML = els;
|
|
351
|
-
el = doc.body.children[0];
|
|
352
|
-
}
|
|
353
|
-
else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
|
|
354
|
-
node = options = els;
|
|
355
|
-
if (node === null || node === void 0 ? void 0 : node.el) {
|
|
356
|
-
el = node.el; // re-use element stored in the node
|
|
357
|
-
}
|
|
358
|
-
else if (this.opts.addRemoveCB) {
|
|
359
|
-
el = this.opts.addRemoveCB(this.el, options, true, false);
|
|
360
|
-
}
|
|
361
|
-
else {
|
|
362
|
-
var content = (options === null || options === void 0 ? void 0 : options.content) || '';
|
|
363
|
-
var doc = document.implementation.createHTMLDocument(''); // IE needs a param
|
|
364
|
-
doc.body.innerHTML = "<div class=\"grid-stack-item " + (this.opts.itemClass || '') + "\"><div class=\"grid-stack-item-content\">" + content + "</div></div>";
|
|
365
|
-
el = doc.body.children[0];
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
else {
|
|
369
|
-
el = els;
|
|
370
|
-
}
|
|
371
|
-
if (!el)
|
|
372
|
-
return;
|
|
373
|
-
// Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
|
|
374
|
-
// as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
|
|
375
|
-
// So make sure we load any DOM attributes that are not specified in passed in options (which override)
|
|
376
|
-
var domAttr = this._readAttr(el);
|
|
377
|
-
options = utils_1.Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it
|
|
378
|
-
utils_1.Utils.defaults(options, domAttr);
|
|
379
|
-
node = this.engine.prepareNode(options);
|
|
380
|
-
this._writeAttr(el, options);
|
|
381
|
-
if (this._insertNotAppend) {
|
|
382
|
-
this.el.prepend(el);
|
|
383
|
-
}
|
|
384
|
-
else {
|
|
385
|
-
this.el.appendChild(el);
|
|
386
|
-
}
|
|
387
|
-
// similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
|
|
388
|
-
this._prepareElement(el, true, options);
|
|
389
|
-
this._updateContainerHeight();
|
|
390
|
-
// see if there is a sub-grid to create
|
|
391
|
-
if (node.subGrid) {
|
|
392
|
-
this.makeSubGrid(node.el, undefined, undefined, false); //node.subGrid will be used as option in method, no need to pass
|
|
393
|
-
}
|
|
394
|
-
// if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure
|
|
395
|
-
// we don't override the larger 12 column layout that was already saved. #1985
|
|
396
|
-
if (this._prevColumn && this.opts.column === 1) {
|
|
397
|
-
this._ignoreLayoutsNodeChange = true;
|
|
398
|
-
}
|
|
399
|
-
this._triggerAddEvent();
|
|
400
|
-
this._triggerChangeEvent();
|
|
401
|
-
delete this._ignoreLayoutsNodeChange;
|
|
402
|
-
return el;
|
|
403
|
-
};
|
|
404
|
-
/**
|
|
405
|
-
* Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
|
|
406
|
-
* from the parent's subGrid options.
|
|
407
|
-
* @param el gridItem element to convert
|
|
408
|
-
* @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
|
|
409
|
-
* @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
|
|
410
|
-
* @returns newly created grid
|
|
411
|
-
*/
|
|
412
|
-
GridStack.prototype.makeSubGrid = function (el, ops, nodeToAdd, saveContent) {
|
|
413
|
-
var _a, _b, _c;
|
|
414
|
-
if (saveContent === void 0) { saveContent = true; }
|
|
415
|
-
var node = el.gridstackNode;
|
|
416
|
-
if (!node) {
|
|
417
|
-
node = this.makeWidget(el).gridstackNode;
|
|
418
|
-
}
|
|
419
|
-
if ((_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el)
|
|
420
|
-
return node.subGrid; // already done
|
|
421
|
-
// find the template subGrid stored on a parent as fallback...
|
|
422
|
-
var subGridTemplate; // eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
423
|
-
var grid = this;
|
|
424
|
-
while (grid && !subGridTemplate) {
|
|
425
|
-
subGridTemplate = (_b = grid.opts) === null || _b === void 0 ? void 0 : _b.subGrid;
|
|
426
|
-
grid = (_c = grid.parentGridItem) === null || _c === void 0 ? void 0 : _c.grid;
|
|
427
|
-
}
|
|
428
|
-
//... and set the create options
|
|
429
|
-
ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign({}, (subGridTemplate || {})), { children: undefined }), (ops || node.subGrid)));
|
|
430
|
-
node.subGrid = ops;
|
|
431
|
-
// if column special case it set, remember that flag and set default
|
|
432
|
-
var autoColumn;
|
|
433
|
-
if (ops.column === 'auto') {
|
|
434
|
-
autoColumn = true;
|
|
435
|
-
ops.column = Math.max(node.w || 1, (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : nodeToAdd.w) || 1);
|
|
436
|
-
ops.disableOneColumnMode = true; // driven by parent
|
|
437
|
-
}
|
|
438
|
-
// if we're converting an existing full item, move over the content to be the first sub item in the new grid
|
|
439
|
-
var content = node.el.querySelector('.grid-stack-item-content');
|
|
440
|
-
var newItem;
|
|
441
|
-
var newItemOpt;
|
|
442
|
-
if (saveContent) {
|
|
443
|
-
this._removeDD(node.el); // remove D&D since it's set on content div
|
|
444
|
-
newItemOpt = __assign(__assign({}, node), { x: 0, y: 0 });
|
|
445
|
-
utils_1.Utils.removeInternalForSave(newItemOpt);
|
|
446
|
-
delete newItemOpt.subGrid;
|
|
447
|
-
if (node.content) {
|
|
448
|
-
newItemOpt.content = node.content;
|
|
449
|
-
delete node.content;
|
|
450
|
-
}
|
|
451
|
-
if (this.opts.addRemoveCB) {
|
|
452
|
-
newItem = this.opts.addRemoveCB(this.el, newItemOpt, true, false);
|
|
453
|
-
}
|
|
454
|
-
else {
|
|
455
|
-
var doc = document.implementation.createHTMLDocument(''); // IE needs a param
|
|
456
|
-
doc.body.innerHTML = "<div class=\"grid-stack-item\"></div>";
|
|
457
|
-
newItem = doc.body.children[0];
|
|
458
|
-
newItem.appendChild(content);
|
|
459
|
-
doc.body.innerHTML = "<div class=\"grid-stack-item-content\"></div>";
|
|
460
|
-
content = doc.body.children[0];
|
|
461
|
-
node.el.appendChild(content);
|
|
462
|
-
}
|
|
463
|
-
this._prepareDragDropByNode(node); // ... and restore original D&D
|
|
464
|
-
}
|
|
465
|
-
// if we're adding an additional item, make the container large enough to have them both
|
|
466
|
-
if (nodeToAdd) {
|
|
467
|
-
var w = autoColumn ? ops.column : node.w;
|
|
468
|
-
var h = node.h + nodeToAdd.h;
|
|
469
|
-
var style_1 = node.el.style;
|
|
470
|
-
style_1.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd
|
|
471
|
-
this.update(node.el, { w: w, h: h });
|
|
472
|
-
setTimeout(function () { return style_1.transition = null; }); // recover animation
|
|
473
|
-
}
|
|
474
|
-
if (this.opts.addRemoveCB) {
|
|
475
|
-
ops.addRemoveCB = ops.addRemoveCB || this.opts.addRemoveCB;
|
|
476
|
-
}
|
|
477
|
-
var subGrid = node.subGrid = GridStack.addGrid(content, ops);
|
|
478
|
-
if (nodeToAdd === null || nodeToAdd === void 0 ? void 0 : nodeToAdd._moving)
|
|
479
|
-
subGrid._isTemp = true; // prevent re-nesting as we add over
|
|
480
|
-
if (autoColumn)
|
|
481
|
-
subGrid._autoColumn = true;
|
|
482
|
-
// add the original content back as a child of hte newly created grid
|
|
483
|
-
if (saveContent) {
|
|
484
|
-
subGrid.addWidget(newItem, newItemOpt);
|
|
485
|
-
}
|
|
486
|
-
// now add any additional node
|
|
487
|
-
if (nodeToAdd) {
|
|
488
|
-
if (nodeToAdd._moving) {
|
|
489
|
-
// create an artificial event even for the just created grid to receive this item
|
|
490
|
-
window.setTimeout(function () { return utils_1.Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el); }, 0);
|
|
491
|
-
}
|
|
492
|
-
else {
|
|
493
|
-
subGrid.addWidget(node.el, node);
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
return subGrid;
|
|
497
|
-
};
|
|
498
|
-
/**
|
|
499
|
-
* called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
|
|
500
|
-
* to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
|
|
501
|
-
*/
|
|
502
|
-
GridStack.prototype.removeAsSubGrid = function (nodeThatRemoved) {
|
|
503
|
-
var _this = this;
|
|
504
|
-
var _a;
|
|
505
|
-
var pGrid = (_a = this.parentGridItem) === null || _a === void 0 ? void 0 : _a.grid;
|
|
506
|
-
if (!pGrid)
|
|
507
|
-
return;
|
|
508
|
-
pGrid.batchUpdate();
|
|
509
|
-
pGrid.removeWidget(this.parentGridItem.el, true, true);
|
|
510
|
-
this.engine.nodes.forEach(function (n) {
|
|
511
|
-
// migrate any children over and offsetting by our location
|
|
512
|
-
n.x += _this.parentGridItem.x;
|
|
513
|
-
n.y += _this.parentGridItem.y;
|
|
514
|
-
pGrid.addWidget(n.el, n);
|
|
515
|
-
});
|
|
516
|
-
pGrid.batchUpdate(false);
|
|
517
|
-
if (this.parentGridItem)
|
|
518
|
-
delete this.parentGridItem.subGrid;
|
|
519
|
-
delete this.parentGridItem;
|
|
520
|
-
// create an artificial event for the original grid now that this one is gone (got a leave, but won't get enter)
|
|
521
|
-
if (nodeThatRemoved) {
|
|
522
|
-
window.setTimeout(function () { return utils_1.Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el); }, 0);
|
|
523
|
-
}
|
|
524
|
-
};
|
|
525
|
-
/**
|
|
526
|
-
/**
|
|
527
|
-
* saves the current layout returning a list of widgets for serialization which might include any nested grids.
|
|
528
|
-
* @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
|
|
529
|
-
* be removed.
|
|
530
|
-
* @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
|
|
531
|
-
* to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
|
|
532
|
-
* @returns list of widgets or full grid option, including .children list of widgets
|
|
533
|
-
*/
|
|
534
|
-
GridStack.prototype.save = function (saveContent, saveGridOpt) {
|
|
535
|
-
if (saveContent === void 0) { saveContent = true; }
|
|
536
|
-
if (saveGridOpt === void 0) { saveGridOpt = false; }
|
|
537
|
-
// return copied nodes we can modify at will...
|
|
538
|
-
var list = this.engine.save(saveContent);
|
|
539
|
-
// check for HTML content and nested grids
|
|
540
|
-
list.forEach(function (n) {
|
|
541
|
-
var _a;
|
|
542
|
-
if (saveContent && n.el && !n.subGrid) { // sub-grid are saved differently, not plain content
|
|
543
|
-
var sub = n.el.querySelector('.grid-stack-item-content');
|
|
544
|
-
n.content = sub ? sub.innerHTML : undefined;
|
|
545
|
-
if (!n.content)
|
|
546
|
-
delete n.content;
|
|
547
|
-
}
|
|
548
|
-
else {
|
|
549
|
-
if (!saveContent) {
|
|
550
|
-
delete n.content;
|
|
551
|
-
}
|
|
552
|
-
// check for nested grid
|
|
553
|
-
if ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
|
|
554
|
-
var listOrOpt = n.subGrid.save(saveContent, saveGridOpt);
|
|
555
|
-
n.subGrid = (saveGridOpt ? listOrOpt : { children: listOrOpt });
|
|
556
|
-
}
|
|
557
|
-
}
|
|
558
|
-
delete n.el;
|
|
559
|
-
});
|
|
560
|
-
// check if save entire grid options (needed for recursive) + children...
|
|
561
|
-
if (saveGridOpt) {
|
|
562
|
-
var o = utils_1.Utils.cloneDeep(this.opts);
|
|
563
|
-
// delete default values that will be recreated on launch
|
|
564
|
-
if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {
|
|
565
|
-
o.margin = o.marginTop;
|
|
566
|
-
delete o.marginTop;
|
|
567
|
-
delete o.marginRight;
|
|
568
|
-
delete o.marginBottom;
|
|
569
|
-
delete o.marginLeft;
|
|
570
|
-
}
|
|
571
|
-
if (o.rtl === (this.el.style.direction === 'rtl')) {
|
|
572
|
-
o.rtl = 'auto';
|
|
573
|
-
}
|
|
574
|
-
if (this._isAutoCellHeight) {
|
|
575
|
-
o.cellHeight = 'auto';
|
|
576
|
-
}
|
|
577
|
-
if (this._autoColumn) {
|
|
578
|
-
o.column = 'auto';
|
|
579
|
-
delete o.disableOneColumnMode;
|
|
580
|
-
}
|
|
581
|
-
var origShow = o._alwaysShowResizeHandle;
|
|
582
|
-
delete o._alwaysShowResizeHandle;
|
|
583
|
-
if (origShow !== undefined) {
|
|
584
|
-
o.alwaysShowResizeHandle = origShow;
|
|
585
|
-
}
|
|
586
|
-
else {
|
|
587
|
-
delete o.alwaysShowResizeHandle;
|
|
588
|
-
}
|
|
589
|
-
utils_1.Utils.removeInternalAndSame(o, types_1.gridDefaults);
|
|
590
|
-
o.children = list;
|
|
591
|
-
return o;
|
|
592
|
-
}
|
|
593
|
-
return list;
|
|
594
|
-
};
|
|
595
|
-
/**
|
|
596
|
-
* load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
|
|
597
|
-
*
|
|
598
|
-
* @param layout list of widgets definition to update/create
|
|
599
|
-
* @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
|
|
600
|
-
* the user control of insertion.
|
|
601
|
-
*
|
|
602
|
-
* @example
|
|
603
|
-
* see http://gridstackjs.com/demo/serialization.html
|
|
604
|
-
**/
|
|
605
|
-
GridStack.prototype.load = function (layout, addRemove) {
|
|
606
|
-
var _this = this;
|
|
607
|
-
if (addRemove === void 0) { addRemove = this.opts.addRemoveCB || true; }
|
|
608
|
-
var items = GridStack.Utils.sort(__spreadArrays(layout), -1, this._prevColumn || this.getColumn()); // make copy before we mod/sort
|
|
609
|
-
this._insertNotAppend = true; // since create in reverse order...
|
|
610
|
-
// if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
|
|
611
|
-
// the original wanted layout so we can scale back up correctly #1471
|
|
612
|
-
if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(function (n) { return (n.x + n.w) > _this.opts.column; })) {
|
|
613
|
-
this._ignoreLayoutsNodeChange = true; // skip layout update
|
|
614
|
-
this.engine.cacheLayout(items, this._prevColumn, true);
|
|
615
|
-
}
|
|
616
|
-
// if given a different callback, temporally set it as global option to creating will use it
|
|
617
|
-
var prevCB = this.opts.addRemoveCB;
|
|
618
|
-
if (typeof (addRemove) === 'function')
|
|
619
|
-
this.opts.addRemoveCB = addRemove;
|
|
620
|
-
var removed = [];
|
|
621
|
-
this.batchUpdate();
|
|
622
|
-
// see if any items are missing from new layout and need to be removed first
|
|
623
|
-
if (addRemove) {
|
|
624
|
-
var copyNodes = __spreadArrays(this.engine.nodes); // don't loop through array you modify
|
|
625
|
-
copyNodes.forEach(function (n) {
|
|
626
|
-
var item = items.find(function (w) { return n.id === w.id; });
|
|
627
|
-
if (!item) {
|
|
628
|
-
if (_this.opts.addRemoveCB)
|
|
629
|
-
_this.opts.addRemoveCB(_this.el, n, false, false);
|
|
630
|
-
removed.push(n); // batch keep track
|
|
631
|
-
_this.removeWidget(n.el, true, false);
|
|
632
|
-
}
|
|
633
|
-
});
|
|
634
|
-
}
|
|
635
|
-
// now add/update the widgets
|
|
636
|
-
items.forEach(function (w) {
|
|
637
|
-
var item = (w.id || w.id === 0) ? _this.engine.nodes.find(function (n) { return n.id === w.id; }) : undefined;
|
|
638
|
-
if (item) {
|
|
639
|
-
_this.update(item.el, w);
|
|
640
|
-
if (w.subGrid && w.subGrid.children) { // update any sub grid as well
|
|
641
|
-
var sub = item.el.querySelector('.grid-stack');
|
|
642
|
-
if (sub && sub.gridstack) {
|
|
643
|
-
sub.gridstack.load(w.subGrid.children); // TODO: support updating grid options ?
|
|
644
|
-
_this._insertNotAppend = true; // got reset by above call
|
|
645
|
-
}
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
else if (addRemove) {
|
|
649
|
-
_this.addWidget(w);
|
|
650
|
-
}
|
|
651
|
-
});
|
|
652
|
-
this.engine.removedNodes = removed;
|
|
653
|
-
this.batchUpdate(false);
|
|
654
|
-
// after commit, clear that flag
|
|
655
|
-
delete this._ignoreLayoutsNodeChange;
|
|
656
|
-
delete this._insertNotAppend;
|
|
657
|
-
prevCB ? this.opts.addRemoveCB = prevCB : delete this.opts.addRemoveCB;
|
|
658
|
-
return this;
|
|
659
|
-
};
|
|
660
|
-
/**
|
|
661
|
-
* use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
|
|
662
|
-
* and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
|
|
663
|
-
*/
|
|
664
|
-
GridStack.prototype.batchUpdate = function (flag) {
|
|
665
|
-
if (flag === void 0) { flag = true; }
|
|
666
|
-
this.engine.batchUpdate(flag);
|
|
667
|
-
if (!flag) {
|
|
668
|
-
this._triggerRemoveEvent();
|
|
669
|
-
this._triggerAddEvent();
|
|
670
|
-
this._triggerChangeEvent();
|
|
671
|
-
}
|
|
672
|
-
return this;
|
|
673
|
-
};
|
|
674
|
-
/**
|
|
675
|
-
* Gets current cell height.
|
|
676
|
-
*/
|
|
677
|
-
GridStack.prototype.getCellHeight = function (forcePixel) {
|
|
678
|
-
if (forcePixel === void 0) { forcePixel = false; }
|
|
679
|
-
if (this.opts.cellHeight && this.opts.cellHeight !== 'auto' &&
|
|
680
|
-
(!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
|
|
681
|
-
return this.opts.cellHeight;
|
|
682
|
-
}
|
|
683
|
-
// else get first cell height
|
|
684
|
-
var el = this.el.querySelector('.' + this.opts.itemClass);
|
|
685
|
-
if (el) {
|
|
686
|
-
var height = utils_1.Utils.toNumber(el.getAttribute('gs-h'));
|
|
687
|
-
return Math.round(el.offsetHeight / height);
|
|
688
|
-
}
|
|
689
|
-
// else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
|
|
690
|
-
var rows = parseInt(this.el.getAttribute('gs-current-row'));
|
|
691
|
-
return rows ? Math.round(this.el.getBoundingClientRect().height / rows) : this.opts.cellHeight;
|
|
692
|
-
};
|
|
693
|
-
/**
|
|
694
|
-
* Update current cell height - see `GridStackOptions.cellHeight` for format.
|
|
695
|
-
* This method rebuilds an internal CSS style sheet.
|
|
696
|
-
* Note: You can expect performance issues if call this method too often.
|
|
697
|
-
*
|
|
698
|
-
* @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
|
|
699
|
-
* if pass 0 the CSS will be generated by the application instead.
|
|
700
|
-
* @param update (Optional) if false, styles will not be updated
|
|
701
|
-
*
|
|
702
|
-
* @example
|
|
703
|
-
* grid.cellHeight(100); // same as 100px
|
|
704
|
-
* grid.cellHeight('70px');
|
|
705
|
-
* grid.cellHeight(grid.cellWidth() * 1.2);
|
|
706
|
-
*/
|
|
707
|
-
GridStack.prototype.cellHeight = function (val, update) {
|
|
708
|
-
if (update === void 0) { update = true; }
|
|
709
|
-
// if not called internally, check if we're changing mode
|
|
710
|
-
if (update && val !== undefined) {
|
|
711
|
-
if (this._isAutoCellHeight !== (val === 'auto')) {
|
|
712
|
-
this._isAutoCellHeight = (val === 'auto');
|
|
713
|
-
this._updateWindowResizeEvent();
|
|
714
|
-
}
|
|
715
|
-
}
|
|
716
|
-
if (val === 'initial' || val === 'auto') {
|
|
717
|
-
val = undefined;
|
|
718
|
-
}
|
|
719
|
-
// make item content be square
|
|
720
|
-
if (val === undefined) {
|
|
721
|
-
var marginDiff = -this.opts.marginRight - this.opts.marginLeft
|
|
722
|
-
+ this.opts.marginTop + this.opts.marginBottom;
|
|
723
|
-
val = this.cellWidth() + marginDiff;
|
|
724
|
-
}
|
|
725
|
-
var data = utils_1.Utils.parseHeight(val);
|
|
726
|
-
if (this.opts.cellHeightUnit === data.unit && this.opts.cellHeight === data.h) {
|
|
727
|
-
return this;
|
|
728
|
-
}
|
|
729
|
-
this.opts.cellHeightUnit = data.unit;
|
|
730
|
-
this.opts.cellHeight = data.h;
|
|
731
|
-
if (update) {
|
|
732
|
-
this._updateStyles(true); // true = force re-create for current # of rows
|
|
733
|
-
}
|
|
734
|
-
return this;
|
|
735
|
-
};
|
|
736
|
-
/** Gets current cell width. */
|
|
737
|
-
GridStack.prototype.cellWidth = function () {
|
|
738
|
-
return this._widthOrContainer() / this.getColumn();
|
|
739
|
-
};
|
|
740
|
-
/** return our expected width (or parent) for 1 column check */
|
|
741
|
-
GridStack.prototype._widthOrContainer = function () {
|
|
742
|
-
// use `offsetWidth` or `clientWidth` (no scrollbar) ?
|
|
743
|
-
// https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
|
|
744
|
-
return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
|
|
745
|
-
};
|
|
746
|
-
/** re-layout grid items to reclaim any empty space */
|
|
747
|
-
GridStack.prototype.compact = function () {
|
|
748
|
-
this.engine.compact();
|
|
749
|
-
this._triggerChangeEvent();
|
|
750
|
-
return this;
|
|
751
|
-
};
|
|
752
|
-
/**
|
|
753
|
-
* set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
|
|
754
|
-
* as well as cache the original layout so you can revert back to previous positions without loss.
|
|
755
|
-
* Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
|
|
756
|
-
* else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
|
|
757
|
-
* @param column - Integer > 0 (default 12).
|
|
758
|
-
* @param layout specify the type of re-layout that will happen (position, size, etc...).
|
|
759
|
-
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
|
|
760
|
-
*/
|
|
761
|
-
GridStack.prototype.column = function (column, layout) {
|
|
762
|
-
if (layout === void 0) { layout = 'moveScale'; }
|
|
763
|
-
if (column < 1 || this.opts.column === column)
|
|
764
|
-
return this;
|
|
765
|
-
var oldColumn = this.getColumn();
|
|
766
|
-
// if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)
|
|
767
|
-
// then remember the original columns so we can restore.
|
|
768
|
-
if (column === 1) {
|
|
769
|
-
this._prevColumn = oldColumn;
|
|
770
|
-
}
|
|
771
|
-
else {
|
|
772
|
-
delete this._prevColumn;
|
|
773
|
-
}
|
|
774
|
-
this.el.classList.remove('grid-stack-' + oldColumn);
|
|
775
|
-
this.el.classList.add('grid-stack-' + column);
|
|
776
|
-
this.opts.column = this.engine.column = column;
|
|
777
|
-
// update the items now - see if the dom order nodes should be passed instead (else default to current list)
|
|
778
|
-
var domNodes;
|
|
779
|
-
if (column === 1 && this.opts.oneColumnModeDomSort) {
|
|
780
|
-
domNodes = [];
|
|
781
|
-
this.getGridItems().forEach(function (el) {
|
|
782
|
-
if (el.gridstackNode) {
|
|
783
|
-
domNodes.push(el.gridstackNode);
|
|
784
|
-
}
|
|
785
|
-
});
|
|
786
|
-
if (!domNodes.length) {
|
|
787
|
-
domNodes = undefined;
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
this.engine.updateNodeWidths(oldColumn, column, domNodes, layout);
|
|
791
|
-
if (this._isAutoCellHeight)
|
|
792
|
-
this.cellHeight();
|
|
793
|
-
// and trigger our event last...
|
|
794
|
-
this._ignoreLayoutsNodeChange = true; // skip layout update
|
|
795
|
-
this._triggerChangeEvent();
|
|
796
|
-
delete this._ignoreLayoutsNodeChange;
|
|
797
|
-
return this;
|
|
798
|
-
};
|
|
799
|
-
/**
|
|
800
|
-
* get the number of columns in the grid (default 12)
|
|
801
|
-
*/
|
|
802
|
-
GridStack.prototype.getColumn = function () {
|
|
803
|
-
return this.opts.column;
|
|
804
|
-
};
|
|
805
|
-
/** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
|
|
806
|
-
GridStack.prototype.getGridItems = function () {
|
|
807
|
-
var _this = this;
|
|
808
|
-
return Array.from(this.el.children)
|
|
809
|
-
.filter(function (el) { return el.matches('.' + _this.opts.itemClass) && !el.matches('.' + _this.opts.placeholderClass); });
|
|
810
|
-
};
|
|
811
|
-
/**
|
|
812
|
-
* Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
|
|
813
|
-
* @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
|
|
814
|
-
*/
|
|
815
|
-
GridStack.prototype.destroy = function (removeDOM) {
|
|
816
|
-
if (removeDOM === void 0) { removeDOM = true; }
|
|
817
|
-
if (!this.el)
|
|
818
|
-
return; // prevent multiple calls
|
|
819
|
-
this._updateWindowResizeEvent(true);
|
|
820
|
-
this.setStatic(true, false); // permanently removes DD but don't set CSS class (we're going away)
|
|
821
|
-
this.setAnimation(false);
|
|
822
|
-
if (!removeDOM) {
|
|
823
|
-
this.removeAll(removeDOM);
|
|
824
|
-
this.el.classList.remove(this._styleSheetClass);
|
|
825
|
-
}
|
|
826
|
-
else {
|
|
827
|
-
this.el.parentNode.removeChild(this.el);
|
|
828
|
-
}
|
|
829
|
-
this._removeStylesheet();
|
|
830
|
-
this.el.removeAttribute('gs-current-row');
|
|
831
|
-
if (this.parentGridItem)
|
|
832
|
-
delete this.parentGridItem.subGrid;
|
|
833
|
-
delete this.parentGridItem;
|
|
834
|
-
delete this.opts;
|
|
835
|
-
delete this._placeholder;
|
|
836
|
-
delete this.engine;
|
|
837
|
-
delete this.el.gridstack; // remove circular dependency that would prevent a freeing
|
|
838
|
-
delete this.el;
|
|
839
|
-
return this;
|
|
840
|
-
};
|
|
841
|
-
/**
|
|
842
|
-
* enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
|
|
843
|
-
*/
|
|
844
|
-
GridStack.prototype.float = function (val) {
|
|
845
|
-
if (this.opts.float !== val) {
|
|
846
|
-
this.opts.float = this.engine.float = val;
|
|
847
|
-
this._triggerChangeEvent();
|
|
848
|
-
}
|
|
849
|
-
return this;
|
|
850
|
-
};
|
|
851
|
-
/**
|
|
852
|
-
* get the current float mode
|
|
853
|
-
*/
|
|
854
|
-
GridStack.prototype.getFloat = function () {
|
|
855
|
-
return this.engine.float;
|
|
856
|
-
};
|
|
857
|
-
/**
|
|
858
|
-
* Get the position of the cell under a pixel on screen.
|
|
859
|
-
* @param position the position of the pixel to resolve in
|
|
860
|
-
* absolute coordinates, as an object with top and left properties
|
|
861
|
-
* @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
|
|
862
|
-
* Useful when grid is within `position: relative` element
|
|
863
|
-
*
|
|
864
|
-
* Returns an object with properties `x` and `y` i.e. the column and row in the grid.
|
|
865
|
-
*/
|
|
866
|
-
GridStack.prototype.getCellFromPixel = function (position, useDocRelative) {
|
|
867
|
-
if (useDocRelative === void 0) { useDocRelative = false; }
|
|
868
|
-
var box = this.el.getBoundingClientRect();
|
|
869
|
-
// console.log(`getBoundingClientRect left: ${box.left} top: ${box.top} w: ${box.w} h: ${box.h}`)
|
|
870
|
-
var containerPos;
|
|
871
|
-
if (useDocRelative) {
|
|
872
|
-
containerPos = { top: box.top + document.documentElement.scrollTop, left: box.left };
|
|
873
|
-
// console.log(`getCellFromPixel scrollTop: ${document.documentElement.scrollTop}`)
|
|
874
|
-
}
|
|
875
|
-
else {
|
|
876
|
-
containerPos = { top: this.el.offsetTop, left: this.el.offsetLeft };
|
|
877
|
-
// console.log(`getCellFromPixel offsetTop: ${containerPos.left} offsetLeft: ${containerPos.top}`)
|
|
878
|
-
}
|
|
879
|
-
var relativeLeft = position.left - containerPos.left;
|
|
880
|
-
var relativeTop = position.top - containerPos.top;
|
|
881
|
-
var columnWidth = (box.width / this.getColumn());
|
|
882
|
-
var rowHeight = (box.height / parseInt(this.el.getAttribute('gs-current-row')));
|
|
883
|
-
return { x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight) };
|
|
884
|
-
};
|
|
885
|
-
/** returns the current number of rows, which will be at least `minRow` if set */
|
|
886
|
-
GridStack.prototype.getRow = function () {
|
|
887
|
-
return Math.max(this.engine.getRow(), this.opts.minRow);
|
|
888
|
-
};
|
|
889
|
-
/**
|
|
890
|
-
* Checks if specified area is empty.
|
|
891
|
-
* @param x the position x.
|
|
892
|
-
* @param y the position y.
|
|
893
|
-
* @param w the width of to check
|
|
894
|
-
* @param h the height of to check
|
|
895
|
-
*/
|
|
896
|
-
GridStack.prototype.isAreaEmpty = function (x, y, w, h) {
|
|
897
|
-
return this.engine.isAreaEmpty(x, y, w, h);
|
|
898
|
-
};
|
|
899
|
-
/**
|
|
900
|
-
* If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
|
|
901
|
-
* If you want gridstack to add the elements for you, use `addWidget()` instead.
|
|
902
|
-
* Makes the given element a widget and returns it.
|
|
903
|
-
* @param els widget or single selector to convert.
|
|
904
|
-
*
|
|
905
|
-
* @example
|
|
906
|
-
* let grid = GridStack.init();
|
|
907
|
-
* grid.el.appendChild('<div id="gsi-1" gs-w="3"></div>');
|
|
908
|
-
* grid.makeWidget('#gsi-1');
|
|
909
|
-
*/
|
|
910
|
-
GridStack.prototype.makeWidget = function (els) {
|
|
911
|
-
var el = GridStack.getElement(els);
|
|
912
|
-
this._prepareElement(el, true);
|
|
913
|
-
this._updateContainerHeight();
|
|
914
|
-
this._triggerAddEvent();
|
|
915
|
-
this._triggerChangeEvent();
|
|
916
|
-
return el;
|
|
917
|
-
};
|
|
918
|
-
/**
|
|
919
|
-
* Event handler that extracts our CustomEvent data out automatically for receiving custom
|
|
920
|
-
* notifications (see doc for supported events)
|
|
921
|
-
* @param name of the event (see possible values) or list of names space separated
|
|
922
|
-
* @param callback function called with event and optional second/third param
|
|
923
|
-
* (see README documentation for each signature).
|
|
924
|
-
*
|
|
925
|
-
* @example
|
|
926
|
-
* grid.on('added', function(e, items) { log('added ', items)} );
|
|
927
|
-
* or
|
|
928
|
-
* grid.on('added removed change', function(e, items) { log(e.type, items)} );
|
|
929
|
-
*
|
|
930
|
-
* Note: in some cases it is the same as calling native handler and parsing the event.
|
|
931
|
-
* grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );
|
|
932
|
-
*
|
|
933
|
-
*/
|
|
934
|
-
GridStack.prototype.on = function (name, callback) {
|
|
935
|
-
var _this = this;
|
|
936
|
-
// check for array of names being passed instead
|
|
937
|
-
if (name.indexOf(' ') !== -1) {
|
|
938
|
-
var names = name.split(' ');
|
|
939
|
-
names.forEach(function (name) { return _this.on(name, callback); });
|
|
940
|
-
return this;
|
|
941
|
-
}
|
|
942
|
-
if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {
|
|
943
|
-
// native CustomEvent handlers - cash the generic handlers so we can easily remove
|
|
944
|
-
var noData = (name === 'enable' || name === 'disable');
|
|
945
|
-
if (noData) {
|
|
946
|
-
this._gsEventHandler[name] = function (event) { return callback(event); };
|
|
947
|
-
}
|
|
948
|
-
else {
|
|
949
|
-
this._gsEventHandler[name] = function (event) { return callback(event, event.detail); };
|
|
950
|
-
}
|
|
951
|
-
this.el.addEventListener(name, this._gsEventHandler[name]);
|
|
952
|
-
}
|
|
953
|
-
else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize' || name === 'resizestop' || name === 'dropped') {
|
|
954
|
-
// drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.
|
|
955
|
-
// do same for start event to make it easier...
|
|
956
|
-
this._gsEventHandler[name] = callback;
|
|
957
|
-
}
|
|
958
|
-
else {
|
|
959
|
-
console.log('GridStack.on(' + name + ') event not supported, but you can still use $(".grid-stack").on(...) while jquery-ui is still used internally.');
|
|
960
|
-
}
|
|
961
|
-
return this;
|
|
962
|
-
};
|
|
963
|
-
/**
|
|
964
|
-
* unsubscribe from the 'on' event below
|
|
965
|
-
* @param name of the event (see possible values)
|
|
966
|
-
*/
|
|
967
|
-
GridStack.prototype.off = function (name) {
|
|
968
|
-
var _this = this;
|
|
969
|
-
// check for array of names being passed instead
|
|
970
|
-
if (name.indexOf(' ') !== -1) {
|
|
971
|
-
var names = name.split(' ');
|
|
972
|
-
names.forEach(function (name) { return _this.off(name); });
|
|
973
|
-
return this;
|
|
974
|
-
}
|
|
975
|
-
if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {
|
|
976
|
-
// remove native CustomEvent handlers
|
|
977
|
-
if (this._gsEventHandler[name]) {
|
|
978
|
-
this.el.removeEventListener(name, this._gsEventHandler[name]);
|
|
979
|
-
}
|
|
980
|
-
}
|
|
981
|
-
delete this._gsEventHandler[name];
|
|
982
|
-
return this;
|
|
983
|
-
};
|
|
984
|
-
/**
|
|
985
|
-
* Removes widget from the grid.
|
|
986
|
-
* @param el widget or selector to modify
|
|
987
|
-
* @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
|
|
988
|
-
* @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
|
|
989
|
-
*/
|
|
990
|
-
GridStack.prototype.removeWidget = function (els, removeDOM, triggerEvent) {
|
|
991
|
-
var _this = this;
|
|
992
|
-
if (removeDOM === void 0) { removeDOM = true; }
|
|
993
|
-
if (triggerEvent === void 0) { triggerEvent = true; }
|
|
994
|
-
GridStack.getElements(els).forEach(function (el) {
|
|
995
|
-
if (el.parentElement && el.parentElement !== _this.el)
|
|
996
|
-
return; // not our child!
|
|
997
|
-
var node = el.gridstackNode;
|
|
998
|
-
// For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
|
|
999
|
-
if (!node) {
|
|
1000
|
-
node = _this.engine.nodes.find(function (n) { return el === n.el; });
|
|
1001
|
-
}
|
|
1002
|
-
if (!node)
|
|
1003
|
-
return;
|
|
1004
|
-
// remove our DOM data (circular link) and drag&drop permanently
|
|
1005
|
-
delete el.gridstackNode;
|
|
1006
|
-
_this._removeDD(el);
|
|
1007
|
-
_this.engine.removeNode(node, removeDOM, triggerEvent);
|
|
1008
|
-
if (removeDOM && el.parentElement) {
|
|
1009
|
-
el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM
|
|
1010
|
-
}
|
|
1011
|
-
});
|
|
1012
|
-
if (triggerEvent) {
|
|
1013
|
-
this._triggerRemoveEvent();
|
|
1014
|
-
this._triggerChangeEvent();
|
|
1015
|
-
}
|
|
1016
|
-
return this;
|
|
1017
|
-
};
|
|
1018
|
-
/**
|
|
1019
|
-
* Removes all widgets from the grid.
|
|
1020
|
-
* @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
|
|
1021
|
-
*/
|
|
1022
|
-
GridStack.prototype.removeAll = function (removeDOM) {
|
|
1023
|
-
var _this = this;
|
|
1024
|
-
if (removeDOM === void 0) { removeDOM = true; }
|
|
1025
|
-
// always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
|
|
1026
|
-
this.engine.nodes.forEach(function (n) {
|
|
1027
|
-
delete n.el.gridstackNode;
|
|
1028
|
-
_this._removeDD(n.el);
|
|
1029
|
-
});
|
|
1030
|
-
this.engine.removeAll(removeDOM);
|
|
1031
|
-
this._triggerRemoveEvent();
|
|
1032
|
-
return this;
|
|
1033
|
-
};
|
|
1034
|
-
/**
|
|
1035
|
-
* Toggle the grid animation state. Toggles the `grid-stack-animate` class.
|
|
1036
|
-
* @param doAnimate if true the grid will animate.
|
|
1037
|
-
*/
|
|
1038
|
-
GridStack.prototype.setAnimation = function (doAnimate) {
|
|
1039
|
-
if (doAnimate) {
|
|
1040
|
-
this.el.classList.add('grid-stack-animate');
|
|
1041
|
-
}
|
|
1042
|
-
else {
|
|
1043
|
-
this.el.classList.remove('grid-stack-animate');
|
|
1044
|
-
}
|
|
1045
|
-
return this;
|
|
1046
|
-
};
|
|
1047
|
-
/**
|
|
1048
|
-
* Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
|
|
1049
|
-
* Also toggle the grid-stack-static class.
|
|
1050
|
-
* @param val if true the grid become static.
|
|
1051
|
-
* @param updateClass true (default) if css class gets updated
|
|
1052
|
-
* @param recurse true (default) if sub-grids also get updated
|
|
1053
|
-
*/
|
|
1054
|
-
GridStack.prototype.setStatic = function (val, updateClass, recurse) {
|
|
1055
|
-
var _this = this;
|
|
1056
|
-
if (updateClass === void 0) { updateClass = true; }
|
|
1057
|
-
if (recurse === void 0) { recurse = true; }
|
|
1058
|
-
if (this.opts.staticGrid === val)
|
|
1059
|
-
return this;
|
|
1060
|
-
this.opts.staticGrid = val;
|
|
1061
|
-
this._setupRemoveDrop();
|
|
1062
|
-
this._setupAcceptWidget();
|
|
1063
|
-
this.engine.nodes.forEach(function (n) {
|
|
1064
|
-
_this._prepareDragDropByNode(n); // either delete or init Drag&drop
|
|
1065
|
-
if (n.subGrid && recurse)
|
|
1066
|
-
n.subGrid.setStatic(val, updateClass, recurse);
|
|
1067
|
-
});
|
|
1068
|
-
if (updateClass) {
|
|
1069
|
-
this._setStaticClass();
|
|
1070
|
-
}
|
|
1071
|
-
return this;
|
|
1072
|
-
};
|
|
1073
|
-
/**
|
|
1074
|
-
* 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.
|
|
1075
|
-
* @param els widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
|
|
1076
|
-
* @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.
|
|
1077
|
-
*/
|
|
1078
|
-
GridStack.prototype.update = function (els, opt) {
|
|
1079
|
-
var _this = this;
|
|
1080
|
-
// support legacy call for now ?
|
|
1081
|
-
if (arguments.length > 2) {
|
|
1082
|
-
console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon');
|
|
1083
|
-
// eslint-disable-next-line prefer-rest-params
|
|
1084
|
-
var a = arguments, i = 1;
|
|
1085
|
-
opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };
|
|
1086
|
-
return this.update(els, opt);
|
|
1087
|
-
}
|
|
1088
|
-
GridStack.getElements(els).forEach(function (el) {
|
|
1089
|
-
if (!el || !el.gridstackNode)
|
|
1090
|
-
return;
|
|
1091
|
-
var n = el.gridstackNode;
|
|
1092
|
-
var w = utils_1.Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
|
|
1093
|
-
delete w.autoPosition;
|
|
1094
|
-
// move/resize widget if anything changed
|
|
1095
|
-
var keys = ['x', 'y', 'w', 'h'];
|
|
1096
|
-
var m;
|
|
1097
|
-
if (keys.some(function (k) { return w[k] !== undefined && w[k] !== n[k]; })) {
|
|
1098
|
-
m = {};
|
|
1099
|
-
keys.forEach(function (k) {
|
|
1100
|
-
m[k] = (w[k] !== undefined) ? w[k] : n[k];
|
|
1101
|
-
delete w[k];
|
|
1102
|
-
});
|
|
1103
|
-
}
|
|
1104
|
-
// for a move as well IFF there is any min/max fields set
|
|
1105
|
-
if (!m && (w.minW || w.minH || w.maxW || w.maxH)) {
|
|
1106
|
-
m = {}; // will use node position but validate values
|
|
1107
|
-
}
|
|
1108
|
-
// check for content changing
|
|
1109
|
-
if (w.content) {
|
|
1110
|
-
var sub = el.querySelector('.grid-stack-item-content');
|
|
1111
|
-
if (sub && sub.innerHTML !== w.content) {
|
|
1112
|
-
sub.innerHTML = w.content;
|
|
1113
|
-
}
|
|
1114
|
-
delete w.content;
|
|
1115
|
-
}
|
|
1116
|
-
// any remaining fields are assigned, but check for dragging changes, resize constrain
|
|
1117
|
-
var changed = false;
|
|
1118
|
-
var ddChanged = false;
|
|
1119
|
-
for (var key in w) {
|
|
1120
|
-
if (key[0] !== '_' && n[key] !== w[key]) {
|
|
1121
|
-
n[key] = w[key];
|
|
1122
|
-
changed = true;
|
|
1123
|
-
ddChanged = ddChanged || (!_this.opts.staticGrid && (key === 'noResize' || key === 'noMove' || key === 'locked'));
|
|
1124
|
-
}
|
|
1125
|
-
}
|
|
1126
|
-
utils_1.Utils.sanitizeMinMax(n);
|
|
1127
|
-
// finally move the widget
|
|
1128
|
-
if (m) {
|
|
1129
|
-
_this.engine.cleanNodes()
|
|
1130
|
-
.beginUpdate(n)
|
|
1131
|
-
.moveNode(n, m);
|
|
1132
|
-
_this._updateContainerHeight();
|
|
1133
|
-
_this._triggerChangeEvent();
|
|
1134
|
-
_this.engine.endUpdate();
|
|
1135
|
-
}
|
|
1136
|
-
if (changed) { // move will only update x,y,w,h so update the rest too
|
|
1137
|
-
_this._writeAttr(el, n);
|
|
1138
|
-
}
|
|
1139
|
-
if (ddChanged) {
|
|
1140
|
-
_this._prepareDragDropByNode(n);
|
|
1141
|
-
}
|
|
1142
|
-
});
|
|
1143
|
-
return this;
|
|
1144
|
-
};
|
|
1145
|
-
/**
|
|
1146
|
-
* Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
|
|
1147
|
-
* @param value margin value
|
|
1148
|
-
*/
|
|
1149
|
-
GridStack.prototype.margin = function (value) {
|
|
1150
|
-
var isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);
|
|
1151
|
-
// check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)
|
|
1152
|
-
if (!isMultiValue) {
|
|
1153
|
-
var data = utils_1.Utils.parseHeight(value);
|
|
1154
|
-
if (this.opts.marginUnit === data.unit && this.opts.margin === data.h)
|
|
1155
|
-
return;
|
|
1156
|
-
}
|
|
1157
|
-
// re-use existing margin handling
|
|
1158
|
-
this.opts.margin = value;
|
|
1159
|
-
this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
|
|
1160
|
-
this._initMargin();
|
|
1161
|
-
this._updateStyles(true); // true = force re-create
|
|
1162
|
-
return this;
|
|
1163
|
-
};
|
|
1164
|
-
/** returns current margin number value (undefined if 4 sides don't match) */
|
|
1165
|
-
GridStack.prototype.getMargin = function () { return this.opts.margin; };
|
|
1166
|
-
/**
|
|
1167
|
-
* Returns true if the height of the grid will be less than the vertical
|
|
1168
|
-
* constraint. Always returns true if grid doesn't have height constraint.
|
|
1169
|
-
* @param node contains x,y,w,h,auto-position options
|
|
1170
|
-
*
|
|
1171
|
-
* @example
|
|
1172
|
-
* if (grid.willItFit(newWidget)) {
|
|
1173
|
-
* grid.addWidget(newWidget);
|
|
1174
|
-
* } else {
|
|
1175
|
-
* alert('Not enough free space to place the widget');
|
|
1176
|
-
* }
|
|
1177
|
-
*/
|
|
1178
|
-
GridStack.prototype.willItFit = function (node) {
|
|
1179
|
-
// support legacy call for now
|
|
1180
|
-
if (arguments.length > 1) {
|
|
1181
|
-
console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');
|
|
1182
|
-
// eslint-disable-next-line prefer-rest-params
|
|
1183
|
-
var a = arguments, i = 0, w = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };
|
|
1184
|
-
return this.willItFit(w);
|
|
1185
|
-
}
|
|
1186
|
-
return this.engine.willItFit(node);
|
|
1187
|
-
};
|
|
1188
|
-
/** @internal */
|
|
1189
|
-
GridStack.prototype._triggerChangeEvent = function () {
|
|
1190
|
-
if (this.engine.batchMode)
|
|
1191
|
-
return this;
|
|
1192
|
-
var elements = this.engine.getDirtyNodes(true); // verify they really changed
|
|
1193
|
-
if (elements && elements.length) {
|
|
1194
|
-
if (!this._ignoreLayoutsNodeChange) {
|
|
1195
|
-
this.engine.layoutsNodesChange(elements);
|
|
1196
|
-
}
|
|
1197
|
-
this._triggerEvent('change', elements);
|
|
1198
|
-
}
|
|
1199
|
-
this.engine.saveInitial(); // we called, now reset initial values & dirty flags
|
|
1200
|
-
return this;
|
|
1201
|
-
};
|
|
1202
|
-
/** @internal */
|
|
1203
|
-
GridStack.prototype._triggerAddEvent = function () {
|
|
1204
|
-
if (this.engine.batchMode)
|
|
1205
|
-
return this;
|
|
1206
|
-
if (this.engine.addedNodes && this.engine.addedNodes.length > 0) {
|
|
1207
|
-
if (!this._ignoreLayoutsNodeChange) {
|
|
1208
|
-
this.engine.layoutsNodesChange(this.engine.addedNodes);
|
|
1209
|
-
}
|
|
1210
|
-
// prevent added nodes from also triggering 'change' event (which is called next)
|
|
1211
|
-
this.engine.addedNodes.forEach(function (n) { delete n._dirty; });
|
|
1212
|
-
this._triggerEvent('added', this.engine.addedNodes);
|
|
1213
|
-
this.engine.addedNodes = [];
|
|
1214
|
-
}
|
|
1215
|
-
return this;
|
|
1216
|
-
};
|
|
1217
|
-
/** @internal */
|
|
1218
|
-
GridStack.prototype._triggerRemoveEvent = function () {
|
|
1219
|
-
if (this.engine.batchMode)
|
|
1220
|
-
return this;
|
|
1221
|
-
if (this.engine.removedNodes && this.engine.removedNodes.length > 0) {
|
|
1222
|
-
this._triggerEvent('removed', this.engine.removedNodes);
|
|
1223
|
-
this.engine.removedNodes = [];
|
|
1224
|
-
}
|
|
1225
|
-
return this;
|
|
1226
|
-
};
|
|
1227
|
-
/** @internal */
|
|
1228
|
-
GridStack.prototype._triggerEvent = function (type, data) {
|
|
1229
|
-
var event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);
|
|
1230
|
-
this.el.dispatchEvent(event);
|
|
1231
|
-
return this;
|
|
1232
|
-
};
|
|
1233
|
-
/** @internal called to delete the current dynamic style sheet used for our layout */
|
|
1234
|
-
GridStack.prototype._removeStylesheet = function () {
|
|
1235
|
-
if (this._styles) {
|
|
1236
|
-
utils_1.Utils.removeStylesheet(this._styleSheetClass);
|
|
1237
|
-
delete this._styles;
|
|
1238
|
-
}
|
|
1239
|
-
return this;
|
|
1240
|
-
};
|
|
1241
|
-
/** @internal updated/create the CSS styles for row based layout and initial margin setting */
|
|
1242
|
-
GridStack.prototype._updateStyles = function (forceUpdate, maxH) {
|
|
1243
|
-
if (forceUpdate === void 0) { forceUpdate = false; }
|
|
1244
|
-
// call to delete existing one if we change cellHeight / margin
|
|
1245
|
-
if (forceUpdate) {
|
|
1246
|
-
this._removeStylesheet();
|
|
1247
|
-
}
|
|
1248
|
-
if (!maxH)
|
|
1249
|
-
maxH = this.getRow();
|
|
1250
|
-
this._updateContainerHeight();
|
|
1251
|
-
// if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
|
|
1252
|
-
if (this.opts.cellHeight === 0) {
|
|
1253
|
-
return this;
|
|
1254
|
-
}
|
|
1255
|
-
var cellHeight = this.opts.cellHeight;
|
|
1256
|
-
var cellHeightUnit = this.opts.cellHeightUnit;
|
|
1257
|
-
var prefix = "." + this._styleSheetClass + " > ." + this.opts.itemClass;
|
|
1258
|
-
// create one as needed
|
|
1259
|
-
if (!this._styles) {
|
|
1260
|
-
// insert style to parent (instead of 'head' by default) to support WebComponent
|
|
1261
|
-
var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
|
|
1262
|
-
this._styles = utils_1.Utils.createStylesheet(this._styleSheetClass, styleLocation, {
|
|
1263
|
-
nonce: this.opts.nonce,
|
|
1264
|
-
});
|
|
1265
|
-
if (!this._styles)
|
|
1266
|
-
return this;
|
|
1267
|
-
this._styles._max = 0;
|
|
1268
|
-
// these are done once only
|
|
1269
|
-
utils_1.Utils.addCSSRule(this._styles, prefix, "min-height: " + cellHeight + cellHeightUnit);
|
|
1270
|
-
// content margins
|
|
1271
|
-
var top_1 = this.opts.marginTop + this.opts.marginUnit;
|
|
1272
|
-
var bottom = this.opts.marginBottom + this.opts.marginUnit;
|
|
1273
|
-
var right = this.opts.marginRight + this.opts.marginUnit;
|
|
1274
|
-
var left = this.opts.marginLeft + this.opts.marginUnit;
|
|
1275
|
-
var content = prefix + " > .grid-stack-item-content";
|
|
1276
|
-
var placeholder = "." + this._styleSheetClass + " > .grid-stack-placeholder > .placeholder-content";
|
|
1277
|
-
utils_1.Utils.addCSSRule(this._styles, content, "top: " + top_1 + "; right: " + right + "; bottom: " + bottom + "; left: " + left + ";");
|
|
1278
|
-
utils_1.Utils.addCSSRule(this._styles, placeholder, "top: " + top_1 + "; right: " + right + "; bottom: " + bottom + "; left: " + left + ";");
|
|
1279
|
-
// resize handles offset (to match margin)
|
|
1280
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-ne", "right: " + right);
|
|
1281
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-e", "right: " + right);
|
|
1282
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-se", "right: " + right + "; bottom: " + bottom);
|
|
1283
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-nw", "left: " + left);
|
|
1284
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-w", "left: " + left);
|
|
1285
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + " > .ui-resizable-sw", "left: " + left + "; bottom: " + bottom);
|
|
1286
|
-
}
|
|
1287
|
-
// now update the height specific fields
|
|
1288
|
-
maxH = maxH || this._styles._max;
|
|
1289
|
-
if (maxH > this._styles._max) {
|
|
1290
|
-
var getHeight = function (rows) { return (cellHeight * rows) + cellHeightUnit; };
|
|
1291
|
-
for (var i = this._styles._max + 1; i <= maxH; i++) { // start at 1
|
|
1292
|
-
var h = getHeight(i);
|
|
1293
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + "[gs-y=\"" + (i - 1) + "\"]", "top: " + getHeight(i - 1)); // start at 0
|
|
1294
|
-
utils_1.Utils.addCSSRule(this._styles, prefix + "[gs-h=\"" + i + "\"]", "height: " + h);
|
|
1295
|
-
}
|
|
1296
|
-
this._styles._max = maxH;
|
|
1297
|
-
}
|
|
1298
|
-
return this;
|
|
1299
|
-
};
|
|
1300
|
-
/** @internal */
|
|
1301
|
-
GridStack.prototype._updateContainerHeight = function () {
|
|
1302
|
-
if (!this.engine || this.engine.batchMode)
|
|
1303
|
-
return this;
|
|
1304
|
-
var row = this.getRow() + this._extraDragRow; // checks for minRow already
|
|
1305
|
-
// check for css min height
|
|
1306
|
-
// Note: we don't handle %,rem correctly so comment out, beside we don't need need to create un-necessary
|
|
1307
|
-
// rows as the CSS will make us bigger than our set height if needed... not sure why we had this.
|
|
1308
|
-
// let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
|
|
1309
|
-
// if (cssMinHeight > 0) {
|
|
1310
|
-
// let minRow = Math.round(cssMinHeight / this.getCellHeight(true));
|
|
1311
|
-
// if (row < minRow) {
|
|
1312
|
-
// row = minRow;
|
|
1313
|
-
// }
|
|
1314
|
-
// }
|
|
1315
|
-
this.el.setAttribute('gs-current-row', String(row));
|
|
1316
|
-
if (row === 0) {
|
|
1317
|
-
this.el.style.removeProperty('min-height');
|
|
1318
|
-
return this;
|
|
1319
|
-
}
|
|
1320
|
-
var cellHeight = this.opts.cellHeight;
|
|
1321
|
-
var unit = this.opts.cellHeightUnit;
|
|
1322
|
-
if (!cellHeight)
|
|
1323
|
-
return this;
|
|
1324
|
-
this.el.style.minHeight = row * cellHeight + unit;
|
|
1325
|
-
return this;
|
|
1326
|
-
};
|
|
1327
|
-
/** @internal */
|
|
1328
|
-
GridStack.prototype._prepareElement = function (el, triggerAddEvent, node) {
|
|
1329
|
-
if (triggerAddEvent === void 0) { triggerAddEvent = false; }
|
|
1330
|
-
el.classList.add(this.opts.itemClass);
|
|
1331
|
-
node = node || this._readAttr(el);
|
|
1332
|
-
el.gridstackNode = node;
|
|
1333
|
-
node.el = el;
|
|
1334
|
-
node.grid = this;
|
|
1335
|
-
var copy = __assign({}, node);
|
|
1336
|
-
node = this.engine.addNode(node, triggerAddEvent);
|
|
1337
|
-
// write node attr back in case there was collision or we have to fix bad values during addNode()
|
|
1338
|
-
if (!utils_1.Utils.same(node, copy)) {
|
|
1339
|
-
this._writeAttr(el, node);
|
|
1340
|
-
}
|
|
1341
|
-
this._prepareDragDropByNode(node);
|
|
1342
|
-
return this;
|
|
1343
|
-
};
|
|
1344
|
-
/** @internal call to write position x,y,w,h attributes back to element */
|
|
1345
|
-
GridStack.prototype._writePosAttr = function (el, n) {
|
|
1346
|
-
if (n.x !== undefined && n.x !== null) {
|
|
1347
|
-
el.setAttribute('gs-x', String(n.x));
|
|
1348
|
-
}
|
|
1349
|
-
if (n.y !== undefined && n.y !== null) {
|
|
1350
|
-
el.setAttribute('gs-y', String(n.y));
|
|
1351
|
-
}
|
|
1352
|
-
n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
|
|
1353
|
-
n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
|
|
1354
|
-
return this;
|
|
1355
|
-
};
|
|
1356
|
-
/** @internal call to write any default attributes back to element */
|
|
1357
|
-
GridStack.prototype._writeAttr = function (el, node) {
|
|
1358
|
-
if (!node)
|
|
1359
|
-
return this;
|
|
1360
|
-
this._writePosAttr(el, node);
|
|
1361
|
-
var attrs /*: GridStackWidget but strings */ = {
|
|
1362
|
-
autoPosition: 'gs-auto-position',
|
|
1363
|
-
noResize: 'gs-no-resize',
|
|
1364
|
-
noMove: 'gs-no-move',
|
|
1365
|
-
locked: 'gs-locked',
|
|
1366
|
-
id: 'gs-id',
|
|
1367
|
-
};
|
|
1368
|
-
for (var key in attrs) {
|
|
1369
|
-
if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway
|
|
1370
|
-
el.setAttribute(attrs[key], String(node[key]));
|
|
1371
|
-
}
|
|
1372
|
-
else {
|
|
1373
|
-
el.removeAttribute(attrs[key]);
|
|
1374
|
-
}
|
|
1375
|
-
}
|
|
1376
|
-
return this;
|
|
1377
|
-
};
|
|
1378
|
-
/** @internal call to read any default attributes from element */
|
|
1379
|
-
GridStack.prototype._readAttr = function (el) {
|
|
1380
|
-
var n = {};
|
|
1381
|
-
n.x = utils_1.Utils.toNumber(el.getAttribute('gs-x'));
|
|
1382
|
-
n.y = utils_1.Utils.toNumber(el.getAttribute('gs-y'));
|
|
1383
|
-
n.w = utils_1.Utils.toNumber(el.getAttribute('gs-w'));
|
|
1384
|
-
n.h = utils_1.Utils.toNumber(el.getAttribute('gs-h'));
|
|
1385
|
-
if (!(n.w > 1))
|
|
1386
|
-
el.removeAttribute('gs-w');
|
|
1387
|
-
if (!(n.h > 1))
|
|
1388
|
-
el.removeAttribute('gs-h');
|
|
1389
|
-
n.autoPosition = utils_1.Utils.toBool(el.getAttribute('gs-auto-position'));
|
|
1390
|
-
n.noResize = utils_1.Utils.toBool(el.getAttribute('gs-no-resize'));
|
|
1391
|
-
n.noMove = utils_1.Utils.toBool(el.getAttribute('gs-no-move'));
|
|
1392
|
-
n.locked = utils_1.Utils.toBool(el.getAttribute('gs-locked'));
|
|
1393
|
-
n.id = el.getAttribute('gs-id');
|
|
1394
|
-
// read but never written out
|
|
1395
|
-
n.maxW = utils_1.Utils.toNumber(el.getAttribute('gs-max-w'));
|
|
1396
|
-
if (n.maxW)
|
|
1397
|
-
el.removeAttribute('gs-max-w');
|
|
1398
|
-
n.minW = utils_1.Utils.toNumber(el.getAttribute('gs-min-w'));
|
|
1399
|
-
if (n.minW)
|
|
1400
|
-
el.removeAttribute('gs-min-w');
|
|
1401
|
-
n.maxH = utils_1.Utils.toNumber(el.getAttribute('gs-max-h'));
|
|
1402
|
-
if (n.maxH)
|
|
1403
|
-
el.removeAttribute('gs-max-h');
|
|
1404
|
-
n.minH = utils_1.Utils.toNumber(el.getAttribute('gs-min-h'));
|
|
1405
|
-
if (n.minH)
|
|
1406
|
-
el.removeAttribute('gs-min-h');
|
|
1407
|
-
// remove any key not found (null or false which is default)
|
|
1408
|
-
for (var key in n) {
|
|
1409
|
-
if (!n.hasOwnProperty(key))
|
|
1410
|
-
return;
|
|
1411
|
-
if (!n[key] && n[key] !== 0) { // 0 can be valid value (x,y only really)
|
|
1412
|
-
delete n[key];
|
|
1413
|
-
}
|
|
1414
|
-
}
|
|
1415
|
-
return n;
|
|
1416
|
-
};
|
|
1417
|
-
/** @internal */
|
|
1418
|
-
GridStack.prototype._setStaticClass = function () {
|
|
1419
|
-
var _a, _b;
|
|
1420
|
-
var classes = ['grid-stack-static'];
|
|
1421
|
-
if (this.opts.staticGrid) {
|
|
1422
|
-
(_a = this.el.classList).add.apply(_a, classes);
|
|
1423
|
-
this.el.setAttribute('gs-static', 'true');
|
|
1424
|
-
}
|
|
1425
|
-
else {
|
|
1426
|
-
(_b = this.el.classList).remove.apply(_b, classes);
|
|
1427
|
-
this.el.removeAttribute('gs-static');
|
|
1428
|
-
}
|
|
1429
|
-
return this;
|
|
1430
|
-
};
|
|
1431
|
-
/**
|
|
1432
|
-
* called when we are being resized by the window - check if the one Column Mode needs to be turned on/off
|
|
1433
|
-
* and remember the prev columns we used, or get our count from parent, as well as check for auto cell height (square)
|
|
1434
|
-
*/
|
|
1435
|
-
GridStack.prototype.onParentResize = function () {
|
|
1436
|
-
var _this = this;
|
|
1437
|
-
if (!this.el || !this.el.clientWidth)
|
|
1438
|
-
return; // return if we're gone or no size yet (will get called again)
|
|
1439
|
-
var changedColumn = false;
|
|
1440
|
-
// see if we're nested and take our column count from our parent....
|
|
1441
|
-
if (this._autoColumn && this.parentGridItem) {
|
|
1442
|
-
if (this.opts.column !== this.parentGridItem.w) {
|
|
1443
|
-
changedColumn = true;
|
|
1444
|
-
this.column(this.parentGridItem.w, 'none');
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
else {
|
|
1448
|
-
// else check for 1 column in/out behavior
|
|
1449
|
-
var oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
|
|
1450
|
-
if ((this.opts.column === 1) !== oneColumn) {
|
|
1451
|
-
changedColumn = true;
|
|
1452
|
-
if (this.opts.animate) {
|
|
1453
|
-
this.setAnimation(false);
|
|
1454
|
-
} // 1 <-> 12 is too radical, turn off animation
|
|
1455
|
-
this.column(oneColumn ? 1 : this._prevColumn);
|
|
1456
|
-
if (this.opts.animate) {
|
|
1457
|
-
this.setAnimation(true);
|
|
1458
|
-
}
|
|
1459
|
-
}
|
|
1460
|
-
}
|
|
1461
|
-
// make the cells content square again
|
|
1462
|
-
if (this._isAutoCellHeight) {
|
|
1463
|
-
if (!changedColumn && this.opts.cellHeightThrottle) {
|
|
1464
|
-
if (!this._cellHeightThrottle) {
|
|
1465
|
-
this._cellHeightThrottle = utils_1.Utils.throttle(function () { return _this.cellHeight(); }, this.opts.cellHeightThrottle);
|
|
1466
|
-
}
|
|
1467
|
-
this._cellHeightThrottle();
|
|
1468
|
-
}
|
|
1469
|
-
else {
|
|
1470
|
-
// immediate update if we've changed column count or have no threshold
|
|
1471
|
-
this.cellHeight();
|
|
1472
|
-
}
|
|
1473
|
-
}
|
|
1474
|
-
// finally update any nested grids
|
|
1475
|
-
this.engine.nodes.forEach(function (n) {
|
|
1476
|
-
if (n.subGrid) {
|
|
1477
|
-
n.subGrid.onParentResize();
|
|
1478
|
-
}
|
|
1479
|
-
});
|
|
1480
|
-
return this;
|
|
1481
|
-
};
|
|
1482
|
-
/** add or remove the window size event handler */
|
|
1483
|
-
GridStack.prototype._updateWindowResizeEvent = function (forceRemove) {
|
|
1484
|
-
if (forceRemove === void 0) { forceRemove = false; }
|
|
1485
|
-
// only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting oneColumn (i.e. doing work)
|
|
1486
|
-
var workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this.parentGridItem;
|
|
1487
|
-
if (!forceRemove && workTodo && !this._windowResizeBind) {
|
|
1488
|
-
this._windowResizeBind = this.onParentResize.bind(this); // so we can properly remove later
|
|
1489
|
-
window.addEventListener('resize', this._windowResizeBind);
|
|
1490
|
-
}
|
|
1491
|
-
else if ((forceRemove || !workTodo) && this._windowResizeBind) {
|
|
1492
|
-
window.removeEventListener('resize', this._windowResizeBind);
|
|
1493
|
-
delete this._windowResizeBind; // remove link to us so we can free
|
|
1494
|
-
}
|
|
1495
|
-
return this;
|
|
1496
|
-
};
|
|
1497
|
-
/** @internal convert a potential selector into actual element */
|
|
1498
|
-
GridStack.getElement = function (els) {
|
|
1499
|
-
if (els === void 0) { els = '.grid-stack-item'; }
|
|
1500
|
-
return utils_1.Utils.getElement(els);
|
|
1501
|
-
};
|
|
1502
|
-
/** @internal */
|
|
1503
|
-
GridStack.getElements = function (els) {
|
|
1504
|
-
if (els === void 0) { els = '.grid-stack-item'; }
|
|
1505
|
-
return utils_1.Utils.getElements(els);
|
|
1506
|
-
};
|
|
1507
|
-
/** @internal */
|
|
1508
|
-
GridStack.getGridElement = function (els) { return GridStack.getElement(els); };
|
|
1509
|
-
/** @internal */
|
|
1510
|
-
GridStack.getGridElements = function (els) { return utils_1.Utils.getElements(els); };
|
|
1511
|
-
/** @internal initialize margin top/bottom/left/right and units */
|
|
1512
|
-
GridStack.prototype._initMargin = function () {
|
|
1513
|
-
var data;
|
|
1514
|
-
var margin = 0;
|
|
1515
|
-
// support passing multiple values like CSS (ex: '5px 10px 0 20px')
|
|
1516
|
-
var margins = [];
|
|
1517
|
-
if (typeof this.opts.margin === 'string') {
|
|
1518
|
-
margins = this.opts.margin.split(' ');
|
|
1519
|
-
}
|
|
1520
|
-
if (margins.length === 2) { // top/bot, left/right like CSS
|
|
1521
|
-
this.opts.marginTop = this.opts.marginBottom = margins[0];
|
|
1522
|
-
this.opts.marginLeft = this.opts.marginRight = margins[1];
|
|
1523
|
-
}
|
|
1524
|
-
else if (margins.length === 4) { // Clockwise like CSS
|
|
1525
|
-
this.opts.marginTop = margins[0];
|
|
1526
|
-
this.opts.marginRight = margins[1];
|
|
1527
|
-
this.opts.marginBottom = margins[2];
|
|
1528
|
-
this.opts.marginLeft = margins[3];
|
|
1529
|
-
}
|
|
1530
|
-
else {
|
|
1531
|
-
data = utils_1.Utils.parseHeight(this.opts.margin);
|
|
1532
|
-
this.opts.marginUnit = data.unit;
|
|
1533
|
-
margin = this.opts.margin = data.h;
|
|
1534
|
-
}
|
|
1535
|
-
// see if top/bottom/left/right need to be set as well
|
|
1536
|
-
if (this.opts.marginTop === undefined) {
|
|
1537
|
-
this.opts.marginTop = margin;
|
|
1538
|
-
}
|
|
1539
|
-
else {
|
|
1540
|
-
data = utils_1.Utils.parseHeight(this.opts.marginTop);
|
|
1541
|
-
this.opts.marginTop = data.h;
|
|
1542
|
-
delete this.opts.margin;
|
|
1543
|
-
}
|
|
1544
|
-
if (this.opts.marginBottom === undefined) {
|
|
1545
|
-
this.opts.marginBottom = margin;
|
|
1546
|
-
}
|
|
1547
|
-
else {
|
|
1548
|
-
data = utils_1.Utils.parseHeight(this.opts.marginBottom);
|
|
1549
|
-
this.opts.marginBottom = data.h;
|
|
1550
|
-
delete this.opts.margin;
|
|
1551
|
-
}
|
|
1552
|
-
if (this.opts.marginRight === undefined) {
|
|
1553
|
-
this.opts.marginRight = margin;
|
|
1554
|
-
}
|
|
1555
|
-
else {
|
|
1556
|
-
data = utils_1.Utils.parseHeight(this.opts.marginRight);
|
|
1557
|
-
this.opts.marginRight = data.h;
|
|
1558
|
-
delete this.opts.margin;
|
|
1559
|
-
}
|
|
1560
|
-
if (this.opts.marginLeft === undefined) {
|
|
1561
|
-
this.opts.marginLeft = margin;
|
|
1562
|
-
}
|
|
1563
|
-
else {
|
|
1564
|
-
data = utils_1.Utils.parseHeight(this.opts.marginLeft);
|
|
1565
|
-
this.opts.marginLeft = data.h;
|
|
1566
|
-
delete this.opts.margin;
|
|
1567
|
-
}
|
|
1568
|
-
this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...
|
|
1569
|
-
if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {
|
|
1570
|
-
this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()
|
|
1571
|
-
}
|
|
1572
|
-
return this;
|
|
1573
|
-
};
|
|
1574
|
-
/* ===========================================================================================
|
|
1575
|
-
* drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
|
|
1576
|
-
* but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
|
|
1577
|
-
* ===========================================================================================
|
|
1578
|
-
*/
|
|
1579
|
-
/** get the global (but static to this code) DD implementation */
|
|
1580
|
-
GridStack.getDD = function () {
|
|
1581
|
-
return dd;
|
|
1582
|
-
};
|
|
1583
|
-
/**
|
|
1584
|
-
* call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
|
|
1585
|
-
* Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
|
|
1586
|
-
* is dynamically create and needs to be set later.
|
|
1587
|
-
* @param dragIn string selector (ex: '.sidebar .grid-stack-item')
|
|
1588
|
-
* @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
|
|
1589
|
-
**/
|
|
1590
|
-
GridStack.setupDragIn = function (dragIn, dragInOptions) {
|
|
1591
|
-
if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) {
|
|
1592
|
-
dd_manager_1.DDManager.pauseDrag = dragInOptions.pause;
|
|
1593
|
-
}
|
|
1594
|
-
if (typeof dragIn === 'string') {
|
|
1595
|
-
dragInOptions = __assign(__assign({}, types_1.dragInDefaultOptions), (dragInOptions || {}));
|
|
1596
|
-
utils_1.Utils.getElements(dragIn).forEach(function (el) {
|
|
1597
|
-
if (!dd.isDraggable(el))
|
|
1598
|
-
dd.dragIn(el, dragInOptions);
|
|
1599
|
-
});
|
|
1600
|
-
}
|
|
1601
|
-
};
|
|
1602
|
-
/**
|
|
1603
|
-
* Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
|
|
1604
|
-
* IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
|
|
1605
|
-
* @param els widget or selector to modify.
|
|
1606
|
-
* @param val if true widget will be draggable.
|
|
1607
|
-
*/
|
|
1608
|
-
GridStack.prototype.movable = function (els, val) {
|
|
1609
|
-
var _this = this;
|
|
1610
|
-
if (this.opts.staticGrid)
|
|
1611
|
-
return this; // can't move a static grid!
|
|
1612
|
-
GridStack.getElements(els).forEach(function (el) {
|
|
1613
|
-
var node = el.gridstackNode;
|
|
1614
|
-
if (!node)
|
|
1615
|
-
return;
|
|
1616
|
-
if (val)
|
|
1617
|
-
delete node.noMove;
|
|
1618
|
-
else
|
|
1619
|
-
node.noMove = true;
|
|
1620
|
-
_this._prepareDragDropByNode(node); // init DD if need be, and adjust
|
|
1621
|
-
});
|
|
1622
|
-
return this;
|
|
1623
|
-
};
|
|
1624
|
-
/**
|
|
1625
|
-
* Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
|
|
1626
|
-
* @param els widget or selector to modify
|
|
1627
|
-
* @param val if true widget will be resizable.
|
|
1628
|
-
*/
|
|
1629
|
-
GridStack.prototype.resizable = function (els, val) {
|
|
1630
|
-
var _this = this;
|
|
1631
|
-
if (this.opts.staticGrid)
|
|
1632
|
-
return this; // can't resize a static grid!
|
|
1633
|
-
GridStack.getElements(els).forEach(function (el) {
|
|
1634
|
-
var node = el.gridstackNode;
|
|
1635
|
-
if (!node)
|
|
1636
|
-
return;
|
|
1637
|
-
if (val)
|
|
1638
|
-
delete node.noResize;
|
|
1639
|
-
else
|
|
1640
|
-
node.noResize = true;
|
|
1641
|
-
_this._prepareDragDropByNode(node); // init DD if need be, and adjust
|
|
1642
|
-
});
|
|
1643
|
-
return this;
|
|
1644
|
-
};
|
|
1645
|
-
/**
|
|
1646
|
-
* Temporarily disables widgets moving/resizing.
|
|
1647
|
-
* If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
|
|
1648
|
-
* Note: no-op for static grid
|
|
1649
|
-
* This is a shortcut for:
|
|
1650
|
-
* @example
|
|
1651
|
-
* grid.enableMove(false);
|
|
1652
|
-
* grid.enableResize(false);
|
|
1653
|
-
* @param recurse true (default) if sub-grids also get updated
|
|
1654
|
-
*/
|
|
1655
|
-
GridStack.prototype.disable = function (recurse) {
|
|
1656
|
-
if (recurse === void 0) { recurse = true; }
|
|
1657
|
-
if (this.opts.staticGrid)
|
|
1658
|
-
return;
|
|
1659
|
-
this.enableMove(false, recurse);
|
|
1660
|
-
this.enableResize(false, recurse); // @ts-ignore
|
|
1661
|
-
this._triggerEvent('disable');
|
|
1662
|
-
return this;
|
|
1663
|
-
};
|
|
1664
|
-
/**
|
|
1665
|
-
* Re-enables widgets moving/resizing - see disable().
|
|
1666
|
-
* Note: no-op for static grid.
|
|
1667
|
-
* This is a shortcut for:
|
|
1668
|
-
* @example
|
|
1669
|
-
* grid.enableMove(true);
|
|
1670
|
-
* grid.enableResize(true);
|
|
1671
|
-
* @param recurse true (default) if sub-grids also get updated
|
|
1672
|
-
*/
|
|
1673
|
-
GridStack.prototype.enable = function (recurse) {
|
|
1674
|
-
if (recurse === void 0) { recurse = true; }
|
|
1675
|
-
if (this.opts.staticGrid)
|
|
1676
|
-
return;
|
|
1677
|
-
this.enableMove(true, recurse);
|
|
1678
|
-
this.enableResize(true, recurse); // @ts-ignore
|
|
1679
|
-
this._triggerEvent('enable');
|
|
1680
|
-
return this;
|
|
1681
|
-
};
|
|
1682
|
-
/**
|
|
1683
|
-
* Enables/disables widget moving. No-op for static grids.
|
|
1684
|
-
* @param recurse true (default) if sub-grids also get updated
|
|
1685
|
-
*/
|
|
1686
|
-
GridStack.prototype.enableMove = function (doEnable, recurse) {
|
|
1687
|
-
var _this = this;
|
|
1688
|
-
if (recurse === void 0) { recurse = true; }
|
|
1689
|
-
if (this.opts.staticGrid)
|
|
1690
|
-
return this; // can't move a static grid!
|
|
1691
|
-
this.opts.disableDrag = !doEnable; // FIRST before we update children as grid overrides #1658
|
|
1692
|
-
this.engine.nodes.forEach(function (n) {
|
|
1693
|
-
_this.movable(n.el, doEnable);
|
|
1694
|
-
if (n.subGrid && recurse)
|
|
1695
|
-
n.subGrid.enableMove(doEnable, recurse);
|
|
1696
|
-
});
|
|
1697
|
-
return this;
|
|
1698
|
-
};
|
|
1699
|
-
/**
|
|
1700
|
-
* Enables/disables widget resizing. No-op for static grids.
|
|
1701
|
-
* @param recurse true (default) if sub-grids also get updated
|
|
1702
|
-
*/
|
|
1703
|
-
GridStack.prototype.enableResize = function (doEnable, recurse) {
|
|
1704
|
-
var _this = this;
|
|
1705
|
-
if (recurse === void 0) { recurse = true; }
|
|
1706
|
-
if (this.opts.staticGrid)
|
|
1707
|
-
return this; // can't size a static grid!
|
|
1708
|
-
this.opts.disableResize = !doEnable; // FIRST before we update children as grid overrides #1658
|
|
1709
|
-
this.engine.nodes.forEach(function (n) {
|
|
1710
|
-
_this.resizable(n.el, doEnable);
|
|
1711
|
-
if (n.subGrid && recurse)
|
|
1712
|
-
n.subGrid.enableResize(doEnable, recurse);
|
|
1713
|
-
});
|
|
1714
|
-
return this;
|
|
1715
|
-
};
|
|
1716
|
-
/** @internal removes any drag&drop present (called during destroy) */
|
|
1717
|
-
GridStack.prototype._removeDD = function (el) {
|
|
1718
|
-
dd.draggable(el, 'destroy').resizable(el, 'destroy');
|
|
1719
|
-
if (el.gridstackNode) {
|
|
1720
|
-
delete el.gridstackNode._initDD; // reset our DD init flag
|
|
1721
|
-
}
|
|
1722
|
-
delete el.ddElement;
|
|
1723
|
-
return this;
|
|
1724
|
-
};
|
|
1725
|
-
/** @internal called to add drag over to support widgets being added externally */
|
|
1726
|
-
GridStack.prototype._setupAcceptWidget = function () {
|
|
1727
|
-
var _this = this;
|
|
1728
|
-
// check if we need to disable things
|
|
1729
|
-
if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {
|
|
1730
|
-
dd.droppable(this.el, 'destroy');
|
|
1731
|
-
return this;
|
|
1732
|
-
}
|
|
1733
|
-
// vars shared across all methods
|
|
1734
|
-
var cellHeight, cellWidth;
|
|
1735
|
-
var onDrag = function (event, el, helper) {
|
|
1736
|
-
var node = el.gridstackNode;
|
|
1737
|
-
if (!node)
|
|
1738
|
-
return;
|
|
1739
|
-
helper = helper || el;
|
|
1740
|
-
var parent = _this.el.getBoundingClientRect();
|
|
1741
|
-
var _a = helper.getBoundingClientRect(), top = _a.top, left = _a.left;
|
|
1742
|
-
left -= parent.left;
|
|
1743
|
-
top -= parent.top;
|
|
1744
|
-
var ui = { position: { top: top, left: left } };
|
|
1745
|
-
if (node._temporaryRemoved) {
|
|
1746
|
-
node.x = Math.max(0, Math.round(left / cellWidth));
|
|
1747
|
-
node.y = Math.max(0, Math.round(top / cellHeight));
|
|
1748
|
-
delete node.autoPosition;
|
|
1749
|
-
_this.engine.nodeBoundFix(node);
|
|
1750
|
-
// don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere
|
|
1751
|
-
if (!_this.engine.willItFit(node)) {
|
|
1752
|
-
node.autoPosition = true; // ignore x,y and try for any slot...
|
|
1753
|
-
if (!_this.engine.willItFit(node)) {
|
|
1754
|
-
dd.off(el, 'drag'); // stop calling us
|
|
1755
|
-
return; // full grid or can't grow
|
|
1756
|
-
}
|
|
1757
|
-
if (node._willFitPos) {
|
|
1758
|
-
// use the auto position instead #1687
|
|
1759
|
-
utils_1.Utils.copyPos(node, node._willFitPos);
|
|
1760
|
-
delete node._willFitPos;
|
|
1761
|
-
}
|
|
1762
|
-
}
|
|
1763
|
-
// re-use the existing node dragging method
|
|
1764
|
-
_this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);
|
|
1765
|
-
}
|
|
1766
|
-
else {
|
|
1767
|
-
// re-use the existing node dragging that does so much of the collision detection
|
|
1768
|
-
_this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);
|
|
1769
|
-
}
|
|
1770
|
-
};
|
|
1771
|
-
dd.droppable(this.el, {
|
|
1772
|
-
accept: function (el) {
|
|
1773
|
-
var node = el.gridstackNode;
|
|
1774
|
-
// set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
|
|
1775
|
-
if ((node === null || node === void 0 ? void 0 : node.grid) === _this)
|
|
1776
|
-
return true;
|
|
1777
|
-
if (!_this.opts.acceptWidgets)
|
|
1778
|
-
return false;
|
|
1779
|
-
// check for accept method or class matching
|
|
1780
|
-
var canAccept = true;
|
|
1781
|
-
if (typeof _this.opts.acceptWidgets === 'function') {
|
|
1782
|
-
canAccept = _this.opts.acceptWidgets(el);
|
|
1783
|
-
}
|
|
1784
|
-
else {
|
|
1785
|
-
var selector = (_this.opts.acceptWidgets === true ? '.grid-stack-item' : _this.opts.acceptWidgets);
|
|
1786
|
-
canAccept = el.matches(selector);
|
|
1787
|
-
}
|
|
1788
|
-
// finally check to make sure we actually have space left #1571
|
|
1789
|
-
if (canAccept && node && _this.opts.maxRow) {
|
|
1790
|
-
var n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
|
|
1791
|
-
canAccept = _this.engine.willItFit(n);
|
|
1792
|
-
}
|
|
1793
|
-
return canAccept;
|
|
1794
|
-
}
|
|
1795
|
-
})
|
|
1796
|
-
/**
|
|
1797
|
-
* entering our grid area
|
|
1798
|
-
*/
|
|
1799
|
-
.on(this.el, 'dropover', function (event, el, helper) {
|
|
1800
|
-
// console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
|
|
1801
|
-
var node = el.gridstackNode;
|
|
1802
|
-
// ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
|
|
1803
|
-
if ((node === null || node === void 0 ? void 0 : node.grid) === _this && !node._temporaryRemoved) {
|
|
1804
|
-
// delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
|
|
1805
|
-
return false; // prevent parent from receiving msg (which may be a grid as well)
|
|
1806
|
-
}
|
|
1807
|
-
// fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
|
|
1808
|
-
if ((node === null || node === void 0 ? void 0 : node.grid) && node.grid !== _this && !node._temporaryRemoved) {
|
|
1809
|
-
// console.log('dropover without leave'); // TEST
|
|
1810
|
-
var otherGrid = node.grid;
|
|
1811
|
-
otherGrid._leave(el, helper);
|
|
1812
|
-
}
|
|
1813
|
-
// cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
|
|
1814
|
-
cellWidth = _this.cellWidth();
|
|
1815
|
-
cellHeight = _this.getCellHeight(true);
|
|
1816
|
-
// load any element attributes if we don't have a node
|
|
1817
|
-
if (!node) { // @ts-ignore private read only on ourself
|
|
1818
|
-
node = _this._readAttr(el);
|
|
1819
|
-
}
|
|
1820
|
-
if (!node.grid) {
|
|
1821
|
-
node._isExternal = true;
|
|
1822
|
-
el.gridstackNode = node;
|
|
1823
|
-
}
|
|
1824
|
-
// calculate the grid size based on element outer size
|
|
1825
|
-
helper = helper || el;
|
|
1826
|
-
var w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
|
|
1827
|
-
var h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;
|
|
1828
|
-
// if the item came from another grid, make a copy and save the original info in case we go back there
|
|
1829
|
-
if (node.grid && node.grid !== _this) {
|
|
1830
|
-
// copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
|
|
1831
|
-
// console.log('dropover cloning node'); // TEST
|
|
1832
|
-
if (!el._gridstackNodeOrig)
|
|
1833
|
-
el._gridstackNodeOrig = node; // shouldn't have multiple nested!
|
|
1834
|
-
el.gridstackNode = node = __assign(__assign({}, node), { w: w, h: h, grid: _this });
|
|
1835
|
-
_this.engine.cleanupNode(node)
|
|
1836
|
-
.nodeBoundFix(node);
|
|
1837
|
-
// restore some internal fields we need after clearing them all
|
|
1838
|
-
node._initDD =
|
|
1839
|
-
node._isExternal = // DOM needs to be re-parented on a drop
|
|
1840
|
-
node._temporaryRemoved = true; // so it can be inserted onDrag below
|
|
1841
|
-
}
|
|
1842
|
-
else {
|
|
1843
|
-
node.w = w;
|
|
1844
|
-
node.h = h;
|
|
1845
|
-
node._temporaryRemoved = true; // so we can insert it
|
|
1846
|
-
}
|
|
1847
|
-
// clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
|
|
1848
|
-
_this._itemRemoving(node.el, false);
|
|
1849
|
-
dd.on(el, 'drag', onDrag);
|
|
1850
|
-
// make sure this is called at least once when going fast #1578
|
|
1851
|
-
onDrag(event, el, helper);
|
|
1852
|
-
return false; // prevent parent from receiving msg (which may be a grid as well)
|
|
1853
|
-
})
|
|
1854
|
-
/**
|
|
1855
|
-
* Leaving our grid area...
|
|
1856
|
-
*/
|
|
1857
|
-
.on(this.el, 'dropout', function (event, el, helper) {
|
|
1858
|
-
// console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
|
|
1859
|
-
var node = el.gridstackNode;
|
|
1860
|
-
if (!node)
|
|
1861
|
-
return false;
|
|
1862
|
-
// fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
|
|
1863
|
-
// so skip this one if we're not the active grid really..
|
|
1864
|
-
if (!node.grid || node.grid === _this) {
|
|
1865
|
-
_this._leave(el, helper);
|
|
1866
|
-
// if we were created as temporary nested grid, go back to before state
|
|
1867
|
-
if (_this._isTemp) {
|
|
1868
|
-
_this.removeAsSubGrid(node);
|
|
1869
|
-
}
|
|
1870
|
-
}
|
|
1871
|
-
return false; // prevent parent from receiving msg (which may be grid as well)
|
|
1872
|
-
})
|
|
1873
|
-
/**
|
|
1874
|
-
* end - releasing the mouse
|
|
1875
|
-
*/
|
|
1876
|
-
.on(this.el, 'drop', function (event, el, helper) {
|
|
1877
|
-
var _a, _b;
|
|
1878
|
-
var node = el.gridstackNode;
|
|
1879
|
-
// ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
|
|
1880
|
-
if ((node === null || node === void 0 ? void 0 : node.grid) === _this && !node._isExternal)
|
|
1881
|
-
return false;
|
|
1882
|
-
var wasAdded = !!_this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
|
|
1883
|
-
_this.placeholder.remove();
|
|
1884
|
-
// notify previous grid of removal
|
|
1885
|
-
// console.log('drop delete _gridstackNodeOrig') // TEST
|
|
1886
|
-
var origNode = el._gridstackNodeOrig;
|
|
1887
|
-
delete el._gridstackNodeOrig;
|
|
1888
|
-
if (wasAdded && (origNode === null || origNode === void 0 ? void 0 : origNode.grid) && origNode.grid !== _this) {
|
|
1889
|
-
var oGrid = origNode.grid;
|
|
1890
|
-
oGrid.engine.removedNodes.push(origNode);
|
|
1891
|
-
oGrid._triggerRemoveEvent()._triggerChangeEvent();
|
|
1892
|
-
// if it's an empty sub-grid that got auto-created, nuke it
|
|
1893
|
-
if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
|
|
1894
|
-
oGrid.removeAsSubGrid();
|
|
1895
|
-
}
|
|
1896
|
-
}
|
|
1897
|
-
if (!node)
|
|
1898
|
-
return false;
|
|
1899
|
-
// use existing placeholder node as it's already in our list with drop location
|
|
1900
|
-
if (wasAdded) {
|
|
1901
|
-
_this.engine.cleanupNode(node); // removes all internal _xyz values
|
|
1902
|
-
node.grid = _this;
|
|
1903
|
-
}
|
|
1904
|
-
dd.off(el, 'drag');
|
|
1905
|
-
// if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
|
|
1906
|
-
// as the helper will be nuked by jquery-ui otherwise. TODO: update old code path
|
|
1907
|
-
if (helper !== el) {
|
|
1908
|
-
helper.remove();
|
|
1909
|
-
el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
|
|
1910
|
-
if (wasAdded) {
|
|
1911
|
-
el = el.cloneNode(true);
|
|
1912
|
-
}
|
|
1913
|
-
}
|
|
1914
|
-
else {
|
|
1915
|
-
el.remove(); // reduce flicker as we change depth here, and size further down
|
|
1916
|
-
_this._removeDD(el);
|
|
1917
|
-
}
|
|
1918
|
-
if (!wasAdded)
|
|
1919
|
-
return false;
|
|
1920
|
-
el.gridstackNode = node;
|
|
1921
|
-
node.el = el;
|
|
1922
|
-
var subGrid = (_b = (_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.gridstack; // set when actual sub-grid present
|
|
1923
|
-
// @ts-ignore
|
|
1924
|
-
utils_1.Utils.copyPos(node, _this._readAttr(_this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
|
|
1925
|
-
utils_1.Utils.removePositioningStyles(el); // @ts-ignore
|
|
1926
|
-
_this._writeAttr(el, node);
|
|
1927
|
-
el.classList.add(types_1.gridDefaults.itemClass, _this.opts.itemClass);
|
|
1928
|
-
_this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
|
|
1929
|
-
if (subGrid) {
|
|
1930
|
-
subGrid.parentGridItem = node;
|
|
1931
|
-
if (!subGrid.opts.styleInHead)
|
|
1932
|
-
subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
|
|
1933
|
-
}
|
|
1934
|
-
_this._updateContainerHeight();
|
|
1935
|
-
_this.engine.addedNodes.push(node); // @ts-ignore
|
|
1936
|
-
_this._triggerAddEvent(); // @ts-ignore
|
|
1937
|
-
_this._triggerChangeEvent();
|
|
1938
|
-
_this.engine.endUpdate();
|
|
1939
|
-
if (_this._gsEventHandler['dropped']) {
|
|
1940
|
-
_this._gsEventHandler['dropped'](__assign(__assign({}, event), { type: 'dropped' }), origNode && origNode.grid ? origNode : undefined, node);
|
|
1941
|
-
}
|
|
1942
|
-
// wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
|
|
1943
|
-
window.setTimeout(function () {
|
|
1944
|
-
// IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
|
|
1945
|
-
if (node.el && node.el.parentElement) {
|
|
1946
|
-
_this._prepareDragDropByNode(node);
|
|
1947
|
-
}
|
|
1948
|
-
else {
|
|
1949
|
-
_this.engine.removeNode(node);
|
|
1950
|
-
}
|
|
1951
|
-
delete node.grid._isTemp;
|
|
1952
|
-
});
|
|
1953
|
-
return false; // prevent parent from receiving msg (which may be grid as well)
|
|
1954
|
-
});
|
|
1955
|
-
return this;
|
|
1956
|
-
};
|
|
1957
|
-
/** @internal mark item for removal */
|
|
1958
|
-
GridStack.prototype._itemRemoving = function (el, remove) {
|
|
1959
|
-
var node = el ? el.gridstackNode : undefined;
|
|
1960
|
-
if (!node || !node.grid)
|
|
1961
|
-
return;
|
|
1962
|
-
remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
|
|
1963
|
-
remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
|
|
1964
|
-
};
|
|
1965
|
-
/** @internal called to setup a trash drop zone if the user specifies it */
|
|
1966
|
-
GridStack.prototype._setupRemoveDrop = function () {
|
|
1967
|
-
var _this = this;
|
|
1968
|
-
if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
|
|
1969
|
-
var trashEl = document.querySelector(this.opts.removable);
|
|
1970
|
-
if (!trashEl)
|
|
1971
|
-
return this;
|
|
1972
|
-
// only register ONE drop-over/dropout callback for the 'trash', and it will
|
|
1973
|
-
// update the passed in item and parent grid because the 'trash' is a shared resource anyway,
|
|
1974
|
-
// and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
|
|
1975
|
-
if (!dd.isDroppable(trashEl)) {
|
|
1976
|
-
dd.droppable(trashEl, this.opts.removableOptions)
|
|
1977
|
-
.on(trashEl, 'dropover', function (event, el) { return _this._itemRemoving(el, true); })
|
|
1978
|
-
.on(trashEl, 'dropout', function (event, el) { return _this._itemRemoving(el, false); });
|
|
1979
|
-
}
|
|
1980
|
-
}
|
|
1981
|
-
return this;
|
|
1982
|
-
};
|
|
1983
|
-
/** @internal prepares the element for drag&drop **/
|
|
1984
|
-
GridStack.prototype._prepareDragDropByNode = function (node) {
|
|
1985
|
-
var _this = this;
|
|
1986
|
-
var el = node.el;
|
|
1987
|
-
var noMove = node.noMove || this.opts.disableDrag;
|
|
1988
|
-
var noResize = node.noResize || this.opts.disableResize;
|
|
1989
|
-
// check for disabled grid first
|
|
1990
|
-
if (this.opts.staticGrid || (noMove && noResize)) {
|
|
1991
|
-
if (node._initDD) {
|
|
1992
|
-
this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
|
|
1993
|
-
delete node._initDD;
|
|
1994
|
-
}
|
|
1995
|
-
el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
|
|
1996
|
-
return this;
|
|
1997
|
-
}
|
|
1998
|
-
if (!node._initDD) {
|
|
1999
|
-
// variables used/cashed between the 3 start/move/end methods, in addition to node passed above
|
|
2000
|
-
var cellWidth_1;
|
|
2001
|
-
var cellHeight_1;
|
|
2002
|
-
/** called when item starts moving/resizing */
|
|
2003
|
-
var onStartMoving = function (event, ui) {
|
|
2004
|
-
// trigger any 'dragstart' / 'resizestart' manually
|
|
2005
|
-
if (_this._gsEventHandler[event.type]) {
|
|
2006
|
-
_this._gsEventHandler[event.type](event, event.target);
|
|
2007
|
-
}
|
|
2008
|
-
cellWidth_1 = _this.cellWidth();
|
|
2009
|
-
cellHeight_1 = _this.getCellHeight(true); // force pixels for calculations
|
|
2010
|
-
_this._onStartMoving(el, event, ui, node, cellWidth_1, cellHeight_1);
|
|
2011
|
-
};
|
|
2012
|
-
/** called when item is being dragged/resized */
|
|
2013
|
-
var dragOrResize = function (event, ui) {
|
|
2014
|
-
_this._dragOrResize(el, event, ui, node, cellWidth_1, cellHeight_1);
|
|
2015
|
-
};
|
|
2016
|
-
/** called when the item stops moving/resizing */
|
|
2017
|
-
var onEndMoving = function (event) {
|
|
2018
|
-
_this.placeholder.remove();
|
|
2019
|
-
delete node._moving;
|
|
2020
|
-
delete node._event;
|
|
2021
|
-
delete node._lastTried;
|
|
2022
|
-
// if the item has moved to another grid, we're done here
|
|
2023
|
-
var target = event.target;
|
|
2024
|
-
if (!target.gridstackNode || target.gridstackNode.grid !== _this)
|
|
2025
|
-
return;
|
|
2026
|
-
node.el = target;
|
|
2027
|
-
if (node._isAboutToRemove) {
|
|
2028
|
-
var gridToNotify = el.gridstackNode.grid;
|
|
2029
|
-
if (gridToNotify._gsEventHandler[event.type]) {
|
|
2030
|
-
gridToNotify._gsEventHandler[event.type](event, target);
|
|
2031
|
-
}
|
|
2032
|
-
_this._removeDD(el);
|
|
2033
|
-
gridToNotify.engine.removedNodes.push(node);
|
|
2034
|
-
gridToNotify._triggerRemoveEvent();
|
|
2035
|
-
// break circular links and remove DOM
|
|
2036
|
-
delete el.gridstackNode;
|
|
2037
|
-
delete node.el;
|
|
2038
|
-
el.remove();
|
|
2039
|
-
}
|
|
2040
|
-
else {
|
|
2041
|
-
utils_1.Utils.removePositioningStyles(target);
|
|
2042
|
-
if (node._temporaryRemoved) {
|
|
2043
|
-
// got removed - restore item back to before dragging position
|
|
2044
|
-
utils_1.Utils.copyPos(node, node._orig); // @ts-ignore
|
|
2045
|
-
_this._writePosAttr(target, node);
|
|
2046
|
-
_this.engine.addNode(node);
|
|
2047
|
-
}
|
|
2048
|
-
else {
|
|
2049
|
-
// move to new placeholder location
|
|
2050
|
-
_this._writePosAttr(target, node);
|
|
2051
|
-
}
|
|
2052
|
-
if (_this._gsEventHandler[event.type]) {
|
|
2053
|
-
_this._gsEventHandler[event.type](event, target);
|
|
2054
|
-
}
|
|
2055
|
-
}
|
|
2056
|
-
// @ts-ignore
|
|
2057
|
-
_this._extraDragRow = 0; // @ts-ignore
|
|
2058
|
-
_this._updateContainerHeight(); // @ts-ignore
|
|
2059
|
-
_this._triggerChangeEvent();
|
|
2060
|
-
_this.engine.endUpdate();
|
|
2061
|
-
};
|
|
2062
|
-
dd.draggable(el, {
|
|
2063
|
-
start: onStartMoving,
|
|
2064
|
-
stop: onEndMoving,
|
|
2065
|
-
drag: dragOrResize
|
|
2066
|
-
}).resizable(el, {
|
|
2067
|
-
start: onStartMoving,
|
|
2068
|
-
stop: onEndMoving,
|
|
2069
|
-
resize: dragOrResize
|
|
2070
|
-
});
|
|
2071
|
-
node._initDD = true; // we've set DD support now
|
|
2072
|
-
}
|
|
2073
|
-
// finally fine tune move vs resize by disabling any part...
|
|
2074
|
-
dd.draggable(el, noMove ? 'disable' : 'enable')
|
|
2075
|
-
.resizable(el, noResize ? 'disable' : 'enable');
|
|
2076
|
-
return this;
|
|
2077
|
-
};
|
|
2078
|
-
/** @internal handles actual drag/resize start **/
|
|
2079
|
-
GridStack.prototype._onStartMoving = function (el, event, ui, node, cellWidth, cellHeight) {
|
|
2080
|
-
this.engine.cleanNodes()
|
|
2081
|
-
.beginUpdate(node);
|
|
2082
|
-
// @ts-ignore
|
|
2083
|
-
this._writePosAttr(this.placeholder, node);
|
|
2084
|
-
this.el.appendChild(this.placeholder);
|
|
2085
|
-
// console.log('_onStartMoving placeholder') // TEST
|
|
2086
|
-
node.el = this.placeholder;
|
|
2087
|
-
node._lastUiPosition = ui.position;
|
|
2088
|
-
node._prevYPix = ui.position.top;
|
|
2089
|
-
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)
|
|
2090
|
-
delete node._lastTried;
|
|
2091
|
-
if (event.type === 'dropover' && node._temporaryRemoved) {
|
|
2092
|
-
// console.log('engine.addNode x=' + node.x); // TEST
|
|
2093
|
-
this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
|
|
2094
|
-
node._moving = true; // AFTER, mark as moving object (wanted fix location before)
|
|
2095
|
-
}
|
|
2096
|
-
// set the min/max resize info
|
|
2097
|
-
this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
|
|
2098
|
-
if (event.type === 'resizestart') {
|
|
2099
|
-
dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
|
|
2100
|
-
.resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
|
|
2101
|
-
if (node.maxW) {
|
|
2102
|
-
dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
|
|
2103
|
-
}
|
|
2104
|
-
if (node.maxH) {
|
|
2105
|
-
dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
|
|
2106
|
-
}
|
|
2107
|
-
}
|
|
2108
|
-
};
|
|
2109
|
-
/** @internal handles actual drag/resize **/
|
|
2110
|
-
GridStack.prototype._dragOrResize = function (el, event, ui, node, cellWidth, cellHeight) {
|
|
2111
|
-
var p = __assign({}, node._orig); // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
|
|
2112
|
-
var resizing;
|
|
2113
|
-
var mLeft = this.opts.marginLeft, mRight = this.opts.marginRight, mTop = this.opts.marginTop, mBottom = this.opts.marginBottom;
|
|
2114
|
-
// if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
|
|
2115
|
-
var mHeight = Math.round(cellHeight * 0.1), mWidth = Math.round(cellWidth * 0.1);
|
|
2116
|
-
mLeft = Math.min(mLeft, mWidth);
|
|
2117
|
-
mRight = Math.min(mRight, mWidth);
|
|
2118
|
-
mTop = Math.min(mTop, mHeight);
|
|
2119
|
-
mBottom = Math.min(mBottom, mHeight);
|
|
2120
|
-
if (event.type === 'drag') {
|
|
2121
|
-
if (node._temporaryRemoved)
|
|
2122
|
-
return; // handled by dropover
|
|
2123
|
-
var distance = ui.position.top - node._prevYPix;
|
|
2124
|
-
node._prevYPix = ui.position.top;
|
|
2125
|
-
if (this.opts.draggable.scroll !== false) {
|
|
2126
|
-
utils_1.Utils.updateScrollPosition(el, ui.position, distance);
|
|
2127
|
-
}
|
|
2128
|
-
// get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
|
|
2129
|
-
var left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
|
|
2130
|
-
var top_2 = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
|
|
2131
|
-
p.x = Math.round(left / cellWidth);
|
|
2132
|
-
p.y = Math.round(top_2 / cellHeight);
|
|
2133
|
-
// @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others
|
|
2134
|
-
var prev = this._extraDragRow;
|
|
2135
|
-
if (this.engine.collide(node, p)) {
|
|
2136
|
-
var row = this.getRow();
|
|
2137
|
-
var extra = Math.max(0, (p.y + node.h) - row);
|
|
2138
|
-
if (this.opts.maxRow && row + extra > this.opts.maxRow) {
|
|
2139
|
-
extra = Math.max(0, this.opts.maxRow - row);
|
|
2140
|
-
} // @ts-ignore
|
|
2141
|
-
this._extraDragRow = extra; // @ts-ignore
|
|
2142
|
-
}
|
|
2143
|
-
else
|
|
2144
|
-
this._extraDragRow = 0; // @ts-ignore
|
|
2145
|
-
if (this._extraDragRow !== prev)
|
|
2146
|
-
this._updateContainerHeight();
|
|
2147
|
-
if (node.x === p.x && node.y === p.y)
|
|
2148
|
-
return; // skip same
|
|
2149
|
-
// DON'T skip one we tried as we might have failed because of coverage <50% before
|
|
2150
|
-
// if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;
|
|
2151
|
-
}
|
|
2152
|
-
else if (event.type === 'resize') {
|
|
2153
|
-
if (p.x < 0)
|
|
2154
|
-
return;
|
|
2155
|
-
// Scrolling page if needed
|
|
2156
|
-
utils_1.Utils.updateScrollResize(event, el, cellHeight);
|
|
2157
|
-
// get new size
|
|
2158
|
-
p.w = Math.round((ui.size.width - mLeft) / cellWidth);
|
|
2159
|
-
p.h = Math.round((ui.size.height - mTop) / cellHeight);
|
|
2160
|
-
if (node.w === p.w && node.h === p.h)
|
|
2161
|
-
return;
|
|
2162
|
-
if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h)
|
|
2163
|
-
return; // skip one we tried (but failed)
|
|
2164
|
-
// if we size on left/top side this might move us, so get possible new position as well
|
|
2165
|
-
var left = ui.position.left + mLeft;
|
|
2166
|
-
var top_3 = ui.position.top + mTop;
|
|
2167
|
-
p.x = Math.round(left / cellWidth);
|
|
2168
|
-
p.y = Math.round(top_3 / cellHeight);
|
|
2169
|
-
resizing = true;
|
|
2170
|
-
}
|
|
2171
|
-
node._event = event;
|
|
2172
|
-
node._lastTried = p; // set as last tried (will nuke if we go there)
|
|
2173
|
-
var rect = {
|
|
2174
|
-
x: ui.position.left + mLeft,
|
|
2175
|
-
y: ui.position.top + mTop,
|
|
2176
|
-
w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,
|
|
2177
|
-
h: (ui.size ? ui.size.height : node.h * cellHeight) - mTop - mBottom
|
|
2178
|
-
};
|
|
2179
|
-
if (this.engine.moveNodeCheck(node, __assign(__assign({}, p), { cellWidth: cellWidth, cellHeight: cellHeight, rect: rect, resizing: resizing }))) {
|
|
2180
|
-
node._lastUiPosition = ui.position;
|
|
2181
|
-
this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);
|
|
2182
|
-
delete node._skipDown;
|
|
2183
|
-
if (resizing && node.subGrid) {
|
|
2184
|
-
node.subGrid.onParentResize();
|
|
2185
|
-
} // @ts-ignore
|
|
2186
|
-
this._extraDragRow = 0; // @ts-ignore
|
|
2187
|
-
this._updateContainerHeight();
|
|
2188
|
-
var target = event.target; // @ts-ignore
|
|
2189
|
-
this._writePosAttr(target, node);
|
|
2190
|
-
if (this._gsEventHandler[event.type]) {
|
|
2191
|
-
this._gsEventHandler[event.type](event, target);
|
|
2192
|
-
}
|
|
2193
|
-
}
|
|
2194
|
-
};
|
|
2195
|
-
/** @internal called when item leaving our area by either cursor dropout event
|
|
2196
|
-
* or shape is outside our boundaries. remove it from us, and mark temporary if this was
|
|
2197
|
-
* our item to start with else restore prev node values from prev grid it came from.
|
|
2198
|
-
**/
|
|
2199
|
-
GridStack.prototype._leave = function (el, helper) {
|
|
2200
|
-
var node = el.gridstackNode;
|
|
2201
|
-
if (!node)
|
|
2202
|
-
return;
|
|
2203
|
-
dd.off(el, 'drag'); // no need to track while being outside
|
|
2204
|
-
// this gets called when cursor leaves and shape is outside, so only do this once
|
|
2205
|
-
if (node._temporaryRemoved)
|
|
2206
|
-
return;
|
|
2207
|
-
node._temporaryRemoved = true;
|
|
2208
|
-
this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue
|
|
2209
|
-
node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
|
|
2210
|
-
if (this.opts.removable === true) { // boolean vs a class string
|
|
2211
|
-
// item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
|
|
2212
|
-
this._itemRemoving(el, true);
|
|
2213
|
-
}
|
|
2214
|
-
// finally if item originally came from another grid, but left us, restore things back to prev info
|
|
2215
|
-
if (el._gridstackNodeOrig) {
|
|
2216
|
-
// console.log('leave delete _gridstackNodeOrig') // TEST
|
|
2217
|
-
el.gridstackNode = el._gridstackNodeOrig;
|
|
2218
|
-
delete el._gridstackNodeOrig;
|
|
2219
|
-
}
|
|
2220
|
-
else if (node._isExternal) {
|
|
2221
|
-
// item came from outside (like a toolbar) so nuke any node info
|
|
2222
|
-
delete node.el;
|
|
2223
|
-
delete el.gridstackNode;
|
|
2224
|
-
// and restore all nodes back to original
|
|
2225
|
-
this.engine.restoreInitial();
|
|
2226
|
-
}
|
|
2227
|
-
};
|
|
2228
|
-
// legacy method removed
|
|
2229
|
-
GridStack.prototype.commit = function () { utils_1.obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; };
|
|
2230
|
-
/** scoping so users can call GridStack.Utils.sort() for example */
|
|
2231
|
-
GridStack.Utils = utils_1.Utils;
|
|
2232
|
-
/** scoping so users can call new GridStack.Engine(12) for example */
|
|
2233
|
-
GridStack.Engine = gridstack_engine_1.GridStackEngine;
|
|
2234
|
-
GridStack.GDRev = '7.3.0-dev';
|
|
2235
|
-
return GridStack;
|
|
2236
|
-
}());
|
|
2237
|
-
exports.GridStack = GridStack;
|
|
2238
|
-
//# sourceMappingURL=gridstack.js.map
|