MediaWiki:Common.js: Perbedaan antara revisi

(function($, mw) {

     'use strict';

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

    if (mw.config.get('wgNamespaceNumber') !== 0 || mw.config.get('wgIsMainPage')) {

        return;

     }

    if (mw.config.get('wgAction') !== 'view') {

        return;

     }

     mw.loader.using(['mediawiki.api', 'mediawiki.util']).then(function() {

        // 2. STATE & VARIABEL GLOBAL

        var pageName = mw.config.get('wgPageName');

        var isSysop = mw.config.get('wgUserGroups').indexOf('sysop') !== -1;

        var api = new mw.Api();

 

        // 3. INJEKSI CSS TAMPILAN (Sesuai UI ID Situs Lu)

            #mippedia-data-app {

                border-radius: 12px;

                box-shadow: 0 4px 12px rgba(0,0,0,0.05);

            .md-btn-icon {

            .md-btn-unlock { color: #28a745; }

            .md-row-display {

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

                font-size: 0.8em;

                align-items: center;

                gap: 3px;

            }

                border: 1px dashed #ccc;

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

            .md-input {

            .md-checkbox-group { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: #444; }

                font-size: 0.9em;

                transition: opacity 0.2s;

            }

            .md-btn:hover { opacity: 0.8; }

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

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

            .md-spinner {

                display: inline-block;

                border: 2px solid rgba(107, 82, 209, 0.3);

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

            /* Sembunyikan render bawaan agar terganti UI interaktif */

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

        // 4. PARSER DATA DARI WIKITEXT

        function loadData() {

            return api.get({

                action: 'query',

                prop: 'revisions',

                rvprop: 'content',

                rvslots: 'main',

                formatversion: 2

            }).then(function(data) {

                var content = data.query.pages[0].revisions[0].slots.main.content;

                 var match = content.match(/<!-- MIPPEDIA_DATA_START \| (.*?) -->/);

                 if (match) {

                         var parsed = JSON.parse(match[1]);

                        isLocked = parsed.locked || false;

                     } catch(e) { console.error("Format JSON Mippedia Data rusak", e); }

             });

         }

        // 5. PENYIMPANAN KE WIKITEXT API

        function saveData(actionType, spinnerEl, originalContent) {

            if (spinnerEl) spinnerEl.show();

              

             // Bikin JSON string buat disimpen secara rahasia

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

             // Bikin wikitext *fallback* (biar render rapi juga di kodenya)

 

             if (regex.test(originalContent)) {

                 newContent = originalContent.replace(regex, wt);

                 // Kalo belum ada, taruh di paling bawah artikel

                newContent = originalContent.trim() + "\n\n" + wt;

             api.postWithToken('csrf', {

                 text: newContent,

                 summary: 'Memperbarui Mippedia Data: ' + actionType,

         }

        // 6. BUILDER UI UTAMA

        function buildUI(rawContent) {

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

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

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

            // Logika Gembok & Tombol Edit

            if (isSysop) {

                var lockIcon = isLocked ? '🔓 (Buka)' : '🔒 (Kunci)';

                var lockClass = isLocked ? 'md-btn-unlock' : 'md-btn-lock';

                var $lockBtn = $('<button class="md-btn-icon ' + lockClass + '" title="Fitur Pengurus: Kunci/Buka Data">' + lockIcon + '</button>');

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

                    isLocked = !isLocked;

                    saveData(isLocked ? 'Mengunci data' : 'Membuka kunci data', null, rawContent);

                });

                $actions.append($lockBtn);

            } else if (isLocked) {

                $actions.append('<span title="Dikunci oleh Pengurus" style="color:#dc3545;">🔒 Terkunci</span>');

            }

            if (!isLocked || isSysop) {

                var $addBtn = $('<button class="md-btn-icon" title="Tambah Data Baru">✏️</button>');

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

                $actions.append($addBtn);

            }

            $header.append($actions);

            $app.append($header);

            if (dataItems.length === 0) {

                $list.append('<div style="color:#888; font-size:0.9em;">Belum ada data. Klik ikon pensil untuk menambahkan.</div>');

                        $valArea.append('<a href="' + item.ref + '" target="_blank" class="md-data-ref">🔗 Referensi</a>');

                    }

                    if (!isLocked || isSysop) {

                        var $editIcon = $('<button class="md-btn-icon" style="font-size:12px;">⚙️ Edit</button>');

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

                        $row.append($editIcon);

                    }

                    $list.append($row);

                });

             // Tempat penampung Form Edit biar muncul ke bawah atau pas lagi diedit

            $app.append('<div id="md-form-container"></div>');

 

             // 7. PENEMPATAN UI SMART DETECTOR (Bawah Infobox / Atas ID Situs)

            var $idSitus = $('[id*="situs"], [class*="situs"], .id-situs, .id-situs-card').first();

            var $infobox = $('.infobox').first();

            $('.md-native-render').hide(); // Sembunyikan wikitext murni

 

                $('#mw-content-text .mw-parser-output').append($app);

        // 8. LOGIKA FORM EDIT & TAMBAH DATA

        function showForm(index, rawContent) {

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

            $container.empty(); // Bersihin form lama kalo ada

 

             var isNew = index === -1;

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

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

            // Input Data (Kiri/Atas)

            $form.append('<div class="md-form-group"><label>Data (Contoh: Profesi)</label><input type="text" id="md-inp-prop" class="md-input" value="' + currentData.prop + '" placeholder="Masukkan nama data..."></div>');

            $form.append('<div class="md-form-group"><label>Nilai (Contoh: Penyanyi)</label><input type="text" id="md-inp-val" class="md-input" value="' + currentData.val + '" placeholder="Masukkan nilai..."></div>');

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

            $form.append('<div class="md-form-group md-checkbox-group"><input type="checkbox" id="md-inp-link" ' + chk + '> <label for="md-inp-link" style="margin:0; cursor:pointer;">Jadikan Tautan Wikilink [[ ]]</label></div>');

             // Input Referensi URL

             $form.append('<div class="md-form-group"><label>URL Referensi (Opsional)</label><input type="url" id="md-inp-ref" class="md-input" value="' + currentData.ref + '" placeholder="https://..."></div>');

            // Barisan Tombol

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

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

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

            $actions.append($btnSave);

            $actions.append($btnCancel);

            if (!isNew) {

                var $btnDelete = $('<button class="md-btn md-btn-delete">Hapus Data <span class="md-spinner" style="border-top-color:#dc3545;"></span></button>');

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

                    if(confirm('Yakin mau hapus data ini secara permanen?')) {

                        dataItems.splice(index, 1);

                        saveData('Menghapus data', $(this).find('.md-spinner'), rawContent);

                     }

            $container.append($form);

 

             // Aksi Batal

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

 

                var newRef = $('#md-inp-ref').val().trim();

                if (!newProp || !newVal) {

                    alert("Data dan Nilai gak boleh kosong ya bro!");

                    return;

                }

                var newItem = { prop: newProp, val: newVal, link: newLink, ref: newRef };

                 if (isNew) {

                     dataItems.push(newItem); // Tambah bawah sendiri

                 } else {

                    dataItems[index] = newItem; // Edit yang ada

                }

 

                saveData(isNew ? 'Menambahkan data baru' : 'Mengubah data', $(this).find('.md-spinner'), rawContent);

            });

         // 9. EKSEKUSI PROGRAM

        loadData().then(function(rawContent) {

            buildUI(rawContent);

         });

     });

})(jQuery, mediaWiki);