סגנון DiscoTOC אינו עובד כראוי אם אין תגובה במובייל

חווית משתמש
, ,
3

עם כישורי הקידוד הבסיסיים שלי וקצת שיחות עם ChatGPT, אני מאמין שהצלחתי לגרום לזה לעבוד.

יצרתי רכיב מותאם אישית ושמתי את זה בלשונית ה-CSS:

/* CSS עבור רכיב Discourse - לנייד בלבד */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

ואת זה בלשונית ה-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,
        });
      });
  });

זה נראה שעובד מצוין גם בלי תגובה.
שוב, אני לא מומחה, אני פשוט “שואל” טוב ואחרי כמה “הלוך ושוב” עם ChatGPT עם השאלות והאתגרים הנכונים, זה נראה שעובד.

אם יש מישהו שהוא מומחה ב-JavaScript ורוצה לשפר את זה, אנא שתפו.

לייק 1