Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 1 | import {getOptions, isOptionEnabled} from '../../common/optionsUtils.js'; |
| 2 | |
| 3 | const kInteropLoadMoreClasses = { |
Adrià Vilanova Martínez | 8885497 | 2022-08-28 11:57:12 +0200 | [diff] [blame] | 4 | // New (interop) UI without nested replies |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 5 | 'scTailwindThreadMorebuttonload-all': 'threadall', |
| 6 | 'scTailwindThreadMorebuttonload-more': 'thread', |
Adrià Vilanova Martínez | 8885497 | 2022-08-28 11:57:12 +0200 | [diff] [blame] | 7 | |
| 8 | // New (interop) UI with nested replies |
| 9 | 'scTailwindThreadMessagegapload-all': 'threadall', |
| 10 | 'scTailwindThreadMessagegapload-more': 'thread', |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 11 | }; |
| 12 | |
| 13 | export default class InfiniteScroll { |
| 14 | constructor() { |
| 15 | this.intersectionObserver = null; |
| 16 | } |
| 17 | |
| 18 | setUpIntersectionObserver(node, isScrollableContent) { |
| 19 | if (this.intersectionObserver === null) { |
| 20 | var scrollableContent = isScrollableContent ? |
| 21 | node : |
| 22 | node.querySelector('.scrollable-content'); |
| 23 | if (scrollableContent !== null) { |
| 24 | let intersectionOptions = { |
| 25 | root: scrollableContent, |
| 26 | rootMargin: '0px', |
| 27 | threshold: 1.0, |
| 28 | }; |
| 29 | this.intersectionObserver = new IntersectionObserver( |
| 30 | this.intersectionCallback, intersectionOptions); |
| 31 | } |
| 32 | } |
| 33 | } |
| 34 | |
| 35 | intersectionCallback(entries, observer) { |
| 36 | entries.forEach(entry => { |
| 37 | if (entry.isIntersecting) { |
| 38 | console.debug('[infinitescroll] Clicking button: ', entry.target); |
| 39 | entry.target.click(); |
| 40 | } |
| 41 | }); |
| 42 | } |
| 43 | |
| 44 | observeLoadMoreBar(bar) { |
| 45 | if (this.intersectionObserver === null) { |
| 46 | console.warn( |
| 47 | '[infinitescroll] ' + |
| 48 | 'The intersectionObserver is not ready yet.'); |
| 49 | return; |
| 50 | } |
| 51 | |
| 52 | getOptions(['thread', 'threadall']).then(threadOptions => { |
| 53 | if (threadOptions.thread) |
| 54 | this.intersectionObserver.observe( |
| 55 | bar.querySelector('.load-more-button')); |
| 56 | if (threadOptions.threadall) |
| 57 | this.intersectionObserver.observe( |
| 58 | bar.querySelector('.load-all-button')); |
| 59 | }); |
| 60 | } |
| 61 | |
| 62 | observeLoadMoreInteropBtn(btn) { |
| 63 | if (this.intersectionObserver === null) { |
| 64 | console.warn( |
| 65 | '[infinitescroll] ' + |
| 66 | 'The intersectionObserver is not ready yet.'); |
| 67 | return; |
| 68 | } |
| 69 | |
| 70 | let parentClasses = btn.parentNode?.classList; |
| 71 | let feature = null; |
| 72 | for (const [c, f] of Object.entries(kInteropLoadMoreClasses)) { |
| 73 | if (parentClasses?.contains?.(c)) { |
| 74 | feature = f; |
| 75 | break; |
| 76 | } |
| 77 | } |
| 78 | if (feature === null) return; |
| 79 | isOptionEnabled(feature).then(isEnabled => { |
| 80 | if (isEnabled) this.intersectionObserver.observe(btn); |
| 81 | }); |
| 82 | } |
| 83 | }; |