Lo stile DiscoTOC è rotto se non ci sono risposte su mobile

UX
, ,
3

Con le mie basi di programmazione e qualche chiacchierata con ChatGPT, credo di essere riuscito a farlo funzionare.

Ho creato un componente personalizzato e inserito questo nella scheda CSS:

/* CSS per il componente Discourse - Solo mobile */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

e questo nella scheda JS

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

export default apiInitializer((api) =
> {
  api.onPageChange(() =
> {
    const observer = new MutationObserver(() =
> {
      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,
    });
  });
});

Questo sembra funzionare bene anche senza una risposta.
Di nuovo, non sono un esperto, sono solo un bravo “richiedente” e dopo qualche “botta e risposta” con ChatGPT con le giuste domande e sfide, sembra funzionare.

Se qualcuno esperto di JavaScript volesse migliorarlo, è pregato di condividerlo.

1 Mi Piace