MediaWiki:Common.js: Difference between revisions

function injectFloatingDataBtn(name, domain) {
        if ($('#mippedia-data-btn').length) return;

        var currentSkin = mw.config.get('skin');

        // Tarik resolusi tinggi dari server agar tetap tajam HD
        var api = new mw.Api();
        api.get({
            action: 'query',
            titles: 'File:Locked_Data.svg',
            prop: 'imageinfo',
            iiprop: 'url',
            iiurlwidth: 128, 
            format: 'json'
        }).done(function(data) {
            var imageUrl = '';
            try {
                var pages = data.query.pages;
                for (var id in pages) {
                    if (pages[id].imageinfo && pages[id].imageinfo[0]) {
                        imageUrl = pages[id].imageinfo[0].thumburl || pages[id].imageinfo[0].url;
                    }
                }
            } catch (e) { imageUrl = ''; }

            if (!imageUrl) return;

            // Buat elemen tombol dengan style flex yang rapi (Tanpa Absolute!)
            var $btn = $('<a>', {
                id: 'mippedia-data-btn',
                href: domain + '/wiki/' + encodeURIComponent(name),
                target: '_blank',
                style: 'display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; text-decoration: none; transition: transform 0.2s; min-width: 24px;',
                html: $('<img>', {
                    src: imageUrl,
                    alt: 'Data Icon',
                    style: 'height: 22px; width: 22px; display: block; opacity: 0.85;'
                })
            });

            // Efek hover / touch
            $btn.hover(
                function() { $(this).css({ 'transform': 'scale(1.15)', 'opacity': '1' }); },
                function() { $(this).css({ 'transform': 'scale(1.0)', 'opacity': '0.85' }); }
            );

            // 🛠️ PROSES PENEMPATAN ALAMI (ANTI TUMPUK)
            if (currentSkin === 'minerva') {
                // TAMPILAN MOBILE (MINERVA)
                // Cari barisan menu aksi utama tempat tombol bahasa/pensil berada
                var $menuBar = $('.page-actions-menu__list, .page-actions-menu');
                
                if ($menuBar.length) {
                    // Bungkus dengan tag <li> agar sesuai dengan struktur asli Minerva mobile
                    var $liWrapper = $('<li>', {
                        class: 'page-actions-menu__list-item',
                        style: 'display: inline-flex; align-items: center;'
                    }).append($btn);

                    // Selipkan di paling depan (sebelah kiri tombol bahasa)
                    $liWrapper.prependTo($menuBar.first());
                } else {
                    // Fallback jika barisan menu tidak terdeteksi (Anonim darurat)
                    $('#firstHeading').css('position', 'relative');
                    $btn.css({ 'position': 'absolute', 'right': '10px', 'top': '10px', 'width': 'auto', 'height': 'auto' });
                    $('#firstHeading').append($btn);
                }
            } else {
                // TAMPILAN DESKTOP (Vector / Skin lainnya)
                var $desktopTarget = $('#p-views ul, .vector-menu-content-list').first();
                
                if ($desktopTarget.length) {
                    var $wrapperLi = $('<li>', { 
                        style: 'display: inline-block; vertical-align: middle; margin-right: 12px; margin-left: 8px; padding-top: 10px;' 
                    });
                    $wrapperLi.append($btn);
                    $desktopTarget.prepend($wrapperLi);
                } else {
                    var $headingDesktop = $('#firstHeading');
                    $headingDesktop.css('position', 'relative');
                    $btn.css({ 'position': 'absolute', 'right': '20px', 'top': '10px', 'width': 'auto', 'height': 'auto' });
                    $headingDesktop.append($btn);
                }
            }
        });
    }