@accelerated-agency/visual-editor 0.5.4 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/vite.cjs +471 -79
  2. package/dist/vite.js +471 -79
  3. package/package.json +1 -1
package/dist/vite.js CHANGED
@@ -1074,7 +1074,7 @@ margin-right:4px;
1074
1074
  }
1075
1075
  .sec-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.12)}
1076
1076
  .sec-thumb{
1077
- background:var(--bg-sub);height:72px;display:flex;align-items:center;
1077
+ background:var(--bg-sub);height:auto;display:flex;align-items:center;
1078
1078
  justify-content:center;font-size:22px;border-bottom:1px solid var(--border);
1079
1079
  overflow:hidden;
1080
1080
  }
@@ -1100,6 +1100,21 @@ margin-right:4px;
1100
1100
  #el-info-sel{font-size:10px;color:var(--accent-txt);font-family:var(--font-mono);margin-top:2px;word-break:break-all;opacity:.8}
1101
1101
 
1102
1102
  /* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1103
+ #tab-design.rp-pane.active{
1104
+ display:flex;
1105
+ flex-direction:column;
1106
+ min-height:0;
1107
+ overflow-y:auto;
1108
+ overflow-x:hidden;
1109
+ }
1110
+ #rp-accordion.rp-accordion{
1111
+ flex:1;
1112
+ min-height:0;
1113
+ overflow-y:auto;
1114
+ overflow-x:hidden;
1115
+ }
1116
+ #rp-accordion.rp-accordion::-webkit-scrollbar{width:3px}
1117
+ #rp-accordion.rp-accordion::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
1103
1118
  .acc-section{border-bottom:1px solid var(--border-sub)}
1104
1119
  .acc-hd{
1105
1120
  display:flex;align-items:center;padding:11px 14px;cursor:pointer;
@@ -1228,6 +1243,16 @@ select.pr-inp{cursor:pointer;background:#fff}
1228
1243
  }
1229
1244
  .img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
1230
1245
 
1246
+ /* \u2500\u2500 Video properties panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1247
+ .video-preview{
1248
+ width:100%;height:120px;object-fit:contain;border:1px solid var(--border);
1249
+ border-radius:6px;background:#000;margin-bottom:8px;display:block
1250
+ }
1251
+ .embed-preview{
1252
+ width:100%;aspect-ratio:16/9;border:1px solid var(--border);
1253
+ border-radius:6px;background:#000;margin-bottom:8px;display:block;border:none
1254
+ }
1255
+
1231
1256
  /* \u2500\u2500 Right panel main tabs (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1232
1257
  #main-tabs{
1233
1258
  display:flex;
@@ -1369,9 +1394,56 @@ select.pr-inp{cursor:pointer;background:#fff}
1369
1394
  .history-remove{
1370
1395
  margin-top:2px;
1371
1396
  }
1397
+
1398
+ /* \u2500\u2500 Minimum screen size gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1399
+ #ve-min-screen-notice{
1400
+ display:none;
1401
+ position:fixed;
1402
+ inset:0;
1403
+ z-index:99999;
1404
+ flex-direction:column;
1405
+ align-items:center;
1406
+ justify-content:center;
1407
+ gap:12px;
1408
+ padding:24px;
1409
+ text-align:center;
1410
+ background:#f1f5f9;
1411
+ color:#404040;
1412
+ }
1413
+ #ve-min-screen-notice .ve-min-screen-icon{
1414
+ font-size:40px;
1415
+ color:#737373;
1416
+ line-height:1;
1417
+ }
1418
+ #ve-min-screen-notice .ve-min-screen-title{
1419
+ font-size:18px;
1420
+ font-weight:600;
1421
+ color:#262626;
1422
+ max-width:420px;
1423
+ }
1424
+ #ve-min-screen-notice .ve-min-screen-desc{
1425
+ font-size:14px;
1426
+ color:#737373;
1427
+ max-width:420px;
1428
+ line-height:1.5;
1429
+ }
1430
+ @media (max-width:1100px){
1431
+ #app,
1432
+ #custom-css-modal{
1433
+ display:none!important;
1434
+ }
1435
+ #ve-min-screen-notice{
1436
+ display:flex;
1437
+ }
1438
+ }
1372
1439
  </style>
1373
1440
  </head>
1374
1441
  <body class="mode-editor">
1442
+ <div id="ve-min-screen-notice" aria-live="polite">
1443
+ <div class="ve-min-screen-icon"><i class="bi bi-display"></i></div>
1444
+ <div class="ve-min-screen-title">Please switch to greater or bigger screen to use Visual Editor</div>
1445
+ <div class="ve-min-screen-desc">The Visual Editor requires a screen width of at least 1100px.</div>
1446
+ </div>
1375
1447
  <div id="app">
1376
1448
  <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
1377
1449
  <div id="toolbar">
@@ -1593,13 +1665,13 @@ select.pr-inp{cursor:pointer;background:#fff}
1593
1665
  <!-- Left-tab controls moved here -->
1594
1666
  <div class="lp-tabs-container section-components-tabs-container">
1595
1667
  <div class="lp-tabs">
1596
- <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
1668
+ <div class="lp-tab active" onclick="switchSectionComponentsTab('components')">Components</div>
1597
1669
  <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
1598
1670
  </div>
1599
1671
  <div class="lp-tab close-section-components-panel collapsed" onclick="toggleSectionComponentsBody()" title="Toggle components list"><i class="bi bi-chevron-down"></i></div>
1600
1672
  </div>
1601
1673
  <div class="lp-body collapsed">
1602
- <div id="tab-components" class="tab-pane"></div>
1674
+ <div id="tab-components" class="tab-pane active"></div>
1603
1675
  <div id="tab-sections" class="tab-pane"></div>
1604
1676
  </div>
1605
1677
  </div>
@@ -1621,15 +1693,33 @@ select.pr-inp{cursor:pointer;background:#fff}
1621
1693
  <div class="ns-icon"><i class="bi bi-cursor-text"></i></div>
1622
1694
  Click any element on the page to edit its properties
1623
1695
  </div>
1624
- <div id="rp-accordion" style="display:none">
1696
+ <div id="rp-accordion" class="rp-accordion" style="display:none">
1625
1697
 
1626
1698
  <!-- Image section \u2014 only shown when an <img> is selected -->
1627
- <div class="acc-section open" id="acc-image" style="display:none">
1699
+ <div class="acc-section" id="acc-image" style="display:none">
1628
1700
  <div class="acc-hd" onclick="toggleAcc('image')">Image<i class="bi bi-chevron-right acc-arrow"></i></div>
1629
1701
  <div class="acc-body" id="acc-body-image"></div>
1630
1702
  </div>
1631
1703
 
1632
- <div class="acc-section open" id="acc-content">
1704
+ <!-- Video section \u2014 only shown when a <video> is selected -->
1705
+ <div class="acc-section" id="acc-video" style="display:none">
1706
+ <div class="acc-hd" onclick="toggleAcc('video')">Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1707
+ <div class="acc-body" id="acc-body-video"></div>
1708
+ </div>
1709
+
1710
+ <!-- YouTube section \u2014 only shown when a YouTube iframe is selected -->
1711
+ <div class="acc-section" id="acc-youtube" style="display:none">
1712
+ <div class="acc-hd" onclick="toggleAcc('youtube')">YouTube Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1713
+ <div class="acc-body" id="acc-body-youtube"></div>
1714
+ </div>
1715
+
1716
+ <!-- Vimeo section \u2014 only shown when a Vimeo iframe is selected -->
1717
+ <div class="acc-section" id="acc-vimeo" style="display:none">
1718
+ <div class="acc-hd" onclick="toggleAcc('vimeo')">Vimeo Video<i class="bi bi-chevron-right acc-arrow"></i></div>
1719
+ <div class="acc-body" id="acc-body-vimeo"></div>
1720
+ </div>
1721
+
1722
+ <div class="acc-section" id="acc-content">
1633
1723
  <div class="acc-hd" onclick="toggleAcc('content')">HTML Content<i class="bi bi-chevron-right acc-arrow"></i></div>
1634
1724
  <div class="acc-body" id="acc-body-content"></div>
1635
1725
  </div>
@@ -1811,27 +1901,91 @@ function renderCroSectionThumb(sec) {
1811
1901
  }
1812
1902
 
1813
1903
  var BASE_COMPONENTS = [
1814
- { name:'Heading', icon:'bi-type-h1', defaultAccSection:'typography', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1815
- { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'typography', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1904
+ { name:'Heading', icon:'bi-type-h1', defaultAccSection:'content', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
1905
+ { name:'Paragraph', icon:'bi-paragraph', defaultAccSection:'content', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
1816
1906
  { name:'Image', icon:'bi-image', defaultAccSection:'image', html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="display:block;max-width:100%;height:auto;border-radius:8px">' },
1817
- { name:'Button', icon:'bi-hand-index', defaultAccSection:'background', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1818
- { name:'Link', icon:'bi-link-45deg', defaultAccSection:'typography', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1907
+ { name:'Button', icon:'bi-hand-index', defaultAccSection:'content', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
1908
+ { name:'Link', icon:'bi-link-45deg', defaultAccSection:'content', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
1819
1909
  { name:'Divider', icon:'bi-dash-lg', defaultAccSection:'background', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
1820
- { name:'List', icon:'bi-list-ul', defaultAccSection:'typography', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1821
- { name:'Video', icon:'bi-play-circle', defaultAccSection:'content', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1822
- { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'content', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1823
- { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'content', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1910
+ { name:'List', icon:'bi-list-ul', defaultAccSection:'content', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
1911
+ { name:'Video', icon:'bi-play-circle', defaultAccSection:'video', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
1912
+ { name:'Youtube Video', icon:'bi-youtube', defaultAccSection:'youtube', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1913
+ { name:'Vimeo Video', icon:'bi-vimeo', defaultAccSection:'vimeo', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
1824
1914
  { name:'Form', icon:'bi-ui-radios', defaultAccSection:'content', html:'<form style="padding:16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;max-width:400px;box-sizing:border-box"><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Name</label><input type="text" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Email</label><input type="email" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><button type="submit" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Submit</button></form>' },
1825
- { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'size', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1826
- { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'size', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1827
- { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'size', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1828
- { name:'Card', icon:'bi-card-text', defaultAccSection:'shadow', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1829
- { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'background', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1830
- { name:'Badge', icon:'bi-tag', defaultAccSection:'typography', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1915
+ { name:'Input', icon:'bi-input-cursor-text', defaultAccSection:'content', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
1916
+ { name:'Textarea', icon:'bi-textarea-resize', defaultAccSection:'content', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
1917
+ { name:'Select', icon:'bi-menu-button-wide', defaultAccSection:'content', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
1918
+ { name:'Card', icon:'bi-card-text', defaultAccSection:'content', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
1919
+ { name:'Alert', icon:'bi-exclamation-triangle', defaultAccSection:'content', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
1920
+ { name:'Badge', icon:'bi-tag', defaultAccSection:'content', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
1831
1921
  { name:'Container', icon:'bi-layout-three-columns', defaultAccSection:'spacing', html:'<div style="width:100%;max-width:960px;margin:0 auto;padding:16px;box-sizing:border-box"><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 1</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 2</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 3</p></div></div></div>' },
1832
1922
  { name:'2 Cols', icon:'bi-layout-split', defaultAccSection:'spacing', html:'<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;box-sizing:border-box"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Left column</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Right column</p></div></div>' },
1833
1923
  ];
1834
1924
 
1925
+ var baseComponentAccRegistry = null;
1926
+
1927
+ function buildBaseComponentAccRegistry() {
1928
+ if (baseComponentAccRegistry) return baseComponentAccRegistry;
1929
+ var matchers = [];
1930
+ var tagFallback = {};
1931
+
1932
+ BASE_COMPONENTS.forEach(function(comp) {
1933
+ var section = comp.defaultAccSection || 'content';
1934
+ var html = String(comp.html || '').trim();
1935
+ if (!html) return;
1936
+ var tagMatch = html.match(/^<([a-z0-9-]+)/i);
1937
+ if (!tagMatch) return;
1938
+ var rootTag = tagMatch[1].toLowerCase();
1939
+ var matcher = { tag: rootTag, section: section };
1940
+
1941
+ if (rootTag === 'div') {
1942
+ if (html.indexOf('role="alert"') >= 0) matcher.role = 'alert';
1943
+ else if (html.indexOf('repeat(2') >= 0) matcher.gridCols = 2;
1944
+ else if (html.indexOf('repeat(3') >= 0) matcher.gridCols = 3;
1945
+ }
1946
+
1947
+ if (matcher.role || matcher.gridCols) matchers.push(matcher);
1948
+ else if (tagFallback[rootTag] === undefined) tagFallback[rootTag] = section;
1949
+ });
1950
+
1951
+ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(tag) {
1952
+ if (tagFallback[tag] === undefined) tagFallback[tag] = tagFallback.h2 || 'content';
1953
+ });
1954
+ if (tagFallback.ol === undefined) tagFallback.ol = tagFallback.ul || 'content';
1955
+
1956
+ baseComponentAccRegistry = { matchers: matchers, tagFallback: tagFallback };
1957
+ return baseComponentAccRegistry;
1958
+ }
1959
+
1960
+ function matchesBaseComponentAccMatcher(el, matcher) {
1961
+ if (!el || !matcher || el.tagName.toLowerCase() !== matcher.tag) return false;
1962
+ if (matcher.role) return el.getAttribute('role') === matcher.role;
1963
+ if (matcher.gridCols) {
1964
+ var style = (el.getAttribute('style') || '').toLowerCase();
1965
+ return style.indexOf('grid-template-columns') >= 0 &&
1966
+ style.indexOf('repeat(' + matcher.gridCols) >= 0;
1967
+ }
1968
+ return true;
1969
+ }
1970
+
1971
+ function getTypeDefaultAccSection(el) {
1972
+ if (!el) return 'content';
1973
+ if (isYoutubeVideoElement(el)) return 'youtube';
1974
+ if (isVimeoVideoElement(el)) return 'vimeo';
1975
+
1976
+ var registry = buildBaseComponentAccRegistry();
1977
+ var i;
1978
+ for (i = 0; i < registry.matchers.length; i++) {
1979
+ if (matchesBaseComponentAccMatcher(el, registry.matchers[i])) {
1980
+ return registry.matchers[i].section;
1981
+ }
1982
+ }
1983
+
1984
+ var tag = el.tagName.toLowerCase();
1985
+ if (registry.tagFallback[tag]) return registry.tagFallback[tag];
1986
+ return 'content';
1987
+ }
1988
+
1835
1989
  // \u2500\u2500 PostMessage bridge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
1836
1990
  var CHANNEL = 'vvveb-bridge';
1837
1991
 
@@ -2541,6 +2695,9 @@ function toggleSectionComponentsBody() {
2541
2695
  if (!body) return;
2542
2696
  var collapsed = body.classList.toggle('collapsed');
2543
2697
  if (toggle) toggle.classList.toggle('collapsed', collapsed);
2698
+ if (!collapsed) {
2699
+ switchSectionComponentsTab(currentSectionComponentsTab || 'components');
2700
+ }
2544
2701
  }
2545
2702
 
2546
2703
  function toggleSectionComponentsPanel(forceVisible) {
@@ -2570,24 +2727,97 @@ function handleAddElementClick(e) {
2570
2727
  }
2571
2728
 
2572
2729
  // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
2730
+ function closeAllAccSections(exceptName) {
2731
+ var sections = document.querySelectorAll('#rp-accordion .acc-section');
2732
+ for (var i = 0; i < sections.length; i++) {
2733
+ var sec = sections[i];
2734
+ var id = sec.id || '';
2735
+ var name = id.replace(/^acc-/, '');
2736
+ if (exceptName && name === exceptName) continue;
2737
+ sec.classList.remove('open');
2738
+ }
2739
+ }
2740
+
2741
+ function getRpAccordion() {
2742
+ return document.getElementById('rp-accordion');
2743
+ }
2744
+
2745
+ function scrollRpAccordionContainerToTop() {
2746
+ var accordion = getRpAccordion();
2747
+ if (!accordion) return;
2748
+
2749
+ try {
2750
+ accordion.scrollIntoView({ block: 'start', inline: 'nearest' });
2751
+ } catch(_) {
2752
+ try { accordion.scrollIntoView(true); } catch(__) {}
2753
+ }
2754
+
2755
+ var node = accordion.parentElement;
2756
+ while (node) {
2757
+ try {
2758
+ var style = window.getComputedStyle(node);
2759
+ var canScroll = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
2760
+ node.scrollHeight > node.clientHeight;
2761
+ if (canScroll) {
2762
+ var ar = accordion.getBoundingClientRect();
2763
+ var nr = node.getBoundingClientRect();
2764
+ node.scrollTop = Math.max(0, node.scrollTop + (ar.top - nr.top));
2765
+ break;
2766
+ }
2767
+ } catch(_) {}
2768
+ node = node.parentElement;
2769
+ }
2770
+ }
2771
+
2772
+ function scrollOpenAccSectionIntoView(sec) {
2773
+ var accordion = getRpAccordion();
2774
+ if (!accordion) return;
2775
+ var openSec =
2776
+ (sec && sec.classList.contains('open') && sec.style.display !== 'none')
2777
+ ? sec
2778
+ : accordion.querySelector('.acc-section.open');
2779
+ if (!openSec || openSec.style.display === 'none') return;
2780
+
2781
+ function doScroll() {
2782
+ scrollRpAccordionContainerToTop();
2783
+ var ar = accordion.getBoundingClientRect();
2784
+ var sr = openSec.getBoundingClientRect();
2785
+ accordion.scrollTop = Math.max(0, accordion.scrollTop + (sr.top - ar.top));
2786
+ }
2787
+
2788
+ requestAnimationFrame(function() {
2789
+ doScroll();
2790
+ requestAnimationFrame(function() {
2791
+ doScroll();
2792
+ setTimeout(doScroll, 0);
2793
+ });
2794
+ });
2795
+ }
2796
+
2797
+ function openAccSection(name, options) {
2798
+ if (!name) return null;
2799
+ var sec = document.getElementById('acc-' + name);
2800
+ if (!sec || sec.style.display === 'none') return null;
2801
+ closeAllAccSections(name);
2802
+ sec.classList.add('open');
2803
+ if (!options || options.scroll !== false) scrollOpenAccSectionIntoView(sec);
2804
+ return sec;
2805
+ }
2806
+
2573
2807
  function toggleAcc(name) {
2574
2808
  var sec = document.getElementById('acc-' + name);
2575
- if (sec) sec.classList.toggle('open');
2809
+ if (!sec || sec.style.display === 'none') return;
2810
+ if (sec.classList.contains('open')) {
2811
+ sec.classList.remove('open');
2812
+ return;
2813
+ }
2814
+ openAccSection(name);
2576
2815
  }
2577
2816
 
2578
2817
  function focusDesignAccordionSection(name) {
2579
2818
  if (!name) return;
2580
2819
  if (currentMainTab !== 'design') switchMainTab('design');
2581
- var sec = document.getElementById('acc-' + name);
2582
- if (!sec || sec.style.display === 'none') return;
2583
- sec.classList.add('open');
2584
- requestAnimationFrame(function() {
2585
- try {
2586
- sec.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
2587
- } catch(_) {
2588
- sec.scrollIntoView(true);
2589
- }
2590
- });
2820
+ openAccSection(name);
2591
2821
  }
2592
2822
 
2593
2823
  // \u2500\u2500 Main tab switching (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2662,6 +2892,7 @@ var PROP_META = {
2662
2892
  'pp-referrerpolicy': {label:'Referrer policy', cssProp:null},
2663
2893
  'pp-src': {label:'Src', cssProp:null},
2664
2894
  'pp-video-src': {label:'Src', cssProp:null},
2895
+ 'pp-video-poster': {label:'Poster', cssProp:null},
2665
2896
  'pp-youtube-id': {label:'YouTube video ID', cssProp:null},
2666
2897
  'pp-vimeo-id': {label:'Vimeo video ID', cssProp:null},
2667
2898
  'pp-alt': {label:'Alt', cssProp:null},
@@ -2697,6 +2928,7 @@ function getOriginalValue(inputId, el) {
2697
2928
  case 'pp-referrerpolicy': return el.getAttribute('referrerpolicy') || '';
2698
2929
  case 'pp-src': return el.getAttribute('src') || '';
2699
2930
  case 'pp-video-src': return getVideoSrc(el);
2931
+ case 'pp-video-poster': return el.getAttribute('poster') || '';
2700
2932
  case 'pp-youtube-id': return getYoutubeVideoId(el);
2701
2933
  case 'pp-vimeo-id': return getVimeoVideoId(el);
2702
2934
  case 'pp-alt': return el.getAttribute('alt') || '';
@@ -2846,6 +3078,7 @@ function revertChangeOnDom(change) {
2846
3078
  case 'pp-referrerpolicy': orig ? el.setAttribute('referrerpolicy', orig) : el.removeAttribute('referrerpolicy'); break;
2847
3079
  case 'pp-src': orig ? el.setAttribute('src', orig) : el.removeAttribute('src'); break;
2848
3080
  case 'pp-video-src': orig ? setVideoSrc(el, orig) : setVideoSrc(el, ''); break;
3081
+ case 'pp-video-poster': orig ? el.setAttribute('poster', orig) : el.removeAttribute('poster'); break;
2849
3082
  case 'pp-youtube-id': orig ? setYoutubeVideoId(el, orig) : setYoutubeVideoId(el, ''); break;
2850
3083
  case 'pp-vimeo-id': orig ? setVimeoVideoId(el, orig) : setVimeoVideoId(el, ''); break;
2851
3084
  case 'pp-alt': orig ? el.setAttribute('alt', orig) : el.removeAttribute('alt'); break;
@@ -4426,6 +4659,8 @@ function stateChangeToChainSet(c) {
4426
4659
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4427
4660
  case 'pp-video-src':
4428
4661
  return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4662
+ case 'pp-video-poster':
4663
+ return { selector: c.selector, type: 'attribute', attribute: 'poster', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4429
4664
  case 'pp-youtube-id':
4430
4665
  return { selector: c.selector, type: 'attribute', attribute: 'data-youtube-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
4431
4666
  case 'pp-vimeo-id':
@@ -4904,7 +5139,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
4904
5139
  }
4905
5140
 
4906
5141
  // \u2500\u2500 Element selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
4907
- function selectElement(el) {
5142
+ function selectElement(el, options) {
4908
5143
  beginSuppressIframeMutationDirty();
4909
5144
  try {
4910
5145
  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
@@ -4918,7 +5153,7 @@ function selectElement(el) {
4918
5153
  document.getElementById('bc-path').textContent = buildSelector(el);
4919
5154
  document.getElementById('bc-path').style.color = 'var(--accent-txt)';
4920
5155
  document.getElementById('no-sel').style.display = 'none';
4921
- renderRightPanel(el);
5156
+ renderRightPanel(el, options);
4922
5157
  updateSelectionToolbar();
4923
5158
  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
4924
5159
  var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
@@ -5716,6 +5951,25 @@ function isFormControlElement(el) {
5716
5951
  return tag === 'input' || tag === 'textarea' || tag === 'select';
5717
5952
  }
5718
5953
 
5954
+ function shouldShowInnerContentFields(el) {
5955
+ if (!el || el.nodeType !== 1) return false;
5956
+ var tag = (el.tagName || '').toLowerCase();
5957
+ if (tag === 'input' || tag === 'textarea' || tag === 'video') return false;
5958
+ if (isEmbeddedVideoIframe(el)) return false;
5959
+ return true;
5960
+ }
5961
+
5962
+ function elementHasHtmlChildren(el) {
5963
+ if (!el || el.nodeType !== 1) return false;
5964
+ try {
5965
+ var nodes = el.childNodes;
5966
+ for (var i = 0; i < nodes.length; i++) {
5967
+ if (nodes[i].nodeType === 1) return true;
5968
+ }
5969
+ } catch(_) {}
5970
+ return false;
5971
+ }
5972
+
5719
5973
  function getFormControlValue(el) {
5720
5974
  if (!isFormControlElement(el)) return '';
5721
5975
  try {
@@ -5857,12 +6111,7 @@ function buildAnchorContentFieldsHtml(el) {
5857
6111
  'Rel',
5858
6112
  '<input class="pr-inp" id="pp-rel" type="text" value="'+esc(el.getAttribute('rel')||'')+'" placeholder="noopener noreferrer">'
5859
6113
  ) +
5860
- pr2(
5861
- 'Download',
5862
- '<input class="pr-inp" id="pp-download" type="text" value="'+esc(el.getAttribute('download')||'')+'" placeholder="filename">',
5863
- 'Title',
5864
- '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">'
5865
- ) +
6114
+ pr('Title', '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">') +
5866
6115
  pr2(
5867
6116
  'Hreflang',
5868
6117
  '<input class="pr-inp" id="pp-hreflang" type="text" value="'+esc(el.getAttribute('hreflang')||'')+'" placeholder="en">',
@@ -6082,8 +6331,122 @@ function removeSizesEntry(i) {
6082
6331
  }
6083
6332
  }
6084
6333
 
6334
+ // \u2500\u2500 Video section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6335
+ var _videoEl = null;
6336
+
6337
+ function renderVideoSection(el) {
6338
+ _videoEl = el;
6339
+ var sel = buildSelector(el);
6340
+ var src = getVideoSrc(el);
6341
+ var html = '';
6342
+
6343
+ if (src) {
6344
+ html += '<video class="video-preview" src="'+esc(src)+'" controls muted></video>';
6345
+ }
6346
+
6347
+ html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
6348
+ html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
6349
+
6350
+ document.getElementById('acc-body-video').innerHTML = html;
6351
+
6352
+ var srcInp = document.getElementById('pp-video-src');
6353
+ if (srcInp) srcInp.addEventListener('input', function() {
6354
+ var orig = getOriginalValue('pp-video-src', el);
6355
+ setVideoSrc(el, srcInp.value);
6356
+ var prev = document.querySelector('.video-preview');
6357
+ if (prev) {
6358
+ prev.src = srcInp.value;
6359
+ prev.style.display = srcInp.value ? '' : 'none';
6360
+ } else if (srcInp.value) {
6361
+ renderVideoSection(el);
6362
+ }
6363
+ logChange(sel, 'pp-video-src', srcInp.value, el, orig);
6364
+ });
6365
+ var posterInp = document.getElementById('pp-video-poster');
6366
+ if (posterInp) posterInp.addEventListener('input', function() {
6367
+ var orig = el.getAttribute('poster') || '';
6368
+ if (posterInp.value) el.setAttribute('poster', posterInp.value);
6369
+ else el.removeAttribute('poster');
6370
+ var prev = document.querySelector('.video-preview');
6371
+ if (prev) prev.poster = posterInp.value;
6372
+ logChange(sel, 'pp-video-poster', posterInp.value, el, orig);
6373
+ });
6374
+ }
6375
+
6376
+ // \u2500\u2500 YouTube / Vimeo section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6377
+ var _youtubeEl = null;
6378
+ var _vimeoEl = null;
6379
+
6380
+ function renderYoutubeSection(el) {
6381
+ _youtubeEl = el;
6382
+ var sel = buildSelector(el);
6383
+ var id = getYoutubeVideoId(el);
6384
+ var html = '';
6385
+
6386
+ if (id) {
6387
+ html += '<iframe class="embed-preview" src="https://www.youtube.com/embed/'+esc(id)+'" title="YouTube video preview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
6388
+ }
6389
+
6390
+ html += pr('YouTube video ID', '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(id)+'" placeholder="dQw4w9WgXcQ">');
6391
+
6392
+ document.getElementById('acc-body-youtube').innerHTML = html;
6393
+
6394
+ var idInp = document.getElementById('pp-youtube-id');
6395
+ if (idInp) idInp.addEventListener('input', function() {
6396
+ var orig = getOriginalValue('pp-youtube-id', el);
6397
+ setYoutubeVideoId(el, idInp.value);
6398
+ var normalized = normalizeYoutubeVideoId(idInp.value);
6399
+ var prev = document.querySelector('#acc-body-youtube .embed-preview');
6400
+ if (prev) {
6401
+ if (normalized) {
6402
+ prev.src = 'https://www.youtube.com/embed/' + normalized;
6403
+ prev.style.display = '';
6404
+ } else {
6405
+ prev.style.display = 'none';
6406
+ }
6407
+ } else if (normalized) {
6408
+ renderYoutubeSection(el);
6409
+ }
6410
+ logChange(sel, 'pp-youtube-id', idInp.value, el, orig);
6411
+ });
6412
+ }
6413
+
6414
+ function renderVimeoSection(el) {
6415
+ _vimeoEl = el;
6416
+ var sel = buildSelector(el);
6417
+ var id = getVimeoVideoId(el);
6418
+ var html = '';
6419
+
6420
+ if (id) {
6421
+ html += '<iframe class="embed-preview" src="https://player.vimeo.com/video/'+esc(id)+'" title="Vimeo video preview" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
6422
+ }
6423
+
6424
+ html += pr('Vimeo video ID', '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(id)+'" placeholder="76979871">');
6425
+
6426
+ document.getElementById('acc-body-vimeo').innerHTML = html;
6427
+
6428
+ var idInp = document.getElementById('pp-vimeo-id');
6429
+ if (idInp) idInp.addEventListener('input', function() {
6430
+ var orig = getOriginalValue('pp-vimeo-id', el);
6431
+ setVimeoVideoId(el, idInp.value);
6432
+ var normalized = normalizeVimeoVideoId(idInp.value);
6433
+ var prev = document.querySelector('#acc-body-vimeo .embed-preview');
6434
+ if (prev) {
6435
+ if (normalized) {
6436
+ prev.src = 'https://player.vimeo.com/video/' + normalized;
6437
+ prev.style.display = '';
6438
+ } else {
6439
+ prev.style.display = 'none';
6440
+ }
6441
+ } else if (normalized) {
6442
+ renderVimeoSection(el);
6443
+ }
6444
+ logChange(sel, 'pp-vimeo-id', idInp.value, el, orig);
6445
+ });
6446
+ }
6447
+
6085
6448
  // \u2500\u2500 Right panel rendering (accordion) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6086
- function renderRightPanel(el) {
6449
+ function renderRightPanel(el, options) {
6087
6450
  if (!el) return;
6088
6451
  var cs = el.ownerDocument.defaultView.getComputedStyle(el);
6089
6452
  var tag = el.tagName.toLowerCase();
@@ -6094,17 +6457,51 @@ function renderRightPanel(el) {
6094
6457
  document.getElementById('el-info').style.display = '';
6095
6458
  document.getElementById('rp-accordion').style.display = '';
6096
6459
 
6097
- // \u2500\u2500 Image section (show + auto-open for <img>) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6460
+ // \u2500\u2500 Image / video accordions (show matching section at top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6098
6461
  var imgSec = document.getElementById('acc-image');
6099
6462
  if (tag === 'img') {
6100
6463
  imgSec.style.display = '';
6101
- if (!imgSec.classList.contains('open')) imgSec.classList.add('open');
6102
6464
  renderImageSection(el);
6103
6465
  } else {
6104
6466
  imgSec.style.display = 'none';
6467
+ imgSec.classList.remove('open');
6105
6468
  _imageEl = null;
6106
6469
  }
6107
6470
 
6471
+ var videoSec = document.getElementById('acc-video');
6472
+ if (tag === 'video') {
6473
+ videoSec.style.display = '';
6474
+ renderVideoSection(el);
6475
+ } else {
6476
+ videoSec.style.display = 'none';
6477
+ videoSec.classList.remove('open');
6478
+ _videoEl = null;
6479
+ }
6480
+
6481
+ var youtubeSec = document.getElementById('acc-youtube');
6482
+ if (isYoutubeVideoElement(el)) {
6483
+ youtubeSec.style.display = '';
6484
+ renderYoutubeSection(el);
6485
+ } else {
6486
+ youtubeSec.style.display = 'none';
6487
+ youtubeSec.classList.remove('open');
6488
+ _youtubeEl = null;
6489
+ }
6490
+
6491
+ var vimeoSec = document.getElementById('acc-vimeo');
6492
+ if (isVimeoVideoElement(el)) {
6493
+ vimeoSec.style.display = '';
6494
+ renderVimeoSection(el);
6495
+ } else {
6496
+ vimeoSec.style.display = 'none';
6497
+ vimeoSec.classList.remove('open');
6498
+ _vimeoEl = null;
6499
+ }
6500
+
6501
+ var activeAccSection =
6502
+ (options && options.preferredAccSection) ||
6503
+ getTypeDefaultAccSection(el);
6504
+
6108
6505
  // \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
6109
6506
  document.getElementById('acc-body-typography').innerHTML =
6110
6507
  pr('Color', '<input type="color" class="pr-color" id="pp-color" value="'+esc(rgbToHex(cs.color))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:var(--font-mono)">'+esc(cs.color)+'</span>') +
@@ -6210,8 +6607,6 @@ function renderRightPanel(el) {
6210
6607
  if (tag==='img') attrHtml +=
6211
6608
  pr('Src', '<input class="pr-inp" id="pp-src" type="url" value="'+esc(el.getAttribute('src')||'')+'">') +
6212
6609
  pr('Alt', '<input class="pr-inp" id="pp-alt" type="text" value="'+esc(el.getAttribute('alt')||'')+'">');
6213
- if (tag==='textarea') attrHtml +=
6214
- pr('Placeholder', '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'">');
6215
6610
  document.getElementById('acc-body-attributes').innerHTML = attrHtml;
6216
6611
 
6217
6612
  // \u2500\u2500 HTML Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6222,32 +6617,21 @@ function renderRightPanel(el) {
6222
6617
  subLbl('Value') +
6223
6618
  '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
6224
6619
  }
6225
- if (tag==='input') {
6620
+ if (tag==='input' || tag==='textarea') {
6226
6621
  contentHtml +=
6227
6622
  subLbl('Placeholder') +
6228
6623
  '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
6229
6624
  }
6230
- if (tag==='video') {
6231
- contentHtml +=
6232
- subLbl('Src') +
6233
- '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(getVideoSrc(el))+'" placeholder="https://example.com/video.mp4" style="width:100%;margin-bottom:8px">';
6234
- }
6235
- if (isYoutubeVideoElement(el)) {
6236
- contentHtml +=
6237
- subLbl('YouTube video ID') +
6238
- '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(getYoutubeVideoId(el))+'" placeholder="dQw4w9WgXcQ" style="width:100%;margin-bottom:8px">';
6239
- }
6240
- if (isVimeoVideoElement(el)) {
6241
- contentHtml +=
6242
- subLbl('Vimeo video ID') +
6243
- '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(getVimeoVideoId(el))+'" placeholder="76979871" style="width:100%;margin-bottom:8px">';
6244
- }
6245
- if (tag!=='input' && tag!=='video' && !isEmbeddedVideoIframe(el)) {
6246
- contentHtml +=
6247
- subLbl('Inner Text') +
6248
- '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>' +
6249
- subLbl('Inner HTML') +
6250
- '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6625
+ if (shouldShowInnerContentFields(el)) {
6626
+ if (elementHasHtmlChildren(el)) {
6627
+ contentHtml +=
6628
+ subLbl('Inner HTML') +
6629
+ '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
6630
+ } else {
6631
+ contentHtml +=
6632
+ subLbl('Inner Text') +
6633
+ '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>';
6634
+ }
6251
6635
  }
6252
6636
  document.getElementById('acc-body-content').innerHTML = contentHtml;
6253
6637
 
@@ -6303,15 +6687,11 @@ function renderRightPanel(el) {
6303
6687
  ['pp-href', function(v){setOptionalAnchorAttr(el,'href',v)}],
6304
6688
  ['pp-target', function(v){setOptionalAnchorAttr(el,'target',v)}],
6305
6689
  ['pp-rel', function(v){setOptionalAnchorAttr(el,'rel',v)}],
6306
- ['pp-download', function(v){setOptionalAnchorAttr(el,'download',v)}],
6307
6690
  ['pp-link-title', function(v){setOptionalAnchorAttr(el,'title',v)}],
6308
6691
  ['pp-hreflang', function(v){setOptionalAnchorAttr(el,'hreflang',v)}],
6309
6692
  ['pp-link-type', function(v){setOptionalAnchorAttr(el,'type',v)}],
6310
6693
  ['pp-referrerpolicy', function(v){setOptionalAnchorAttr(el,'referrerpolicy',v)}],
6311
6694
  ['pp-src', function(v){el.setAttribute('src',v)}],
6312
- ['pp-video-src', function(v){setVideoSrc(el, v)}],
6313
- ['pp-youtube-id', function(v){setYoutubeVideoId(el, v)}],
6314
- ['pp-vimeo-id', function(v){setVimeoVideoId(el, v)}],
6315
6695
  ['pp-alt', function(v){el.setAttribute('alt',v)}],
6316
6696
  ['pp-ph', function(v){el.setAttribute('placeholder',v)}],
6317
6697
  ];
@@ -6339,6 +6719,11 @@ function renderRightPanel(el) {
6339
6719
  }
6340
6720
  });
6341
6721
  wireContentFieldSync(el, sel);
6722
+ requestAnimationFrame(function() {
6723
+ requestAnimationFrame(function() {
6724
+ openAccSection(activeAccSection);
6725
+ });
6726
+ });
6342
6727
  }
6343
6728
 
6344
6729
  function wireContentFieldSync(el, sel) {
@@ -6356,11 +6741,11 @@ function wireContentFieldSync(el, sel) {
6356
6741
  logChange(sel, 'pp-value', valueInp.value, el, orig);
6357
6742
  } else if (changedId === 'pp-text') {
6358
6743
  el.innerText = textInp.value;
6359
- htmlInp.value = el.innerHTML;
6744
+ if (htmlInp) htmlInp.value = el.innerHTML;
6360
6745
  logChange(sel, 'pp-text', textInp.value, el, orig);
6361
6746
  } else {
6362
6747
  el.innerHTML = htmlInp.value;
6363
- textInp.value = el.innerText;
6748
+ if (textInp) textInp.value = el.innerText;
6364
6749
  logChange(sel, 'pp-html', htmlInp.value, el, orig);
6365
6750
  }
6366
6751
  } finally {
@@ -6371,9 +6756,11 @@ function wireContentFieldSync(el, sel) {
6371
6756
  valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
6372
6757
  valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
6373
6758
  }
6374
- if (textInp && htmlInp) {
6759
+ if (textInp) {
6375
6760
  textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
6376
6761
  textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
6762
+ }
6763
+ if (htmlInp) {
6377
6764
  htmlInp.addEventListener('input', function() { applyContentChange('pp-html'); });
6378
6765
  htmlInp.addEventListener('change', function() { applyContentChange('pp-html'); });
6379
6766
  }
@@ -7001,10 +7388,11 @@ function insertHtml(html, options) {
7001
7388
  } catch(_) {}
7002
7389
  htmlStr = firstEl.outerHTML;
7003
7390
  }
7004
- if (firstEl) selectElement(firstEl);
7005
- var accSection = options && options.defaultAccSection;
7006
- if (accSection) {
7007
- requestAnimationFrame(function() { focusDesignAccordionSection(accSection); });
7391
+ if (firstEl) {
7392
+ if (currentMainTab !== 'design') switchMainTab('design');
7393
+ selectElement(firstEl, {
7394
+ preferredAccSection: options && options.defaultAccSection,
7395
+ });
7008
7396
  }
7009
7397
  if (activeVarId) {
7010
7398
  var insertRow = {
@@ -7078,7 +7466,9 @@ function renderSidebar(filter) {
7078
7466
  croFiltered.forEach(function(sec) {
7079
7467
  var item = document.createElement('div'); item.className = 'sec-item';
7080
7468
  item.innerHTML = '<div class="sec-thumb">'+renderCroSectionThumb(sec)+'</div><div class="sec-info"><div class="sec-name">'+sec.name+'</div>'+(sec.desc?'<div class="sec-desc">'+sec.desc+'</div>':'')+'</div>';
7081
- item.onclick = function() { insertHtml(sec.html); };
7469
+ item.onclick = function() {
7470
+ insertHtml(sec.html, { defaultAccSection: sec.defaultAccSection || 'content' });
7471
+ };
7082
7472
  secTab.appendChild(item);
7083
7473
  });
7084
7474
  }
@@ -7091,7 +7481,9 @@ function renderSidebar(filter) {
7091
7481
  if (!hasVv) { hasVv = true; var sh = document.createElement('div'); sh.className = 'cg-hdr'; sh.textContent = 'Bootstrap Sections'; secTab.appendChild(sh); }
7092
7482
  var sel = document.createElement('div'); sel.className = 'sec-item';
7093
7483
  sel.innerHTML = '<div class="sec-thumb">\u{1F4D0}</div><div class="sec-info"><div class="sec-name">'+snm+'</div></div>';
7094
- sel.onclick = (function(s){ return function(){ insertHtml(s.html||''); }; })(sec);
7484
+ sel.onclick = (function(s){ return function(){
7485
+ insertHtml(s.html || '', { defaultAccSection: 'content' });
7486
+ }; })(sec);
7095
7487
  secTab.appendChild(sel);
7096
7488
  }
7097
7489
  }