diff --git a/.eslintrc.js b/.eslintrc.js index 542b96c06..d74a4b582 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,7 +18,6 @@ module.exports = { 'max-len': ['error', 180], 'no-trailing-spaces': 'error', 'prefer-const': 0, - '@typescript-eslint/explicit-function-return-type': 0, - '@typescript-eslint/ban-ts-comment': 0 + '@typescript-eslint/ban-ts-comment': 0, } }; diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 1b895d350..a207c535c 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -155,10 +155,10 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt this.dragEl.addEventListener('touchmove', touchmove); this.dragEl.addEventListener('touchend', touchend); } - + e.preventDefault(); // preventDefault() prevents blur event which occurs just after mousedown event. - // if an editable content has focus, then blur must be call + // if an editable content has focus, then blur must be call if(document.activeElement) (document.activeElement as HTMLElement).blur(); DDManager.mouseHandled = true; @@ -166,7 +166,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt } /** @internal method to call actual drag event */ - protected _callDrag(e: DragEvent) { + protected _callDrag(e: DragEvent): void { if (!this.dragging) return; const ev = Utils.initEvent(e, { target: this.el, type: 'drag' }); if (this.option.drag) { diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts index 2d9b08773..a439a40ea 100644 --- a/src/dd-droppable.ts +++ b/src/dd-droppable.ts @@ -9,12 +9,13 @@ import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl'; import { Utils } from './utils'; import { DDElementHost } from './dd-element'; import { isTouch, pointerenter, pointerleave } from './dd-touch'; +import { DDUIData } from './types'; export interface DDDroppableOpt { accept?: string | ((el: HTMLElement) => boolean); - drop?: (event: DragEvent, ui) => void; - over?: (event: DragEvent, ui) => void; - out?: (event: DragEvent, ui) => void; + drop?: (event: DragEvent, ui: DDUIData) => void; + over?: (event: DragEvent, ui: DDUIData) => void; + out?: (event: DragEvent, ui: DDUIData) => void; } // let count = 0; // TEST @@ -163,7 +164,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt } /** @internal */ - protected _ui(drag: DDDraggable) { + protected _ui(drag: DDDraggable): DDUIData { return { draggable: drag.el, ...drag.ui() diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts index 88aba5b4f..f142b892a 100644 --- a/src/dd-resizable-handle.ts +++ b/src/dd-resizable-handle.ts @@ -72,7 +72,7 @@ export class DDResizableHandle { } /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */ - protected _mouseDown(e: MouseEvent) { + protected _mouseDown(e: MouseEvent): void { this.mouseDownEvent = e; document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble document.addEventListener('mouseup', this._mouseUp, true); @@ -85,7 +85,7 @@ export class DDResizableHandle { } /** @internal */ - protected _mouseMove(e: MouseEvent) { + protected _mouseMove(e: MouseEvent): void { let s = this.mouseDownEvent; if (this.moving) { this._triggerEvent('move', e); @@ -100,7 +100,7 @@ export class DDResizableHandle { } /** @internal */ - protected _mouseUp(e: MouseEvent) { + protected _mouseUp(e: MouseEvent): void { if (this.moving) { this._triggerEvent('stop', e); } diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts index edb7bfcaf..9c9a92066 100644 --- a/src/dd-resizable.ts +++ b/src/dd-resizable.ts @@ -126,7 +126,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt } /** @internal */ - protected _mouseOver(e: Event) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + protected _mouseOver(e: Event): void { // console.log(`${count++} pre-enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`) // already over a child, ignore. Ideally we just call e.stopPropagation() but see https://github.com/gridstack/gridstack.js/issues/2018 if (DDManager.overResizeElement || DDManager.dragElement) return; @@ -136,7 +137,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt } /** @internal */ - protected _mouseOut(e: Event) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + protected _mouseOut(e: Event): void { // console.log(`${count++} pre-leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`) if (DDManager.overResizeElement !== this) return; delete DDManager.overResizeElement; diff --git a/src/dd-touch.ts b/src/dd-touch.ts index 544406b31..62a3bc382 100644 --- a/src/dd-touch.ts +++ b/src/dd-touch.ts @@ -14,8 +14,10 @@ export const isTouch: boolean = typeof window !== 'undefined' && typeof document ( 'ontouchstart' in document || 'ontouchstart' in window // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this + // eslint-disable-next-line @typescript-eslint/no-explicit-any || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch) || navigator.maxTouchPoints > 0 + // eslint-disable-next-line @typescript-eslint/no-explicit-any || (navigator as any).msMaxTouchPoints > 0 ); @@ -114,7 +116,7 @@ function simulatePointerMouseEvent(e: PointerEvent, simulatedType: string) { * Handle the touchstart events * @param {Object} e The widget element's touchstart event */ -export function touchstart(e: TouchEvent) { +export function touchstart(e: TouchEvent): void { // Ignore the event if another widget is already being handled if (DDTouch.touchHandled) return; DDTouch.touchHandled = true; @@ -128,7 +130,7 @@ export function touchstart(e: TouchEvent) { * Handle the touchmove events * @param {Object} e The document's touchmove event */ -export function touchmove(e: TouchEvent) { +export function touchmove(e: TouchEvent): void { // Ignore event if not handled by us if (!DDTouch.touchHandled) return; @@ -139,7 +141,7 @@ export function touchmove(e: TouchEvent) { * Handle the touchend events * @param {Object} e The document's touchend event */ -export function touchend(e: TouchEvent) { +export function touchend(e: TouchEvent): void { // Ignore event if not handled if (!DDTouch.touchHandled) return; @@ -170,11 +172,11 @@ export function touchend(e: TouchEvent) { * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter * so instead of PointerEvent to still get enter/leave and send the matching mouse event. */ -export function pointerdown(e: PointerEvent) { +export function pointerdown(e: PointerEvent): void { (e.target as HTMLElement).releasePointerCapture(e.pointerId) // <- Important! } -export function pointerenter(e: PointerEvent) { +export function pointerenter(e: PointerEvent): void { // ignore the initial one we get on pointerdown on ourself if (!DDManager.dragElement) { // console.log('pointerenter ignored'); @@ -184,7 +186,7 @@ export function pointerenter(e: PointerEvent) { simulatePointerMouseEvent(e, 'mouseenter'); } -export function pointerleave(e: PointerEvent) { +export function pointerleave(e: PointerEvent): void { // ignore the leave on ourself we get before releasing the mouse over ourself // by delaying sending the event and having the up event cancel us if (!DDManager.dragElement) { diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index 4c9d17240..5844e702a 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -4,7 +4,7 @@ */ import { Utils } from './utils'; -import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts, GridStackOptions } from './types'; +import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts } from './types'; /** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */ type OnChangeCB = (nodes: GridStackNode[]) => void; diff --git a/src/gridstack.ts b/src/gridstack.ts index eeca20ca9..9961fce49 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -41,6 +41,11 @@ interface GridCSSStyleSheet extends CSSStyleSheet { _max?: number; // internal tracker of the max # of rows we created } +// extend with internal fields we need - TODO: move other items in here +interface InternalGridStackOptions extends GridStackOptions { + _alwaysShowResizeHandle?: true | false | 'mobile'; // so we can restore for save +} + /** * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid. * Note: your grid elements MUST have the following classes for the CSS layout to work: @@ -141,7 +146,7 @@ export class GridStack { * See instead `GridStackOptions.engineClass` if you only need to * replace just one instance. */ - static registerEngine(engineClass: typeof GridStackEngine) { + static registerEngine(engineClass: typeof GridStackEngine): void { GridStack.engineClass = engineClass; } @@ -237,7 +242,7 @@ export class GridStack { } // save original setting so we can restore on save if (opts.alwaysShowResizeHandle !== undefined) { - (opts as any)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle; + (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle; } // elements DOM attributes override any passed options (like CSS style) - merge the two together @@ -575,7 +580,7 @@ export class GridStack { // check if save entire grid options (needed for recursive) + children... if (saveGridOpt) { - let o: GridStackOptions = Utils.cloneDeep(this.opts); + let o: InternalGridStackOptions = Utils.cloneDeep(this.opts); // delete default values that will be recreated on launch if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) { o.margin = o.marginTop; @@ -589,8 +594,8 @@ export class GridStack { o.column = 'auto'; delete o.disableOneColumnMode; } - const origShow = (o as any)._alwaysShowResizeHandle; - delete (o as any)._alwaysShowResizeHandle; + const origShow = o._alwaysShowResizeHandle; + delete o._alwaysShowResizeHandle; if (origShow !== undefined) { o.alwaysShowResizeHandle = origShow; } else { diff --git a/src/types.ts b/src/types.ts index 0fb24b6f3..3dd630154 100644 --- a/src/types.ts +++ b/src/types.ts @@ -361,6 +361,7 @@ export interface Rect extends Size, Position {} export interface DDUIData { position?: Position; size?: Size; + draggable?: HTMLElement; /* fields not used by GridStack but sent by jq ? leave in case we go back to them... originalPosition? : Position; offset?: Position; diff --git a/src/utils.ts b/src/utils.ts index 3c4c7d207..b644fdeb0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -273,7 +273,7 @@ export class Utils { } /** removes internal fields '_' and default values for saving */ - static removeInternalForSave(n: GridStackNode, removeEl = true) { + static removeInternalForSave(n: GridStackNode, removeEl = true): void { for (let key in n) { if (key[0] === '_' || n[key] === null || n[key] === undefined ) delete n[key]; } delete n.grid; if (removeEl) delete n.el; @@ -496,7 +496,7 @@ export class Utils { } /** copies the MouseEvent properties and sends it as another event to the given target */ - public static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget) { + public static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void { const simulatedEvent = document.createEvent('MouseEvents'); simulatedEvent.initMouseEvent( simulatedType, // type