MediaWiki:Common.js: Perbedaan antara revisi

(function () {
'use strict';
function createMalikiUtilityBar() {
    if (document.getElementById('maliki-utility-bar')) {
        return;
    }
    var headerContainer = document.querySelector('.vector-header-container');
    if (!headerContainer || !headerContainer.parentNode) {
        return;
    }
    var utility = document.createElement('div');
    utility.id = 'maliki-utility-bar';
    utility.innerHTML = `
        <div class="maliki-utility-inner">
            <div class="maliki-utility-left">
                <a href="https://uin-malang.ac.id/" target="_blank" rel="noopener">Akademik</a>
                <a href="https://uin-malang.ac.id/" target="_blank" rel="noopener">Admisi</a>
                <a href="https://uin-malang.ac.id/" target="_blank" rel="noopener">LMS</a>
                <a href="/index.php/Maliki:Pengajuan_Artikel">Kontributor</a>
            </div>
            <div class="maliki-utility-right">
                <span>Universitas Islam Negeri Maulana Malik Ibrahim Malang</span>
                <span class="maliki-utility-language">ID</span>
            </div>
        </div>
    `;
    headerContainer.parentNode.insertBefore(utility, headerContainer);
}
function createMalikiNavigation() {
    if (document.getElementById('maliki-top-navigation')) {
        return;
    }
    var headerContainer = document.querySelector('.vector-header-container');
    if (!headerContainer || !headerContainer.parentNode) {
        return;
    }
    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">
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
            <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>
    `;
    headerContainer.parentNode.insertBefore(navigation, headerContainer.nextSibling);
    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');
            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');
                }
            });
            if (!isOpen) {
                parent.classList.add('is-open');
                button.setAttribute('aria-expanded', 'true');
            }
        });
    });
    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');
            }
        });
    });
    window.addEventListener('resize', function () {
        if (window.innerWidth > 800) {
            return;
        }
        navigation.querySelectorAll('.maliki-nav-item').forEach(function (item) {
            item.classList.remove('is-open');
        });
    });
}
function initMalikiHeader() {
    createMalikiUtilityBar();
    createMalikiNavigation();
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initMalikiHeader);
} else {
    initMalikiHeader();
}
})();