@limetech/lime-elements
Version:
79 lines (78 loc) • 2.45 kB
JavaScript
import { forceUpdate } from '@stencil/core';
const eventHandlers = new WeakMap();
class EnterClickable {
constructor(element) {
this.element = element;
this.isActive = false;
this.hasJustReleasedEnter = true;
this.handleKeyDown = (event) => {
var _a;
if (event.key === 'Enter' && !this.isActive) {
this.isActive = true;
if ((_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
forceUpdate(this.element);
}
}
};
this.handleKeyUp = (event) => {
var _a;
if (event.key === 'Enter' && this.isActive) {
this.isActive = false;
this.hasJustReleasedEnter = true;
if ((_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
forceUpdate(this.element);
}
}
};
this.handleClick = (event) => {
if (!this.isActive) {
return;
}
if (this.hasJustReleasedEnter) {
this.hasJustReleasedEnter = false;
return;
}
event.stopImmediatePropagation();
};
this.callbacks = {
keydownHandler: this.handleKeyDown.bind(this),
keyupHandler: this.handleKeyUp.bind(this),
clickHandler: this.handleClick.bind(this),
};
}
enable() {
this.element.addEventListener('keydown', this.callbacks.keydownHandler);
this.element.addEventListener('keyup', this.callbacks.keyupHandler);
this.element.addEventListener('click', this.callbacks.clickHandler, true);
}
disable() {
this.element.removeEventListener('keydown', this.callbacks.keydownHandler);
this.element.removeEventListener('keyup', this.callbacks.keyupHandler);
this.element.removeEventListener('click', this.callbacks.clickHandler, true);
}
}
/**
* Overrides the default browser behavior for clickable elements
* When focused and pressing down enter, avoids calling onClick repeatedly
*
* @param element - The clickable element
*/
export function makeEnterClickable(element) {
if (!eventHandlers.has(element)) {
const enterClickable = new EnterClickable(element);
enterClickable.enable();
eventHandlers.set(element, enterClickable);
}
}
/**
*
* @param element
*/
export function removeEnterClickable(element) {
const enterClickable = eventHandlers.get(element);
if (enterClickable) {
enterClickable.disable();
eventHandlers.delete(element);
}
}
//# sourceMappingURL=make-enter-clickable.js.map