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 (Quick Jump) */
/* 1. Navigasi Bab Melayang (Premium Quick Jump) - POSISI RAPI DI BAWAH */
$(document).ready(function() {
$(document).ready(function() {
     if (mw.config.get('wgIsArticle') && $('#toc').length) {
     if (mw.config.get('wgIsArticle') && $('#toc').length) {
         var $quickNav = $('<div id="quick-nav" style="position:fixed; bottom:140px; 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 10px rgba(0,0,0,0.3); cursor:pointer; font-weight:bold; font-size:18px;">≡</div>');
       
        // Bikin tombol melayang di BAWAH tombol Back to Top
        // 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: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>');
         $('body').append($quickNav);
         $('body').append($quickNav);
        // Efek Hover/Touch
        $quickNav.on('touchstart mousedown', function() { $(this).css('transform', 'scale(0.9)'); });
        $quickNav.on('touchend mouseup', function() { $(this).css('transform', 'scale(1)'); });


         $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.8); z-index:20001; display:flex; align-items:center; justify-content:center;">' +
             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;">' +
                 '<div style="background:#fff; width:85%; max-height:70%; overflow-y:auto; border-radius:15px; padding:20px; position:relative;">' +
                 '<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="close-nav" style="position:absolute; top:10px; right:15px; font-size:24px; color:#333;">×</div>' +
                 '<div style="width:40px; height:5px; background:#ddd; border-radius:10px; margin:0 auto 20px;"></div>' + // Handle bar ala iOS
                 '<h3 style="margin-top:0; color:#36c;">Lompat ke Bagian:</h3>' +
                 '<h3 style="margin-top:0; color:#36c; font-size:1.4em; border-bottom: 2px solid #f0f0f0; padding-bottom:10px;">Lompat ke Bagian</h3>' +
                 '<div id="nav-list"></div>' +
                 '<div id="nav-list" style="margin-bottom:30px;"></div>' +
                 '</div></div>');
                 '</div></div>');
              
              
Baris 193: Baris 200:
             $modal.find('#nav-list').append($toc);
             $modal.find('#nav-list').append($toc);
              
              
             // Style link di dalam modal biar enak diklik jempol
             // Animasi Masuk
             $modal.find('a').css({'display':'block', 'padding':'10px 0', 'color':'#333', 'text-decoration':'none', 'border-bottom':'1px solid #eee'});
             setTimeout(function() {
                $modal.css('opacity', '1');
                $modal.find('#nav-card').css('transform', 'translateY(0)');
            }, 10);


             $('#close-nav, #nav-modal').click(function(e) {
            // Style Link List agar lebih Eksklusif
                 if (e.target !== this && e.target.id !== 'close-nav') return;
             $modal.find('a').css({
                 $modal.remove();
                 'display':'block',
                'padding':'15px 5px',
                'color':'#444',
                'text-decoration':'none',
                'border-bottom':'1px solid #f5f5f5',
                 'font-size':'1.1em',
                'font-weight':'500'
             });
             });
            // Tutup Modal
            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(); });
            $modal.find('#nav-card').on('swipe', function() { closeModal(); }); // Bisa ditambah library swipe jika perlu
         });
         });
     }
     }
Diperoleh dari "https://id.mippedia.org/wiki/MediaWiki:Common.js"