MediaWiki:Common.js: Perbedaan antara revisi

  * Fitur: ALL ORIGINAL V8.6 FEATURES + Social Header Separation,

  * Smart Media URL Preview (YouTube/Spotify/Images), Wiki Autocomplete,

* Ultra-Strict OWASP XSS Security, Mobile Optimized.

         // 4. HELPER UTILITY & ADVANCED SECURITY (Tingkat Tinggi OWASP)

         // 5. STYLESHEET  

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

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

             .md-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 4px; display: none; }

             .md-autocomplete-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #0f172a; transition: background 0.2s; }

             .md-autocomplete-item:hover { background: #f8fafc; color: #4f46e5; font-weight: 600; }

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

                 if (leftPos < 10) { leftPos = 10; }

             // Ekstrak dan Tampilkan Kotak Media Sosial Terpisah (Di Atas)

             var socialDataObj = null;

             dataItems.forEach(function(it) {

                 if (it.isPersonOrg && it.socials && Object.keys(it.socials).length > 0) { socialDataObj = it.socials; }

             if (socialDataObj) {

                 var $socialHeaderBox = $('<div style="background: linear-gradient(135deg, #f8fafc, #f1f5f9); padding: 15px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.02);"></div>');

                 $socialHeaderBox.append('<span style="font-size: 0.8rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 1px;">Profil Media Sosial & Musik Resmi</span>');

                 var $socialGroupGlobal = $('<div class="md-social-group" style="justify-content: center;"></div>');

                     var uname = socialDataObj[key];

                 $socialHeaderBox.append($socialGroupGlobal);

                 $app.append($socialHeaderBox);

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

                         if (rawVal.match(/\.(jpeg|jpg|gif|png|webp|bmp)$/i)) {

                            displayValHtml = '<img src="' + sanitizeHTML(rawVal) + '" style="max-width:100%; border-radius:8px; margin-top:6px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">';

                        } else if (rawVal.match(/(youtube\.com|youtu\.be)/i)) {

                            var ytId = rawVal.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);

                                displayValHtml = '<div style="position:relative; width:100%; padding-bottom:56.25%; height:0; border-radius:8px; overflow:hidden; margin-top:6px;"><iframe src="https://www.youtube.com/embed/' + ytId[1] + '" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen></iframe></div>';

                            } else { displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank">' + sanitizeHTML(rawVal) + '</a>'; }

                        } else if (rawVal.match(/spotify\.com/i)) {

                             var spotUrl = rawVal.replace('spotify.com/', 'spotify.com/embed/');

                            displayValHtml = '<iframe src="' + sanitizeHTML(spotUrl) + '" width="100%" height="152" frameborder="0" allowtransparency="true" allow="encrypted-media" style="border-radius:8px; margin-top:6px;"></iframe>';

                         } else {

                            displayValHtml = '<a href="' + sanitizeHTML(rawVal) + '" target="_blank" class="md-btn-visit" style="margin-top:6px;">Buka URL Pratinjau</a>';

                         // Sistem Link Biasa

                            displayValHtml = sanitizeHTML(rawVal);

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

                     if (!item.isMedia) {

                        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);

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

             $valBox.append('<label>Nilai Data <span class="md-help-icon" data-help="Isi dari data tersebut. Ketik huruf pertama untuk memunculkan pratinjau halaman wiki secara otomatis.">' + svgHelp + '</span></label>');

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

             $valBox.append($valInput).append($autoCompleteBox);

             // Opsi Pratinjau Media Baru

            $wikilinkOpts.append('<hr style="border:0; border-top:1px dashed #cbd5e1; margin:4px 0;"><label style="display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:800; color:#3730a3; cursor:pointer;"><input type="checkbox" id="md-inp-media" ' + chkMedia + '> Render URL Sbg Pratinjau Gambar/Video/Musik <span class="md-help-icon" data-help="Jika ini dicentang dan Nilai Data adalah URL Gambar atau YouTube/Spotify, sistem akan otomatis merendernya menjadi gambar atau pemutar langsung.">' + svgHelp + '</span></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);

             // AUTOCOMPLETE & SMART MEDIA URL DETECTOR

             var acTimer;

                 var v = $(this).val();

                 // Smart Media URL Detector

                 if (v.match(/\.(jpeg|jpg|gif|png|webp|bmp)$/i) || v.match(/(youtube\.com|youtu\.be|spotify\.com)/i)) {

                     $('#md-inp-media').prop('checked', true);

                 if (v.length < 1) {

                     $autoCompleteBox.hide();

                    $('#md-inp-link').prop('checked', false);

                  

                 acTimer = setTimeout(function() {

                    api.get({ action: 'opensearch', search: v, limit: 6, namespace: 0, format: 'json' }).done(function(data) {

                        $autoCompleteBox.empty();

                        if (titles.length > 0) {

                            titles.forEach(function(t) {

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

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

                                    $valInput.val(t);

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

                                 });

                                $autoCompleteBox.append($item);

                             $autoCompleteBox.show();

                        } else { $autoCompleteBox.hide(); }

                    });

                }, 300);

             $(document).on('click.mdac', function(e) { if(!$(e.target).closest($valBox).length) $autoCompleteBox.hide(); });

             $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 + '> Aktifkan Profil Media Sosial & Musik <span class="md-help-icon" data-help="Media sosial akan otomatis dipisah dan ditampilkan rapi di atas semua rincian data Anda.">' + svgHelp + '</span></label>');

             $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="Jika URL rujukan mengarah ke situs web terverifikasi, lencana centang biru otomatis muncul.">' + svgHelp + '</span></label>');

                     <b>Perhatian Lisensi:</b> Setiap data yang diterbitkan di sini akan dirilis di bawah lisensi <b>Creative Commons Zero (CC0)</b>.

                     <label style="font-size:0.85rem; font-weight:700;">Ringkasan Suntingan</label>

             $btnCancel.on('click', function() { $(document).off('click.mdac'); $container.empty(); });

             'Seluruh data terstruktur yang tersaji dalam repositori ini merupakan milik publik dan tersedia di bawah lisensi resmi ' +

             '<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" style="color:#6a5acd; text-decoration:none; font-weight:700;">Creative Commons Attribution-ShareAlike 4.0 International</a>.' +