MediaWiki:Common.js: Perbedaan antara revisi

  * MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (PRO-MAX VERSION)

  * Fitur: Advanced Citation, Bypass Cache Fix, UI Grid, Async Loading

     // 1. CEK LINGKUNGAN: Hanya jalan di Namespace 0 (Artikel) & Bukan Halaman Utama

         var svgRef = '<svg class="md-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>';

         var svgLink = '<svg class="md-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>';

         // 3. INJEKSI CSS TAMPILAN

                 background: #ffffff;

                border-radius: 12px;

                box-shadow: 0 8px 24px 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 #eef0f2;

                transition: all 0.3s ease;

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

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

             .md-btn-unlock { color: #2e7d32; background: #f1fbf2; border-color: #c8e6c9; }

             .md-btn-unlock:hover:not(:disabled) { background: #e8f5e9; }

                 padding: 14px 10px; border-bottom: 1px solid #f5f5f5; transition: background 0.2s; border-radius: 6px;

             .md-row-display:hover { background: #fafafa; }

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

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

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

             .md-ref-badge {

                font-size: 0.75em; background: #f1f3f4; padding: 4px 10px; border-radius: 20px;

                text-decoration: none !important; color: #1a73e8; margin-left: 10px;

                display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e8eaed; transition: all 0.2s;

            }

             .md-ref-badge:hover { background: #e8f0fe; color: #174ea6; border-color: #d2e3fc; }

             /* Form Edit (Grid Layout) */

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

             .md-form-title { font-size: 1em; font-weight: 600; color: #333; margin: 0 0 15px 0; border-bottom: 2px solid #e2e2e2; padding-bottom: 5px; display: inline-block;}

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

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

                 width: 100%; padding: 10px 14px; border: 1px solid #cfd4d9; border-radius: 8px;

                 box-sizing: border-box; font-family: inherit; font-size: 0.95em; transition: all 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.1); }

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

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

                 padding: 10px 20px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;

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

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

             .md-spinner {

                display: none; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4);

                border-radius: 50%; border-top-color: #ffffff; animation: md-spin 0.8s linear infinite;

            }

         // 4. PARSER DATA

         // --- HELPER UNTUK MEMBENTUK TEKS REFERENSI ---

             if (!refObj.url) return ""; // URL Wajib

             var title = refObj.title || "Tautan Rujukan";

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

             if (refObj.date) details.push("Diakses pada: " + refObj.date);

         // 5. PENYIMPANAN KE WIKITEXT API

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

                 // FIX CACHE: Eksekusi Purge dulu biar cache anonim dibersihkan, baru reload.

                 api.post({ action: 'purge', titles: pageName }).always(function() {

                    window.location.href = mw.util.getUrl(pageName) + '?action=purge'; // Bypass Reload

                });

                 alert("Gagal menyimpan! (Error: " + err + "). Pastikan Anda memiliki izin mengedit halaman ini.");

         // 6. BUILDER UI UTAMA

             var $header = $('<div class="md-header"><h3 class="md-title">' + svgEdit + ' Mippedia Data <span class="md-small-text">Pro</span></h3></div>');

                 var $lockBtn = $('<button class="md-btn-icon ' + lockClass + '" title="Akses Pengurus">' + lockIcon + lockText + ' <span class="md-spinner"></span></button>');

                 $actions.append('<span title="Dikunci oleh Pengurus" style="color:#d32f2f; font-size:0.9em; font-weight:bold; background:#fff5f5; padding:6px 12px; border-radius:6px; border:1px solid #fbd6d6;">' + svgLock + ' Terkunci</span>');

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

                     // Render UI Referensi

                         var refTitle = (isObj && item.ref.title) ? item.ref.title : "Sumber Rujukan";

                         var tooltip = [];

                             if(item.ref.author) tooltip.push("Penulis: " + item.ref.author);

                             if(item.ref.publisher) tooltip.push("Penerbit: " + item.ref.publisher);

                             if(item.ref.date) tooltip.push("Diakses: " + item.ref.date);

                         if(refUrl) {

                            $valArea.append('<a href="' + refUrl + '" target="_blank" class="md-ref-badge" ' + titleAttr + '>' + svgRef + refTitle + '</a>');

                         var $editIcon = $('<button class="md-btn-icon" style="padding:5px 10px; font-size:0.8em; align-self:center;">' + svgEdit + ' Edit</button>');

         // 8. LOGIKA FORM EDIT (DENGAN ADVANCED REF GRID)

             $form.append('<label class="md-checkbox-group"><input type="checkbox" id="md-inp-link" ' + chk + '> Jadikan Tautan Internal (Wikilink)</label>');

             // Grid Detail Referensi (Opsional)

             $refArea.append('<label>Sumber Referensi <span class="md-small-text">(Semua kolom di bawah opsional)</span></label>');

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

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

 

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

 

                     alert("Label Data dan Nilai harus diisi, bro!"); return;

                 // Bersihkan properti referensi yang kosong agar JSON tidak bengkak

                 if (!refObj.url) refObj = null;

         // 9. JALANKAN PROGRAM