Implement Scroll to Bottom on Timeline V2 (modal branch)

src/features/scroll_to_bottom.js

@@ -3,89 +3,153 @@ import { translate } from '../utils/language_data.js';
 import { pageModifications } from '../utils/mutations.js';
 import { buildStyle } from '../utils/interface.js';
 
-const scrollToBottomButtonId = 'xkit-scroll-to-bottom-button';
-$(`[id="${scrollToBottomButtonId}"]`).remove();
+const buttonClass = 'xkit-scroll-to-bottom-button';
+$(`.${buttonClass}`).remove();
 const activeClass = 'xkit-scroll-to-bottom-active';
 
 const loaderSelector = `
-${keyToCss('timeline', 'blogRows')} > :last-child,
-${keyToCss('notifications')} + ${keyToCss('loader')}
+${keyToCss('timeline', 'blogRows')} > ${keyToCss('scrollContainer')} + div,
+${keyToCss('notifications')} + div
 `;
 const knightRiderLoaderSelector = `:is(${loaderSelector}) > ${keyToCss('knightRiderLoader')}`;
 
+const modalScrollContainerSelector = `${keyToCss('drawerContent')} > ${keyToCss('scrollContainer')}`;
+
 let scrollToBottomButton;
-let active = false;
+let modalScrollToBottomButton;
+let activeElement = false;
 
 const styleElement = buildStyle(`
+.${buttonClass} {
+  margin-top: 0.5ch;
+  transform: rotate(180deg);
+}
+.${buttonClass}.modal {
+  margin-top: 1ch;
+}
+
+#base-container:has(> #glass-container ${modalScrollContainerSelector}) .${buttonClass}.normal {
+  opacity: 0;
+  pointer-events: none;
+}
+
 .${activeClass} svg use {
   --icon-color-primary: rgb(var(--yellow));
 }
+.${activeClass}.modal {
+  background-color: rgb(var(--black)) !important;
+}
 `);
 
+const getScrollElement = () =>
+  document.querySelector(modalScrollContainerSelector) ||
+  document.documentElement;
+
+const getObserveElement = () =>
+  document.querySelector(modalScrollContainerSelector)?.firstElementChild ||
+  document.documentElement;
+
+let timeoutID;
+
+const onLoadersAdded = loaders => {
+  if (activeElement && loaders.some(loader => activeElement.contains(loader))) {
+    clearTimeout(timeoutID);
+  }
+};
+
 const scrollToBottom = () => {
-  window.scrollTo({ top: document.documentElement.scrollHeight });
-  const loaders = [...document.querySelectorAll(knightRiderLoaderSelector)];
+  activeElement.scrollTo({ top: activeElement.scrollHeight });
+  clearTimeout(timeoutID);
+
+  const buttonConnected = scrollToBottomButton?.isConnected || modalScrollToBottomButton?.isConnected;
 
-  if (loaders.length === 0) {
+  if (!buttonConnected || activeElement !== getScrollElement()) {
     stopScrolling();
+    return;
   }
+
+  timeoutID = setTimeout(() => {
+    if (!activeElement.querySelector(knightRiderLoaderSelector)) {
+      stopScrolling();
+    }
+  }, 150);
 };
 const observer = new ResizeObserver(scrollToBottom);
 
 const startScrolling = () => {
-  observer.observe(document.documentElement);
-  active = true;
-  scrollToBottomButton.classList.add(activeClass);
+  scrollToBottomButton?.classList.add(activeClass);
+  modalScrollToBottomButton?.classList.add(activeClass);
+
+  activeElement = getScrollElement();
+  observer.observe(getObserveElement());
   scrollToBottom();
 };
 
 const stopScrolling = () => {
   observer.disconnect();
-  active = false;
+  activeElement = false;
+
+  clearTimeout(timeoutID);
+
   scrollToBottomButton?.classList.remove(activeClass);
+  modalScrollToBottomButton?.classList.remove(activeClass);
 };
 
-const onClick = () => active ? stopScrolling() : startScrolling();
+const onClick = () => activeElement ? stopScrolling() : startScrolling();
 const onKeyDown = ({ key }) => key === '.' && stopScrolling();
 
-const checkForButtonRemoved = () => {
-  const buttonWasRemoved = document.documentElement.contains(scrollToBottomButton) === false;
-  if (buttonWasRemoved) {
-    if (active) stopScrolling();
-    pageModifications.unregister(checkForButtonRemoved);
-  }
+const cloneButton = (target, mode) => {
+  const clonedButton = target.cloneNode(true);
+  keyToClasses('hidden').forEach(className => clonedButton.classList.remove(className));
+  clonedButton.removeAttribute('aria-label');
+  clonedButton.addEventListener('click', onClick);
+  clonedButton.classList.add(buttonClass, mode);
+
+  clonedButton.classList[activeElement ? 'add' : 'remove'](activeClass);
+  return clonedButton;
 };
 
 const addButtonToPage = async function ([scrollToTopButton]) {
-  if (!scrollToBottomButton) {
-    const hiddenClasses = keyToClasses('hidden');
-
-    scrollToBottomButton = scrollToTopButton.cloneNode(true);
-    hiddenClasses.forEach(className => scrollToBottomButton.classList.remove(className));
-    scrollToBottomButton.removeAttribute('aria-label');
-    scrollToBottomButton.style.marginTop = '0.5ch';
-    scrollToBottomButton.style.transform = 'rotate(180deg)';
-    scrollToBottomButton.addEventListener('click', onClick);
-    scrollToBottomButton.id = scrollToBottomButtonId;
-
-    scrollToBottomButton.classList[active ? 'add' : 'remove'](activeClass);
-  }
+  scrollToBottomButton ??= cloneButton(scrollToTopButton, 'normal');
 
   scrollToTopButton.after(scrollToBottomButton);
   scrollToTopButton.addEventListener('click', stopScrolling);
-  document.documentElement.addEventListener('keydown', onKeyDown);
-  pageModifications.register('*', checkForButtonRemoved);
+};
+
+const modalButtonColorObserver = new MutationObserver(([mutation]) => {
+  modalScrollToBottomButton.style = mutation.target.style.cssText;
+});
+
+const addModalButtonToPage = async function ([modalScrollToTopButton]) {
+  modalScrollToBottomButton ??= cloneButton(modalScrollToTopButton, 'modal');
+
+  modalScrollToTopButton.after(modalScrollToBottomButton);
+  modalScrollToTopButton.addEventListener('click', stopScrolling);
+
+  modalScrollToBottomButton.style = modalScrollToTopButton.style.cssText;
+  modalButtonColorObserver.observe(modalScrollToTopButton, { attributeFilter: ['style'] });
 };
 
 export const main = async function () {
   pageModifications.register(`button[aria-label="${translate('Scroll to top')}"]`, addButtonToPage);
+  pageModifications.register(`button[aria-label="${translate('Back to top')}"]`, addModalButtonToPage);
+  pageModifications.register(knightRiderLoaderSelector, onLoadersAdded);
+  document.documentElement.addEventListener('keydown', onKeyDown);
+
   document.documentElement.append(styleElement);
 };
 
 export const clean = async function () {
-  pageModifications.unregister(addButtonToPage);
-  pageModifications.unregister(checkForButtonRemoved);
   stopScrolling();
-  scrollToBottomButton?.remove();
+
+  pageModifications.unregister(addButtonToPage);
+  pageModifications.unregister(addModalButtonToPage);
+  pageModifications.unregister(onLoadersAdded);
+  document.documentElement.removeEventListener('keydown', onKeyDown);
+
   styleElement.remove();
+
+  scrollToBottomButton?.remove();
+  modalScrollToBottomButton?.remove();
+  modalButtonColorObserver.disconnect();
 };