Mippedia

MediaWiki:Common.js: Perbedaan antara revisi

← Revisi sebelumnyaRevisi selanjutnya →

Mippedia Patroli (bicara | kontrib)

2 grup pengguna
512 suntingan
Tidak ada ringkasan suntingan
Tanda: Dikembalikan Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Dikembalikan Suntingan perangkat seluler Suntingan peramban seluler
Baris 1.416: Baris 1.416:


/* ==========================================================
/* ==========================================================
   🧘 MIPPEDIA ZEN-FOCUS & 📢 SMART-SHARE PALETTE
   ✨ MIPPEDIA ATMOSPHERIC TOOLS
  1. Dynamic Greeting (Sapaan Waktu)
  2. Smart Image Attribution (Auto-Caption on Hover)
   ========================================================== */
   ========================================================== */
(function() {
(function() {
     $(document).ready(function() {
     $(document).ready(function() {
        if (mw.config.get('wgNamespaceNumber') !== 0 || mw.config.get('wgAction') !== 'view') return;


         // 1. DESAIN CONTROL CENTER (Samping Kiri)
         // --- 1. DYNAMIC GREETING LOGIC ---
        var $controlPalette = $(`
        function getMippediaGreeting() {
             <div id="mip-utility-palette" style="position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px;">
            var hour = new Date().getHours();
                <div id="btn-focus" title="Focus Mode" style="width: 45px; height: 45px; background: #2d3436; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.3s;">👁️</div>
             var greeting = "";
                 <div id="btn-share" title="Share Article" style="width: 45px; height: 45px; background: #3498db; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.3s;">🔗</div>
           
             </div>
            if (hour >= 5 && hour < 11) greeting = "🌅 Selamat Pagi";
        `);
            else if (hour >= 11 && hour < 15) greeting = "☀️ Selamat Siang";
        $('body').append($controlPalette);
            else if (hour >= 15 && hour < 18) greeting = "🌆 Selamat Sore";
            else greeting = "🌙 Selamat Malam";
 
            return `${greeting}, Selamat mengeksplorasi ilmu di Mippedia!`;
        }
 
        // Tampilkan di atas judul artikel
        if ($('#firstHeading').length) {
            var $greetingDiv = $('<div id="mip-greeting"></div>').css({
                 'font-size': '14px',
                'color': '#7f8c8d',
                'margin-bottom': '5px',
                'font-style': 'italic'
            }).text(getMippediaGreeting());
              
            $('#firstHeading').before($greetingDiv);
        }


        // 2. LOGIC FOCUS MODE (Zen Reading)
        var isFocus = false;
        $('#btn-focus').on('click', function() {
            if (!isFocus) {
                // Sembunyikan semua elemen pengganggu
                $('#mw-panel, #mw-head, #p-cactions, #p-personal, #footer, .mip-social-proof').fadeOut(500);
                $('#content').css({
                    'margin-left': 'auto',
                    'margin-right': 'auto',
                    'max-width': '800px',
                    'border': 'none',
                    'transition': '0.5s'
                });
                $(this).html('☀️').css('background', '#f1c40f');
                $('body').css('background', '#f5f6fa');
                isFocus = true;
            } else {
                // Kembalikan ke normal
                $('#mw-panel, #mw-head, #p-cactions, #p-personal, #footer, .mip-social-proof').fadeIn(500);
                $('#content').css({'margin-left': '', 'margin-right': '', 'max-width': ''});
                $(this).html('👁️').css('background', '#2d3436');
                $('body').css('background', '');
                isFocus = false;
            }
        });


         // 3. LOGIC SMART-SHARE
         // --- 2. SMART IMAGE ATTRIBUTION (Auto-Caption) ---
         $('#btn-share').on('click', function() {
        // Mencari semua gambar di dalam konten artikel
             var url = window.location.href;
         $('.mw-parser-output img').each(function() {
             var title = mw.config.get('wgTitle');
             var $img = $(this);
             var shareText = `Halo! Baca artikel menarik tentang "${title}" di Mippedia: \n\n${url}`;
             var altText = $img.attr('alt') || "Dokumentasi Mippedia";
           
            // Bungkus gambar dengan container posisi relatif
            $img.wrap('<div class="mip-img-container" style="position:relative; display:inline-block;"></div>');
           
            // Buat label attribution
             var $label = $(`
                <div class="mip-attribution">
                    📄 Source: ${altText}
                </div>
            `).css({
                'position': 'absolute',
                'bottom': '5px',
                'right': '5px',
                'background': 'rgba(0, 0, 0, 0.7)',
                'color': '#fff',
                'padding': '3px 8px',
                'font-size': '10px',
                'border-radius': '4px',
                'opacity': '0',
                'transition': 'opacity 0.3s ease',
                'pointer-events': 'none',
                'white-space': 'nowrap'
            });


             // Pake Native Share kalau di HP, kalau di PC copy ke clipboard
             $img.after($label);
            if (navigator.share) {
                navigator.share({
                    title: 'Mippedia: ' + title,
                    text: shareText,
                    url: url,
                });
            } else {
                navigator.clipboard.writeText(shareText).then(function() {
                    alert('Link Mippedia berhasil disalin ke clipboard! Siap dibagikan.');
                });
            }
         });
         });


         // Efek Hover
         // Efek Hover untuk memunculkan caption
         $('#mip-utility-palette div').hover(
         $('.mip-img-container').hover(
             function() { $(this).css('transform', 'scale(1.1)'); },
             function() { $(this).find('.mip-attribution').css('opacity', '1'); },
             function() { $(this).css('transform', 'scale(1)'); }
             function() { $(this).find('.mip-attribution').css('opacity', '0'); }
         );
         );
     });
     });
})();
})();
Diperoleh dari "https://id.mippedia.org/wiki/MediaWiki:Common.js"