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>' },

             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>' },

             bandcamp: { name: 'Bandcamp', base: 'https://bandcamp.com/', color: '#1da0c3', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></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>' },

             youtube: { name: 'YouTube', base: 'https://youtube.com/@', color: '#ff0000', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></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>' },

             github: { name: 'GitHub', base: 'https://github.com/', color: '#24292e', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>' },

         };

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

             "Kebangsaan", "Genre", "Instrumen", "Label Rekaman",  

         ];

         // 3. MASTER TIPE RUJUKAN

         var REF_TYPES = {

         };

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

         // 5. HELPER UTILITY

         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;

             try {

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

         }

             if (!urlStr) return '';

             urlStr = urlStr.trim();

             return urlStr;

         }

             var d = String(now.getDate()).padStart(2, '0');

             return y + '-' + m + '-' + d;

         }

         var css = `

             #mippedia-data-app {

                 padding: 20px; margin: 20px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

             }

              

             .md-header {

                 display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;

             }

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

              

             .md-btn-icon {

             }

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

             .md-search-input {

             }

             .md-row-display {

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

             }

              

             .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-social-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

             .md-social-badge {

                 display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 18px;

             }

             .md-input, .md-select, .md-textarea {

             }

              

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

              

             .md-btn-save { background: linear-gradient(135deg, #4f46e5, #4338ca); flex: 1; min-width: 140px; }

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

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

              

             @media (max-width: 600px) {

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

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

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

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

             }

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

         `;

         // 7. PARSER & PENYIMPANAN DATA

         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;

         }

         function buildWikitextRef(refObj) {

             if (!refObj) return "";

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

             var details = [];

         }

              

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

              

             dataItems.forEach(function(item) {

             });

             wt += "|}\n</div>\n<!-- MIPPEDIA_DATA_END -->";

             var newContent;

             var regex = /<!-- MIPPEDIA_DATA_START \| .*? -->[\s\S]*?<!-- MIPPEDIA_DATA_END -->/;

             api.postWithToken('csrf', {

             }).done(function() {

             }).fail(function(err) {

             });

         }

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

              

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

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

              

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

             $actions.append($jsonBtn);

             if (isSysop) {

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

                     isLocked = !isLocked;

                 });

                 $actions.append($lockBtn);

             if (!isLocked || isSysop) {

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

                 $actions.append($addBtn);

             $app.append($header);

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

                     });

             }

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

                     $info.append('<span class="md-data-label">' + item.prop + '</span>');

                      

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

                         displayValHtml = parts.map(function(p) {

                             var trimmed = p.trim();

                             }

                             return p;

                         }).join('');

                     } else if (item.link) {

                     }

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

                      

                     $valWrap.append($copyBtn);

                     $info.append($valWrap);

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

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

                             var uname = item.socials[key];

                             if (uname) {

                                 var fullUrl = platform.base + uname.replace(/^@/, '');

                             }

                         });

                     }

                      

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

                         var ref = item.ref;

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

                          

                         } else {

                         }

                         }

                         $info.append($refContainer);

                     }

                      

                     if (!isLocked || isSysop) {

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

                     }

                     $list.append($row);

                 });

         }

         function showForm(index, rawContent) {

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

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

              

             PRESET_LABELS.forEach(function(lbl) {

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

                 $presetWrap.append($pill);

             });

             $form.append($propGroup);

              

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

              

              

             $valBox.append($wikilinkOpts);

             $form.append($valBox);

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

              

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

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

                 var p = SOCIAL_PLATFORMS[key];

             });

             $socialSec.append($socialGrid);

             $form.append($socialSec);

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

              

              

             function updateSubTypes(mainType, selectedSub) {

                 if (mainType && REF_TYPES[mainType]) {

                 }

             }

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

             updateSubTypes(currentRef.type, currentRef.subType);

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

                 }

             });

              

             var $dateInp = $('<input type="date" id="md-ref-date" class="md-input" value="' + (currentRef.date || '') + '">');

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

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

              

             if (!isNew) {

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

                         dataItems.splice(index, 1);

                     }

                 });

             $container.append($form);

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

             });

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

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

                 if (!newProp || !newVal) {

                 }

                 var refObj = {

                 };

                 Object.keys(refObj).forEach(function(key) { if (!refObj[key]) delete refObj[key]; });

                 if (Object.keys(refObj).length === 0) refObj = null;

                 var newItem = {

                     linkTarget: $('#md-inp-target').val().trim(),

                 };

                 else dataItems[index] = newItem;  

             });

         }

         function showJsonModal(rawContent) {

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

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

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

                 try {

                     if (Array.isArray(parsed)) {

                         dataItems = parsed;

             });

         }

         loadData().then(function(rawContent) { buildUI(rawContent); });

     });

/* ==========================================================