DiscoTOC-Stil ist kaputt, wenn auf dem Handy keine Antwort kommt

UX
, ,
3

Mit meinen grundlegenden Programmierkenntnissen und etwas ChatGPT-Gespräch habe ich es meiner Meinung nach zum Laufen gebracht.

Ich habe eine benutzerdefinierte Komponente erstellt und dies in den CSS-Tab eingefügt:

/* CSS for Discourse component - Mobile only */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

und dies in den JS-Tab

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =\u003e {
  api.onPageChange(() =\u003e {
    const observer = new MutationObserver(() =\u003e {
      const wrapper = document.getElementById("topic-progress-wrapper");
      const tocButton = wrapper?.querySelector(".d-toc-mini button");

      if (wrapper) {
        if (tocButton) {
          wrapper.classList.add("sticky-bottom");
        } else {
          wrapper.classList.remove("sticky-bottom");
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
});

Das scheint auch ohne Antwort gut zu funktionieren.
Nochmal, ich bin kein Experte, ich bin nur ein guter „Frager“ und nach ein paar „Hin und Her“ mit ChatGPT mit den richtigen Fragen und Herausforderungen scheint es zu funktionieren.

Wenn jemand, der ein JavaScript-Experte ist, es verbessern möchte, bitte teilt es mit.

1 „Gefällt mir“