index-31b07b9c.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. 'use strict';
  5. const helpers = require('./helpers-8a48fdea.js');
  6. const index = require('./index-cc858e97.js');
  7. const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
  8. const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';
  9. const ION_CONTENT_CLASS_SELECTOR = '.ion-content-scroll-host';
  10. /**
  11. * Selector used for implementations reliant on `<ion-content>` for scroll event changes.
  12. *
  13. * Developers should use the `.ion-content-scroll-host` selector to target the element emitting
  14. * scroll events. With virtual scroll implementations this will be the host element for
  15. * the scroll viewport.
  16. */
  17. const ION_CONTENT_SELECTOR = `${ION_CONTENT_ELEMENT_SELECTOR}, ${ION_CONTENT_CLASS_SELECTOR}`;
  18. const isIonContent = (el) => el.tagName === ION_CONTENT_TAG_NAME;
  19. /**
  20. * Waits for the element host fully initialize before
  21. * returning the inner scroll element.
  22. *
  23. * For `ion-content` the scroll target will be the result
  24. * of the `getScrollElement` function.
  25. *
  26. * For custom implementations it will be the element host
  27. * or a selector within the host, if supplied through `scrollTarget`.
  28. */
  29. const getScrollElement = async (el) => {
  30. if (isIonContent(el)) {
  31. await new Promise((resolve) => helpers.componentOnReady(el, resolve));
  32. return el.getScrollElement();
  33. }
  34. return el;
  35. };
  36. /**
  37. * Queries the element matching the selector for IonContent.
  38. * See ION_CONTENT_SELECTOR for the selector used.
  39. */
  40. const findIonContent = (el) => {
  41. /**
  42. * First we try to query the custom scroll host selector in cases where
  43. * the implementation is using an outer `ion-content` with an inner custom
  44. * scroll container.
  45. */
  46. const customContentHost = el.querySelector(ION_CONTENT_CLASS_SELECTOR);
  47. if (customContentHost) {
  48. return customContentHost;
  49. }
  50. return el.querySelector(ION_CONTENT_SELECTOR);
  51. };
  52. /**
  53. * Queries the closest element matching the selector for IonContent.
  54. */
  55. const findClosestIonContent = (el) => {
  56. return el.closest(ION_CONTENT_SELECTOR);
  57. };
  58. /**
  59. * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  60. * using the public API `scrollToTop` with a duration.
  61. */
  62. const scrollToTop = (el, durationMs) => {
  63. if (isIonContent(el)) {
  64. const content = el;
  65. return content.scrollToTop(durationMs);
  66. }
  67. return Promise.resolve(el.scrollTo({
  68. top: 0,
  69. left: 0,
  70. behavior: durationMs > 0 ? 'smooth' : 'auto',
  71. }));
  72. };
  73. /**
  74. * Scrolls by a specified X/Y distance in the component. If an `ion-content` is found, it will scroll
  75. * using the public API `scrollByPoint` with a duration.
  76. */
  77. const scrollByPoint = (el, x, y, durationMs) => {
  78. if (isIonContent(el)) {
  79. const content = el;
  80. return content.scrollByPoint(x, y, durationMs);
  81. }
  82. return Promise.resolve(el.scrollBy({
  83. top: y,
  84. left: x,
  85. behavior: durationMs > 0 ? 'smooth' : 'auto',
  86. }));
  87. };
  88. /**
  89. * Prints an error informing developers that an implementation requires an element to be used
  90. * within either the `ion-content` selector or the `.ion-content-scroll-host` class.
  91. */
  92. const printIonContentErrorMsg = (el) => {
  93. return index.printRequiredElementError(el, ION_CONTENT_ELEMENT_SELECTOR);
  94. };
  95. /**
  96. * Several components in Ionic need to prevent scrolling
  97. * during a gesture (card modal, range, item sliding, etc).
  98. * Use this utility to account for ion-content and custom content hosts.
  99. */
  100. const disableContentScrollY = (contentEl) => {
  101. if (isIonContent(contentEl)) {
  102. const ionContent = contentEl;
  103. const initialScrollY = ionContent.scrollY;
  104. ionContent.scrollY = false;
  105. /**
  106. * This should be passed into resetContentScrollY
  107. * so that we can revert ion-content's scrollY to the
  108. * correct state. For example, if scrollY = false
  109. * initially, we do not want to enable scrolling
  110. * when we call resetContentScrollY.
  111. */
  112. return initialScrollY;
  113. }
  114. else {
  115. contentEl.style.setProperty('overflow', 'hidden');
  116. return true;
  117. }
  118. };
  119. const resetContentScrollY = (contentEl, initialScrollY) => {
  120. if (isIonContent(contentEl)) {
  121. contentEl.scrollY = initialScrollY;
  122. }
  123. else {
  124. contentEl.style.removeProperty('overflow');
  125. }
  126. };
  127. exports.ION_CONTENT_CLASS_SELECTOR = ION_CONTENT_CLASS_SELECTOR;
  128. exports.ION_CONTENT_ELEMENT_SELECTOR = ION_CONTENT_ELEMENT_SELECTOR;
  129. exports.disableContentScrollY = disableContentScrollY;
  130. exports.findClosestIonContent = findClosestIonContent;
  131. exports.findIonContent = findIonContent;
  132. exports.getScrollElement = getScrollElement;
  133. exports.isIonContent = isIonContent;
  134. exports.printIonContentErrorMsg = printIonContentErrorMsg;
  135. exports.resetContentScrollY = resetContentScrollY;
  136. exports.scrollByPoint = scrollByPoint;
  137. exports.scrollToTop = scrollToTop;