ion-segment-view.cjs.entry.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. 'use strict';
  5. Object.defineProperty(exports, '__esModule', { value: true });
  6. const index = require('./index-2e236a04.js');
  7. const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
  8. const IonSegmentViewIosStyle0 = segmentViewIosCss;
  9. const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
  10. const IonSegmentViewMdStyle0 = segmentViewMdCss;
  11. const SegmentView = class {
  12. constructor(hostRef) {
  13. index.registerInstance(this, hostRef);
  14. this.ionSegmentViewScroll = index.createEvent(this, "ionSegmentViewScroll", 7);
  15. this.scrollEndTimeout = null;
  16. this.isTouching = false;
  17. this.disabled = false;
  18. this.isManualScroll = undefined;
  19. }
  20. handleScroll(ev) {
  21. var _a;
  22. const { scrollLeft, scrollWidth, clientWidth } = ev.target;
  23. const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
  24. this.ionSegmentViewScroll.emit({
  25. scrollRatio,
  26. isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
  27. });
  28. // Reset the timeout to check for scroll end
  29. this.resetScrollEndTimeout();
  30. }
  31. /**
  32. * Handle touch start event to know when the user is actively dragging the segment view.
  33. */
  34. handleScrollStart() {
  35. if (this.scrollEndTimeout) {
  36. clearTimeout(this.scrollEndTimeout);
  37. this.scrollEndTimeout = null;
  38. }
  39. this.isTouching = true;
  40. }
  41. /**
  42. * Handle touch end event to know when the user is no longer dragging the segment view.
  43. */
  44. handleTouchEnd() {
  45. this.isTouching = false;
  46. }
  47. /**
  48. * Reset the scroll end detection timer. This is called on every scroll event.
  49. */
  50. resetScrollEndTimeout() {
  51. if (this.scrollEndTimeout) {
  52. clearTimeout(this.scrollEndTimeout);
  53. this.scrollEndTimeout = null;
  54. }
  55. this.scrollEndTimeout = setTimeout(() => {
  56. this.checkForScrollEnd();
  57. },
  58. // Setting this to a lower value may result in inconsistencies in behavior
  59. // across browsers (particularly Firefox).
  60. // Ideally, all of this logic is removed once the scroll end event is
  61. // supported on all browsers (https://caniuse.com/?search=scrollend)
  62. 100);
  63. }
  64. /**
  65. * Check if the scroll has ended and the user is not actively touching.
  66. * If the conditions are met (active content is enabled and no active touch),
  67. * reset the scroll position and emit the scroll end event.
  68. */
  69. checkForScrollEnd() {
  70. // Only emit scroll end event if the active content is not disabled and
  71. // the user is not touching the segment view
  72. if (!this.isTouching) {
  73. this.isManualScroll = undefined;
  74. }
  75. }
  76. /**
  77. * @internal
  78. *
  79. * This method is used to programmatically set the displayed segment content
  80. * in the segment view. Calling this method will update the `value` of the
  81. * corresponding segment button.
  82. *
  83. * @param id: The id of the segment content to display.
  84. * @param smoothScroll: Whether to animate the scroll transition.
  85. */
  86. async setContent(id, smoothScroll = true) {
  87. const contents = this.getSegmentContents();
  88. const index = contents.findIndex((content) => content.id === id);
  89. if (index === -1)
  90. return;
  91. this.isManualScroll = false;
  92. this.resetScrollEndTimeout();
  93. const contentWidth = this.el.offsetWidth;
  94. this.el.scrollTo({
  95. top: 0,
  96. left: index * contentWidth,
  97. behavior: smoothScroll ? 'smooth' : 'instant',
  98. });
  99. }
  100. getSegmentContents() {
  101. return Array.from(this.el.querySelectorAll('ion-segment-content'));
  102. }
  103. render() {
  104. const { disabled, isManualScroll } = this;
  105. return (index.h(index.Host, { key: 'fa528d2d9ae0f00fc3067defe2a047dce77c814a', class: {
  106. 'segment-view-disabled': disabled,
  107. 'segment-view-scroll-disabled': isManualScroll === false,
  108. } }, index.h("slot", { key: '74dc8b4d073caeff1bab272d11b9ea3e1a215954' })));
  109. }
  110. get el() { return index.getElement(this); }
  111. };
  112. SegmentView.style = {
  113. ios: IonSegmentViewIosStyle0,
  114. md: IonSegmentViewMdStyle0
  115. };
  116. exports.ion_segment_view = SegmentView;