index-dbe01e08.js 5.4 KB

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