MediaWiki:Common.js: Perbedaan antara revisi

/* =========================================================
   MALIKI ENCYCLOPEDIA
   HEADER NAVIGATION — PHASE 1B.1
   Vector 2022
   Navigation positioned after Vector header
   ========================================================= */

(function () {

    'use strict';


    function createMalikiNavigation() {

        /* Jangan membuat menu dua kali */
        if (document.getElementById('maliki-top-navigation')) {
            return;
        }


        /* =====================================================
           CARI HEADER VECTOR 2022
           ===================================================== */

        var headerContainer =
            document.querySelector('.vector-header-container');

        if (!headerContainer) {
            return;
        }


        /* =====================================================
           BUAT NAVIGASI
           ===================================================== */

        var navigation =
            document.createElement('nav');

        navigation.id =
            'maliki-top-navigation';

        navigation.setAttribute(
            'aria-label',
            'Navigasi utama Maliki Encyclopedia'
        );


        navigation.innerHTML = `

            <div class="maliki-nav-inner">


                <!-- =========================
                     ENSIKLOPEDIA
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Ensiklopedia

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Tokoh">
                            Tokoh
                        </a>

                        <a href="/index.php/Konsep">
                            Konsep
                        </a>

                        <a href="/index.php/Karya_Intelektual">
                            Karya Intelektual
                        </a>

                        <a href="/index.php/Lembaga">
                            Lembaga
                        </a>

                        <a href="/index.php/Peristiwa">
                            Peristiwa
                        </a>

                        <a href="/index.php/Tempat">
                            Tempat
                        </a>

                    </div>

                </div>


                <!-- =========================
                     JELAJAH
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Jelajah

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Maliki:Jelajah_Pengetahuan">
                            Jelajah Pengetahuan
                        </a>

                        <a href="/index.php/Spesial:Halaman_Baru">
                            Pengetahuan Terbaru
                        </a>

                        <a href="/index.php/Kategori:Unggulan">
                            Artikel Unggulan
                        </a>

                    </div>

                </div>


                <!-- =========================
                     BIDANG ILMU
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Bidang Ilmu

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Kategori:Studi_Islam">
                            Studi Islam
                        </a>

                        <a href="/index.php/Kategori:Pendidikan">
                            Pendidikan
                        </a>

                        <a href="/index.php/Kategori:Sains">
                            Sains
                        </a>

                        <a href="/index.php/Kategori:Kesehatan">
                            Kesehatan
                        </a>

                        <a href="/index.php/Kategori:Humaniora">
                            Humaniora
                        </a>

                        <a href="/index.php/Kategori:Sosial">
                            Sosial
                        </a>

                    </div>

                </div>


                <!-- =========================
                     ISLAM–SAINS
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Islam–Sains

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Kategori:Nilai_dan_Etika">
                            Nilai &amp; Etika
                        </a>

                        <a href="/index.php/Kategori:Perspektif">
                            Perspektif
                        </a>

                        <a href="/index.php/Kategori:Dialog_Keilmuan">
                            Dialog Keilmuan
                        </a>

                        <a href="/index.php/Kategori:Integrasi_Substantif">
                            Integrasi Substantif
                        </a>

                    </div>

                </div>


                <!-- =========================
                     KONTRIBUSI
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Kontribusi

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Maliki:Pengajuan_Artikel">
                            Mulai Membuat Artikel
                        </a>

                        <a href="/index.php/Maliki:Panduan_Kontributor">
                            Panduan Kontributor
                        </a>

                    </div>

                </div>


                <!-- =========================
                     MEDIA
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Media

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Kategori:Gambar">
                            Gambar
                        </a>

                        <a href="/index.php/Kategori:Video">
                            Video
                        </a>

                        <a href="/index.php/Maliki:Sumber_Pengetahuan">
                            Sumber Pengetahuan
                        </a>

                    </div>

                </div>


                <!-- =========================
                     TENTANG MALIKI
                     ========================= -->

                <div class="maliki-nav-item has-dropdown">

                    <button
                        type="button"
                        class="maliki-nav-button"
                        aria-expanded="false">

                        Tentang Maliki

                        <span class="maliki-nav-arrow">
                            ⌄
                        </span>

                    </button>


                    <div class="maliki-nav-dropdown">

                        <a href="/index.php/Maliki:Tentang">
                            Tentang Maliki Encyclopedia
                        </a>

                        <a href="/index.php/Maliki:UIN_Malang">
                            UIN Maulana Malik Ibrahim Malang
                        </a>

                        <a href="/index.php/Maliki:Tim_Editorial">
                            Tim Editorial
                        </a>

                    </div>

                </div>


            </div>

        `;


        /* =====================================================
           LETAKKAN NAVIGASI
           SETELAH VECTOR HEADER
           ===================================================== */

        headerContainer.parentNode.insertBefore(
            navigation,
            headerContainer.nextSibling
        );


        /* =====================================================
           DROPDOWN INTERACTION
           ===================================================== */

        var dropdownButtons =
            navigation.querySelectorAll(
                '.maliki-nav-button'
            );


        dropdownButtons.forEach(
            function (button) {

                button.addEventListener(
                    'click',
                    function (event) {

                        event.stopPropagation();


                        var parent =
                            button.closest(
                                '.maliki-nav-item'
                            );


                        var isOpen =
                            parent.classList.contains(
                                'is-open'
                            );


                        /*
                         * Tutup semua menu
                         */

                        navigation
                            .querySelectorAll(
                                '.maliki-nav-item'
                            )
                            .forEach(
                                function (item) {

                                    item.classList.remove(
                                        'is-open'
                                    );


                                    var itemButton =
                                        item.querySelector(
                                            '.maliki-nav-button'
                                        );


                                    if (itemButton) {

                                        itemButton.setAttribute(
                                            'aria-expanded',
                                            'false'
                                        );

                                    }

                                }
                            );


                        /*
                         * Buka menu yang dipilih
                         */

                        if (!isOpen) {

                            parent.classList.add(
                                'is-open'
                            );


                            button.setAttribute(
                                'aria-expanded',
                                'true'
                            );

                        }

                    }
                );

            }
        );


        /* =====================================================
           KLIK DI LUAR MENU
           ===================================================== */

        document.addEventListener(
            'click',
            function () {

                navigation
                    .querySelectorAll(
                        '.maliki-nav-item'
                    )
                    .forEach(
                        function (item) {

                            item.classList.remove(
                                'is-open'
                            );


                            var button =
                                item.querySelector(
                                    '.maliki-nav-button'
                                );


                            if (button) {

                                button.setAttribute(
                                    'aria-expanded',
                                    'false'
                                );

                            }

                        }
                    );

            }
        );


        /* =====================================================
           RESPONSIVE
           ===================================================== */

        window.addEventListener(
            'resize',
            function () {

                if (window.innerWidth > 800) {
                    return;
                }


                navigation
                    .querySelectorAll(
                        '.maliki-nav-item'
                    )
                    .forEach(
                        function (item) {

                            item.classList.remove(
                                'is-open'
                            );

                        }
                    );

            }
        );

    }


    /* =========================================================
       JALANKAN SETELAH HALAMAN SIAP
       ========================================================= */

    if (
        document.readyState ===
        'loading'
    ) {

        document.addEventListener(
            'DOMContentLoaded',
            createMalikiNavigation
        );

    } else {

        createMalikiNavigation();

    }

})();