diff --git a/src/components/dialogs/cocktail-dialog/cocktail-dialog.ts b/src/components/dialogs/cocktail-dialog/cocktail-dialog.ts index 49b94dbb..62c3fe5e 100644 --- a/src/components/dialogs/cocktail-dialog/cocktail-dialog.ts +++ b/src/components/dialogs/cocktail-dialog/cocktail-dialog.ts @@ -140,6 +140,25 @@ export class CocktailDialog { attached() { this.searchElement.addEventListener('blur', this.handleInputBlur, true); this.imageInput.addEventListener('change', this.updateImageDisplay, true); + + const bgColorClass = /*tw*/ 'bg-base-200'; + + this.extendedIngredientGroup.forEach(element => { + const el = document.getElementById('ingredient-group-' + element.ingredientId); + if (el != null) { + el.addEventListener('long-press', () => { + this.longClick(element); + }); + el.addEventListener('long-press-timer-start', () => { + el.classList.add(bgColorClass); + }); + el.addEventListener('long-press-timer-stop', () => { + if (el.classList.contains(bgColorClass)) { + el.classList.remove(bgColorClass); + } + }); + } + }); } editTags() { diff --git a/src/components/navbar/navbar.html b/src/components/navbar/navbar.html index 6de11b8e..e65d442c 100644 --- a/src/components/navbar/navbar.html +++ b/src/components/navbar/navbar.html @@ -11,7 +11,7 @@ viewBox="0 0 24 24" stroke="currentColor">
+
@@ -27,7 +27,7 @@
![${cocktail.name}]()
![]()
+ * @license MIT
+ */
+(function (window, document) {
+ 'use strict';
+
+ // local timer object based on rAF
+ var timer = null;
+
+ // check if we're using a touch screen
+ var hasPointerEvents = 'PointerEvent' in window || (window.navigator && 'msPointerEnabled' in window.navigator);
+ var isTouch = 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+
+ // switch to pointer events or touch events if using a touch screen
+ var mouseDown = hasPointerEvents ? 'pointerdown' : isTouch ? 'touchstart' : 'mousedown';
+ var mouseUp = hasPointerEvents ? 'pointerup' : isTouch ? 'touchend' : 'mouseup';
+ var mouseMove = hasPointerEvents ? 'pointermove' : isTouch ? 'touchmove' : 'mousemove';
+ var mouseLeave = hasPointerEvents ? 'pointerleave' : isTouch ? 'touchleave' : 'mouseleave';
+
+ // track number of pixels the mouse moves during long press
+ var startX = 0; // mouse x position when timer started
+ var startY = 0; // mouse y position when timer started
+ var maxDiffX = 10; // max number of X pixels the mouse can move during long press before it is canceled
+ var maxDiffY = 10; // max number of Y pixels the mouse can move during long press before it is canceled
+
+ // patch CustomEvent to allow constructor creation (IE/Chrome)
+ if (typeof window.CustomEvent !== 'function') {
+ window.CustomEvent = function (event, params) {
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return evt;
+ };
+
+ window.CustomEvent.prototype = window.Event.prototype;
+ }
+
+ /**
+ * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
+ * @param {function} fn The callback function
+ * @param {int} delay The delay in milliseconds
+ * @returns {object} handle to the timeout object
+ */
+ function requestTimeout(fn, delay) {
+ if (
+ !window.requestAnimationFrame &&
+ !window.webkitRequestAnimationFrame &&
+ !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
+ !window.oRequestAnimationFrame &&
+ !window.msRequestAnimationFrame
+ )
+ return window.setTimeout(fn, delay);
+
+ var start = new Date().getTime();
+ var handle = {};
+
+ var loop = function () {
+ var current = new Date().getTime();
+ var delta = current - start;
+
+ if (delta >= delay) {
+ fn.call();
+ } else {
+ handle.value = requestAnimationFrame(loop);
+ }
+ };
+
+ handle.value = requestAnimationFrame(loop);
+
+ return handle;
+ }
+
+ /**
+ * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
+ * @param {object} handle The callback function
+ * @returns {void}
+ */
+ function clearRequestTimeout(handle) {
+ if (handle) {
+ window.cancelAnimationFrame
+ ? window.cancelAnimationFrame(handle.value)
+ : window.webkitCancelAnimationFrame
+ ? window.webkitCancelAnimationFrame(handle.value)
+ : window.webkitCancelRequestAnimationFrame
+ ? window.webkitCancelRequestAnimationFrame(handle.value) /* Support for legacy API */
+ : window.mozCancelRequestAnimationFrame
+ ? window.mozCancelRequestAnimationFrame(handle.value)
+ : window.oCancelRequestAnimationFrame
+ ? window.oCancelRequestAnimationFrame(handle.value)
+ : window.msCancelRequestAnimationFrame
+ ? window.msCancelRequestAnimationFrame(handle.value)
+ : clearTimeout(handle);
+ }
+ }
+
+ /**
+ * Fires the 'long-press' event on element
+ * @param {MouseEvent|PointerEvent|TouchEvent} originalEvent The original event being fired
+ * @returns {void}
+ */
+ function fireLongPressEvent(originalEvent) {
+ clearLongPressTimer();
+
+ originalEvent = unifyEvent(originalEvent);
+
+ // fire the long-press event
+ var allowClickEvent = this.dispatchEvent(
+ new CustomEvent('long-press', {
+ bubbles: true,
+ cancelable: true,
+
+ // custom event data (legacy)
+ detail: {
+ clientX: originalEvent.clientX,
+ clientY: originalEvent.clientY,
+ offsetX: originalEvent.offsetX,
+ offsetY: originalEvent.offsetY,
+ pageX: originalEvent.pageX,
+ pageY: originalEvent.pageY
+ },
+
+ // add coordinate data that would typically acompany a touch/click event
+ clientX: originalEvent.clientX,
+ clientY: originalEvent.clientY,
+ offsetX: originalEvent.offsetX,
+ offsetY: originalEvent.offsetY,
+ pageX: originalEvent.pageX,
+ pageY: originalEvent.pageY,
+ screenX: originalEvent.screenX,
+ screenY: originalEvent.screenY
+ })
+ );
+
+ originalEvent?.target?.dispatchEvent(
+ new CustomEvent('long-press-timer-stop', {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+
+ if (!allowClickEvent) {
+ // suppress the next click event if e.preventDefault() was called in long-press handler
+ document.addEventListener(
+ 'click',
+ function suppressEvent(e) {
+ document.removeEventListener('click', suppressEvent, true);
+ cancelEvent(e);
+ },
+ true
+ );
+ }
+ }
+
+ /**
+ * consolidates mouse, touch, and Pointer events
+ * @param {MouseEvent|PointerEvent|TouchEvent} e The original event being fired
+ * @returns {MouseEvent|PointerEvent|Touch}
+ */
+ function unifyEvent(e) {
+ if (e.changedTouches !== undefined) {
+ return e.changedTouches[0];
+ }
+ return e;
+ }
+
+ /**
+ * method responsible for starting the long press timer
+ * @param {event} e - event object
+ * @returns {void}
+ */
+ function startLongPressTimer(e) {
+ clearLongPressTimer(e);
+ var el = e.target;
+ // get delay from html attribute if it exists, otherwise default to 1500
+ var longPressDelayInMs = parseInt(getNearestAttribute(el, 'data-long-press-delay', '1500'), 10); // default 1500
+
+ // start the timer
+ el.dispatchEvent(
+ new CustomEvent('long-press-timer-start', {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ timer = requestTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs);
+ }
+
+ /**
+ * method responsible for clearing a pending long press timer
+ * @returns {void}
+ */
+ function clearLongPressTimer(e) {
+ clearRequestTimeout(timer);
+
+ e?.target?.dispatchEvent(
+ new CustomEvent('long-press-timer-stop', {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+
+ timer = null;
+ }
+
+ /**
+ * Cancels the current event
+ * @param {object} e - browser event object
+ * @returns {void}
+ */
+ function cancelEvent(e) {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ /**
+ * Starts the timer on mouse down and logs current position
+ * @param {object} e - browser event object
+ * @returns {void}
+ */
+ function mouseDownHandler(e) {
+ startX = e.clientX;
+ startY = e.clientY;
+ startLongPressTimer(e);
+ }
+
+ /**
+ * If the mouse moves n pixels during long-press, cancel the timer
+ * @param {object} e - browser event object
+ * @returns {void}
+ */
+ function mouseMoveHandler(e) {
+ // calculate total number of pixels the pointer has moved
+ var diffX = Math.abs(startX - e.clientX);
+ var diffY = Math.abs(startY - e.clientY);
+
+ // if pointer has moved more than allowed, cancel the long-press timer and therefore the event
+ if (diffX >= maxDiffX || diffY >= maxDiffY) {
+ clearLongPressTimer(e);
+ }
+ }
+
+ /**
+ * Gets attribute off HTML element or nearest parent
+ * @param {object} el - HTML element to retrieve attribute from
+ * @param {string} attributeName - name of the attribute
+ * @param {any} defaultValue - default value to return if no match found
+ * @returns {any} attribute value or defaultValue
+ */
+ function getNearestAttribute(el, attributeName, defaultValue) {
+ // walk up the dom tree looking for data-action and data-trigger
+
+ while (el && el !== document.documentElement) {
+ var attributeValue = el?.getAttribute(attributeName);
+
+ if (attributeValue) {
+ return attributeValue;
+ }
+
+ el = el.parentNode;
+ }
+
+ return defaultValue;
+ }
+
+ // hook events that clear a pending long press event
+ document.addEventListener('contextmenu', e => {
+ e.preventDefault();
+ });
+ document.addEventListener(mouseUp, clearLongPressTimer, true);
+ document.addEventListener(mouseLeave, clearLongPressTimer, true);
+ document.addEventListener(mouseMove, mouseMoveHandler, true);
+ document.addEventListener('wheel', clearLongPressTimer, true);
+ document.addEventListener('scroll', clearLongPressTimer, true);
+
+ // hook events that can trigger a long press event
+ document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
+})(window, document);
diff --git a/src/main.scss b/src/main.scss
index d713e8af..df39cc49 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -248,7 +248,6 @@ body {
display: flex;
align-items: center;
padding: 0.25em 0.5em;
- background-color: var(--bg);
> p {
padding-left: 1em;
diff --git a/src/main.ts b/src/main.ts
index 104524aa..51de137f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,7 @@ import { I18N, TCustomAttribute } from 'aurelia-i18n';
import HttpApi from 'i18next-http-backend';
import { HotjarConfig } from 'aurelia-hotjar';
import { getLanguages } from 'data/languages';
+import 'long-press-event';
export async function configure(aurelia: Aurelia): Promise {
aurelia.use
@@ -43,10 +44,6 @@ export async function configure(aurelia: Aurelia): Promise {
ns: ['translation', 'ingredients', 'cocktails', 'instructions'],
defaultNS: 'translation'
});
- })
- .plugin(PLATFORM.moduleName('aurelia-long-click-event'), {
- longClickEventName: 'long-click',
- clickDurationMS: 2500
});
const localStorageService = aurelia.container.get(LocalStorageService);
diff --git a/src/modules/cocktails/all-cocktails/all-cocktails.html b/src/modules/cocktails/all-cocktails/all-cocktails.html
index a028dda3..f7418ce5 100644
--- a/src/modules/cocktails/all-cocktails/all-cocktails.html
+++ b/src/modules/cocktails/all-cocktails/all-cocktails.html
@@ -4,7 +4,8 @@
diff --git a/src/modules/cocktails/all-cocktails/all-cocktails.ts b/src/modules/cocktails/all-cocktails/all-cocktails.ts
index 1071195f..371b2446 100644
--- a/src/modules/cocktails/all-cocktails/all-cocktails.ts
+++ b/src/modules/cocktails/all-cocktails/all-cocktails.ts
@@ -53,6 +53,27 @@ export class AllCocktails {
this.update(data);
}
+ attached() {
+ const bgColorClass = /*tw*/ 'bg-base-200';
+
+ this._cocktails.forEach(element => {
+ const el = document.getElementById('all-cocktails-' + element.id);
+ if (el != null) {
+ el.addEventListener('long-press', () => {
+ this.openCocktailRowDialog(element);
+ });
+ el.addEventListener('long-press-timer-start', () => {
+ el.classList.add(bgColorClass);
+ });
+ el.addEventListener('long-press-timer-stop', () => {
+ if (el.classList.contains(bgColorClass)) {
+ el.classList.remove(bgColorClass);
+ }
+ });
+ }
+ });
+ }
+
update(data: CocktailFilterCallbackData) {
this._latestCallback = data;
const { cocktails } = filterCocktailList({
diff --git a/src/modules/cocktails/cocktails.html b/src/modules/cocktails/cocktails.html
index e2e665b5..dc7d313c 100644
--- a/src/modules/cocktails/cocktails.html
+++ b/src/modules/cocktails/cocktails.html
@@ -4,11 +4,11 @@
-