Update actionHandler options in case they change.

This commit is contained in:
Dermot Duffy
2022-01-14 21:31:16 -08:00
parent 16a1226b19
commit ebfdfe333c
+13 -9
View File
@@ -15,7 +15,7 @@ interface ActionHandler extends HTMLElement {
bind(element: Element, options): void; bind(element: Element, options): void;
} }
interface ActionHandlerElement extends HTMLElement { interface ActionHandlerElement extends HTMLElement {
actionHandler?: boolean; actionHandlerOptions?: ActionHandlerOptions;
} }
declare global { declare global {
@@ -25,7 +25,7 @@ declare global {
} }
class ActionHandler extends HTMLElement implements ActionHandler { class ActionHandler extends HTMLElement implements ActionHandler {
public holdTime = 500; public holdTime = 400;
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
public ripple: any; public ripple: any;
@@ -78,10 +78,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
} }
public bind(element: ActionHandlerElement, options): void { public bind(element: ActionHandlerElement, options): void {
if (element.actionHandler) { if (element.actionHandlerOptions) {
// Reset the options on an existing actionHandler.
element.actionHandlerOptions = options;
return; return;
} }
element.actionHandler = true; element.actionHandlerOptions = options;
element.addEventListener('contextmenu', (ev: Event) => { element.addEventListener('contextmenu', (ev: Event) => {
const e = ev || window.event; const e = ev || window.event;
@@ -97,6 +99,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}); });
const start = (ev: Event): void => { const start = (ev: Event): void => {
const options = element.actionHandlerOptions;
let x; let x;
let y; let y;
if ((ev as TouchEvent).touches) { if ((ev as TouchEvent).touches) {
@@ -107,7 +110,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
y = (ev as MouseEvent).pageY; y = (ev as MouseEvent).pageY;
} }
if (options.hasHold) { if (options?.hasHold) {
this.held = false; this.held = false;
this.timer = window.setTimeout(() => { this.timer = window.setTimeout(() => {
this.startAnimation(x, y); this.startAnimation(x, y);
@@ -117,21 +120,22 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}; };
const end = (ev: Event): void => { const end = (ev: Event): void => {
const options = element.actionHandlerOptions;
if (['touchend', 'touchcancel'].includes(ev.type) if (['touchend', 'touchcancel'].includes(ev.type)
// This action handler by default relies on synthetic click events for // This action handler by default relies on synthetic click events for
// touch devices, in order to ensure that embedded cards (e.g. WebRTC) // touch devices, in order to ensure that embedded cards (e.g. WebRTC)
// can use stock click handlers. The exception is for hold events. // can use stock click handlers. The exception is for hold events.
&& !(options.hasHold && this.held)) { && !(options?.hasHold && this.held)) {
return; return;
} }
if (options.hasHold) { if (options?.hasHold) {
clearTimeout(this.timer); clearTimeout(this.timer);
this.stopAnimation(); this.stopAnimation();
this.timer = undefined; this.timer = undefined;
} }
if (options.hasHold && this.held) { if (options?.hasHold && this.held) {
fireEvent(element, 'action', { action: 'hold' }); fireEvent(element, 'action', { action: 'hold' });
} else if (options.hasDoubleClick) { } else if (options?.hasDoubleClick) {
if ( if (
(ev.type === 'click' && (ev as MouseEvent).detail < 2) || (ev.type === 'click' && (ev as MouseEvent).detail < 2) ||
!this.dblClickTimeout !this.dblClickTimeout