نمط DiscoTOC معطل إذا لم يكن هناك رد على الهاتف المحمول

تجربة المستخدم
, ,
3

بمهاراتي البرمجية الأساسية وبعض محادثات ChatGPT، أعتقد أنني جعلتها تعمل.

أنشأت مكونًا مخصصًا ووضعت هذا في علامة التبويب CSS:

/* 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;
    }
}

وهذا في علامة التبويب 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)