tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

⚡ Adds right-click support to long-press directive

This commit is contained in:
Alicia Sykes 2022-04-03 15:59:07 +01:00
parent f0cb8fe4f2
commit edad7fde41
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/directives/LongPress.js
View File

@ -6,8 +6,11 @@
*/
const LONG_PRESS_DEFAULT_DELAY = 750;
const TRIGGER_FOR_RIGHT_CLICK = true;
const longPressEvent = new CustomEvent('long-press');
let startTime = null;
export default {
bind(element, binding, vnode) {
const el = element;
@ -16,12 +19,17 @@ export default {
const swallowClick = (e) => {
el.removeEventListener('click', swallowClick);
if (!el.dataset.elapsed) return true;
e.preventDefault();
e.stopPropagation();
const totalTime = Date.now() - startTime;
// If was long press, then cancel original action
if (totalTime > LONG_PRESS_DEFAULT_DELAY) {
e.preventDefault();
e.stopPropagation();
}
return false;
};
const complete = () => {
/* Emit event to component */
const triggerEvent = () => {
if (vnode.componentInstance) vnode.componentInstance.$emit('long-press');
else el.dispatchEvent(longPressEvent);
el.dataset.elapsed = true;
@ -32,19 +40,26 @@ export default {
document.removeEventListener('pointerup', onPointerUp);
};
const onPointerDown = () => {
const onPointerDown = (e) => {
// If event was right-click, then immediately trigger
if (e.button === 2) {
if (TRIGGER_FOR_RIGHT_CLICK) triggerEvent();
else return;
}
startTime = Date.now();
document.addEventListener('pointerup', onPointerUp);
el.addEventListener('click', swallowClick);
const timeoutDuration = binding.value || LONG_PRESS_DEFAULT_DELAY;
const timeout = setTimeout(complete, timeoutDuration);
const timeoutDuration = LONG_PRESS_DEFAULT_DELAY;
const timeout = setTimeout(triggerEvent, timeoutDuration);
el.dataset.elapsed = false;
el.dataset.longPressTimeout = timeout;
e.preventDefault();
};
el.$longPressHandler = onPointerDown;
el.addEventListener('pointerdown', onPointerDown);
},
unbind(el) {
startTime = null;
clearTimeout(parseInt(el.dataset.longPressTimeout, 10));
el.removeEventListener('pointerdown', el.$longPressHandler);
},