65 lines
2.2 KiB
JavaScript
Executable file
65 lines
2.2 KiB
JavaScript
Executable file
import { writeTask } from '@stencil/core/internal/client';
|
|
import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic.js';
|
|
import { createGesture } from './index2.js';
|
|
|
|
const createButtonActiveGesture = (el, isButton) => {
|
|
let currentTouchedButton;
|
|
let initialTouchedButton;
|
|
const activateButtonAtPoint = (x, y, hapticFeedbackFn) => {
|
|
if (typeof document === 'undefined') {
|
|
return;
|
|
}
|
|
const target = document.elementFromPoint(x, y);
|
|
if (!target || !isButton(target)) {
|
|
clearActiveButton();
|
|
return;
|
|
}
|
|
if (target !== currentTouchedButton) {
|
|
clearActiveButton();
|
|
setActiveButton(target, hapticFeedbackFn);
|
|
}
|
|
};
|
|
const setActiveButton = (button, hapticFeedbackFn) => {
|
|
currentTouchedButton = button;
|
|
if (!initialTouchedButton) {
|
|
initialTouchedButton = currentTouchedButton;
|
|
}
|
|
const buttonToModify = currentTouchedButton;
|
|
writeTask(() => buttonToModify.classList.add('ion-activated'));
|
|
hapticFeedbackFn();
|
|
};
|
|
const clearActiveButton = (dispatchClick = false) => {
|
|
if (!currentTouchedButton) {
|
|
return;
|
|
}
|
|
const buttonToModify = currentTouchedButton;
|
|
writeTask(() => buttonToModify.classList.remove('ion-activated'));
|
|
/**
|
|
* Clicking on one button, but releasing on another button
|
|
* does not dispatch a click event in browsers, so we
|
|
* need to do it manually here. Some browsers will
|
|
* dispatch a click if clicking on one button, dragging over
|
|
* another button, and releasing on the original button. In that
|
|
* case, we need to make sure we do not cause a double click there.
|
|
*/
|
|
if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
|
|
currentTouchedButton.click();
|
|
}
|
|
currentTouchedButton = undefined;
|
|
};
|
|
return createGesture({
|
|
el,
|
|
gestureName: 'buttonActiveDrag',
|
|
threshold: 0,
|
|
onStart: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
|
|
onMove: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
|
|
onEnd: () => {
|
|
clearActiveButton(true);
|
|
hapticSelectionEnd();
|
|
initialTouchedButton = undefined;
|
|
}
|
|
});
|
|
};
|
|
|
|
export { createButtonActiveGesture as c };
|