MediaWiki:Common.js: Perbedaan antara revisi

/* =========================================================
   MALIKI ENCYCLOPEDIA
   HEADER NAVIGATION — PHASE 1A
   Vector 2022
   ========================================================= */

(function () {

    'use strict';

    function createMalikiNavigation() {

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

        /* Pastikan halaman sudah memiliki header Vector */
        var header = document.querySelector('.vector-header-container');

        if (!header) {
            return;
        }

        /* =====================================================
           CONTAINER 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 -->

                <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>

        `;


        /* =====================================================
           MASUKKAN NAVIGASI KE DALAM HEADER
           ===================================================== */

        header.appendChild(navigation);


        /* =====================================================
           INTERAKSI DROPDOWN
           ===================================================== */

        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 dropdown */

                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 dropdown 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'
                        );

                    }

                });

        });


        /* =====================================================
           MOBILE / LAYAR KECIL
           ===================================================== */

        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();

    }

})();