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