index8.js 4.5 KB

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