MediaWiki:Common.js
Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.
- Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
- Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
- Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5
/* =========================================================
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 & 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();
}
})();