index9.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { d as doc } from './index6.js';
  5. import { q as pointerCoord } from './helpers.js';
  6. const startTapClick = (config) => {
  7. if (doc === undefined) {
  8. return;
  9. }
  10. let lastActivated = 0;
  11. let activatableEle;
  12. let activeRipple;
  13. let activeDefer;
  14. const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
  15. const clearDefers = new WeakMap();
  16. const cancelActive = () => {
  17. if (activeDefer)
  18. clearTimeout(activeDefer);
  19. activeDefer = undefined;
  20. if (activatableEle) {
  21. removeActivated(false);
  22. activatableEle = undefined;
  23. }
  24. };
  25. const pointerDown = (ev) => {
  26. // Ignore right clicks
  27. if (activatableEle || ev.button === 2) {
  28. return;
  29. }
  30. setActivatedElement(getActivatableTarget(ev), ev);
  31. };
  32. const pointerUp = (ev) => {
  33. setActivatedElement(undefined, ev);
  34. };
  35. const setActivatedElement = (el, ev) => {
  36. // do nothing
  37. if (el && el === activatableEle) {
  38. return;
  39. }
  40. if (activeDefer)
  41. clearTimeout(activeDefer);
  42. activeDefer = undefined;
  43. const { x, y } = pointerCoord(ev);
  44. // deactivate selected
  45. if (activatableEle) {
  46. if (clearDefers.has(activatableEle)) {
  47. throw new Error('internal error');
  48. }
  49. if (!activatableEle.classList.contains(ACTIVATED)) {
  50. addActivated(activatableEle, x, y);
  51. }
  52. removeActivated(true);
  53. }
  54. // activate
  55. if (el) {
  56. const deferId = clearDefers.get(el);
  57. if (deferId) {
  58. clearTimeout(deferId);
  59. clearDefers.delete(el);
  60. }
  61. el.classList.remove(ACTIVATED);
  62. const callback = () => {
  63. addActivated(el, x, y);
  64. activeDefer = undefined;
  65. };
  66. if (isInstant(el)) {
  67. callback();
  68. }
  69. else {
  70. activeDefer = setTimeout(callback, ADD_ACTIVATED_DEFERS);
  71. }
  72. }
  73. activatableEle = el;
  74. };
  75. const addActivated = (el, x, y) => {
  76. lastActivated = Date.now();
  77. el.classList.add(ACTIVATED);
  78. if (!useRippleEffect)
  79. return;
  80. const rippleEffect = getRippleEffect(el);
  81. if (rippleEffect !== null) {
  82. removeRipple();
  83. activeRipple = rippleEffect.addRipple(x, y);
  84. }
  85. };
  86. const removeRipple = () => {
  87. if (activeRipple !== undefined) {
  88. activeRipple.then((remove) => remove());
  89. activeRipple = undefined;
  90. }
  91. };
  92. const removeActivated = (smooth) => {
  93. removeRipple();
  94. const active = activatableEle;
  95. if (!active) {
  96. return;
  97. }
  98. const time = CLEAR_STATE_DEFERS - Date.now() + lastActivated;
  99. if (smooth && time > 0 && !isInstant(active)) {
  100. const deferId = setTimeout(() => {
  101. active.classList.remove(ACTIVATED);
  102. clearDefers.delete(active);
  103. }, CLEAR_STATE_DEFERS);
  104. clearDefers.set(active, deferId);
  105. }
  106. else {
  107. active.classList.remove(ACTIVATED);
  108. }
  109. };
  110. doc.addEventListener('ionGestureCaptured', cancelActive);
  111. doc.addEventListener('pointerdown', pointerDown, true);
  112. doc.addEventListener('pointerup', pointerUp, true);
  113. /**
  114. * Tap click effects such as the ripple effect should
  115. * not happen when scrolling. For example, if a user scrolls
  116. * the page but also happens to do a touchstart on a button
  117. * as part of the scroll, the ripple effect should not
  118. * be dispatched. The ripple effect should only happen
  119. * if the button is activated and the page is not scrolling.
  120. *
  121. * pointercancel is dispatched on a gesture when scrolling
  122. * starts, so this lets us avoid having to listen for
  123. * ion-content's scroll events.
  124. */
  125. doc.addEventListener('pointercancel', cancelActive, true);
  126. };
  127. // TODO(FW-2832): type
  128. const getActivatableTarget = (ev) => {
  129. if (ev.composedPath !== undefined) {
  130. /**
  131. * composedPath returns EventTarget[]. However,
  132. * objects other than Element can be targets too.
  133. * For example, AudioContext can be a target. In this
  134. * case, we know that the event is a UIEvent so we
  135. * can assume that the path will contain either Element
  136. * or ShadowRoot.
  137. */
  138. const path = ev.composedPath();
  139. for (let i = 0; i < path.length - 2; i++) {
  140. const el = path[i];
  141. if (!(el instanceof ShadowRoot) && el.classList.contains('ion-activatable')) {
  142. return el;
  143. }
  144. }
  145. }
  146. else {
  147. return ev.target.closest('.ion-activatable');
  148. }
  149. };
  150. const isInstant = (el) => {
  151. return el.classList.contains('ion-activatable-instant');
  152. };
  153. const getRippleEffect = (el) => {
  154. if (el.shadowRoot) {
  155. const ripple = el.shadowRoot.querySelector('ion-ripple-effect');
  156. if (ripple) {
  157. return ripple;
  158. }
  159. }
  160. return el.querySelector('ion-ripple-effect');
  161. };
  162. const ACTIVATED = 'ion-activated';
  163. const ADD_ACTIVATED_DEFERS = 100;
  164. const CLEAR_STATE_DEFERS = 150;
  165. export { startTapClick };