MediaWiki:Common.js: Perbedaan antara revisi

/**

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

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

  */

         var isLocked = false;

         var isDarkMode = 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>' },

         };

         var svgEdit = '<svg class="md-icon" width="14" height="14" 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="14" height="14" 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 svgUnlock = '<svg class="md-icon" width="14" height="14" 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 9.9-1"></path></svg>';

         var svgCopy = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></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>';

         var svgMoon = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>';

         var svgWikitext = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>';

         function formatIndonesianDate(dateStr) {

             if (!dateStr) return '';

                 return urlStr.replace(/^https?:\/\/(www\.)?/, '').split('/')[0];

             }

         }

             if (!urlStr) return '';

             urlStr = urlStr.trim();

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

         }

         }

         function detectDataTypeBadge(item) {

             var val = item.val || '';

         }

         }

         var css = `

             #mippedia-data-app {

             }

             #mippedia-data-app.md-dark { background: #0f172a; border-color: #334155; color: #f8fafc; }

             #mippedia-data-app.md-dark .md-title { color: #f8fafc; }

             #mippedia-data-app.md-dark .md-row-display { background: #1e293b; border-color: #334155; }

             #mippedia-data-app.md-dark .md-data-value { color: #f1f5f9; }

             #mippedia-data-app.md-dark .md-form-box { background: #1e293b; border-color: #334155; }

             #mippedia-data-app.md-dark .md-input, #mippedia-data-app.md-dark .md-select, #mippedia-data-app.md-dark .md-textarea { background: #0f172a; border-color: #475569; color: #fff; }

              

             #mippedia-data-app.md-dark .md-header { border-color: #334155; }

              

             .md-btn-icon {

             }

             #mippedia-data-app.md-dark .md-score-box { background: #182234; border-color: #334155; }

             .md-row-display {

                 display: flex; justify-content: space-between; align-items: flex-start;

             }

              

              

              

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

              

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

              

             .is-loading .md-spinner { display: inline-block; }

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

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

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

             }

         function buildWikitextRef(refObj) {

             if (!refObj) return "";

             var text = refObj.url ? "[" + ensureHttps(refObj.url) + " " + title + "]" : "'''" + title + "'''";

             var details = [];

             if (refObj.site) details.push("Situs: " + refObj.site);

             if (refObj.publisher) details.push("Penerbit: " + refObj.publisher);

             if (refObj.type) details.push("Jenis: " + refObj.type + (refObj.subType ? " (" + refObj.subType + ")" : ""));

             if (details.length > 0) text += " &mdash; <small>" + details.join(" &bull; ") + "</small>";

             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() {

                 window.location.href = location.pathname + "?refresh=" + new Date().getTime();

             // HEADER & TOOLS

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

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

              

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

                 isDarkMode = !isDarkMode;

             $actions.append($darkBtn);

             if (isSysop) {

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

                     isLocked = !isLocked;

             if (!isLocked || isSysop) {

                 $addBtn.on('click', function() { showForm(-1, rawContent); });

                 $actions.append($addBtn);

             $app.append($header);

             var score = calculateQualityScore();

                 $searchBox.find('input').on('keyup input', function() {

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

                     $app.find('.md-row-display').each(function() {

                         var text = $(this).text().toLowerCase();

                     });

                 });

             }

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

             if (dataItems.length === 0) {

             } else {

                 dataItems.forEach(function(item, index) {

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

                      

                     var typeBadge = detectDataTypeBadge(item);

                     $info.append('<div class="md-data-label-wrap"><span class="md-data-label">' + item.prop + '</span>' + typeBadge + '</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') {

                             }

                             return p;

                         }).join('');

                     } else if (item.link) {

                     } else {

                         displayValHtml = rawVal;

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

                      

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

                         navigator.clipboard.writeText(rawVal);

                     $valWrap.append($copyBtn);

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

                         var wtCode = "| " + item.prop + " = " + buildWikitextVal(item);

                         navigator.clipboard.writeText(wtCode);

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

                     });

                     $info.append($valWrap);

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

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

                     }

                      

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

                         var ref = item.ref;

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

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

                         if (ref.url) {

                             $refCard.append('<a href="' + ensureHttps(ref.url) + '" target="_blank" class="md-ref-header">' + refTitle + '</a>');

                         var details = [];

                         if (details.length > 0) {

                         }

                     $row.append($info);

                     if (!isLocked || isSysop) {

                         $editIcon.on('click', function() { showForm(index, rawContent); });

                         $ctrls.append($editIcon);

         }

         function showForm(index, rawContent) {

             var $container = $('#md-form-container');

             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 || {};

              

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

             PRESET_LABELS.forEach(function(lbl) {

                 var $pill = $('<span class="md-preset-pill">' + lbl + '</span>');

                 $presetWrap.append($pill);

             });

             $propGroup.append($presetWrap);

              

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

              

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

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

              

             $valBox.append($wikilinkOpts);

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

              

             Object.keys(SOCIAL_PLATFORMS).forEach(function(key) {

                 var p = SOCIAL_PLATFORMS[key];

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

                  

             });

             $socialSec.append($socialGrid);

              

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

             updateSubTypes(currentRef.type, currentRef.subType);

             var $urlInput = $('<input type="url" id="md-ref-url" class="md-input" placeholder="https://..." value="' + (currentRef.url || '') + '">');

                 $(this).val(u);

                 if (u && !$('#md-ref-site').val().trim()) $('#md-ref-site').val(extractDomain(u));

             });

              

             $refArea.append($refGrid);

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

              

             if (!isNew) {

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

                         dataItems.splice(index, 1);

                         saveData('Hapus data', $(this), rawContent);

                 $actions.append($btnDelete);

             }

             $container.append($form);

             function updateLivePreview() {

                 var p = $('#md-inp-prop').val().trim() || 'Label';

                 var refT = $('#md-ref-title').val().trim();

                 var refU = $('#md-ref-url').val().trim();

                 $('#md-live-prev').html(html);

                 $('#md-dup-msg').toggle(isDup);

             }

             $form.find('input, select').on('keyup input change', updateLivePreview);

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

             });

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

                 if (!newProp || !newVal) {

                 }

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

             $actions.append($btnImport).append($btnCancel);

             $box.append($actions);

             $container.append($box);

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

                         dataItems = parsed;

                         saveData('Impor JSON', $(this), rawContent);

             });

         }