القدرة على إضافة قسم مخصص من الروابط إلى الشريط الجانبي

ميزة
,
14

هذا مثال آخر آمل أن يكون مفيدًا لشخص ما، بناءً على الأمثلة المذكورة أعلاه. لا يضيف هذا الرمز قسمًا جديدًا تمامًا، ولكنه يضيف روابط إضافية إلى أسفل لوحة “المزيد” في قسم “المجتمع” (ولكن قبل روابط الأسئلة الشائعة و"حول" في التذييل). وهو يدعم أيقونات FontAwesome (بافتراض إضافتها في إعدادات الموقع) والروابط الخارجية. وهو يتعامل مع الحالات الاستثنائية حيث يتم إغلاق الشريط الجانبي وإعادة فتحه، و/أو يتم طي قسم المجتمع وإعادة توسيعه. وهو يعمل على سطح المكتب والجوال.

أنا لست خبيرًا في JavaScript، لذا أعتذر عن أي رمز سيء أو غير أمثل. على موقعي، على الأقل، يبدو أنه يعمل كما هو مقصود.

فقط قم بإلقاء هذا الرمز في علامة التبويب “Header” لمكون سمة وقم بتخصيصه حسب الحاجة:

<script>
const links = [
    // قد تحتاج أيقونات FontAwesome إلى إضافتها في إعدادات الموقع إذا لم تظهر بشكل صحيح
    { title: "حسابي", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "دليل المستخدم", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "المستندات", src: "/docs", icon: "book-reader" },
    { title: "موقع خارجي", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // نحن في وضع العرض للجوال
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // نحن في وضع العرض لسطح المكتب
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // انتظر قليلاً لتحميل الشريط الجانبي
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addHeaderListener()
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }

    function addHeaderListener() {
        let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
        if (communityHeader) {
            communityHeader.addEventListener("click", function () {
                // انتظر قليلاً لتوسع القسم
                setTimeout(function() {
                    let communitySection = document.getElementById("sidebar-section-content-community")
                    if (communitySection) {
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }
    
    function addMoreListener() {
        let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
        if (buttonMore) {
            buttonMore.addEventListener("click", addCustomLinks)
        }
    }
    
    function addCustomLinks() {
        // انتظر قليلاً حتى يتم تحميل التنقل
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[0]
            let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
        
            if (parentEl && !linksAlreadyAdded) {
                links.filter(function (link) {
                    let linkDiv = document.createElement("li")
                    let linkTitleTrim = link.title.replace(/\s+/g, '')
                    linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
                    linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                            <span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
                            <span class="sidebar-section-link-content-text"> ${link.title} </span>
                        </a>
                      `
                    parentEl.append(linkDiv)
                    
                    let linkIcon = document.getElementById("link_" + linkTitleTrim)
                    if (linkIcon && link.icon) {
                        linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#${link.icon}"></use>
                            </svg>
                        `
                    }
                })
            }
        }, 100)
    }
})
</script>
4 إعجابات