masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambahkan toggle kontrol visibilitas FAQ dan modul aksesibilitas disabilitas WCAG

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 23:50:05 +07:00
parent 9dd84e2c23
commit 3b8d105623
3 changed files with 223 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
footer.php
+137
View File
@@ -136,6 +136,48 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
</div>
</footer>
<!-- WIDGET AKSESIBILITAS DISABILITAS NATIVE -->
<?php if ( get_option( 'edukarsa_tampil_accessibility', 1 ) == 1 ) : ?>
<div class="edukarsa-a11y-wrapper" id="a11y-wrapper">
<button type="button" class="edukarsa-a11y-trigger" id="a11y-trigger" aria-label="Buka Menu Aksesibilitas" title="Aksesibilitas Disabilitas">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></svg>
</button>
<div class="edukarsa-a11y-panel" id="a11y-panel">
<div class="a11y-panel-header">
<h4>♿ Aksesibilitas</h4>
<button type="button" class="a11y-close-btn" id="a11y-close">&times;</button>
</div>
<div class="a11y-panel-body">
<div class="a11y-group">
<span class="a11y-label">Ukuran Teks</span>
<div class="a11y-btn-grid">
<button type="button" class="a11y-btn" id="a11y-font-dec">A-</button>
<button type="button" class="a11y-btn" id="a11y-font-reset">Normal</button>
<button type="button" class="a11y-btn" id="a11y-font-inc">A+</button>
</div>
</div>
<div class="a11y-group">
<span class="a11y-label">Tampilan Visual</span>
<div class="a11y-btn-grid">
<button type="button" class="a11y-btn" id="a11y-contrast">Kontras</button>
<button type="button" class="a11y-btn" id="a11y-grayscale">Monokrom</button>
</div>
</div>
<div class="a11y-group">
<span class="a11y-label">Navigasi</span>
<div class="a11y-btn-grid">
<button type="button" class="a11y-btn" id="a11y-links">Garis Tautan</button>
<button type="button" class="a11y-btn a11y-btn-danger" id="a11y-reset-all">Reset</button>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
<!-- FLOATING WHATSAPP -->
<?php if ( ! empty( $wa_clean ) ) : ?>
<a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=Halo%20Admin%20EduKarsa,%20saya%20ingin%20bertanya%20mengenai%20pendaftaran." target="_blank" rel="noopener" class="edukarsa-wa-float" title="Chat WhatsApp Panitia PMB">
@@ -149,6 +191,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
<script>
document.addEventListener("DOMContentLoaded", function() {
// 1. Mobile Menu Drawer
const toggleBtn = document.getElementById("mobile-menu-toggle");
const navMenu = document.getElementById("site-navigation");
if (toggleBtn && navMenu) {
@@ -158,6 +201,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
});
}
// 2. Back to Top
const bttBtn = document.getElementById("back-to-top");
if (bttBtn) {
window.addEventListener("scroll", function() {
@@ -167,6 +211,99 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
window.scrollTo({ top: 0, behavior: "smooth" });
});
}
// 3. Aksesibilitas Disabilitas Logic (Persistent via localStorage)
const a11yTrigger = document.getElementById("a11y-trigger");
const a11yPanel = document.getElementById("a11y-panel");
const a11yClose = document.getElementById("a11y-close");
if (a11yTrigger && a11yPanel) {
a11yTrigger.addEventListener("click", function() {
a11yPanel.classList.toggle("active");
});
if (a11yClose) {
a11yClose.addEventListener("click", function() {
a11yPanel.classList.remove("active");
});
}
const fontLevels = ['', 'a11y-font-lg', 'a11y-font-xl'];
let currentFontIdx = parseInt(localStorage.getItem('edukarsa_a11y_font') || '0', 10);
function applyA11y() {
fontLevels.forEach(function(c) {
if (c) document.body.classList.remove(c);
});
if (fontLevels[currentFontIdx]) {
document.body.classList.add(fontLevels[currentFontIdx]);
}
if (localStorage.getItem('edukarsa_a11y_contrast') === '1') {
document.body.classList.add('a11y-high-contrast');
} else {
document.body.classList.remove('a11y-high-contrast');
}
if (localStorage.getItem('edukarsa_a11y_grayscale') === '1') {
document.body.classList.add('a11y-grayscale');
} else {
document.body.classList.remove('a11y-grayscale');
}
if (localStorage.getItem('edukarsa_a11y_links') === '1') {
document.body.classList.add('a11y-underline-links');
} else {
document.body.classList.remove('a11y-underline-links');
}
}
applyA11y();
document.getElementById("a11y-font-inc")?.addEventListener("click", function() {
if (currentFontIdx < fontLevels.length - 1) currentFontIdx++;
localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
applyA11y();
});
document.getElementById("a11y-font-dec")?.addEventListener("click", function() {
if (currentFontIdx > 0) currentFontIdx--;
localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
applyA11y();
});
document.getElementById("a11y-font-reset")?.addEventListener("click", function() {
currentFontIdx = 0;
localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
applyA11y();
});
document.getElementById("a11y-contrast")?.addEventListener("click", function() {
const active = localStorage.getItem('edukarsa_a11y_contrast') === '1';
localStorage.setItem('edukarsa_a11y_contrast', active ? '0' : '1');
applyA11y();
});
document.getElementById("a11y-grayscale")?.addEventListener("click", function() {
const active = localStorage.getItem('edukarsa_a11y_grayscale') === '1';
localStorage.setItem('edukarsa_a11y_grayscale', active ? '0' : '1');
applyA11y();
});
document.getElementById("a11y-links")?.addEventListener("click", function() {
const active = localStorage.getItem('edukarsa_a11y_links') === '1';
localStorage.setItem('edukarsa_a11y_links', active ? '0' : '1');
applyA11y();
});
document.getElementById("a11y-reset-all")?.addEventListener("click", function() {
currentFontIdx = 0;
localStorage.removeItem('edukarsa_a11y_font');
localStorage.removeItem('edukarsa_a11y_contrast');
localStorage.removeItem('edukarsa_a11y_grayscale');
localStorage.removeItem('edukarsa_a11y_links');
applyA11y();
});
}
});
</script>