button-active.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { writeTask } from '@stencil/core/internal/client';
  5. import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic.js';
  6. import { createGesture } from './index3.js';
  7. const createButtonActiveGesture = (el, isButton) => {
  8. let currentTouchedButton;
  9. let initialTouchedButton;
  10. const activateButtonAtPoint = (x, y, hapticFeedbackFn) => {
  11. if (typeof document === 'undefined') {
  12. return;
  13. }
  14. const target = document.elementFromPoint(x, y);
  15. if (!target || !isButton(target) || target.disabled) {
  16. clearActiveButton();
  17. return;
  18. }
  19. if (target !== currentTouchedButton) {
  20. clearActiveButton();
  21. setActiveButton(target, hapticFeedbackFn);
  22. }
  23. };
  24. const setActiveButton = (button, hapticFeedbackFn) => {
  25. currentTouchedButton = button;
  26. if (!initialTouchedButton) {
  27. initialTouchedButton = currentTouchedButton;
  28. }
  29. const buttonToModify = currentTouchedButton;
  30. writeTask(() => buttonToModify.classList.add('ion-activated'));
  31. hapticFeedbackFn();
  32. };
  33. const clearActiveButton = (dispatchClick = false) => {
  34. if (!currentTouchedButton) {
  35. return;
  36. }
  37. const buttonToModify = currentTouchedButton;
  38. writeTask(() => buttonToModify.classList.remove('ion-activated'));
  39. /**
  40. * Clicking on one button, but releasing on another button
  41. * does not dispatch a click event in browsers, so we
  42. * need to do it manually here. Some browsers will
  43. * dispatch a click if clicking on one button, dragging over
  44. * another button, and releasing on the original button. In that
  45. * case, we need to make sure we do not cause a double click there.
  46. */
  47. if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
  48. currentTouchedButton.click();
  49. }
  50. currentTouchedButton = undefined;
  51. };
  52. return createGesture({
  53. el,
  54. gestureName: 'buttonActiveDrag',
  55. threshold: 0,
  56. onStart: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
  57. onMove: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
  58. onEnd: () => {
  59. clearActiveButton(true);
  60. hapticSelectionEnd();
  61. initialTouchedButton = undefined;
  62. },
  63. });
  64. };
  65. export { createButtonActiveGesture as c };