feat(a11y): integrasi variabel teks tombol whatsapp dan web speech synthesizer audio reader
This commit is contained in:
Mas Budi Kusuma
+79
-4
@@ -11,6 +11,9 @@ $wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp );
|
||||
if ( substr( $wa_clean, 0, 1 ) === '0' ) {
|
||||
$wa_clean = '62' . substr( $wa_clean, 1 );
|
||||
}
|
||||
|
||||
$wa_btn_label = get_option( 'edukarsa_wa_btn_text', 'Tanya PMB' );
|
||||
$wa_def_msg = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.' );
|
||||
?>
|
||||
|
||||
<!-- MAIN FOOTER -->
|
||||
@@ -136,7 +139,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- WIDGET AKSESIBILITAS DISABILITAS NATIVE -->
|
||||
<!-- WIDGET AKSESIBILITAS DISABILITAS & PEMBACA SUARA (WCAG TOOLBAR) -->
|
||||
<?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">
|
||||
@@ -149,6 +152,15 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
|
||||
<button type="button" class="a11y-close-btn" id="a11y-close">×</button>
|
||||
</div>
|
||||
<div class="a11y-panel-body">
|
||||
<!-- Fitur Pembaca Suara -->
|
||||
<div class="a11y-group">
|
||||
<span class="a11y-label">Pembaca Suara (Audio)</span>
|
||||
<div class="a11y-btn-grid">
|
||||
<button type="button" class="a11y-btn" id="a11y-speak-play">🔊 Baca</button>
|
||||
<button type="button" class="a11y-btn" id="a11y-speak-stop">⏹ Berhenti</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="a11y-group">
|
||||
<span class="a11y-label">Ukuran Teks</span>
|
||||
<div class="a11y-btn-grid">
|
||||
@@ -178,11 +190,11 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- FLOATING WHATSAPP -->
|
||||
<!-- FLOATING WHATSAPP (LABEL & PESAN DINAMIS) -->
|
||||
<?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">
|
||||
<a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=<?php echo rawurlencode( $wa_def_msg ); ?>" target="_blank" rel="noopener" class="edukarsa-wa-float" title="<?php echo esc_attr( $wa_btn_label ); ?>">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.53 1.777.82 2.796.82h.005c3.18 0 5.767-2.586 5.768-5.766 0-3.18-2.587-5.806-5.773-5.806zm3.376 8.214c-.149.42-.767.781-1.072.829-.304.048-.687.069-2.203-.559-1.933-.801-3.178-2.775-3.275-2.905-.095-.129-.778-1.036-.778-1.975 0-.94.492-1.401.667-1.593.175-.192.383-.24.512-.24.129 0 .258.006.371.012.12.006.279-.045.436.334.164.397.558 1.365.607 1.465.049.099.082.217.017.348-.065.131-.098.212-.195.328-.098.115-.205.258-.293.346-.098.098-.201.205-.087.401.115.196.512.846 1.099 1.368.756.673 1.393.882 1.59.98.196.098.312.082.426-.049.115-.131.492-.573.623-.77.131-.196.262-.164.442-.098.18.065 1.147.541 1.344.639.196.098.328.147.377.229.049.082.049.475-.1.895z"/></svg>
|
||||
<span>Tanya PMB</span>
|
||||
<span><?php echo esc_html( $wa_btn_label ); ?></span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -302,7 +314,70 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
|
||||
localStorage.removeItem('edukarsa_a11y_grayscale');
|
||||
localStorage.removeItem('edukarsa_a11y_links');
|
||||
applyA11y();
|
||||
if ('speechSynthesis' in window) {
|
||||
window.speechSynthesis.cancel();
|
||||
const pBtn = document.getElementById("a11y-speak-play");
|
||||
if (pBtn) { pBtn.classList.remove('speaking'); pBtn.innerText = "🔊 Baca"; }
|
||||
}
|
||||
});
|
||||
|
||||
// 4. Fitur Suara Text-to-Speech (Web Speech API Native)
|
||||
const speakPlayBtn = document.getElementById("a11y-speak-play");
|
||||
const speakStopBtn = document.getElementById("a11y-speak-stop");
|
||||
|
||||
if ('speechSynthesis' in window && speakPlayBtn) {
|
||||
const synth = window.speechSynthesis;
|
||||
|
||||
speakPlayBtn.addEventListener("click", function() {
|
||||
if (synth.speaking) {
|
||||
synth.cancel();
|
||||
}
|
||||
|
||||
// Ambil konten teks utama artikel atau bodi halaman
|
||||
const contentEl = document.querySelector("article .entry-content") || document.getElementById("primary") || document.body;
|
||||
const textToRead = contentEl.innerText.replace(/\s+/g, ' ').trim();
|
||||
if (!textToRead) return;
|
||||
|
||||
const utterance = new SpeechSynthesisUtterance(textToRead);
|
||||
|
||||
// Deteksi bahasa yang sedang aktif
|
||||
const match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
|
||||
const activeLang = match ? match[1].toLowerCase() : 'id';
|
||||
|
||||
if (activeLang === 'en') {
|
||||
utterance.lang = 'en-US';
|
||||
} else if (activeLang === 'ar') {
|
||||
utterance.lang = 'ar-SA';
|
||||
} else {
|
||||
utterance.lang = 'id-ID';
|
||||
}
|
||||
|
||||
utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas
|
||||
|
||||
utterance.onstart = function() {
|
||||
speakPlayBtn.classList.add('speaking');
|
||||
speakPlayBtn.innerText = "🔊 Membaca...";
|
||||
};
|
||||
|
||||
utterance.onend = utterance.onerror = function() {
|
||||
speakPlayBtn.classList.remove('speaking');
|
||||
speakPlayBtn.innerText = "🔊 Baca";
|
||||
};
|
||||
|
||||
synth.speak(utterance);
|
||||
});
|
||||
|
||||
speakStopBtn?.addEventListener("click", function() {
|
||||
if (synth.speaking) {
|
||||
synth.cancel();
|
||||
speakPlayBtn.classList.remove('speaking');
|
||||
speakPlayBtn.innerText = "🔊 Baca";
|
||||
}
|
||||
});
|
||||
} else if (speakPlayBtn) {
|
||||
speakPlayBtn.style.display = 'none';
|
||||
if (speakStopBtn) speakStopBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
+26
-8
@@ -61,6 +61,7 @@ function edukarsa_register_settings() {
|
||||
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
|
||||
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
|
||||
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
|
||||
'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg',
|
||||
'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x',
|
||||
'edukarsa_footer_copyright', 'edukarsa_custom_css'
|
||||
);
|
||||
@@ -192,10 +193,10 @@ function edukarsa_settings_page_html() {
|
||||
<div class="switch-row" style="background: #f0fdf4; border-color: #bbf7d0;">
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label" style="color: #166534;">
|
||||
<span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar)</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Menampilkan tombol melayang di pojok kiri bawah untuk pengunjung berkebutuhan khusus (ukuran huruf, kontras, monokrom, garis tautan).</span></span>
|
||||
<span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar & Suara)</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Menampilkan toolbar ramah disabilitas (pembaca suara/audio, kontras, monokrom, ukuran huruf, sorot tautan).</span></span>
|
||||
</div>
|
||||
<span style="font-size: 11px; color: #15803d;">Toolbar ramah disabilitas yang dapat dioperasikan langsung oleh pengunjung situs.</span>
|
||||
<span style="font-size: 11px; color: #15803d;">Dilengkapi Web Speech Synthesizer bawaan untuk membacakan artikel bagi tunanetra.</span>
|
||||
</div>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_accessibility" value="1" <?php checked(1, get_option('edukarsa_tampil_accessibility', 1)); ?>>
|
||||
@@ -348,12 +349,11 @@ function edukarsa_settings_page_html() {
|
||||
<label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>><span class="slider-round"></span></label>
|
||||
</div>
|
||||
|
||||
<!-- Toggle FAQ (Sembunyikan/Aktifkan tanpa menghapus CPT) -->
|
||||
<div class="switch-row">
|
||||
<div class="switch-label-wrap">
|
||||
<div class="switch-label">
|
||||
<span>Tampilkan Seksi FAQ</span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Jika dimatikan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman.</span></span>
|
||||
<span class="tooltip-hint">?<span class="tooltip-text">Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman di database.</span></span>
|
||||
</div>
|
||||
<a href="<?php echo admin_url('edit.php?post_type=faq'); ?>" class="cpt-shortcut-link">Kelola Data FAQ ↗</a>
|
||||
</div>
|
||||
@@ -381,7 +381,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panel Pengaturan Label FAQ -->
|
||||
<div id="faq-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
|
||||
<h4>Label Tampilan Seksi FAQ (Tanya Jawab)</h4>
|
||||
<div class="form-grid-2">
|
||||
@@ -394,10 +393,29 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. Footer & Kontak -->
|
||||
<!-- 6. Footer, Kontak & Floating WhatsApp -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header"><h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2></div>
|
||||
<div class="edukarsa-card-header"><h2>📞 6. Footer, Kontak & Tombol WhatsApp</h2></div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<!-- Opsi Tombol WhatsApp Melayang -->
|
||||
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px;">
|
||||
<h4 style="margin: 0 0 12px; font-size: 13px; color: #166534; display: flex; align-items: center; gap: 6px;">
|
||||
💬 Kustomisasi Tombol WhatsApp Melayang (Floating Button)
|
||||
</h4>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group" style="margin-bottom: 0;">
|
||||
<label>Label / Tulisan Tombol</label>
|
||||
<input type="text" name="edukarsa_wa_btn_text" value="<?php echo esc_attr(get_option('edukarsa_wa_btn_text', 'Tanya PMB')); ?>" placeholder="cth: Hubungi Kami / Tanya PMB / Konsultasi">
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom: 0;">
|
||||
<label>Template Pesan Awal Otomatis</label>
|
||||
<input type="text" name="edukarsa_wa_default_msg" value="<?php echo esc_attr(get_option('edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.')); ?>" placeholder="cth: Halo Admin, saya ingin menanyakan...">
|
||||
</div>
|
||||
</div>
|
||||
<p class="description" style="margin-top: 8px; font-size: 12px; color: #15803d;">Nomor WhatsApp otomatis diambil dari kolom Nomor Telepon di bawah.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
|
||||
|
||||
@@ -437,3 +437,16 @@ body.a11y-high-contrast { filter: contrast(160%) !important; }
|
||||
body.a11y-grayscale { filter: grayscale(100%) !important; }
|
||||
body.a11y-high-contrast.a11y-grayscale { filter: grayscale(100%) contrast(160%) !important; }
|
||||
body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }
|
||||
|
||||
/* STATE BUTTON AKSESIBILITAS SUARA AKTIF */
|
||||
.a11y-btn.speaking {
|
||||
background: #10b981 !important;
|
||||
border-color: #059669 !important;
|
||||
color: #ffffff !important;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.04); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user