Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
| Baris 139: |
Baris 139: |
| } | | } |
| }); | | }); |
| });
| |
|
| |
| /* 1. Navigasi Bab Melayang (Vertical Stack Edition) */
| |
| $(document).ready(function() {
| |
| if (mw.config.get('wgIsArticle') && $('#toc').length) {
| |
|
| |
| // CSS untuk posisi menumpuk secara vertikal
| |
| var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:20px; right:20px; width:45px; height:45px; background:#36c; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:9996; box-shadow:0 4px 12px rgba(0,0,0,0.2); cursor:pointer; font-size:20px; transition: all 0.3s ease;">≡</div>');
| |
|
| |
| // Tombol Back to Top lo biasanya di bottom: 80px atau 90px kan?
| |
| // Kita paksa Back to Top naik sedikit, dan navigasi bab ada di bawahnya.
| |
| // Script ini bakal otomatis menyesuaikan posisi tombol panah atas lo.
| |
|
| |
| $('body').append($quickNav);
| |
|
| |
| // Menyesuaikan posisi tombol Back to Top bawaan (jika ada) biar gak tabrakan
| |
| // Kita set navigasi di bottom 20px, dan Back to Top di bottom 80px
| |
| $('.back-to-top, #mw-mf-back-to-top').css('bottom', '85px');
| |
|
| |
| $quickNav.click(function() {
| |
| var $toc = $('#toc ul').first().clone();
| |
| var $modal = $('<div id="nav-modal" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:20001; display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(5px); opacity:0; transition:opacity 0.3s ease;">' +
| |
| '<div id="nav-card" style="background:#fff; width:100%; max-height:75%; overflow-y:auto; border-top-left-radius:30px; border-top-right-radius:30px; padding:25px; transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);">' +
| |
| '<div style="width:50px; height:5px; background:#eee; border-radius:10px; margin:0 auto 20px;"></div>' +
| |
| '<h3 style="margin-top:0; color:#36c; font-size:1.3em; text-align:center;">Daftar Isi</h3>' +
| |
| '<div id="nav-list" style="margin-top:10px;"></div>' +
| |
| '</div></div>');
| |
|
| |
| $('body').append($modal);
| |
| $modal.find('#nav-list').append($toc);
| |
|
| |
| setTimeout(function() {
| |
| $modal.css('opacity', '1');
| |
| $modal.find('#nav-card').css('transform', 'translateY(0)');
| |
| }, 10);
| |
|
| |
| // Styling link agar terasa seperti menu aplikasi
| |
| $modal.find('a').css({
| |
| 'display':'block',
| |
| 'padding':'15px 10px',
| |
| 'color':'#333',
| |
| 'text-decoration':'none',
| |
| 'border-bottom':'1px solid #f9f9f9',
| |
| 'font-size':'1.1em'
| |
| });
| |
|
| |
| function closeModal() {
| |
| $modal.find('#nav-card').css('transform', 'translateY(100%)');
| |
| $modal.css('opacity', '0');
| |
| setTimeout(function() { $modal.remove(); }, 400);
| |
| }
| |
|
| |
| $modal.on('click', function(e) { if(e.target === this) closeModal(); });
| |
| });
| |
| }
| |
| }); | | }); |
|
| |
|
| Baris 229: |
Baris 174: |
| // Tambah atau hapus di dalam kurung siku ini. Gunakan koma sebagai pemisah. | | // Tambah atau hapus di dalam kurung siku ini. Gunakan koma sebagai pemisah. |
| var protectedPages = [ | | var protectedPages = [ |
| "MediaWiki:", | | "MediaWiki:common.css", |
| | "MediaWiki:common.js", |
| "Istimewa:Versi" | | "Istimewa:Versi" |
| ]; | | ]; |
