MediaWiki:Common.js: Perbedaan antara revisi

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

  * Fitur: Smart Sub-Types, Social Media Badges, Piped/Split Wikilinks,

  * Auto-Domain Format, Indonesian Date Parser, UI Premium & Mobile Ready

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

             "Website": ["Situs Resmi / Official", "Blog / Portal Informasi", "Basis Data / Database Web", "Portal Komunitas", "Forum Diskusi", "Portal Edukasi", "Direktori Web"],

             "Studio / Database Musik": ["MusicBrainz", "Discogs", "Genius", "AllMusic", "Spotify For Artists", "Database BPI / RIAA", " Songfacts"],

             "Ensiklopedi": ["Ensiklopedi Cetak", "Ensiklopedi Online", "Kamus / Glosarium"],

         var SOCIAL_PLATFORMS = {

             instagram: { name: 'Instagram', base: 'https://instagram.com/', color: '#e1306c', icon: '<svg width="14" height="14" 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="14" height="14" 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="14" height="14" 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>' },

            twitter: { name: 'X / Twitter', base: 'https://x.com/', color: '#1da1f2', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>' },

            spotify: { name: 'Spotify', base: 'https://open.spotify.com/user/', color: '#1db954', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M8 11.5c3.5-1 7.5-.5 10 1M9 14.5c3-1 6-.5 8 1M10 17.5c2-.5 4.5 0 6 1"></path></svg>' },

             facebook: { name: 'Facebook', base: 'https://facebook.com/', color: '#1877f2', icon: '<svg width="14" height="14" 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="14" height="14" 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: '#333333', icon: '<svg width="14" height="14" 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>' }

         };

         // 3. IKON SISTEM

         var svgEdit = '<svg class="md-icon" width="16" height="16" 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="16" height="16" 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="16" height="16" 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 svgInfo = '<svg class="md-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d32f2f" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>';

         // 4. HELPER DOKUMENTASI & TANGGAL INDONESIA

             if (isNaN(day) || monthIdx < 0 || monthIdx > 11 || isNaN(year)) return dateStr;

                 var parsed = new URL(urlStr);

                 return parsed.hostname.replace(/^www\./, '');

             } catch(e) {

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

         // 5. CSS TAMPILAN

                 background: #ffffff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);

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

                 border: 1px solid #e0e0e0;

             .md-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }

             .md-title { font-size: 1.3em; font-weight: 700; color: #1a1a1a; margin: 0; display: flex; align-items: center; gap: 8px;}

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

                 background: #f8f9fa; border: 1px solid #e2e2e2; cursor: pointer; color: #5a42b8;

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

                 display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; font-weight: 600;

             .md-btn-icon:hover:not(:disabled) { background: #eef2f5; border-color: #d0d0d0; }

             .md-btn-lock { color: #d32f2f; background: #fff5f5; border-color: #fbd6d6; }

             .md-row-display {

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

                padding: 16px 12px; border-bottom: 1px solid #f5f5f5; transition: background 0.2s; border-radius: 8px; gap: 15px;

            }

             .md-row-display:hover { background: #fafafa; box-shadow: inset 4px 0 0 #5a42b8; }

             .md-row-display:last-child { border-bottom: none; }

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

             .md-data-label { font-size: 0.75em; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }

             .md-data-value { font-size: 1.05em; color: #202124; line-height: 1.5; font-weight: 500; }

             .md-ref-card {

                margin-top: 8px; background: #f8f9fa; padding: 12px 14px; border-radius: 10px;

                border-left: 4px solid #5a42b8; font-size: 0.85em; display: flex; flex-direction: column; gap: 6px;

            }

             .md-ref-header { font-weight: 600; color: #1a73e8; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

            .md-ref-header:hover { text-decoration: underline; }

            .md-ref-details { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #4a4a4a; font-size: 0.9em; margin-top: 2px; }

            .md-ref-detail-item { display: inline-flex; align-items: center; gap: 4px; }

             .md-ref-badge { background: #e8eaed; color: #3c4043; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 0.8em; }

             .md-social-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

             .md-social-badge {

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

                font-size: 0.8em; font-weight: 600; color: white; text-decoration: none; transition: transform 0.2s;

            }

             .md-social-badge:hover { transform: translateY(-2px); opacity: 0.9; text-decoration: none; color: white; }

             .md-form-box { background: #fafbfc; border-radius: 12px; padding: 24px; margin-top: 20px; border: 1px solid #eaedf0; }

             .md-form-title { font-size: 1.1em; font-weight: 700; color: #333; margin: 0 0 20px 0; border-bottom: 2px solid #e2e2e2; padding-bottom: 8px; }

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

             .md-form-group label { display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 8px; color: #444; }

             .md-input, .md-select {

                width: 100%; padding: 11px 13px; border: 1px solid #ccc; border-radius: 8px;

                box-sizing: border-box; font-family: inherit; font-size: 0.95em; transition: 0.2s; background: #fff;

            }

             .md-input:focus, .md-select:focus { border-color: #5a42b8; outline: none; box-shadow: 0 0 0 3px rgba(90, 66, 184, 0.15); }

             .md-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; padding: 16px; border-radius: 8px; border: 1px dashed #ccc; }

             .md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f0f4f9; padding: 16px; border-radius: 8px; border: 1px solid #d0d7de; }

             .md-form-actions { display: flex; gap: 12px; align-items: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eaeaea; }

             .md-btn {

                padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;

                color: white; font-size: 0.9em; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center;

            }

             .md-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

             .md-btn-save { background: linear-gradient(135deg, #6b52d1, #5a42b8); }

             .md-btn-cancel { background: #6c757d; }

             .md-btn-delete { background: linear-gradient(135deg, #e53935, #c62828); margin-left: auto; }

                 #mippedia-data-app { padding: 15px; }

         // 6. PARSER & PENYIMPANAN DATA

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

         function saveData(actionType, $btnEl, originalContent) {

                 action: 'edit', title: pageName, text: newContent, summary: 'Mippedia Data V5: ' + actionType, minor: false

         // 7. BUILDER UI TERBITAN PUBLIK

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

                 var $lockBtn = $('<button class="md-btn-icon ' + (isLocked ? 'md-btn-unlock' : 'md-btn-lock') + '">' + (isLocked ? svgUnlock + ' Buka Kunci' : svgLock + ' Kunci') + ' <span class="md-spinner"></span></button>');

             $header.append($actions);

                 $list.append('<div style="color:#888; text-align:center; padding: 30px 0; background:#f9f9f9; border-radius:8px; border:1px dashed #ddd;">Belum ada data terstruktur. Klik Tambah untuk memulai.</div>');

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

                         displayValHtml = '<a href="' + rawVal + '" target="_blank" style="color:#1a73e8; font-weight:600; text-decoration:none;">' + domain + '</a>';

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

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

                             return p;

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

                         displayValHtml = rawVal;

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

 

                     // RENDER MEDIA SOSIAL (Bila Diaktifkan)

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

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

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

                            var uname = item.socials[key];

                            if (uname) {

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

                                var $badge = $('<a class="md-social-badge" href="' + fullUrl + '" target="_blank" style="background:' + platform.color + ';">' + platform.icon + ' ' + platform.name + '</a>');

                                $socialGroup.append($badge);

                        if (hasSocial) $info.append($socialGroup);

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

                         if (ref.type) {

                            var typeLabel = ref.type + (ref.subType ? ' &bull; ' + ref.subType : '');

                            $details.append('<span class="md-ref-badge">' + typeLabel + '</span>');

                         }

                         $refCard.append($details);

                         $info.append($refCard);

                     if (!isLocked || isSysop) {

         // 8. LOGIKA FORM EDIT PINTAR

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

            $container.empty();  

 

             // Kolom Label

            $form.append('<div class="md-form-group"><label>Label Data (Contoh: Pekerjaan, Sutradara, Tempat Lahir)</label><input type="text" id="md-inp-prop" class="md-input" value="' + (currentData.prop || '') + '"></div>');

             $valBox.append('<label>Nilai Data</label><input type="text" id="md-inp-val" class="md-input" value="' + (currentData.val || '') + '">');

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

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

             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.85em; font-weight:600; cursor:pointer;"><input type="checkbox" id="md-inp-split" ' + chkSplit + '> Smart Split Wikilink (Otomatis pisahkan teks berkoma/kata "dan")</label>');

             var $pipedGroup = $('<div style="margin-top:6px;"><label style="font-size:0.8em; color:#555;">Target Halaman Khusus / Custom Piped Link (Opsional):</label><input type="text" id="md-inp-target" class="md-input" style="padding:7px; font-size:0.85em;" placeholder="Contoh: Diskografi Rumi Haitami" value="' + (currentData.linkTarget || '') + '"><small style="color:#777; font-size:0.75em;">Teks yang diklik tetap mengikuti Nilai Data di atas.</small></div>');

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

             $socialSec.append('<label style="display:flex; align-items:center; gap:8px; cursor:pointer; background:#eef2f5; padding:10px; border-radius:8px; font-weight:700; color:#5a42b8;"><input type="checkbox" id="md-chk-person" ' + chkPerson + '> Aktifkan Profil Orang / Organisasi (Media Sosial)</label>');

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

                 $socialGrid.append('<div><label style="font-size:0.8em; color:#333;">' + p.name + '</label><input type="text" id="md-soc-' + key + '" class="md-input" placeholder="Username (tanpa @)" value="' + valUname + '"></div>');

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

             $refArea.append('<label style="font-size:1em; font-weight:700; color:#1a1a1a;">Sumber Referensi / Rujukan Spesifik</label>');

             var $subTypeSel = $('<select id="md-ref-subtype" class="md-select"><option value="">-- Pilih Sub-Tipe Spesifik --</option></select>');

                 $subTypeSel.empty().append('<option value="">-- Pilih Sub-Tipe Spesifik --</option>');

             $refGrid.append('<div><label style="font-size:0.8em;">Tipe Rujukan Utama</label></div>').find('div').last().append($typeSel);

             $refGrid.append('<div><label style="font-size:0.8em;">Sub-Tipe Spesifik</label></div>').find('div').last().append($subTypeSel);

             $refGrid.append('<div class="md-grid-full"><input type="url" id="md-ref-url" class="md-input" placeholder="URL Tautan Rujukan (https://...)" value="' + (currentRef.url || '') + '"></div>');

             $refGrid.append('<div><input type="text" id="md-ref-title" class="md-input" placeholder="Judul Halaman Web / Artikel / Buku" value="' + (currentRef.title || '') + '"></div>');

             $refGrid.append('<div><input type="text" id="md-ref-site" class="md-input" placeholder="Nama Situs / Media (cth: Kompasiana)" value="' + (currentRef.site || '') + '"></div>');

             $refGrid.append('<div><input type="text" id="md-ref-author" class="md-input" placeholder="Nama Penulis / Pengarang" value="' + (currentRef.author || '') + '"></div>');

             $refGrid.append('<div><input type="text" id="md-ref-publisher" class="md-input" placeholder="Penerbit / Lembaga" value="' + (currentRef.publisher || '') + '"></div>');

             $refGrid.append('<div><label style="font-size:0.8em; margin:0;">Tanggal Akses/Terbit</label><input type="date" id="md-ref-date" class="md-input" value="' + (currentRef.date || '') + '"></div>');

             // TOMBOL AKSIS

             var $btnSave = $('<button class="md-btn md-btn-save">Simpan Data Terstruktur <span class="md-spinner"></span></button>');

             $actions.append($btnSave);

            $actions.append($btnCancel);

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

             $('html, body').animate({ scrollTop: $form.offset().top - 80 }, 300);

                     url: $('#md-ref-url').val().trim(),

                     prop: newProp,

                    val: newVal,

                 saveData(isNew ? 'Tambah data' : 'Edit data', $(this), rawContent);

         // 9. EXECUTE

             '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>.' +