1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"version":3,"sources":["./node_modules/@ionic/core/dist/esm/ion-infinite-scroll_2.entry.js"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA4I;AAClE;AACb;;AAE7D,+CAA+C,aAAa,WAAW,yBAAyB,cAAc;;AAE9G;AACA;AACA,QAAQ,4DAAgB;AACxB,2BAA2B,4DAAW;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,4DAAS;AACrB;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,4DAAQ;AACxB;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4DAAS;AACjC;AACA;AACA,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,mEAAU;AAC/B;AACA,gBAAgB,4DAAC,CAAC,oDAAI,GAAG;AACzB;AACA;AACA;AACA,aAAa,EAAE;AACf;AACA,cAAc,QAAQ,4DAAU,OAAO;AACvC,2BAA2B;AAC3B;AACA;AACA,MAAM;AACN;AACA;;AAEA,iEAAiE,oBAAoB,aAAa,0BAA0B,sBAAsB,qBAAqB,uBAAuB,gBAAgB,kBAAkB,yBAAyB,sBAAsB,qBAAqB,iBAAiB,kBAAkB,cAAc,eAAe,aAAa,mBAAmB,aAAa,WAAW,uBAAuB,iBAAiB,kBAAkB,eAAe,gBAAgB,+FAA+F,uBAAuB,kBAAkB,mBAAmB,0BAA0B,yBAAyB,wBAAwB,wBAAwB,uEAAuE,cAAc,oDAAoD,yCAAyC,oPAAoP,0CAA0C,0OAA0O,wCAAwC;;AAEr9C,gEAAgE,oBAAoB,aAAa,0BAA0B,sBAAsB,qBAAqB,uBAAuB,gBAAgB,kBAAkB,yBAAyB,sBAAsB,qBAAqB,iBAAiB,kBAAkB,cAAc,eAAe,aAAa,mBAAmB,aAAa,WAAW,uBAAuB,iBAAiB,kBAAkB,eAAe,gBAAgB,+FAA+F,uBAAuB,kBAAkB,mBAAmB,0BAA0B,yBAAyB,wBAAwB,wBAAwB,uEAAuE,cAAc,mDAAmD,yCAAyC,+OAA+O,0CAA0C,uOAAuO,wCAAwC;;AAE38C;AACA;AACA,QAAQ,4DAAgB;AACxB;AACA;AACA;AACA,yBAAyB,mEAAU;AACnC,kCAAkC,2DAAM,+BAA+B,2DAAM;AAC7E;AACA;AACA;AACA,qBAAqB,mEAAU;AAC/B,gBAAgB,4DAAC,CAAC,oDAAI,GAAG;AACzB;AACA;AACA,4CAA4C,KAAK;AACjD,aAAa,EAAE,EAAE,4DAAC,SAAS,4BAA4B,0BAA0B,4DAAC,SAAS,oCAAoC,EAAE,4DAAC,iBAAiB,4BAA4B,0BAA0B,4DAAC,SAAS,4CAA4C,4DAAiB,oBAAoB;AACpS;AACA;AACA;AACA;AACA;AACA;;AAEuG","file":"14-es2015.js","sourcesContent":["import { r as registerInstance, e as createEvent, c as writeTask, f as readTask, h, i as getElement, H as Host } from './index-92848855.js';\nimport { b as getIonMode, c as config } from './ionic-global-23e7365a.js';\nimport { s as sanitizeDOMString } from './index-79d74e0b.js';\n\nconst infiniteScrollCss = \"ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}\";\n\nconst InfiniteScroll = class {\n constructor(hostRef) {\n registerInstance(this, hostRef);\n this.ionInfinite = createEvent(this, \"ionInfinite\", 7);\n this.thrPx = 0;\n this.thrPc = 0;\n this.didFire = false;\n this.isBusy = false;\n this.isLoading = false;\n /**\n * The threshold distance from the bottom\n * of the content to call the `infinite` output event when scrolled.\n * The threshold value can be either a percent, or\n * in pixels. For example, use the value of `10%` for the `infinite`\n * output event to get called when the user has scrolled 10%\n * from the bottom of the page. Use the value `100px` when the\n * scroll is within 100 pixels from the bottom of the page.\n */\n this.threshold = '15%';\n /**\n * If `true`, the infinite scroll will be hidden and scroll event listeners\n * will be removed.\n *\n * Set this to true to disable the infinite scroll from actively\n * trying to receive new data while scrolling. This is useful\n * when it is known that there is no more data that can be added, and\n * the infinite scroll is no longer needed.\n */\n this.disabled = false;\n /**\n * The position of the infinite scroll element.\n * The value can be either `top` or `bottom`.\n */\n this.position = 'bottom';\n this.onScroll = () => {\n const scrollEl = this.scrollEl;\n if (!scrollEl || !this.canStart()) {\n return 1;\n }\n const infiniteHeight = this.el.offsetHeight;\n if (infiniteHeight === 0) {\n // if there is no height of this element then do nothing\n return 2;\n }\n const scrollTop = scrollEl.scrollTop;\n const scrollHeight = scrollEl.scrollHeight;\n const height = scrollEl.offsetHeight;\n const threshold = this.thrPc !== 0 ? (height * this.thrPc) : this.thrPx;\n const distanceFromInfinite = (this.position === 'bottom')\n ? scrollHeight - infiniteHeight - scrollTop - threshold - height\n : scrollTop - infiniteHeight - threshold;\n if (distanceFromInfinite < 0) {\n if (!this.didFire) {\n this.isLoading = true;\n this.didFire = true;\n this.ionInfinite.emit();\n return 3;\n }\n }\n else {\n this.didFire = false;\n }\n return 4;\n };\n }\n thresholdChanged() {\n const val = this.threshold;\n if (val.lastIndexOf('%') > -1) {\n this.thrPx = 0;\n this.thrPc = (parseFloat(val) / 100);\n }\n else {\n this.thrPx = parseFloat(val);\n this.thrPc = 0;\n }\n }\n disabledChanged() {\n const disabled = this.disabled;\n if (disabled) {\n this.isLoading = false;\n this.isBusy = false;\n }\n this.enableScrollEvents(!disabled);\n }\n async connectedCallback() {\n const contentEl = this.el.closest('ion-content');\n if (!contentEl) {\n console.error('<ion-infinite-scroll> must be used inside an <ion-content>');\n return;\n }\n this.scrollEl = await contentEl.getScrollElement();\n this.thresholdChanged();\n this.disabledChanged();\n if (this.position === 'top') {\n writeTask(() => {\n if (this.scrollEl) {\n this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;\n }\n });\n }\n }\n disconnectedCallback() {\n this.enableScrollEvents(false);\n this.scrollEl = undefined;\n }\n /**\n * Call `complete()` within the `ionInfinite` output event handler when\n * your async operation has completed. For example, the `loading`\n * state is while the app is performing an asynchronous operation,\n * such as receiving more data from an AJAX request to add more items\n * to a data list. Once the data has been received and UI updated, you\n * then call this method to signify that the loading has completed.\n * This method will change the infinite scroll's state from `loading`\n * to `enabled`.\n */\n async complete() {\n const scrollEl = this.scrollEl;\n if (!this.isLoading || !scrollEl) {\n return;\n }\n this.isLoading = false;\n if (this.position === 'top') {\n /**\n * New content is being added at the top, but the scrollTop position stays the same,\n * which causes a scroll jump visually. This algorithm makes sure to prevent this.\n * (Frame 1)\n * - complete() is called, but the UI hasn't had time to update yet.\n * - Save the current content dimensions.\n * - Wait for the next frame using _dom.read, so the UI will be updated.\n * (Frame 2)\n * - Read the new content dimensions.\n * - Calculate the height difference and the new scroll position.\n * - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.\n * (Still frame 2, if I'm correct)\n * - Change the scroll position (= visually maintain the scroll position).\n * - Change the state to re-enable the InfiniteScroll.\n * - This should be after changing the scroll position, or it could\n * cause the InfiniteScroll to be triggered again immediately.\n * (Frame 3)\n * Done.\n */\n this.isBusy = true;\n // ******** DOM READ ****************\n // Save the current content dimensions before the UI updates\n const prev = scrollEl.scrollHeight - scrollEl.scrollTop;\n // ******** DOM READ ****************\n requestAnimationFrame(() => {\n readTask(() => {\n // UI has updated, save the new content dimensions\n const scrollHeight = scrollEl.scrollHeight;\n // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around\n const newScrollTop = scrollHeight - prev;\n // ******** DOM WRITE ****************\n requestAnimationFrame(() => {\n writeTask(() => {\n scrollEl.scrollTop = newScrollTop;\n this.isBusy = false;\n });\n });\n });\n });\n }\n }\n canStart() {\n return (!this.disabled &&\n !this.isBusy &&\n !!this.scrollEl &&\n !this.isLoading);\n }\n enableScrollEvents(shouldListen) {\n if (this.scrollEl) {\n if (shouldListen) {\n this.scrollEl.addEventListener('scroll', this.onScroll);\n }\n else {\n this.scrollEl.removeEventListener('scroll', this.onScroll);\n }\n }\n }\n render() {\n const mode = getIonMode(this);\n const disabled = this.disabled;\n return (h(Host, { class: {\n [mode]: true,\n 'infinite-scroll-loading': this.isLoading,\n 'infinite-scroll-enabled': !disabled\n } }));\n }\n get el() { return getElement(this); }\n static get watchers() { return {\n \"threshold\": [\"thresholdChanged\"],\n \"disabled\": [\"disabledChanged\"]\n }; }\n};\nInfiniteScroll.style = infiniteScrollCss;\n\nconst infiniteScrollContentIosCss = \"ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{margin-left:32px;margin-right:32px;margin-top:4px;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.infinite-loading-text{margin-left:unset;margin-right:unset;-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px}}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}\";\n\nconst infiniteScrollContentMdCss = \"ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{margin-left:32px;margin-right:32px;margin-top:4px;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.infinite-loading-text{margin-left:unset;margin-right:unset;-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px}}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}\";\n\nconst InfiniteScrollContent = class {\n constructor(hostRef) {\n registerInstance(this, hostRef);\n }\n componentDidLoad() {\n if (this.loadingSpinner === undefined) {\n const mode = getIonMode(this);\n this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));\n }\n }\n render() {\n const mode = getIonMode(this);\n return (h(Host, { class: {\n [mode]: true,\n // Used internally for styling\n [`infinite-scroll-content-${mode}`]: true\n } }, h(\"div\", { class: \"infinite-loading\" }, this.loadingSpinner && (h(\"div\", { class: \"infinite-loading-spinner\" }, h(\"ion-spinner\", { name: this.loadingSpinner }))), this.loadingText && (h(\"div\", { class: \"infinite-loading-text\", innerHTML: sanitizeDOMString(this.loadingText) })))));\n }\n};\nInfiniteScrollContent.style = {\n ios: infiniteScrollContentIosCss,\n md: infiniteScrollContentMdCss\n};\n\nexport { InfiniteScroll as ion_infinite_scroll, InfiniteScrollContent as ion_infinite_scroll_content };\n"],"sourceRoot":"webpack:///"} |