DiscoTOC-stijl is defect als er geen reactie is op mobiel

UX
, ,
3

Met mijn basis programmeervaardigheden en wat ChatGPT-praatjes heb ik het werkend gekregen, geloof ik.

Een aangepaste component gemaakt en dit in het CSS-tabblad geplaatst:

@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

en dit in het JS-tabblad

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,
    });
  });
});

Dit lijkt prima te werken, zelfs zonder een reactie.
Nogmaals, ik ben geen expert, ik ben gewoon een goede “vrager” en na een beetje “heen en weer” met ChatGPT met de juiste vragen en uitdagingen, lijkt het te werken.

Als iemand die een expert is in JavaScript en CSS het wil verbeteren, deel het alsjeblieft.

Dus, als je wilt:

  1. De tekst “Table of Contents” naast het icoon
  2. Uitgevouwen koppen
  3. Sticky knop zonder afhankelijk te zijn van reacties, is de volledige CSS dit:
/* breidt alle koppen uit in de zijbalk van de inhoudsopgave */
#d-toc li.d-toc-item > ul {
  max-height: 500em !important;
  overflow: visible !important;
  opacity: 1 !important;
}

@media screen and (max-width: 767px) {
    /* maakt de wrapper inclusief de knop van de inhoudsopgave, sticky aan de onderkant */
    #topic-progress-wrapper.sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* voegt "table of contents" toe aan de knop na het icoon */
    .d-toc-mini button::after {
        content: "Table of Contents";
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
    }
}

De JavaScript verandert niet.

1 like