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 | }; |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 12 | const kArtificialScrollingDelay = 3500; |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 13 | |
| 14 | export default class InfiniteScroll { |
| 15 | constructor() { |
| 16 | this.intersectionObserver = null; |
| 17 | } |
| 18 | |
| 19 | setUpIntersectionObserver(node, isScrollableContent) { |
| 20 | if (this.intersectionObserver === null) { |
| 21 | var scrollableContent = isScrollableContent ? |
| 22 | node : |
| 23 | node.querySelector('.scrollable-content'); |
| 24 | if (scrollableContent !== null) { |
| 25 | let intersectionOptions = { |
| 26 | root: scrollableContent, |
| 27 | rootMargin: '0px', |
| 28 | threshold: 1.0, |
| 29 | }; |
| 30 | this.intersectionObserver = new IntersectionObserver( |
| 31 | this.intersectionCallback, intersectionOptions); |
| 32 | } |
| 33 | } |
| 34 | } |
| 35 | |
| 36 | intersectionCallback(entries, observer) { |
| 37 | entries.forEach(entry => { |
| 38 | if (entry.isIntersecting) { |
| 39 | console.debug('[infinitescroll] Clicking button: ', entry.target); |
| 40 | entry.target.click(); |
| 41 | } |
| 42 | }); |
| 43 | } |
| 44 | |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 45 | isPotentiallyArtificialScroll() { |
| 46 | return window.location.href.includes('/message/'); |
| 47 | } |
| 48 | |
| 49 | observeWithPotentialDelay(node) { |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 50 | if (this.intersectionObserver === null) { |
| 51 | console.warn( |
| 52 | '[infinitescroll] ' + |
| 53 | 'The intersectionObserver is not ready yet.'); |
| 54 | return; |
| 55 | } |
| 56 | |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 57 | if (this.isPotentiallyArtificialScroll()) { |
| 58 | window.setTimeout( |
| 59 | () => {this.intersectionObserver.observe(node)}, |
| 60 | kArtificialScrollingDelay); |
| 61 | } else { |
| 62 | this.intersectionObserver.observe(node); |
| 63 | } |
| 64 | } |
| 65 | |
| 66 | observeLoadMoreBar(bar) { |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 67 | getOptions(['thread', 'threadall']).then(threadOptions => { |
| 68 | if (threadOptions.thread) |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 69 | this.observeWithPotentialDelay(bar.querySelector('.load-more-button')); |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 70 | if (threadOptions.threadall) |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 71 | this.observeWithPotentialDelay(bar.querySelector('.load-all-button')); |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 72 | }); |
| 73 | } |
| 74 | |
| 75 | observeLoadMoreInteropBtn(btn) { |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 76 | let parentClasses = btn.parentNode?.classList; |
| 77 | let feature = null; |
| 78 | for (const [c, f] of Object.entries(kInteropLoadMoreClasses)) { |
| 79 | if (parentClasses?.contains?.(c)) { |
| 80 | feature = f; |
| 81 | break; |
| 82 | } |
| 83 | } |
| 84 | if (feature === null) return; |
| 85 | isOptionEnabled(feature).then(isEnabled => { |
Adrià Vilanova Martínez | c800780 | 2022-10-01 19:42:19 +0200 | [diff] [blame] | 86 | if (isEnabled) this.observeWithPotentialDelay(btn); |
Adrià Vilanova Martínez | a7ae3db | 2022-01-28 11:57:27 +0100 | [diff] [blame] | 87 | }); |
| 88 | } |
| 89 | }; |