MediaWiki:Common.js: Perbedaan antara revisi

  * MIPPEDIA DATA - ADVANCED STRUCTURED DATA SYSTEM (V9.0 PRO MOBILE)

  * Fitur: No-Emoji, Mobile Responsive, 15 Auto Features, Clean UI.

             pinterest: { name: 'Pinterest', base: 'https://pinterest.com/', color: '#e60023', icon: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>' }

             "Berita": ["Berita Online / Portal", "Berita Cetak / Koran", "Wawancara Eksklusif", "Liputan Khusus", "Editorial / Opini"],

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

             "Buku": ["Buku Cetak", "E-Book", "Bab / Bagian Buku", "Monograf"],

             "Jurnal": ["Jurnal Ilmiah Peer-Reviewed", "Paper Konferensi", "Artikel Review"],

             "Studio / Database Musik": ["MusicBrainz", "Discogs", "Genius", "AllMusic", "Spotify For Artists", "Apple Music Catalogue"],

             "Video": ["YouTube Video", "Film Dokumenter", "Wawancara Video"],

             "Media Sosial": ["Postingan / Tweet", "Video Singkat (Reels/TikTok)", "Live Stream"]

         // 2. IKON SISTEM FAST SVG (PURE, NO EMOJIS)

         var svgEdit = '<svg class="md-icon" width="14" height="14" 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="14" height="14" 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="14" height="14" 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 svgRef = '<svg class="md-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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. HELPER & NEW AUTOMATION UTILITIES

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

             return cleanReferenceUrl(urlStr);

        }

 

             if (!val) return '';

            return val.split('/')[0].split('?')[0];

         function detectDataTypeBadge(item) {

             var val = item.val || '';

             // FITUR 12: Smart Date Validator RegExp

            if (val.match(/^\d{4}-\d{2}-\d{2}$/)) return '<span class="md-type-tag md-tag-date">Date</span>';

             if (val.match(/^https?:\/\//i)) return '<span class="md-type-tag md-tag-link">External Link</span>';

             if (item.linkTarget) return '<span class="md-type-tag md-tag-piped">Piped Link</span>';

             if (item.link) return '<span class="md-type-tag md-tag-wiki">Wikilink</span>';

            return '<span class="md-type-tag md-tag-text">Text</span>';

         // FITUR 10: Data Type Demographics

 

 

 

        // 4. STYLESHEET V9.0 (MOBILE OPTIMIZED, NO EMOJIS, HIGH-PERFORMANCE ANIMATIONS)

                 background: #ffffff; border-radius: 12px;

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

                 border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box;  

                overflow: hidden;

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

             #mippedia-data-app.md-dark .md-header { border-color: #334155; }

             .md-title-container { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }

             .md-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.5px; display:flex; align-items:center; gap:8px;}

                 background: #f8fafc; border: 1px solid #cbd5e1; cursor: pointer; color: #3b82f6;

                 padding: 8px 14px; border-radius: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

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

            #mippedia-data-app.md-dark .md-btn-icon:hover:not(:disabled) { background: #2dd4bf1a; border-color: #2dd4bf; }

             .md-btn-lock { color: #ef4444; background: #fef2f2; border-color: #fecaca; }

             .md-dashboard { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 20px; align-items: center; }

            .md-score-box { background: #f8fafc; padding: 12px 16px; border-radius: 8px; border: 1px solid #e2e8f0; width: 100%; }

            #mippedia-data-app.md-dark .md-score-box { background: #182234; border-color: #334155; }

            .md-score-bar-bg { background: #e2e8f0; height: 4px; border-radius: 4px; overflow: hidden; margin-top: 8px; }

 

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

             .md-search-input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; background: #f8fafc; transition: all 0.2s; outline: none; }

             .md-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: #ffffff; }

             .md-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; }

             /* List Rows */

                 padding: 16px; border: 1px solid #e2e8f0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

                 border-radius: 8px; gap: 16px; background: #ffffff;

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

            #mippedia-data-app.md-dark .md-row-display:hover { border-color: #475569; background: #1e293b; }

            .md-row-highlight { border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6; }

             .md-data-label-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

             .md-data-label { font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

             .md-type-tag { font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid transparent; }

            .md-tag-date { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }

            .md-tag-link { color: #be123c; background: #ffe4e6; border-color: #fecdd3; }

            .md-tag-piped { color: #b45309; background: #fef3c7; border-color: #fde68a; }

             .md-tag-wiki { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }

             .md-tag-text { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }

             .md-data-value-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

             .md-data-value { font-size: 1rem; color: #0f172a; line-height: 1.5; font-weight: 600; word-wrap: break-word; overflow-wrap: break-word; }

             .md-btn-mini { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: 0.2s; display: inline-flex; align-items: center; }

            .md-btn-mini:hover { color: #3b82f6; background: #eff6ff; }

 

            .md-ref-container { margin-top: 10px; width: 100%; }

             .md-ref-card { background: #f8fafc; padding: 12px; border-radius: 6px; border-left: 3px solid #cbd5e1; font-size: 0.85rem; display: flex; flex-direction: column; gap: 4px; }

             .md-ref-tag-header { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #64748b; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

             .md-ref-header { font-weight: 600; color: #2563eb; text-decoration: none; word-wrap: break-word; overflow-wrap: break-word; }

             /* Socials */

             .md-social-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: white; text-decoration: none; transition: opacity 0.2s; }

             .md-social-badge:hover { opacity: 0.9; color: white; text-decoration: none; }

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

             .md-preset-pill { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 16px; font-size: 0.75rem; font-weight: 600; color: #475569; cursor: pointer; transition: 0.2s; }

             .md-preset-pill:hover { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

             /* Form UI */

             .md-form-box { background: #ffffff; border-radius: 8px; padding: 20px; margin-top: 20px; border: 1px solid #cbd5e1; transition: all 0.3s; }

            .md-form-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 16px; }

             .md-form-title { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin: 0; }

             .md-form-group { margin-bottom: 16px; width: 100%; }

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

             .md-input, .md-select, .md-textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-family: inherit; font-size: 0.9rem; transition: all 0.2s; background: #fff; outline: none; }

             .md-input:focus, .md-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

            .md-input.md-error { border-color: #ef4444; background: #fef2f2; }

             .md-char-count { font-size: 0.7rem; color: #94a3b8; text-align: right; margin-top: 4px; font-weight: 600; }

            .md-dup-alert { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; margin-top: 6px; display: none; font-weight: 600; }

            .md-preview-card { background: #f8fafc; border: 1px dashed #cbd5e1; padding: 12px; border-radius: 6px; margin-top: 16px; font-size: 0.85rem; }

 

             .md-ref-grid, .md-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f8fafc; padding: 16px; border-radius: 6px; border: 1px solid #e2e8f0; }

            .md-social-grid { max-height: 250px; overflow-y: auto; }

             .md-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }

             .md-btn { padding: 10px 18px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; color: white; font-size: 0.85rem; transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

             .md-btn-save { background: #3b82f6; flex: 1; min-width: 150px; }

             .md-btn-save:hover { background: #2563eb; }

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

            .md-btn-reset:hover { background: #f1f5f9; color: #0f172a; }

             .md-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; border-top-color: #fff; animation: md-spin 0.6s linear infinite; }

             @media (max-width: 768px) {

                 #mippedia-data-app { padding: 16px; margin: 16px 0; border-radius: 8px; border-left: none; border-right: none; border-radius: 0; }

                 .md-header { flex-direction: column; align-items: flex-start; gap: 12px; }

                 .md-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

                 .md-btn-icon { justify-content: center; width: 100%; }

                .md-dashboard { grid-template-columns: 1fr; gap: 12px; }

                .md-row-display { flex-direction: column; padding: 14px; }

                .md-row-actions { width: 100%; display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #f1f5f9; }

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

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

         // 5. PARSER & SAVE PIPELINE

             if (item.linkTarget && item.linkTarget.trim() !== '') return "[[" + item.linkTarget.trim() + "|" + val + "]]";

                     if (trimmed.length > 2 && trimmed.toLowerCase() !== 'dan' && trimmed.toLowerCase() !== 'atau') return "[[" + trimmed + "]]";

             if (item.link) return "[[" + val + "]]";

             var title = refObj.title || "Referensi";

             if (refObj.date) details.push("Akses: " + formatIndonesianDate(refObj.date));

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

                 window.location.href = location.pathname + "?refresh=" + new Date().getTime();

         // 6. BUILDER UI UTAMA

             // HEADER & TOOLS

             var $titleContainer = $('<div class="md-title-container"><h3 class="md-title">' + svgDatabase + ' Structured Data</h3></div>');

             var $darkBtn = $('<button class="md-btn-icon" title="Theme Toggle">' + svgMoon + ' Theme</button>');

 

            // FITUR 6: Read-Only Mode

             var $viewBtn = $('<button class="md-btn-icon" title="View Only Mode">' + svgView + ' View</button>');

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

 

            $actions.append($('<button class="md-btn-icon" title="Export JSON">' + svgCode + ' JSON</button>').on('click', function() { showJsonModal(rawContent); }));

             $actions.append($('<button class="md-btn-icon" title="Export CSV">' + svgCsv + ' CSV</button>').on('click', exportToCSV));

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

                     saveData(isLocked ? 'Kunci' : 'Buka Kunci', $(this), rawContent);

                 var $addBtn = $('<button class="md-btn-icon" style="background:#3b82f6; color:#fff; border-color:#2563eb;">' + svgEdit + ' Add New</button>');

 

 

             // SEARCH BAR & FITUR 15 (Highlighting)

             if (dataItems.length > 0) {

                 var $searchBox = $('<div class="md-search-box"><span class="md-search-icon">' + svgSearch + '</span><input type="text" class="md-search-input" placeholder="Search data..."></div>');

                         var match = text.indexOf(q) !== -1;

                        else { $(this).removeClass('md-row-highlight'); }

             // DAFTAR BARIS DATA (TANPA NAIK/TURUN)

                 $list.append('<div style="color:#64748b; text-align:center; padding: 30px 10px; background:#f8fafc; border-radius:8px; border:1px dashed #cbd5e1; font-size:0.9rem;">No data entries found. Click <b>Add New</b> to create.</div>');

                     var typeBadge = detectDataTypeBadge(item);

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

                         displayValHtml = '<a href="' + rawVal + '" target="_blank" style="color:#2563eb; font-weight:600; text-decoration:none;">' + extractDomain(rawVal) + '</a>';

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

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

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

                     var $copyBtn = $('<button class="md-btn-mini" title="Copy Text">' + svgCopy + '</button>');

                         setTimeout(function(){ $copyBtn.css('color', '#94a3b8'); }, 1000);

                     // MEDIA SOSIAL

                                 var fullUrl = platform.base + cleanHandle(uname);

                     // REFERENSI

                         $refCard.append('<div class="md-ref-tag-header">' + svgRef + ' Reference Source:</div>');

                         var refTitle = ref.title || "Reference Link";

                             $refCard.append('<a href="' + ensureHttps(ref.url) + '" target="_blank" class="md-ref-header">' + refTitle + '</a>');

                         var details = [];

                         if (ref.author) details.push("Author: " + ref.author);

                         if (ref.site) details.push("Site: " + ref.site);

                         if (ref.publisher) details.push("Publisher: " + ref.publisher);

                         if (ref.date) details.push("Date: " + formatIndonesianDate(ref.date));

                         if (details.length > 0) {

                             $refCard.append('<div style="font-size:0.75rem; color:#64748b; margin-top:2px;">' + details.join(' &bull; ') + '</div>');

                         var $cloneBtn = $('<button class="md-btn-icon" style="padding:6px 10px;" title="Clone Row">' + svgClone + ' Clone</button>');

 

                        var $editIcon = $('<button class="md-btn-icon" style="padding:6px 10px;">' + svgEdit + ' Edit</button>');

                         $ctrls.append($editIcon);

         // 7. FORM EDIT (SMART FEATURES IMPLEMENTATION)

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

             // FITUR 11: Form Accordion

            $header.append('<h4 class="md-form-title">' + (isNew ? 'Add New Data Entry' : 'Edit Data Entry') + '</h4>');

 

 

             var $propGroup = $('<div class="md-form-group"><label>Data Label (Required)</label><input type="text" id="md-inp-prop" class="md-input" value="' + (currentData.prop || '') + '"><div class="md-dup-alert" id="md-dup-msg">Alert: This label already exists in the dataset!</div></div>');

                 $pill.on('click', function() { $('#md-inp-prop').val(lbl).trigger('input'); });

             $formBody.append($propGroup);

             // Value Box + FITUR 7 (Char Counter)

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

             $valBox.append('<div class="md-char-count" id="md-char-counter">0 chars</div>');

             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.85rem;"><input type="checkbox" id="md-inp-link" ' + chkLink + '> Standard Wikilink [[Title]]</label>');

             $wikilinkOpts.append('<label style="display:flex; align-items:center; gap:8px; font-size:0.85rem;"><input type="checkbox" id="md-inp-split" ' + chkSplit + '> Smart Split Wikilink</label>');

             $wikilinkOpts.append('<div style="margin-top:4px;"><label style="font-size:0.8rem; color:#475569;">Custom Target (Piped Link):</label><input type="text" id="md-inp-target" class="md-input" style="padding:8px 10px; font-size:0.85rem;" value="' + (currentData.linkTarget || '') + '"></div>');

             $formBody.append($valBox);

             // Media Sosial

             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:#eff6ff; padding:10px; border-radius:6px; color:#1e40af; border:1px solid #bfdbfe;"><input type="checkbox" id="md-chk-person" ' + chkPerson + '> Enable Social Media & Music Links</label>');

                 var $socInp = $('<input type="text" id="md-soc-' + key + '" class="md-input" placeholder="Username / ID" value="' + valUname + '">');

                $socialGrid.append('<div><label style="font-size:0.8rem;">' + p.name + '</label></div>').find('div').last().append($socInp);

             $formBody.append($socialSec);

             // Referensi

             $refArea.append('<label style="font-size:0.95rem; border-bottom:1px solid #e2e8f0; padding-bottom:6px;">Reference Source</label>');

            var $refGrid = $('<div class="md-ref-grid" style="margin-top:10px;"></div>');

             var $typeSel = $('<select id="md-ref-type" class="md-select"><option value="">-- Main Type --</option></select>');

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

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

             $refGrid.append('<div><label style="font-size:0.8rem;">Main Type</label></div>').find('div').last().append($typeSel);

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

             var $urlInput = $('<input type="url" id="md-ref-url" class="md-input" placeholder="https://..." value="' + (currentRef.url || '') + '">');

                 if (u && !$('#md-ref-site').val().trim()) $('#md-ref-site').val(extractDomain(u));

                 if (u && !$('#md-ref-title').val().trim()) $('#md-ref-title').val("Reference from " + extractDomain(u));

             $refGrid.append('<div class="md-grid-full"><label style="font-size:0.8rem;">Reference URL</label></div>').find('div').last().append($urlInput);

             $refGrid.append('<div><label style="font-size:0.8rem;">Article Title</label><input type="text" id="md-ref-title" class="md-input" value="' + (currentRef.title || '') + '"></div>');

             $refGrid.append('<div><label style="font-size:0.8rem;">Site Name</label><input type="text" id="md-ref-site" class="md-input" value="' + (currentRef.site || '') + '"></div>');

             $refGrid.append('<div><label style="font-size:0.8rem;">Author</label><input type="text" id="md-ref-author" class="md-input" value="' + (currentRef.author || '') + '"></div>');

             $refGrid.append('<div><label style="font-size:0.8rem;">Publisher</label><input type="text" id="md-ref-publisher" class="md-input" value="' + (currentRef.publisher || '') + '"></div>');

             $formBody.append($refArea);

 

            $formBody.append($previewBox);

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

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

 

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

                 var $btnDelete = $('<button class="md-btn md-btn-delete">Delete <span class="md-spinner"></span></button>');

                     if(confirm('Are you sure you want to delete this item?')) {

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

             $form.append($formBody);

                 $('#md-social-box').css('display', $(this).is(':checked') ? 'grid' : 'none');

                 updateLivePreview();

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

                     alert("Data Label and Value are required!"); return;

                         var valU = cleanHandle($('#md-soc-' + k).val());

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

         // 8. JSON EXPORT & IMPORT MODAL

             $box.append('<div class="md-form-header"><h4 class="md-form-title">JSON Import / Export</h4></div>');

             var $txt = $('<textarea class="md-textarea" rows="12" style="font-family:monospace; font-size:0.8rem; background:#f8fafc;"></textarea>').val(jsonStr);

             var $btnImport = $('<button class="md-btn md-btn-save">Import & Save <span class="md-spinner"></span></button>');

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

                         saveData('Impor JSON', $(this), rawContent);

                     } else { alert("JSON format must be an Array!"); }

                 } catch(e) { alert("Invalid JSON: " + e.message); }

         // 9. INITIALIZE