Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
};
6 changes: 3 additions & 3 deletions src/dd-draggable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -155,18 +155,18 @@ 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;
return true;
}

/** @internal method to call actual drag event */
protected _callDrag(e: DragEvent) {
protected _callDrag(e: DragEvent): void {
if (!this.dragging) return;
const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drag' });
if (this.option.drag) {
Expand Down
9 changes: 5 additions & 4 deletions src/dd-droppable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
Expand Down
6 changes: 3 additions & 3 deletions src/dd-resizable-handle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -100,7 +100,7 @@ export class DDResizableHandle {
}

/** @internal */
protected _mouseUp(e: MouseEvent) {
protected _mouseUp(e: MouseEvent): void {
if (this.moving) {
this._triggerEvent('stop', e);
}
Expand Down
6 changes: 4 additions & 2 deletions src/dd-resizable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
14 changes: 8 additions & 6 deletions src/dd-touch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
);

Expand Down Expand Up @@ -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;

Expand All @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -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');
Expand All @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/gridstack-engine.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 10 additions & 5 deletions src/gridstack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down