MediaWiki:Common.js: Perbedaan antara revisi

  * MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V9.0 SECURE ULTIMATE)

  * Fitur Baru: Top Social Media Container, Smart Image/Media Preview,  

  * Wiki Page Autocomplete (OpenSearch), Auto-Wikilink Detection.

         // 5. STYLESHEET (V9.0 dengan Komponen Baru)

             .md-data-value { font-size: 1.02rem; color: #0f172a; line-height: 1.4; font-weight: 600; word-break: break-word; }

            .md-media-preview-container { margin-top: 6px; width: 100%; display: block; }

            .md-media-preview-img { max-width: 100%; max-height: 250px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f1f5f9; object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

             .md-form-group { margin-bottom: 14px; }

                 if (leftPos + ttWidth > winWidth - 15) leftPos = winWidth - ttWidth - 15;

                 if (leftPos < 10) leftPos = 10;

             var summaryTxt = customSummary ? ('Mippedia Data: ' + customSummary) : ('Mippedia Data V9.0: ' + actionType);

             // --- FITUR BARU: Pisahkan Sosial Media ke Kotak Atas ---

             var aggregatedSocials = {};

            var hasSocials = false;

             dataItems.forEach(function(item) {

                 if (item.isPersonOrg && item.socials) {

                    Object.assign(aggregatedSocials, item.socials);

                    hasSocials = true;

                }

             if (hasSocials) {

                 var $topSocialContainer = $('<div class="md-top-social-container"></div>');

                 $topSocialContainer.append('<div class="md-top-social-label">' + svgVerified + ' PROFIL MEDIA SOSIAL & MUSIK</div>');

                 var $socialGroup = $('<div class="md-social-group"></div>');

                     if (aggregatedSocials[key]) {

                         var fullUrl = platform.base + aggregatedSocials[key].replace(/^@/, '');

                         $socialGroup.append($badge);

                 $topSocialContainer.append($socialGroup);

                 $app.append($topSocialContainer);

                     // Jika ini Pratinjau Gambar/Media, maka deteksi URL nya dan masukkan ke tag img

                     if (item.isMediaPreview && rawVal.match(/^https?:\/\//i)) {

                         displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank" style="color:#2563eb; text-decoration:none; font-weight:700; word-break:break-all;">' + extractDomain(rawVal) + '</a>';

                        // Render Gambar Aman (OWASP xss escape via sanitizeHTML dan single quotes aman di atribut onerror)

                        displayValHtml += '<div class="md-media-preview-container"><a href="' + sanitizeHTML(rawVal) + '" target="_blank"><img src="' + sanitizeHTML(rawVal) + '" class="md-media-preview-img" alt="Pratinjau Media" onerror="this.outerHTML=\'<span style=\\\'color:#dc2626; font-size:0.75rem; font-weight:600; display:block; margin-top:4px;\\\'>[Gagal memuat pratinjau. Pastikan URL berupa gambar langsung]</span>\'"></a></div>';

                    else if (rawVal.match(/^https?:\/\//i)) {

                        displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank" rel="noopener noreferrer" style="color:#2563eb; font-weight:700; text-decoration:none;">' + extractDomain(rawVal) + '</a>';

                    } else if (item.linkTarget && item.linkTarget.trim() !== '') {

                        displayValHtml = '<a href="' + mw.util.getUrl(item.linkTarget.trim()) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';

                    } else if (item.linkSplit) {

                        var parts = rawVal.split(/([,/\s]+dan\s+|[,/\s]+atau\s+|[,/]+)/gi);

                        displayValHtml = parts.map(function(p) {

                             var trimmed = p.trim();

                            if (trimmed && !p.match(/^[,/\s]+$/) && trimmed.toLowerCase() !== 'dan' && trimmed.toLowerCase() !== 'atau') {

                                return '<a href="' + mw.util.getUrl(trimmed) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(trimmed) + '</a>';

                            return sanitizeHTML(p);

                         }).join('');

                    } else if (item.link) {

                        displayValHtml = '<a href="' + mw.util.getUrl(rawVal) + '" style="color:#2563eb; font-weight:700; text-decoration:none;">' + sanitizeHTML(rawVal) + '</a>';

                         displayValHtml = sanitizeHTML(rawVal);

                     $valWrap.append('<span class="md-data-value">' + displayValHtml + '</span>');

                     var $copyBtn = $('<button class="md-btn-copy" title="Salin teks">' + svgCopy + '</button>');

                    $copyBtn.on('click', function() {

                        navigator.clipboard.writeText(rawVal);

                        $(this).css('color', '#16a34a');

                        setTimeout(function(){ $copyBtn.css('color', '#94a3b8'); }, 1200);

                    });

                    $valWrap.append($copyBtn);

                             showModal('Situs Terverifikasi', 'Centang biru menandakan bahwa URL referensi ini valid dan berasal dari entitas, media publikasi besar, portal populer, atau pangkalan data resmi yang bereputasi kredibel.');

             var currentData = isNew ? { prop: '', val: '', link: false, linkTarget: '', linkSplit: false, isMediaPreview: false, ref: {}, isPersonOrg: false, socials: {} } : dataItems[index];

             $valBox.append('<label>Nilai Data <span class="md-help-icon" data-help="Isi dari data tersebut. Ketik kata kunci, kami akan memunculkan rekomendasi artikel yang sudah ada di Wiki ini!">' + svgHelp + '</span></label>');

             var $autoWrap = $('<div class="md-autocomplete-wrapper"></div>');

            var $valInput = $('<input type="text" id="md-inp-val" class="md-input" autocomplete="off" placeholder="Ketik nilai atau cari halaman di Wiki..." value="' + sanitizeHTML(currentData.val || '') + '">');

            var $autoList = $('<div class="md-autocomplete-list"></div>');

             $autoWrap.append($valInput).append($autoList);

             $valBox.append($autoWrap);

             var typingTimer;

             var lastSelectedTitle = currentData.val || "";

                 var q = $(this).val().trim();

                 // Jika input diubah tidak sesuai dengan yang di-select sebelumnya, uncheck Wikilink Standar

                 if (q !== lastSelectedTitle) {

                 clearTimeout(typingTimer);

                typingTimer = setTimeout(function() {

                     api.get({ action: 'opensearch', search: q, limit: 7, format: 'json' }).done(function(res) {

                         var titles = res[1];

                         $autoList.empty();

                         if (titles && titles.length > 0) {

                                 var $item = $('<div class="md-autocomplete-item">' + svgSearch + ' ' + sanitizeHTML(t) + '</div>');

                                     $('#md-inp-link').prop('checked', true); // AUTO-CENTANG

                                     $autoList.hide();

                                 $autoList.append($item);

                             $autoList.show();

                         } else {

                            $autoList.hide();

                        }

                 }, 400); // debounce

 

                if (!$(e.target).closest('.md-autocomplete-wrapper').length) $autoList.hide();

 

             var $wikilinkOpts = $('<div style="margin-top:8px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; padding:10px; border-radius:8px; border:1px solid #e2e8f0;"></div>');

            $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-link" ' + chkLink + '> Jadikan Wikilink Standar</label>');

            $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer;"><input type="checkbox" id="md-inp-split" ' + chkSplit + '> Smart Split Wikilink</label>');

            $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; cursor:pointer; color:#0369a1;"><input type="checkbox" id="md-inp-media" ' + chkMedia + '> ' + svgMedia + ' Jadikan Pratinjau Gambar/Media (Otomatis)</label>');

            var $pipedGroup = $('<div style="margin-top:4px;"><label style="font-size:0.78rem; color:#475569; margin-bottom:4px;">Target Halaman Khusus (Opsional):</label><input type="text" id="md-inp-target" class="md-input" style="padding:6px 10px; font-size:0.85rem;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + sanitizeHTML(currentData.linkTarget || '') + '"></div>');

            $wikilinkOpts.append($pipedGroup);

            $valBox.append($wikilinkOpts);

            $form.append($valBox);

             $socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#e0e7ff; padding:10px; border-radius:8px; font-weight:700; color:#3730a3; font-size:0.85rem;"><input type="checkbox" id="md-chk-person" ' + chkPerson + '> Simpan Link Profil Media Sosial & Musik <span class="md-help-icon" data-help="Centang ini jika data ini mengandung identitas. Sistem akan memisahkan tombol sosial media ini secara otomatis ke dalam kotak khusus di panel atas (Header).">' + svgHelp + '</span></label>');

                 $socialGrid.append('<div><label style="font-size:0.78rem; color:#334155; font-weight:700; margin-bottom:4px;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input" placeholder="ID / Username / URL" value="' + sanitizeHTML(valUname) + '"></div>');

             $refArea.append('<label style="font-size:0.95rem; font-weight:800; color:#0f172a; margin-bottom:10px;">Sumber Referensi <span class="md-help-icon" data-help="Mohon berikan sumber referensi yang valid. Jika URL rujukan Anda mengarah ke situs web besar yang terverifikasi, lencana centang biru akan muncul otomatis.">' + svgHelp + '</span></label>');

                     <b>Perhatian Lisensi:</b> Setiap data yang diterbitkan di sini akan terlihat publik dan dirilis di bawah lisensi <b>Creative Commons Zero (CC0)</b>. Jika Anda tidak ingin suntingan Anda digunakan secara bebas dan publik tanpa batas, jangan klik Terbitkan. <span class="md-help-icon" data-help="Dengan menerbitkan, Anda melepaskan seluruh hak cipta atas input data ini ke domain publik murni sesuai prinsip Wikidata.">${svgHelp}</span>

                     <label style="font-size:0.85rem; font-weight:700;">Ringkasan Suntingan <span class="md-help-icon" data-help="Jelaskan secara singkat apa yang Anda ubah atau tambahkan. Contoh: Menambah data tanggal lahir rumi.">${svgHelp}</span></label>

             $btnCancel.on('click', function() {  

                $(document).off('click.auto');

            });

                     isMediaPreview: $('#md-inp-media').is(':checked'),

                     isMediaPreview: $('#md-inp-media').is(':checked'),