MediaWiki:Common.js: Perbedaan antara revisi

/**

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

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

  */

         var api = new mw.Api();

         var svgEdit = '<svg class="md-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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" stroke-linecap="round" stroke-linejoin="round"><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" stroke-linecap="round" stroke-linejoin="round"><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 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>';

         // 3. INJEKSI CSS TAMPILAN

                 background: #ffffff;

                 border-radius: 12px;

             }

             .md-icon { vertical-align: middle; }

              

             .md-btn-icon {

             }

              

             .md-row-display {

             }

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

              

             }

              

             }

              

             .md-btn {

             }

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

              

             .md-spinner {

             }

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

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

              

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

         `;

         $('<style>').text(css).appendTo('head');

         function loadData() {

             return api.get({

             }).then(function(data) {

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

                 return content;  

             });

         }

         // 5. PENYIMPANAN KE WIKITEXT API

         function saveData(actionType, $btnEl, originalContent) {

              

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

             var wt = "<!-- MIPPEDIA_DATA_START | " + jsonStr + " -->\n";

             wt += "<div class=\"md-native-render\">\n{| class=\"wikitable\"\n! Data !! Nilai !! Referensi\n";

             dataItems.forEach(function(item) {

                 var valTxt = item.link ? "[[" + item.val + "]]" : item.val;

                 wt += "|-\n| " + item.prop + " || " + valTxt + " || " + refTxt + "\n";

             });

             }

             api.postWithToken('csrf', {

             }).done(function() {

             }).fail(function(err) {

             });

         }

         function buildUI(rawContent) {

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

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

              

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

                  

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

                     isLocked = !isLocked;

                 $actions.append($lockBtn);

             } else if (isLocked) {

             }

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

             if (dataItems.length === 0) {

             } else {

                 dataItems.forEach(function(item, index) {

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

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

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

                      

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

                      

                     if (item.ref) {

                     }

                     $info.append($valArea);

                     $row.append($info);

                     if (!isLocked || isSysop) {

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

                         $row.append($editIcon);

         }

         function showForm(index, rawContent) {

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

             var isNew = index === -1;

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

              

              

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

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

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

              

              

             if (!isNew) {

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

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

             $form.append($actions);

             $container.append($form);

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

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

                 var newLink = $('#md-inp-link').is(':checked');

                 if (!newProp || !newVal) {

                 }

                  

                 saveData(isNew ? 'Menambahkan data baru' : 'Mengubah data', $(this), rawContent);

         }

     });