Mippedia

MediaWiki:Common.js: Perbedaan antara revisi

← Revisi sebelumnyaRevisi selanjutnya →

Admin (bicara | kontrib)

16 grup pengguna
7.586 suntingan
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Baris 175: Baris 175:
});
});


/* 1. Navigasi Bab Melayang (Premium Quick Jump) - POSISI RAPI DI BAWAH */
/* 1. Navigasi Bab Melayang (Vertical Stack Edition) */
$(document).ready(function() {
$(document).ready(function() {
     if (mw.config.get('wgIsArticle') && $('#toc').length) {
     if (mw.config.get('wgIsArticle') && $('#toc').length) {
          
          
         // Bikin tombol melayang di BAWAH tombol Back to Top
         // CSS untuk posisi menumpuk secara vertikal
        // Back to Top biasanya di bottom: 20px, jadi ini kita taruh di bawahnya atau kita sesuaikan
         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>');
         var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:20px; right:85px; width:50px; height:50px; background:#36c; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:9996; box-shadow:0 4px 15px rgba(54,102,204,0.4); cursor:pointer; font-size:22px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">≡</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);
         $('body').append($quickNav);


         // Efek Hover/Touch
         // Menyesuaikan posisi tombol Back to Top bawaan (jika ada) biar gak tabrakan
         $quickNav.on('touchstart mousedown', function() { $(this).css('transform', 'scale(0.9)'); });
        // Kita set navigasi di bottom 20px, dan Back to Top di bottom 80px
        $quickNav.on('touchend mouseup', function() { $(this).css('transform', 'scale(1)'); });
         $('.back-to-top, #mw-mf-back-to-top').css('bottom', '85px');


         $quickNav.click(function() {
         $quickNav.click(function() {
             var $toc = $('#toc ul').first().clone();
             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.6); z-index:20001; display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(4px); opacity:0; transition:opacity 0.3s ease;">' +
             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:80%; overflow-y:auto; border-top-left-radius:25px; border-top-right-radius:25px; padding:25px; position:relative; transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); box-shadow:0 -5px 25px rgba(0,0,0,0.2);">' +
                 '<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:40px; height:5px; background:#ddd; border-radius:10px; margin:0 auto 20px;"></div>' + // Handle bar ala iOS
                 '<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.4em; border-bottom: 2px solid #f0f0f0; padding-bottom:10px;">Lompat ke Bagian</h3>' +
                 '<h3 style="margin-top:0; color:#36c; font-size:1.3em; text-align:center;">Daftar Isi</h3>' +
                 '<div id="nav-list" style="margin-bottom:30px;"></div>' +
                 '<div id="nav-list" style="margin-top:10px;"></div>' +
                 '</div></div>');
                 '</div></div>');
              
              
Baris 200: Baris 204:
             $modal.find('#nav-list').append($toc);
             $modal.find('#nav-list').append($toc);
              
              
            // Animasi Masuk
             setTimeout(function() {
             setTimeout(function() {
                 $modal.css('opacity', '1');
                 $modal.css('opacity', '1');
Baris 206: Baris 209:
             }, 10);
             }, 10);


             // Style Link List agar lebih Eksklusif
             // Styling link agar terasa seperti menu aplikasi
             $modal.find('a').css({
             $modal.find('a').css({
                 'display':'block',  
                 'display':'block',  
                 'padding':'15px 5px',  
                 'padding':'15px 10px',  
                 'color':'#444',  
                 'color':'#333',  
                 'text-decoration':'none',  
                 'text-decoration':'none',  
                 'border-bottom':'1px solid #f5f5f5',
                 'border-bottom':'1px solid #f9f9f9',
                 'font-size':'1.1em',
                 'font-size':'1.1em'
                'font-weight':'500'
             });
             });


            // Tutup Modal
             function closeModal() {
             function closeModal() {
                 $modal.find('#nav-card').css('transform', 'translateY(100%)');
                 $modal.find('#nav-card').css('transform', 'translateY(100%)');
Baris 225: Baris 226:


             $modal.on('click', function(e) { if(e.target === this) closeModal(); });
             $modal.on('click', function(e) { if(e.target === this) closeModal(); });
            $modal.find('#nav-card').on('swipe', function() { closeModal(); }); // Bisa ditambah library swipe jika perlu
         });
         });
     }
     }
Diperoleh dari "https://id.mippedia.org/wiki/MediaWiki:Common.js"