From e7a0adeec0d30d1671e87d0b01444dae2e18e354 Mon Sep 17 00:00:00 2001
From: SmileLifeIven <38740691+SmileLifeIven@users.noreply.github.com>
Date: Tue, 7 Dec 2021 23:15:12 +0800
Subject: [PATCH 001/655] feature: support ie browser (#1887)
* feature: support ie browser into separate es5 folder (larger target, polyfill)
---
demo/web1.html | 4 +-
es5/tsconfig.json | 33 +++++++++
es5/webpack.config.js | 22 ++++++
package.json | 4 +-
src/gridstack-poly.js | 151 ++++++++++++++++++++++++++++++++++++++++++
src/gridstack.ts | 7 +-
src/utils.ts | 2 +-
7 files changed, 215 insertions(+), 8 deletions(-)
create mode 100644 es5/tsconfig.json
create mode 100644 es5/webpack.config.js
diff --git a/demo/web1.html b/demo/web1.html
index a7f7193ea..c2a012a8d 100644
--- a/demo/web1.html
+++ b/demo/web1.html
@@ -13,7 +13,9 @@
-
+
+
+
diff --git a/es5/tsconfig.json b/es5/tsconfig.json
new file mode 100644
index 000000000..b9e6da3c0
--- /dev/null
+++ b/es5/tsconfig.json
@@ -0,0 +1,33 @@
+{
+ "compilerOptions": {
+ /*
+ "allowJs": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true
+ */
+ "declaration": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "inlineSources": true,
+ "lib": [ "es6", "es2015", "dom" ],
+ "module": "CommonJS",
+ "noImplicitAny": false,
+ "outDir": "../dist/es5",
+ "sourceMap": true,
+ "strict": false,
+ "target": "ES5"
+ },
+ "exclude": [
+ "../src/**/*.spec.ts",
+ // used for webpack h5/jq/static .js
+ "../src/gridstack-h5.ts",
+ "../src/gridstack-jq.ts",
+ "../src/gridstack-static.ts",
+ ],
+ "include": [
+ "../src/**/*.ts"
+ ],
+ "typeroots": [
+ "../node_modules/@types"
+ ]
+}
diff --git a/es5/webpack.config.js b/es5/webpack.config.js
new file mode 100644
index 000000000..68e95ab37
--- /dev/null
+++ b/es5/webpack.config.js
@@ -0,0 +1,22 @@
+const path = require('path');
+const webpackConfig = require('../webpack.config.js');
+
+const config = {...webpackConfig,
+ target: ['web', 'es5'],
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ use: {
+ loader: 'ts-loader',
+ options: {
+ configFile: 'es5/tsconfig.json'
+ }
+ },
+ exclude: ['/node_modules/', '/src/h5/', '/src/index-*.ts'],
+ },
+ ],
+ },
+};
+config.output.path = path.resolve(__dirname, '../dist/es5')
+module.exports = config
\ No newline at end of file
diff --git a/package.json b/package.json
index 1c6e9e9ca..687ffd800 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
}
],
"scripts": {
- "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && yarn doc",
+ "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json && yarn doc",
"w": "rm -rf dist/* && grunt && webpack",
"t": "rm -rf dist/* && grunt && tsc --stripInternal",
"doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
@@ -91,4 +91,4 @@
"webpack": "^5.3.2",
"webpack-cli": "^4.6.0"
}
-}
+}
\ No newline at end of file
diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js
index 8419d588b..80601a75f 100644
--- a/src/gridstack-poly.js
+++ b/src/gridstack-poly.js
@@ -146,6 +146,23 @@ if (!Array.prototype.findIndex) {
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+// from: https://github.com/jserz/js_piece/blob/master/DOM/Element/prepend()/prepend().md
+(function (arr) {
+ arr.forEach(function (item) {
+ item.prepend = item.prepend || function () {
+ var argArr = Array.prototype.slice.call(arguments),
+ docFrag = document.createDocumentFragment();
+
+ argArr.forEach(function (argItem) {
+ var isNode = argItem instanceof Node;
+ docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+ });
+
+ this.insertBefore(docFrag, this.firstChild);
+ };
+ });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
@@ -202,4 +219,138 @@ if (!Array.prototype['forEach']) {
}
// 8. return undefined
};
+}
+
+// https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent
+(function(){
+ try{
+ new window.CustomEvent('T');
+ }catch(e){
+ var CustomEvent = function(event, params){
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+ var evt = document.createEvent('CustomEvent');
+
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+
+ return evt;
+ };
+
+ CustomEvent.prototype = window.Event.prototype;
+
+ window.CustomEvent = CustomEvent;
+ }
+})();
+
+// https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+ arr.forEach(function (item) {
+ if (item.hasOwnProperty('remove')) {
+ return;
+ }
+ Object.defineProperty(item, 'remove', {
+ configurable: true,
+ enumerable: true,
+ writable: true,
+ value: function remove() {
+ this.parentNode.removeChild(this);
+ }
+ });
+ });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+
+// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/matches
+if (!Element.prototype.matches) {
+ Element.prototype.matches =
+ Element.prototype.matchesSelector ||
+ Element.prototype.mozMatchesSelector ||
+ Element.prototype.msMatchesSelector ||
+ Element.prototype.oMatchesSelector ||
+ Element.prototype.webkitMatchesSelector ||
+ function(s) {
+ var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+ i = matches.length;
+ while (--i >= 0 && matches.item(i) !== this) {}
+ return i > -1;
+ };
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+ Array.from = (function () {
+ var toStr = Object.prototype.toString;
+ var isCallable = function (fn) {
+ return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+ };
+ var toInteger = function (value) {
+ var number = Number(value);
+ if (isNaN(number)) { return 0; }
+ if (number === 0 || !isFinite(number)) { return number; }
+ return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+ };
+ var maxSafeInteger = Math.pow(2, 53) - 1;
+ var toLength = function (value) {
+ var len = toInteger(value);
+ return Math.min(Math.max(len, 0), maxSafeInteger);
+ };
+
+ // The length property of the from method is 1.
+ return function from(arrayLike/*, mapFn, thisArg */) {
+ // 1. Let C be the this value.
+ var C = this;
+
+ // 2. Let items be ToObject(arrayLike).
+ var items = Object(arrayLike);
+
+ // 3. ReturnIfAbrupt(items).
+ if (arrayLike == null) {
+ throw new TypeError("Array.from requires an array-like object - not null or undefined");
+ }
+
+ // 4. If mapfn is undefined, then let mapping be false.
+ var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+ var T;
+ if (typeof mapFn !== 'undefined') {
+ // 5. else
+ // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+ if (!isCallable(mapFn)) {
+ throw new TypeError('Array.from: when provided, the second argument must be a function');
+ }
+
+ // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+ if (arguments.length > 2) {
+ T = arguments[2];
+ }
+ }
+
+ // 10. Let lenValue be Get(items, "length").
+ // 11. Let len be ToLength(lenValue).
+ var len = toLength(items.length);
+
+ // 13. If IsConstructor(C) is true, then
+ // 13. a. Let A be the result of calling the [[Construct]] internal method
+ // of C with an argument list containing the single item len.
+ // 14. a. Else, Let A be ArrayCreate(len).
+ var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+ // 16. Let k be 0.
+ var k = 0;
+ // 17. Repeat, while k < len… (also steps a - h)
+ var kValue;
+ while (k < len) {
+ kValue = items[k];
+ if (mapFn) {
+ A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+ } else {
+ A[k] = kValue;
+ }
+ k += 1;
+ }
+ // 18. Let putStatus be Put(A, "length", len, true).
+ A.length = len;
+ // 20. Return A.
+ return A;
+ };
+ }());
}
\ No newline at end of file
diff --git a/src/gridstack.ts b/src/gridstack.ts
index a5fd986f3..59b8ffc98 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -5,7 +5,6 @@
* Copyright (c) 2021 Alain Dumesny
* see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
*/
-
import { GridStackEngine } from './gridstack-engine';
import { Utils, HeightData } from './utils';
import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
@@ -164,7 +163,7 @@ export class GridStack {
// create the grid element, but check if the passed 'parent' already has grid styling and should be used instead
let el = parent;
if (!parent.classList.contains('grid-stack')) {
- let doc = document.implementation.createHTMLDocument();
+ let doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = ``;
el = doc.body.children[0] as HTMLElement;
parent.appendChild(el);
@@ -400,13 +399,13 @@ export class GridStack {
let el: HTMLElement;
if (typeof els === 'string') {
- let doc = document.implementation.createHTMLDocument();
+ let doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = els;
el = doc.body.children[0] as HTMLElement;
} else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
let content = els ? (els as GridStackWidget).content || '' : '';
options = els;
- let doc = document.implementation.createHTMLDocument();
+ let doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = `
${content}
`;
el = doc.body.children[0] as HTMLElement;
} else {
diff --git a/src/utils.ts b/src/utils.ts
index 914eeb46e..abcc8529f 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -295,7 +295,7 @@ export class Utils {
/** @internal returns the passed element if scrollable, else the closest parent that will, up to the entire document scrolling element */
static getScrollElement(el?: HTMLElement): HTMLElement {
- if (!el) return document.scrollingElement as HTMLElement;
+ if (!el) return document.scrollingElement as HTMLElement || document.documentElement;
const style = getComputedStyle(el);
const overflowRegex = /(auto|scroll)/;
From ace8dcaa77b47a6308b1c6218d085818d29668ea Mon Sep 17 00:00:00 2001
From: Alain Dumesny
Date: Fri, 10 Dec 2021 10:12:04 -0800
Subject: [PATCH 002/655] more IE support
* some cleanup and documendation for #1887 for IE
---
Gruntfile.js | 2 +-
README.md | 19 ++++++++++++++-----
demo/web1.html | 2 +-
demo/web2.html | 4 +++-
doc/CHANGES.md | 3 +++
package.json | 4 +++-
src/gridstack-poly.js | 6 +++---
src/gridstack.ts | 6 +++---
src/utils.ts | 2 +-
9 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/Gruntfile.js b/Gruntfile.js
index 154f5c7dd..6de367625 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -39,7 +39,7 @@ module.exports = function(grunt) {
copy: {
dist: {
files: {
- 'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
+ 'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
'dist/src/gridstack.scss': ['src/gridstack.scss'],
'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
}
diff --git a/README.md b/README.md
index 5cadab111..d6928119a 100644
--- a/README.md
+++ b/README.md
@@ -92,19 +92,28 @@ which means you can possibly bring your own version
},
```
-Alternatively in html
+Alternatively (single combined file) in html
```html
-
+
-
+
-
+
```
-Note: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
+
+**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
+You can use the es5 files and polyfill (larger) for older browser instead. For example:
+```html
+
+
+
+```
+
## Basic usage
diff --git a/demo/web1.html b/demo/web1.html
index c2a012a8d..389776e85 100644
--- a/demo/web1.html
+++ b/demo/web1.html
@@ -13,7 +13,7 @@
-
+
diff --git a/demo/web2.html b/demo/web2.html
index 9a3a28811..71b2a9ac6 100644
--- a/demo/web2.html
+++ b/demo/web2.html
@@ -13,7 +13,9 @@
-
+
+
+
Nested grids demo
-
This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)
-
Note: HTML5 release doesn't yet support 'dragOut:false' constrain so use JQ version if you need that.
+
This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher items (green)
+
Note: HTML5 release doesn't yet support 'dragOut:false' constrain so use JQ version if you need that (nested 2 case).
}
load = function(full = true) {
if (full) {
- grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
+ grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
} else {
- grid.load(json);
+ grid.load(options);
}
}
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 2c1b9f37a..5114e24e1 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -67,7 +67,9 @@ Change log
## 4.4.1-dev (TBD)
+* add [#992](https://github.com/gridstack/gridstack.js/issues/992) support dragging into and out of nested grids from parents! Thank you [@arclogos132](https://github.com/arclogos132) for sponsoring it.
* fix [#1902](https://github.com/gridstack/gridstack.js/pull/1902) nested.html: dragging between sub-grids show items clipped
+* fix [#1558](https://github.com/gridstack/gridstack.js/issues/1558) dragging between vertical grids causes too much growth, not follow mouse.
## 4.4.1 (2021-12-24)
* fix [#1901](https://github.com/gridstack/gridstack.js/pull/1901) error introduced for #1785 when re-loading with fewer objects
diff --git a/spec/e2e/html/1558-vertical-grids-scroll-too-much.html b/spec/e2e/html/1558-vertical-grids-scroll-too-much.html
new file mode 100644
index 000000000..4cd6fe278
--- /dev/null
+++ b/spec/e2e/html/1558-vertical-grids-scroll-too-much.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Codestin Search App
+
+
+
+
+
+
+
+
#1558 items moves too much
+
+
+
item1
+
+
+
item2
+
+
+
+
+
+
item1
+
+
+
item2
+
+
+
+
+
+
+
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
index 46dbeccd0..1812ad54c 100644
--- a/src/gridstack-dd.ts
+++ b/src/gridstack-dd.ts
@@ -24,6 +24,8 @@ export type DDValue = number | string;
/** drag&drop events callbacks */
export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+// TEST let count = 0;
+
/**
* Base class implementing common Grid drag'n'drop functionality, with domain specific subclass (h5 vs jq subclasses)
*/
@@ -67,7 +69,6 @@ export abstract class GridStackDD extends GridStackDDI {
/********************************************************************************
* GridStack code that is doing drag&drop extracted here so main class is smaller
* for static grid that don't do any of this work anyway. Saves about 10k.
- * TODO: no code hint in code below as this is so look at alternatives ?
* https://www.typescriptlang.org/docs/handbook/declaration-merging.html
* https://www.typescriptlang.org/docs/handbook/mixins.html
********************************************************************************/
@@ -82,7 +83,6 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
}
// vars shared across all methods
- let gridPos: MousePosition;
let cellHeight: number, cellWidth: number;
let onDrag = (event: DragEvent, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
@@ -90,9 +90,10 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
if (!node) return;
helper = helper || el;
- let rec = helper.getBoundingClientRect();
- let left = rec.left - gridPos.left;
- let top = rec.top - gridPos.top;
+ let parent = this.el.getBoundingClientRect();
+ let {top, left} = helper.getBoundingClientRect();
+ left -= parent.left;
+ top -= parent.top;
let ui: DDUIData = {position: {top, left}};
if (node._temporaryRemoved) {
@@ -150,6 +151,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
* entering our grid area
*/
.on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
+ // TEST console.log(`over ${this.el.gridstack.opts.id} ${count++}`);
let node = el.gridstackNode;
// ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
if (node?.grid === this && !node._temporaryRemoved) {
@@ -164,14 +166,12 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
otherGrid._leave(el, helper);
}
- // get grid screen coordinates and cell dimensions
- let box = this.el.getBoundingClientRect();
- gridPos = {top: box.top, left: box.left};
+ // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
cellWidth = this.cellWidth();
cellHeight = this.getCellHeight(true);
// load any element attributes if we don't have a node
- if (!node) {// @ts-ignore
+ if (!node) {// @ts-ignore private read only on ourself
node = this._readAttr(el);
}
if (!node.grid) {
@@ -213,6 +213,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
* Leaving our grid area...
*/
.on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
+ // TEST console.log(`out ${this.el.gridstack.opts.id} ${count++}`);
let node = el.gridstackNode;
if (!node) return false;
// fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 1d211111d..a4d1121b8 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -126,7 +126,8 @@ $animation_speed: .3s !default;
}
// without this, the html5 drag will flicker between no-drop and drop when dragging over second grid
- &.ui-droppable.ui-droppable-over > *:not(.ui-droppable) {
- pointer-events: none;
- }
+ // Update: removed that as it causes nested grids to no receive dragenter events when parent drags and sets this for #992. not seeing cursor flicker (chrome).
+ // &.ui-droppable.ui-droppable-over > *:not(.ui-droppable) {
+ // pointer-events: none;
+ // }
}
diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts
index 2d044b663..bfe4c4cf8 100644
--- a/src/h5/dd-droppable.ts
+++ b/src/h5/dd-droppable.ts
@@ -7,6 +7,7 @@ import { DDDraggable } from './dd-draggable';
import { DDManager } from './dd-manager';
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
import { DDUtils } from './dd-utils';
+import { GridHTMLElement, GridStack } from '../gridstack';
export interface DDDroppableOpt {
accept?: string | ((el: HTMLElement) => boolean);
@@ -15,6 +16,8 @@ export interface DDDroppableOpt {
out?: (event: DragEvent, ui) => void;
}
+// TEST let count = 0;
+
export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt {
public accept: (el: HTMLElement) => boolean;
@@ -23,6 +26,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
/** @internal */
private moving: boolean;
+ private static lastActive: DDDroppable;
constructor(el: HTMLElement, opts: DDDroppableOpt = {}) {
super();
@@ -62,13 +66,10 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
}
public destroy(): void {
- if (this.moving) {
- this._removeLeaveCallbacks();
- }
+ this._removeLeaveCallbacks();
this.disable(true);
this.el.classList.remove('ui-droppable');
this.el.classList.remove('ui-droppable-disabled');
- delete this.moving;
super.destroy();
}
@@ -80,10 +81,13 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
/** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
private _dragEnter(event: DragEvent): void {
+ // TEST console.log(`${count++} Enter ${(this.el as GridHTMLElement).gridstack.opts.id}`);
if (!this._canDrop()) return;
event.preventDefault();
+ event.stopPropagation();
- if (this.moving) return; // ignore multiple 'dragenter' as we go over existing items
+ // ignore multiple 'dragenter' as we go over existing items
+ if (this.moving) return;
this.moving = true;
const ev = DDUtils.initEvent(event, { target: this.el, type: 'dropover' });
@@ -94,7 +98,14 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
this.el.addEventListener('dragover', this._dragOver);
this.el.addEventListener('drop', this._drop);
this.el.addEventListener('dragleave', this._dragLeave);
- this.el.classList.add('ui-droppable-over');
+ // Update: removed that as it causes nested grids to no receive dragenter events when parent drags and sets this for #992. not seeing cursor flicker (chrome).
+ // this.el.classList.add('ui-droppable-over');
+
+ // make sure when we enter this, that the last one gets a leave to correctly cleanup as we don't always do
+ if (DDDroppable.lastActive && DDDroppable.lastActive !== this) {
+ DDDroppable.lastActive._dragLeave(event, true);
+ }
+ DDDroppable.lastActive = this;
}
/** @internal called when an moving to drop item is being dragged over - do nothing but eat the event */
@@ -104,25 +115,34 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
}
/** @internal called when the item is leaving our area, stop tracking if we had moving item */
- private _dragLeave(event: DragEvent): void {
+ private _dragLeave(event: DragEvent, forceLeave?: boolean): void {
+ // TEST console.log(`${count++} Leave ${(this.el as GridHTMLElement).gridstack.opts.id}`);
+ event.preventDefault();
+ event.stopPropagation();
- // ignore leave events on our children (get when starting to drag our items)
- // Note: Safari Mac has null relatedTarget which causes #1684 so check if DragEvent is inside the grid instead
- if (!event.relatedTarget) {
- const { bottom, left, right, top } = this.el.getBoundingClientRect();
- if (event.x < right && event.x > left && event.y < bottom && event.y > top) return;
- } else if (this.el.contains(event.relatedTarget as HTMLElement)) return;
+ // ignore leave events on our children (we get them when starting to drag our items)
+ // but exclude nested grids since we would still be leaving ourself
+ if (!forceLeave) {
+ let onChild = DDUtils.inside(event, this.el);
+ if (onChild) {
+ let nestedEl = (this.el as GridHTMLElement).gridstack.engine.nodes.filter(n => n.subGrid).map(n => (n.subGrid as GridStack).el);
+ onChild = !nestedEl.some(el => DDUtils.inside(event, el));
+ }
+ if (onChild) return;
+ }
- this._removeLeaveCallbacks();
if (this.moving) {
- event.preventDefault();
const ev = DDUtils.initEvent(event, { target: this.el, type: 'dropout' });
if (this.option.out) {
this.option.out(ev, this._ui(DDManager.dragElement))
}
this.triggerEvent('dropout', ev);
}
- delete this.moving;
+ this._removeLeaveCallbacks();
+
+ if (DDDroppable.lastActive === this) {
+ delete DDDroppable.lastActive;
+ }
}
/** @internal item is being dropped on us - call the client drop event */
@@ -135,18 +155,17 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
}
this.triggerEvent('drop', ev);
this._removeLeaveCallbacks();
- delete this.moving;
}
/** @internal called to remove callbacks when leaving or dropping */
private _removeLeaveCallbacks() {
+ if (!this.moving) { return; }
+ delete this.moving;
+ this.el.removeEventListener('dragover', this._dragOver);
+ this.el.removeEventListener('drop', this._drop);
this.el.removeEventListener('dragleave', this._dragLeave);
- this.el.classList.remove('ui-droppable-over');
- if (this.moving) {
- this.el.removeEventListener('dragover', this._dragOver);
- this.el.removeEventListener('drop', this._drop);
- }
- // Note: this.moving is reset by callee of this routine to control the flow
+ // Update: removed that as it causes nested grids to no receive dragenter events when parent drags and sets this for #992. not seeing cursor flicker (chrome).
+ // this.el.classList.remove('ui-droppable-over');
}
/** @internal */
diff --git a/src/h5/dd-utils.ts b/src/h5/dd-utils.ts
index b7b19aea0..3bcaf1b9a 100644
--- a/src/h5/dd-utils.ts
+++ b/src/h5/dd-utils.ts
@@ -78,4 +78,17 @@ export class DDUtils {
['pageX','pageY','clientX','clientY','screenX','screenY'].forEach(p => evt[p] = e[p]); // point info
return {...evt, ...obj} as unknown as T;
}
+
+ /** returns true if event is inside the given element rectangle */
+ // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
+ // this.el.contains(event.relatedTarget as HTMLElement)
+ public static inside(e: MouseEvent, el: HTMLElement): boolean {
+ // srcElement, toElement, target: all set to placeholder when leaving simple grid, so we can't use that (Chrome)
+ let target: HTMLElement = e.relatedTarget || (e as any).fromElement;
+ if (!target) {
+ const { bottom, left, right, top } = el.getBoundingClientRect();
+ return (e.x < right && e.x > left && e.y < bottom && e.y > top);
+ }
+ return el.contains(target);
+ }
}
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index cfdad13e7..67cd68bea 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -111,6 +111,9 @@ export interface GridStackOptions {
/** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
handleClass?: string;
+ /** id used to debug grid instance, not currently stored in DOM attributes */
+ id?: numberOrString;
+
/** additional widget class (default?: 'grid-stack-item') */
itemClass?: string;
diff --git a/src/utils.ts b/src/utils.ts
index 9dd9e9cfa..1dff42055 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -254,11 +254,11 @@ export class Utils {
}
}
- /** return the closest parent matching the given class */
+ /** return the closest parent (or itself) matching the given class */
static closestByClass(el: HTMLElement, name: string): HTMLElement {
-
- while(el = el.parentElement) {
+ while (el) {
if (el.classList.contains(name)) return el;
+ el = el.parentElement
}
return null;
}
From f280a1c0cd1757f3b0121523ca822d54265a601e Mon Sep 17 00:00:00 2001
From: Alain Dumesny
Date: Wed, 29 Dec 2021 18:20:35 -0800
Subject: [PATCH 013/655] prevent double nesting using gesture
* remaining fix for #992 to prevent a nested grid from going inside another until we can do the right thing down the line. Very broken otherwise
* also fixed heuristics to work like regular items (ignore enter/leave for sub grid dragging)
---
src/gridstack-dd.ts | 2 ++
src/gridstack.ts | 1 +
src/h5/dd-droppable.ts | 7 +++++--
3 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
index 1812ad54c..666f42c8b 100644
--- a/src/gridstack-dd.ts
+++ b/src/gridstack-dd.ts
@@ -131,6 +131,8 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
// set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
if (node?.grid === this) return true;
if (!this.opts.acceptWidgets) return false;
+ // prevent deeper nesting until rest of 992 can be fixed
+ if (node?.subGrid) return false;
// check for accept method or class matching
let canAccept = true;
if (typeof this.opts.acceptWidgets === 'function') {
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 67997f0dc..b0e201881 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -293,6 +293,7 @@ export class GridStack {
if (parentGridItemEl && parentGridItemEl.gridstackNode) {
this.opts._isNested = parentGridItemEl.gridstackNode;
this.opts._isNested.subGrid = this;
+ parentGridItemEl.classList.add('grid-stack-nested');
this.el.classList.add('grid-stack-nested');
}
diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts
index bfe4c4cf8..231333cb4 100644
--- a/src/h5/dd-droppable.ts
+++ b/src/h5/dd-droppable.ts
@@ -8,6 +8,7 @@ import { DDManager } from './dd-manager';
import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
import { DDUtils } from './dd-utils';
import { GridHTMLElement, GridStack } from '../gridstack';
+import { GridItemHTMLElement } from '../types';
export interface DDDroppableOpt {
accept?: string | ((el: HTMLElement) => boolean);
@@ -121,10 +122,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
event.stopPropagation();
// ignore leave events on our children (we get them when starting to drag our items)
- // but exclude nested grids since we would still be leaving ourself
+ // but exclude nested grids since we would still be leaving ourself,
+ // but don't handle leave if we're dragging a nested grid around
if (!forceLeave) {
let onChild = DDUtils.inside(event, this.el);
- if (onChild) {
+ let drag: GridItemHTMLElement = DDManager.dragElement.el;
+ if (onChild && !drag.gridstackNode?.subGrid) { // dragging a nested grid ?
let nestedEl = (this.el as GridHTMLElement).gridstack.engine.nodes.filter(n => n.subGrid).map(n => (n.subGrid as GridStack).el);
onChild = !nestedEl.some(el => DDUtils.inside(event, el));
}
From 83e11d23d87fb8d236961b28fed95bf249c98993 Mon Sep 17 00:00:00 2001
From: Alain Dumesny
Date: Thu, 30 Dec 2021 08:45:26 -0800
Subject: [PATCH 014/655] nested grid column:'auto' option
* partial fix #1009
* we now have a new column:'auto' option which is used for nested grids to column size themselves to match their container (same # of column)
This make sure outside and inside items stay the same size
* this will eventually be required when creating grids on the fly dynamically (as good default)
* updated nested.html to showcase this
---
demo/nested.html | 35 +++++++++++++-----------
doc/CHANGES.md | 1 +
doc/README.md | 15 +++++++----
src/gridstack.ts | 69 +++++++++++++++++++++++++++++++++++-------------
src/types.ts | 7 +++--
5 files changed, 85 insertions(+), 42 deletions(-)
diff --git a/demo/nested.html b/demo/nested.html
index e3e8a64a3..00cbb5c90 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -9,11 +9,13 @@
+
+
+
+
Advanced Nested grids demo
+
This example shows sub-grids only accepting pink items, while parent accept all.