MediaWiki:Common.js: Perbedaan antara revisi

/**

  * ====================================================================

  * ====================================================================

  */

         var isLocked = false;

         var api = new mw.Api();

         var SOCIAL_PLATFORMS = {

             applemusic: { name: 'Apple Music', base: 'https://music.apple.com/artist/', color: '#fc3c44', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.32 12.383c-.328.232-.82.418-1.32.418-1.238 0-1.922-.828-1.922-2.191v-4.14l4.312-.868v1.398l-2.91.586v2.805c0 .734.336 1.148.977 1.148.336 0 .617-.094.863-.258v1.102z"/></svg>' },

             spotify: { name: 'Spotify', base: 'https://open.spotify.com/artist/', color: '#1db954', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424c-.18.295-.563.387-.857.207-2.35-1.434-5.308-1.758-8.793-.963-.335.077-.67-.133-.746-.468-.077-.334.132-.67.467-.745 3.816-.87 7.092-.493 9.72 1.112.294.18.386.563.209.857zm1.213-2.71c-.226.368-.703.483-1.07.258-2.688-1.652-6.785-2.13-9.965-1.164-.413.125-.85-.108-.975-.522-.125-.413.108-.85.522-.975 3.633-1.102 8.157-.568 11.23 1.332.368.226.483.703.258 1.071zm.14-2.827c-3.225-1.915-8.54-2.092-11.614-1.16-.503.153-1.037-.133-1.19-.636-.152-.503.133-1.037.636-1.19 3.532-1.072 9.404-.865 13.115 1.338.45.267.598.85.33 1.3-.267.45-.85.598-1.3.33z"/></svg>' },

             soundcloud: { name: 'SoundCloud', base: 'https://soundcloud.com/', color: '#ff5500', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M1.175 12.225c-.062 0-.115.053-.115.116v4.636c0 .062.053.115.115.115h.411c.063 0 .116-.053.116-.115v-4.636c0-.063-.053-.116-.116-.116h-.411zm1.312-1.28c-.062 0-.115.052-.115.115v6.52c0 .063.053.115.115.115h.43c.062 0 .115-.052.115-.115v-6.52c0-.063-.053-.115-.115-.115h-.43zm1.33-1.258c-.063 0-.115.052-.115.115v8.322c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V9.802c0-.063-.052-.115-.115-.115h-.43zm1.33-.86c-.063 0-.115.053-.115.116v9.542c0 .063.052.115.115.115h.43c.063 0 .115-.052.115-.115V8.942c0-.063-.052-.116-.115-.116h-.43zm21.43 3.652c-.413 0-.802.08-1.157.228-.312-2.73-2.613-4.858-5.422-4.858-1.08 0-2.083.315-2.928.858-.2-.702-.592-1.332-1.12-1.826-.78-.727-1.812-1.13-2.882-1.13-.815 0-1.6.236-2.272.684v10.822c0 .063.052.115.115.115h15.666c1.666 0 3.018-1.352 3.018-3.018 0-1.666-1.352-3.018-3.018-3.018z"/></svg>' },

             instagram: { name: 'Instagram', base: 'https://instagram.com/', color: '#e1306c', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>' },

             tiktok: { name: 'TikTok', base: 'https://www.tiktok.com/@', color: '#000000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 1 1-5.2-1.74 2.89 2.89 0 0 1 2.31-2.22V8.2a6.34 6.34 0 0 0-5 6.13 6.34 6.34 0 1 0 10.7-4.52A8.25 8.25 0 0 0 20 10.56V6.69z"/></svg>' },

             facebook: { name: 'Facebook', base: 'https://facebook.com/', color: '#1877f2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>' },

             linkedin: { name: 'LinkedIn', base: 'https://linkedin.com/in/', color: '#0a66c2', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>' },

         };

         var PRESET_LABELS = [

             "Nama Lahir", "Tanggal Lahir", "Tempat Lahir", "Pekerjaan",  

         ];

         var REF_TYPES = {

             "Berita": ["Berita Online", "Berita Cetak / Koran", "Wawancara Eksklusif", "Liputan Khusus", "Editorial", "Investigasi Media", "Siaran Radio / TV"],

         };

         var svgEdit = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>';

         var svgLock = '<svg class="md-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>';

         var svgSearch = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';

         var svgCode = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>';

         }

         function formatIndonesianDate(dateStr) {

             if (!dateStr) return '';

             var parts = dateStr.split('-');

             if (parts.length !== 3) return dateStr;

             var day = parseInt(parts[2], 10);

             var monthIdx = parseInt(parts[1], 10) - 1;

             var year = parts[0];

             return day + ' ' + months[monthIdx] + ' ' + year;

         }

         function extractDomain(urlStr) {

             try {

                 if (!urlStr.match(/^https?:\/\//i)) urlStr = 'https://' + urlStr;

         }

         function ensureHttps(urlStr) {

             if (!urlStr) return '';

             urlStr = urlStr.trim();

             }

         }

         function getTodayString() {

             var now = new Date();

         }

         var css = `

             #mippedia-data-app {

             }

             .md-title-container { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 180px; }

             .md-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

              

             .md-btn-icon {

                 padding: 8px 14px; border-radius: 8px; transition: all 0.2s ease;

                 display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;

             }

             .md-btn-lock { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }

             .md-search-box { position: relative; margin-bottom: 16px; width: 100%; box-sizing: border-box; }

              

             .md-data-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

             .md-data-value-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

              

              

             .md-preset-wrapper { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

             .md-preset-pill:hover { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }

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

              

             .md-grid-full { grid-column: span 2; }

              

             .md-btn { padding: 10px 18px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; color: white; font-size: 0.85rem; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

             .md-btn-cancel { background: #64748b; }

             .md-btn-delete { background: #dc2626; margin-left: auto; }

              

             @keyframes md-spin { to { transform: rotate(360deg); } }

             @media (max-width: 600px) {

                 #mippedia-data-app { padding: 14px; margin: 14px 0; border-radius: 12px; }

                 .md-header { flex-direction: column; align-items: flex-start; gap: 10px; }

                 .md-btn-icon { padding: 7px 12px; font-size: 0.8rem; }

                 .md-ref-grid, .md-social-grid { grid-template-columns: 1fr; }

                 .md-form-actions { flex-direction: column; width: 100%; }

                 .md-btn { width: 100%; margin: 0 !important; }

             }

             .md-native-render { display: none; }

         $('<style>').text(css).appendTo('head');

         function loadData() {

             return api.get({

         function buildWikitextVal(item) {

             var val = item.val;

             if (item.linkSplit) {

                 return val.replace(/([a-zA-Z0-9_À-ÿ\- ]+)/g, function(match) {

                     var trimmed = match.trim();

                     return match;

                 });

             }

             return val;

         }

         }

             if ($btnEl) $btnEl.addClass('is-loading').prop('disabled', true);

              

             var jsonStr = JSON.stringify({ locked: isLocked, items: dataItems });

             var wt = "<!-- MIPPEDIA_DATA_START | " + jsonStr + " -->\n";

             api.postWithToken('csrf', {

             }).done(function() {

             }).fail(function(err) {

                 if ($btnEl) $btnEl.removeClass('is-loading').prop('disabled', false);

             });

         }

             var $app = $('<div id="mippedia-data-app"></div>');

              

             var $header = $('<div class="md-header"></div>');

             var $titleContainer = $('<div class="md-title-container"><h3 class="md-title">' + svgEdit + ' Data Terstruktur</h3></div>');

             var $actions = $('<div class="md-actions"></div>');

              

             var $jsonBtn = $('<button class="md-btn-icon" title="Ekspor/Impor JSON">' + svgCode + ' JSON</button>');

             $jsonBtn.on('click', function() { showJsonModal(rawContent); });

             if (isSysop) {

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

                     isLocked = !isLocked;

             $app.append($header);

             if (dataItems.length > 2) {

                 var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Cari data terstruktur..."></div>');

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

                 });

                 $app.append($searchBox);

             }

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

             if (dataItems.length === 0) {

             } else {

                 dataItems.forEach(function(item, index) {

                     var $row = $('<div class="md-row-display"></div>');

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

                      

                     var displayValHtml = '';

                     var rawVal = item.val || '';

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

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

                     } else if (item.linkSplit) {

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

                             var trimmed = p.trim();

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

                             }

                         }).join('');

                     } else if (item.link) {

                     } else {

                     }

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

                         navigator.clipboard.writeText(rawVal);

                     });

                     $valWrap.append($copyBtn);

                     $info.append($valWrap);

                      

                     if (item.ref && (item.ref.url || item.ref.title)) {

                         var ref = item.ref;

                          

                          

                          

                         });

                         $info.append($refContainer);

                     }

                     $row.append($info);

                         });

                     }

                     $list.append($row);

                 });

         }

         function showForm(index, rawContent) {

             var isNew = index === -1;

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

             var currentRef = currentData.ref || {};

             var currentSocials = currentData.socials || {};

             $form.append('<h4 class="md-form-title">' + (isNew ? 'Tambah Data Baru' : 'Edit Data Terstruktur') + '</h4>');

              

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

             PRESET_LABELS.forEach(function(lbl) {

             $form.append($propGroup);

              

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

              

              

             var chkLink = currentData.link ? 'checked' : '';

             var chkSplit = currentData.linkSplit ? 'checked' : '';

              

             $wikilinkOpts.append($pipedGroup);

             $valBox.append($wikilinkOpts);

             $form.append($valBox);

             var $socialSec = $('<div class="md-form-group" style="margin-top:16px;"></div>');

             var chkPerson = currentData.isPersonOrg ? 'checked' : '';

              

             var $socialGrid = $('<div class="md-social-grid" id="md-social-box" style="display:' + (currentData.isPersonOrg ? 'grid' : 'none') + '; margin-top:8px;"></div>');

                 var p = SOCIAL_PLATFORMS[key];

                 var valUname = currentSocials[key] || '';

             });

             $socialSec.append($socialGrid);

             $form.append($socialSec);

             var $refArea = $('<div class="md-form-group" style="margin-top:20px;"></div>');

             var $refGrid = $('<div class="md-ref-grid"></div>');

              

             Object.keys(REF_TYPES).forEach(function(t) {

                 var sel = currentRef.type === t ? 'selected' : '';

             });

             function updateSubTypes(mainType, selectedSub) {

                 if (mainType && REF_TYPES[mainType]) {

                     REF_TYPES[mainType].forEach(function(st) {

                 }

             }

             $typeSel.on('change', function() { updateSubTypes($(this).val(), ''); });

             updateSubTypes(currentRef.type, currentRef.subType);

             $urlInput.on('blur', function() {

             });

              

             var $dateInpWrap = $('<div style="display:flex; gap:6px;"></div>');

             $todayBtn.on('click', function() { $dateInp.val(getTodayString()); });

             $dateInpWrap.append($dateInp).append($todayBtn);

             $form.append($refArea);

             var $actions = $('<div class="md-form-actions"></div>');

             var $btnCancel = $('<button class="md-btn md-btn-cancel">Batal</button>');

              

              

             if (!isNew) {

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

                         dataItems.splice(index, 1);

                     }

                 });

             $form.append($actions);

             $container.append($form);

             $('#md-chk-person').on('change', function() {

             });

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

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

                 if (!newProp || !newVal) {

                 }

                 var newItem = {

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

                     linkSplit: $('#md-inp-split').is(':checked'),

                 else dataItems[index] = newItem;  

             });

         }

         function showJsonModal(rawContent) {

             var jsonStr = JSON.stringify(dataItems, null, 2);

             var $box = $('<div class="md-form-box"></div>');

              

             $box.append($txt);

             var $actions = $('<div class="md-form-actions"></div>');

             var $btnCancel = $('<button class="md-btn md-btn-cancel">Tutup</button>');

             $box.append($actions);

             $container.append($box);

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

                     if (Array.isArray(parsed)) {

                         dataItems = parsed;

                     } else {

                     }

                 } catch(e) {

                 }

             });

             '<div style="font-size:11px; color:#718096; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;">Lisensi, Atribusi & Penggunaan Data</div>' +

             '<p style="margin:0 0 10px; font-size:13px; color:#4a5568; line-height:1.6;">' +

             '</p>' +

             '<p style="margin:0; font-size:12px; color:#a0aec0;">Akses API dan penggunaan data secara massal wajib mencantumkan atribusi kepada <strong>Mippedia Community</strong> selaku pengelola proyek.</p></div>';