WebOrbiton
v3.0.0.2

FlatlyPage

← Changes All versions
2,769 lines · 143.4 KB
  1. const FLATLY_BASE_URL = window.FLATLY_BASE || '';
  2. ​
  3. function flatlyUrl(path) {
  4. if (!FLATLY_BASE_URL || typeof path !== 'string' || path[0] !== '/' || path[1] === '/') return path;
  5. if (path === FLATLY_BASE_URL || ['/', '?', '#'].some(sep => path.startsWith(FLATLY_BASE_URL + sep))) return path;
  6. return FLATLY_BASE_URL + path;
  7. }
  8. ​
  9. function flatlyRewriteHtml(html) {
  10. if (!FLATLY_BASE_URL) return html;
  11. return html
  12. .replace(/(\s(?:href|src|action|poster|formaction|data-src)\s*=\s*)(["'])(\/(?!\/)[^"']*)\2/gi, (m, attr, quote, path) => attr + quote + flatlyUrl(path) + quote)
  13. .replace(/url\(\s*(["']?)(\/(?!\/)[^)"']*)\1\s*\)/gi, (m, quote, path) => 'url(' + quote + flatlyUrl(path) + quote + ')');
  14. }
  15. ​
  16. const ICONS = {
  17. bolt: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
  18. layout: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>',
  19. clock: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
  20. shield: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
  21. chart: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
  22. code: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
  23. star: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
  24. heart: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
  25. globe: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
  26. users: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
  27. settings: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
  28. edit: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
  29. plus: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
  30. trash: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>',
  31. copy: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
  32. eye: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
  33. eyeOff: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',
  34. image: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
  35. file: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
  36. upload: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
  37. money: '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
  38. };
  39. ​
  40. let draggedBlock = null;
  41. let currentLinkCallback = null;
  42. let previewTimeout = null;
  43. let expandedBlockIndices = new Set();
  44. ​
  45. ​
  46. function setPreviewDevice(device) {
  47. const wrapper = document.getElementById('previewFrameWrapper');
  48. const buttons = document.querySelectorAll('.preview-device-btn');
  49. ​
  50. if (!wrapper) return;
  51. ​
  52. buttons.forEach(btn => {
  53. btn.classList.remove('active');
  54. if (btn.dataset.device === device) {
  55. btn.classList.add('active');
  56. }
  57. });
  58. ​
  59. wrapper.classList.remove('desktop', 'tablet', 'mobile');
  60. if (device !== 'desktop') {
  61. wrapper.classList.add(device);
  62. }
  63. }
  64. ​
  65. function refreshPreview() {
  66. const iframe = document.getElementById('previewFrame');
  67. if (iframe) {
  68. const wrapper = document.getElementById('previewFrameWrapper');
  69. if (wrapper) wrapper.classList.add('loading');
  70. ​
  71. iframe.src = iframe.src;
  72. ​
  73. iframe.onload = function () {
  74. if (wrapper) wrapper.classList.remove('loading');
  75. };
  76. }
  77. }
  78. ​
  79. function schedulePreviewUpdate() {
  80. if (previewTimeout) {
  81. clearTimeout(previewTimeout);
  82. }
  83. previewTimeout = setTimeout(function () {
  84. updateLivePreview();
  85. }, 1000);
  86. }
  87. ​
  88. function escapeHtml(text) {
  89. if (!text) return '';
  90. const div = document.createElement('div');
  91. div.textContent = text;
  92. return div.innerHTML;
  93. }
  94. ​
  95. function renderPreviewIcon(icon) {
  96. return ICONS[icon] || ICONS['bolt'];
  97. }
  98. ​
  99. function renderPreviewBlock(block) {
  100. const type = block.type || '';
  101. const data = block.data || {};
  102. const id = block.id ? ` id="${escapeHtml(block.id)}"` : '';
  103. ​
  104. switch (type) {
  105. case 'hero': return renderPreviewHero(data, id);
  106. case 'blog-hero': return renderPreviewBlogHero(data, id);
  107. case 'stats': return renderPreviewStats(data, id);
  108. case 'features': return renderPreviewFeatures(data, id);
  109. case 'testimonials': return renderPreviewTestimonials(data, id);
  110. case 'pricing': return renderPreviewPricing(data, id);
  111. case 'cta': return renderPreviewCta(data, id);
  112. case 'text': return renderPreviewText(data, id);
  113. case 'image': return renderPreviewImage(data, id);
  114. case 'image-text': return renderPreviewImageText(data, id);
  115. case 'product-cards': return renderPreviewProductCards(data, id);
  116. case 'video': return renderPreviewVideo(data, id);
  117. case 'gallery': return renderPreviewGallery(data, id);
  118. case 'faq': return renderPreviewFaq(data, id);
  119. case 'team': return renderPreviewTeam(data, id);
  120. case 'audio': return renderPreviewAudio(data, id);
  121. case 'countdown': return renderPreviewCountdown(data, id);
  122. case 'newsletter': return renderPreviewNewsletter(data, id);
  123. case 'html': return data.html || '';
  124. default: return '';
  125. }
  126. }
  127. ​
  128. function renderPreviewHero(d, id) {
  129. return `<section class="hero"${id}>
  130. <div class="hero-grid"></div>
  131. <div class="container hero-content">
  132. ${d.badge ? `<div class="badge"><span class="badge-dot"></span><span>${escapeHtml(d.badge)}</span></div>` : ''}
  133. <h1>${escapeHtml(d.title || '')}</h1>
  134. <p>${escapeHtml(d.subtitle || '')}</p>
  135. <div class="hero-buttons">
  136. ${d.button_primary ? `<a href="${escapeHtml(d.button_primary_url || '#')}" class="btn btn-primary">${escapeHtml(d.button_primary)}</a>` : ''}
  137. ${d.button_secondary ? `<a href="${escapeHtml(d.button_secondary_url || '#')}" class="btn btn-outline">${escapeHtml(d.button_secondary)}</a>` : ''}
  138. </div>
  139. </div>
  140. </section>`;
  141. }
  142. ​
  143. function renderPreviewBlogHero(d, id) {
  144. const anchor = id ? ` id="${id}"` : '';
  146. const title = escapeHtml(d.title || '');
  147. const content = escapeHtml(d.content || '');
  148. const image = d.image ? escapeHtml(d.image) : null;
  149. ​
  150. return `
  151. <section class="blog-hero-section"${anchor}>
  152. <div class="container">
  153. ${image ? `
  154. <div class="hero-image-wrapper" style="margin-bottom: 20px;">
  155. <img src="${image}" alt="${title}" style="max-width: 100%; height: auto; border-radius: 8px;">
  156. </div>` : ''}
  158. <div class="container">
  159. ${title ? `<h1 style="margin-bottom: 15px;" class="blog-h1">${title}</h1>` : ''}
  160. ${content ? `
  161. <div class="text-content" style="font-size: 1.1rem; line-height: 1.6; opacity: 0.9;">
  162. ${content.replace(/\n/g, '<br>')}
  163. </div>` : ''}
  164. </div>
  165. </div>
  166. </section>`;
  167. }
  168. ​
  169. function renderPreviewStats(d, id) {
  170. const items = d.items || [];
  171. if (!items.length) return '';
  172. return `<section class="stats"${id}>
  173. <div class="container">
  174. <div class="stats-grid">
  175. ${items.map(item => `<div class="stat-item"><h3>${escapeHtml(item.value || '')}</h3><p>${escapeHtml(item.label || '')}</p></div>`).join('')}
  176. </div>
  177. </div>
  178. </section>`;
  179. }
  180. ​
  181. function renderPreviewFeatures(d, id) {
  182. const items = d.items || [];
  183. return `<section class="features"${id}>
  184. <div class="container">
  185. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  186. ${items.length ? `<div class="features-grid">
  187. ${items.map(item => `<div class="feature-card">
  188. <div class="feature-icon">${renderPreviewIcon(item.icon || 'bolt')}</div>
  189. <h3>${escapeHtml(item.title || '')}</h3>
  190. <p>${escapeHtml(item.description || '')}</p>
  191. </div>`).join('')}
  192. </div>` : ''}
  193. </div>
  194. </section>`;
  195. }
  196. ​
  197. function renderPreviewTestimonials(d, id) {
  198. const items = d.items || [];
  199. return `<section class="testimonials"${id}>
  200. <div class="container">
  201. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  202. ${items.length ? `<div class="testimonials-grid">
  203. ${items.map(item => `<div class="testimonial-card">
  204. <p>"${escapeHtml(item.quote || '')}"</p>
  205. <div class="testimonial-author">
  206. <div class="testimonial-avatar">${escapeHtml(item.initials || '')}</div>
  207. <div class="testimonial-info"><h4>${escapeHtml(item.name || '')}</h4><span>${escapeHtml(item.role || '')}</span></div>
  208. </div>
  209. </div>`).join('')}
  210. </div>` : ''}
  211. </div>
  212. </section>`;
  213. }
  214. ​
  215. function renderPreviewPricing(d, id) {
  216. const items = d.items || [];
  217. return `<section class="pricing"${id}>
  218. <div class="container">
  219. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  220. ${items.length ? `<div class="pricing-grid">
  221. ${items.map(item => `<div class="pricing-card ${item.featured ? 'featured' : ''}">
  222. ${item.featured ? '<span class="pricing-popular">Most Popular</span>' : ''}
  223. <h3>${escapeHtml(item.name || '')}</h3>
  224. <div class="price">${escapeHtml(item.price || '')}<span>${escapeHtml(item.period || '')}</span></div>
  225. <p class="description">${escapeHtml(item.description || '')}</p>
  226. ${item.features && item.features.length ? `<ul class="pricing-features">
  227. ${item.features.map(f => `<li><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>${escapeHtml(f)}</li>`).join('')}
  228. </ul>` : ''}
  229. <a href="${escapeHtml(item.button_url || '#')}" class="btn ${item.featured ? 'btn-primary' : 'btn-outline'}">${escapeHtml(item.button_text || item.button || 'Get Started')}</a>
  230. </div>`).join('')}
  231. </div>` : ''}
  232. </div>
  233. </section>`;
  234. }
  235. ​
  236. function renderPreviewCta(d, id) {
  237. return `<section class="cta"${id}>
  238. <div class="container">
  239. <div class="cta-inner">
  240. <h2>${escapeHtml(d.title || '')}</h2>
  241. <p>${escapeHtml(d.subtitle || '')}</p>
  242. <div class="cta-buttons">
  243. ${d.button_primary ? `<a href="${escapeHtml(d.button_primary_url || '#')}" class="btn btn-primary">${escapeHtml(d.button_primary)}</a>` : ''}
  244. ${d.button_secondary ? `<a href="${escapeHtml(d.button_secondary_url || '#')}" class="btn btn-outline">${escapeHtml(d.button_secondary)}</a>` : ''}
  245. </div>
  246. </div>
  247. </div>
  248. </section>`;
  249. }
  250. ​
  251. function renderPreviewText(d, id) {
  252. return `<section class="text-section"${id}>
  253. <div class="container">
  254. ${d.title ? `<h2>${escapeHtml(d.title)}</h2>` : ''}
  255. <div class="text-content">${escapeHtml(d.content || '').replace(/\n/g, '<br>')}</div>
  256. </div>
  257. </section>`;
  258. }
  259. ​
  260. function renderPreviewImage(d, id) {
  261. if (!d.url) return '';
  262. return `<section class="image-section"${id}>
  263. <div class="container">
  264. <figure>
  265. <img src="${escapeHtml(d.url)}" alt="${escapeHtml(d.alt || '')}" loading="lazy">
  266. ${d.caption ? `<figcaption>${escapeHtml(d.caption)}</figcaption>` : ''}
  267. </figure>
  268. </div>
  269. </section>`;
  270. }
  271. ​
  272. function renderPreviewImageText(d, id) {
  273. const imagePos = d.image_position || 'left';
  274. return `<section class="image-text"${id}>
  275. <div class="container">
  276. <div class="image-text-grid image-text-${escapeHtml(imagePos)}">
  277. <div class="image-text-image">
  278. <img src="${escapeHtml(d.image_url || '')}" alt="${escapeHtml(d.image_alt || '')}" loading="lazy">
  279. </div>
  280. <div class="image-text-content">
  281. ${d.subtitle ? `<p class="section-subtitle">${escapeHtml(d.subtitle)}</p>` : ''}
  282. ${d.title ? `<h2>${escapeHtml(d.title)}</h2>` : ''}
  283. <div class="text-content">${escapeHtml(d.content || '').replace(/\n/g, '<br>')}</div>
  284. ${d.button_text ? `<a href="${escapeHtml(d.button_url || '#')}" class="btn btn-primary">${escapeHtml(d.button_text)}</a>` : ''}
  285. </div>
  286. </div>
  287. </div>
  288. </section>`;
  289. }
  290. ​
  291. function renderPreviewProductCards(d, id) {
  292. const products = d.products || [];
  293. if (!products.length) return '';
  294. return `<section class="product-cards"${id}>
  295. <div class="container">
  296. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  297. <div class="products-grid">
  298. ${products.map(p => `<div class="product-card">
  299. ${p.image ? `<div class="product-image"><img src="${escapeHtml(p.image)}" alt="${escapeHtml(p.title || '')}" width="48" height="48" loading="lazy"></div>` : ''}
  300. <h3>${escapeHtml(p.title || '')}</h3>
  301. <p class="product-description">${escapeHtml(p.description || '')}</p>
  302. ${p.features && p.features.length ? `<ul class="product-features">${p.features.map(f => `<li>${escapeHtml(f)}</li>`).join('')}</ul>` : ''}
  303. ${p.button_text ? `<a href="${escapeHtml(p.button_url || '#')}" class="btn btn-primary btn-sm">${escapeHtml(p.button_text)}</a>` : ''}
  304. </div>`).join('')}
  305. </div>
  306. </div>
  307. </section>`;
  308. }
  309. ​
  310. function renderPreviewVideo(d, id) {
  311. if (!d.url) return '';
  312. const url = d.url;
  313. const type = d.type || 'url';
  314. const poster = d.posterUrl ? escapeHtml(d.posterUrl) : '';
  315. let videoHtml = '';
  316. ​
  317. if (type === 'youtube' || url.match(/youtube\.com|youtu\.be/i)) {
  318. const videoId = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i);
  319. if (videoId && videoId[1]) {
  320. videoHtml = `<iframe src="https://www.youtube.com/embed/${escapeHtml(videoId[1])}?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>`;
  321. }
  322. } else if (type === 'facebook' || url.match(/facebook\.com|fb\.watch/i)) {
  323. videoHtml = `<iframe src="https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(url)}&show_text=false&autoplay=true" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>`;
  324. } else {
  325. videoHtml = `<video controls preload="metadata" ${poster ? `poster="${poster}"` : ''}><source src="${escapeHtml(url)}" type="${mediaMime(url, 'video/mp4')}">Your browser does not support the video tag.</video>`;
  326. }
  327. ​
  328. const overlayHtml = (poster && type !== 'url')
  329. ? `<div class="video-overlay" style="background-image: url('${poster}');" onclick="this.remove()">
  330. <div class="play-button"></div>
  331. </div>`
  332. : '';
  333. ​
  334. return `<section class="video-section"${id}>
  335. <div class="container">
  336. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  337. <div class="video-wrapper" style="position: relative;">
  338. ${overlayHtml}
  339. ${videoHtml}
  340. </div>
  341. ${d.caption ? `<p class="video-caption">${escapeHtml(d.caption)}</p>` : ''}
  342. </div>
  343. </section>`;
  344. }
  345. ​
  346. function renderPreviewGallery(d, id) {
  347. const images = d.images || [];
  348. if (!images.length) return '';
  349. return `<section class="gallery-section"${id}>
  350. <div class="container">
  351. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  352. <div class="gallery-grid">
  353. ${images.map(img => `<div class="gallery-item">
  354. <img src="${escapeHtml(img.url || '')}" alt="${escapeHtml(img.alt || '')}" loading="lazy">
  355. ${img.caption ? `<div class="gallery-caption">${escapeHtml(img.caption)}</div>` : ''}
  356. </div>`).join('')}
  357. </div>
  358. </div>
  359. </section>`;
  360. }
  361. ​
  362. function renderPreviewFaq(d, id) {
  363. const items = d.items || [];
  364. if (!items.length) return '';
  365. return `<section class="faq-section"${id}>
  366. <div class="container">
  367. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  368. <div class="faq-list">
  369. ${items.map((item, idx) => `<details class="faq-item" ${idx === 0 ? 'open' : ''}>
  370. <summary class="faq-question">${escapeHtml(item.question || '')}</summary>
  371. <div class="faq-answer">${escapeHtml(item.answer || '').replace(/\n/g, '<br>')}</div>
  372. </details>`).join('')}
  373. </div>
  374. </div>
  375. </section>`;
  376. }
  377. ​
  378. function renderPreviewTeam(d, id) {
  379. const members = d.members || [];
  380. if (!members.length) return '';
  381. return `<section class="team-section"${id}>
  382. <div class="container">
  383. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  384. <div class="team-grid">
  385. ${members.map(m => `<div class="team-member">
  386. ${m.image ? `<img src="${escapeHtml(m.image)}" alt="${escapeHtml(m.name || '')}" class="team-photo" loading="lazy">` : `<div class="team-avatar">${escapeHtml(m.initials || (m.name || '?').substring(0, 2).toUpperCase())}</div>`}
  387. <h3>${escapeHtml(m.name || '')}</h3>
  388. <p class="team-role">${escapeHtml(m.role || '')}</p>
  389. ${m.bio ? `<p class="team-bio">${escapeHtml(m.bio)}</p>` : ''}
  390. ${m.social && m.social.length ? `<div class="team-social">
  391. ${m.social.map(s => `<a href="${escapeHtml(s.url || '#')}" target="_blank" rel="noopener" class="team-social-link" title="${escapeHtml(s.platform || '')}">
  392. ${s.platform === 'twitter' ? '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>' : ''}
  393. ${s.platform === 'linkedin' ? '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>' : ''}
  394. ${s.platform === 'github' ? '<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>' : ''}
  395. </a>`).join('')}
  396. </div>` : ''}
  397. </div>`).join('')}
  398. </div>
  399. </div>
  400. </section>`;
  401. }
  402. ​
  403. function renderPreviewAudio(d, id) {
  404. if (!d.url) return '';
  405. return `<section class="audio-section"${id}>
  406. <div class="container">
  407. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  408. <div class="audio-wrapper">
  409. <audio controls preload="metadata" class="audio-player"><source src="${escapeHtml(d.url)}" type="${mediaMime(d.url, 'audio/mpeg')}">Your browser does not support the audio element.</audio>
  410. ${d.music_link ? `<a href="${escapeHtml(d.music_link)}" class="btn btn-outline" target="_blank" rel="noopener">${escapeHtml(d.music_link_text || 'Download')}</a>` : ''}
  411. </div>
  412. </div>
  413. </section>`;
  414. }
  415. ​
  416. function renderPreviewCountdown(d, id) {
  417. if (!d.target_date) return '';
  418. return `<section class="countdown-section"${id}>
  419. <div class="container">
  420. ${d.title ? `<div class="section-header"><h2>${escapeHtml(d.title)}</h2>${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}</div>` : ''}
  421. <div class="countdown-timer">
  422. <div class="countdown-item"><div class="countdown-value">00</div><div class="countdown-label">Days</div></div>
  423. <div class="countdown-item"><div class="countdown-value">00</div><div class="countdown-label">Hours</div></div>
  424. <div class="countdown-item"><div class="countdown-value">00</div><div class="countdown-label">Minutes</div></div>
  425. <div class="countdown-item"><div class="countdown-value">00</div><div class="countdown-label">Seconds</div></div>
  426. </div>
  427. </div>
  428. </section>`;
  429. }
  430. ​
  431. function renderPreviewNewsletter(d, id) {
  432. return `<section class="newsletter-section"${id}>
  433. <div class="container">
  434. <div class="newsletter-inner">
  435. ${d.title ? `<h2>${escapeHtml(d.title)}</h2>` : ''}
  436. ${d.subtitle ? `<p>${escapeHtml(d.subtitle)}</p>` : ''}
  437. <form class="newsletter-form" onsubmit="event.preventDefault();">
  438. <input type="email" class="newsletter-input" placeholder="${escapeHtml(d.placeholder || 'Enter your email')}" required>
  439. <button type="submit" class="btn btn-primary">${escapeHtml(d.button_text || 'Subscribe')}</button>
  440. </form>
  441. </div>
  442. </div>
  443. </section>`;
  444. }
  445. ​
  446. function updateLivePreview() {
  447. const iframe = document.getElementById('previewFrame');
  448. if (!iframe) return;
  449. ​
  450. const wrapper = document.getElementById('previewFrameWrapper');
  451. if (wrapper) wrapper.classList.add('loading');
  452. ​
  453. const blocksHtml = blocks.map(block => renderPreviewBlock(block)).join('');
  454. ​
  455. const fullHtml = flatlyRewriteHtml(`<!DOCTYPE html>
  456. <html lang="en">
  457. <head>
  458. <meta charset="UTF-8">
  459. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  460. <title>Preview</title>
  461. ${PREVIEW_FONT_HEAD}
  462. <link rel="stylesheet" href="/css/styles.css?v=${Date.now()}">
  463. ${HAS_THEME ? `<link rel="stylesheet" href="/css/theme.css?v=${Date.now()}">` : ""}
  464. <style>
  465. ${PREVIEW_HEADINGS_CSS}
  466. a { pointer-events: none; }
  467. </style>
  468. <script src="/assets/js/admin-theme.js"><\/script>
  469. </head>
  470. <body>
  471. <main>${blocksHtml}</main>
  472. </body>
  473. </html>`);
  474. ​
  475. iframe.srcdoc = fullHtml
  476. .replace(/\[u\](.*?)\[\/u\]/gi, '<u>$1</u>')
  477. .replace(/\[b\](.*?)\[\/b\]/gi, '<b>$1</b>')
  478. .replace(/\[i\](.*?)\[\/i\]/gi, '<i>$1</i>')
  479. .replace(/\[s\](.*?)\[\/s\]/gi, '<del>$1</del>')
  480. .replace(/\[quote\](.*?)\[\/quote\]/gi, '<blockquote>$1</blockquote>'
  481. );
  482. ​
  483. iframe.onload = function () {
  484. if (wrapper) wrapper.classList.remove('loading');
  485. };
  486. }
  487. ​
  488. ​
  489. if (!footerData.columns) footerData.columns = [];
  490. if (!footerData.social_links) footerData.social_links = [];
  491. if (!footerData.bottom_links) footerData.bottom_links = [];
  492. ​
  493. document.addEventListener('DOMContentLoaded', function () {
  494. renderBlocks();
  495. ​
  496. setTimeout(updateLivePreview, 100);
  497. ​
  498. const previewFrameEdit = document.getElementById('previewFrame');
  499. if (previewFrameEdit) {
  500. const wrapperEdit = document.getElementById('previewFrameWrapper');
  501. if (wrapperEdit) wrapperEdit.classList.add('loading');
  502. previewFrameEdit.onload = function () {
  503. if (wrapperEdit) wrapperEdit.classList.remove('loading');
  504. };
  505. }
  506. renderNavLinks();
  507. renderNavButtons();
  508. renderFooterColumns();
  509. renderSocialLinks();
  510. renderBottomLinks();
  511. renderLanguages();
  512. renderInternalPages();
  513. ​
  514. updateBlockCount();
  515. ​
  516. const tabStorageKey = 'flatly-ui:settings-tab';
  517. ​
  518. const activateSettingsTab = (name) => {
  519. const target = document.querySelector('.settings-tab[data-tab="' + name + '"]');
  520. if (!target || !document.getElementById('panel-' + name)) return false;
  521. document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
  522. document.querySelectorAll('.settings-panel').forEach(p => p.classList.remove('active'));
  523. target.classList.add('active');
  524. document.getElementById('panel-' + name).classList.add('active');
  525. return true;
  526. };
  527. ​
  528. document.querySelectorAll('.settings-tab').forEach(tab => {
  529. tab.addEventListener('click', () => {
  530. activateSettingsTab(tab.dataset.tab);
  531. try { localStorage.setItem(tabStorageKey, tab.dataset.tab); } catch (e) {}
  532. });
  533. });
  534. ​
  535. try {
  536. const savedTab = localStorage.getItem(tabStorageKey);
  537. if (savedTab) activateSettingsTab(savedTab);
  538. } catch (e) {}
  539. ​
  540. const settingsForm = document.getElementById('settingsForm');
  541. if (settingsForm) {
  542. settingsForm.addEventListener('invalid', (event) => {
  543. const panel = event.target.closest('.settings-panel');
  544. if (panel && !panel.classList.contains('active')) activateSettingsTab(panel.id.replace(/^panel-/, ''));
  545. }, true);
  546. ​
  547. settingsForm.addEventListener('submit', () => {
  548. settingsForm.querySelectorAll('.flatly-encoded').forEach(input => input.remove());
  549. settingsForm.querySelectorAll('textarea[data-encode]').forEach(area => {
  550. const name = area.name || area.dataset.encodeName;
  551. if (!name) return;
  552. area.dataset.encodeName = name;
  553. area.removeAttribute('name');
  554. const hidden = document.createElement('input');
  555. hidden.type = 'hidden';
  556. hidden.className = 'flatly-encoded';
  557. hidden.name = name.endsWith('[]') ? name.slice(0, -2) + '_b64[]' : name + '_b64';
  558. hidden.value = flatlyBase64Encode(area.value);
  559. settingsForm.appendChild(hidden);
  560. });
  561. });
  562. ​
  563. window.addEventListener('pageshow', () => {
  564. settingsForm.querySelectorAll('.flatly-encoded').forEach(input => input.remove());
  565. settingsForm.querySelectorAll('textarea[data-encode-name]').forEach(area => { area.name = area.dataset.encodeName; });
  566. });
  567. }
  568. });
  569. ​
  570. function flatlyBase64Encode(text) {
  571. const bytes = new TextEncoder().encode(String(text));
  572. let binary = '';
  573. for (let i = 0; i < bytes.length; i += 0x8000) {
  574. binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
  575. }
  576. return btoa(binary);
  577. }
  578. ​
  579. function flatlyBase64Decode(encoded) {
  580. const binary = atob(encoded);
  581. const bytes = new Uint8Array(binary.length);
  582. for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  583. return new TextDecoder().decode(bytes);
  584. }
  585. ​
  586. (function () {
  587. const scrollKey = 'flatly-ui:scroll:' + location.pathname + location.search;
  588. const pendingKey = 'flatly-ui:scroll-pending';
  589. const desktop = window.matchMedia('(min-width: 769px)');
  590. let timer = 0;
  591. ​
  592. const scroller = () => (desktop.matches ? document.querySelector('.main') : document.scrollingElement) || document.documentElement;
  593. ​
  594. const save = () => {
  595. try { sessionStorage.setItem(scrollKey, String(scroller().scrollTop || 0)); } catch (e) {}
  596. };
  597. ​
  598. const navigationType = () => {
  599. const entry = performance.getEntriesByType && performance.getEntriesByType('navigation')[0];
  600. return entry ? entry.type : '';
  601. };
  602. ​
  603. let shouldRestore = ['reload', 'back_forward'].includes(navigationType());
  604. try {
  605. if (sessionStorage.getItem(pendingKey) === scrollKey) {
  606. shouldRestore = true;
  607. }
  608. sessionStorage.removeItem(pendingKey);
  609. } catch (e) {}
  610. ​
  611. document.addEventListener('submit', () => {
  612. save();
  613. try { sessionStorage.setItem(pendingKey, scrollKey); } catch (e) {}
  614. }, true);
  615. ​
  616. document.addEventListener('scroll', () => {
  617. clearTimeout(timer);
  618. timer = setTimeout(save, 150);
  619. }, { capture: true, passive: true });
  620. ​
  621. window.addEventListener('pagehide', save);
  622. ​
  623. if (!shouldRestore) return;
  624. ​
  625. let saved = 0;
  626. try { saved = parseInt(sessionStorage.getItem(scrollKey) || '0', 10) || 0; } catch (e) {}
  627. if (!saved) return;
  628. ​
  629. const apply = () => { scroller().scrollTop = saved; };
  630. window.addEventListener('load', () => {
  631. apply();
  632. setTimeout(apply, 250);
  633. });
  634. })();
  635. ​
  636. document.getElementById('pageForm')?.addEventListener('submit', function (e) {
  637. document.getElementById('blocksData').value = JSON.stringify(blocks);
  638. });
  639. ​
  640. document.getElementById('settingsForm')?.addEventListener('submit', function (e) {
  641. document.getElementById('navLinksData').value = JSON.stringify(navLinks);
  642. document.getElementById('navButtonsData').value = JSON.stringify(navButtons);
  643. updateFooterData();
  644. document.getElementById('footerData').value = JSON.stringify(footerData);
  645. const languagesField = document.getElementById('languagesDataField');
  646. if (languagesField && typeof languagesData !== 'undefined') languagesField.value = JSON.stringify(languagesData);
  647. });
  648. ​
  649. ​
  650. function generateId() {
  651. return 'block-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
  652. }
  653. ​
  654. function updateBlockCount() {
  655. const countEl = document.getElementById('blockCount');
  656. if (countEl) countEl.textContent = blocks.length;
  657. }
  658. ​
  659. function getUniqueBlockId(baseId, currentIndex) {
  660. if (!baseId || baseId.trim() === '') return '';
  661. ​
  662. const cleanId = baseId.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
  663. ​
  664. let counter = 2;
  665. let finalId = cleanId;
  666. ​
  667. blocks.forEach((block, index) => {
  668. if (index !== currentIndex) {
  669. if (block.id === finalId) {
  670. ​
  671. while (blocks.some((b, i) => i !== currentIndex && b.id === `${cleanId}-${counter}`)) {
  672. counter++;
  673. }
  674. finalId = `${cleanId}-${counter}`;
  675. } else if (block.id === cleanId && counter === 2) {
  676. ​
  677. }
  678. }
  679. });
  680. ​
  681. return finalId;
  682. }
  683. ​
  684. function renderBlocks() {
  685. const container = document.getElementById('blocksContainer');
  686. if (!container) return;
  687. ​
  688. const blockTypes = {};
  689. blocks.forEach((block) => {
  690. if (!block.id) {
  691. const type = block.type;
  692. if (!blockTypes[type]) {
  693. blockTypes[type] = [];
  694. }
  695. blockTypes[type].push(block);
  696. }
  697. });
  698. ​
  699. Object.keys(blockTypes).forEach(type => {
  700. const existingIds = blocks
  701. .filter(b => b.type === type && b.id)
  702. .map(b => b.id);
  703. ​
  704. blockTypes[type].forEach((block) => {
  705. let counter = 1;
  706. let newId = type;
  707. ​
  708. if (existingIds.includes(newId)) {
  709. counter = 2;
  710. while (existingIds.includes(`${type}-${counter}`)) {
  711. counter++;
  712. }
  713. newId = `${type}-${counter}`;
  714. }
  715. ​
  716. block.id = newId;
  717. existingIds.push(newId);
  718. });
  719. });
  720. ​
  721. blocks.forEach((block, index) => {
  722. if (block.id) {
  723. block.id = getUniqueBlockId(block.id, index);
  724. }
  725. });
  726. ​
  727. const expandedItems = document.querySelectorAll('.block-item.expanded');
  728. expandedBlockIndices.clear();
  729. expandedItems.forEach(item => {
  730. const index = item.dataset.index;
  731. if (index !== undefined) expandedBlockIndices.add(parseInt(index));
  732. });
  733. ​
  734. container.innerHTML = '';
  735. ​
  736. blocks.forEach((block, index) => {
  737. const el = createBlockElement(block, index);
  738. container.appendChild(el);
  739. ​
  740. if (expandedBlockIndices.has(index)) {
  741. el.classList.add('expanded');
  742. }
  743. });
  744. ​
  745. updateBlockCount();
  746. }
  747. ​
  748. function createBlockElement(block, index) {
  749. const div = document.createElement('div');
  750. div.className = 'block-item';
  751. div.dataset.index = index;
  752. div.draggable = false;
  753. ​
  754. div.addEventListener('dragover', handleDragOver);
  755. div.addEventListener('drop', handleDrop);
  756. div.addEventListener('dragleave', handleDragLeave);
  757. ​
  758. const title = getBlockTitle(block);
  759. ​
  760. div.innerHTML = `
  761. <div class="block-header" onclick="toggleBlock(${index})">
  762. <div class="block-drag" draggable="true" onmousedown="event.stopPropagation()">
  763. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>
  764. </div>
  765. <span class="block-type">${block.type}</span>
  766. <span class="block-title">${escapeHtml(title)}</span>
  767. <input type="text" class="block-id-input" value="${escapeHtml(block.id || block.type)}" onmousedown="event.stopPropagation()" onclick="event.stopPropagation()" oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, ''); blocks[${index}].id = this.value;" onblur="renderBlocks();" style="max-width: 120px; font-size: 0.8125rem;">
  768. <div class="block-actions">
  769. <button type="button" class="block-toggle" onclick="event.stopPropagation(); moveBlockUp(${index})" title="Move Up">
  770. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"/></svg>
  771. </button>
  772. <button type="button" class="block-toggle" onclick="event.stopPropagation(); moveBlockDown(${index})" title="Move Down">
  773. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
  774. </button>
  775. <button type="button" class="block-toggle" onclick="event.stopPropagation(); duplicateBlock(${index})" title="Duplicate">
  776. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
  777. </button>
  778. <button type="button" class="block-toggle" onclick="event.stopPropagation(); deleteBlock(${index})" title="Delete" style="color: var(--error);">
  779. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
  780. </button>
  781. <button type="button" class="block-toggle block-toggle-arrow">
  782. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
  783. </button>
  784. </div>
  785. </div>
  786. <div class="block-content">
  787. ${renderBlockFields(block, index)}
  788. </div>
  789. `;
  790. ​
  791. setTimeout(() => {
  792. const dragHandle = div.querySelector('.block-drag');
  793. if (dragHandle) {
  794. dragHandle.addEventListener('dragstart', function (e) {
  795. e.stopPropagation();
  796. draggedBlock = div;
  797. div.classList.add('dragging');
  798. e.dataTransfer.effectAllowed = 'move';
  799. });
  800. ​
  801. dragHandle.addEventListener('dragend', function (e) {
  802. e.stopPropagation();
  803. div.classList.remove('dragging');
  804. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('drag-over'));
  805. draggedBlock = null;
  806. });
  807. }
  808. }, 0);
  809. ​
  810. return div;
  811. }
  812. ​
  813. ​
  814. function getBlockTitle(block) {
  815. switch (block.type) {
  816. case 'hero': return block.data?.title || 'Hero Section';
  817. case 'blog-hero': return block.data?.title || 'Blog Hero Section';
  818. case 'stats': return 'Statistics';
  819. case 'features': return block.data?.title || 'Features';
  820. case 'testimonials': return block.data?.title || 'Testimonials';
  821. case 'pricing': return block.data?.title || 'Pricing';
  822. case 'cta': return block.data?.title || 'Call to Action';
  823. case 'text': return block.data?.title || 'Text Block';
  824. case 'image': return block.data?.alt || 'Image';
  825. case 'image-text': return block.data?.title || 'Image + Text';
  826. case 'product-cards': return block.data?.title || 'Product Cards';
  827. case 'video': return block.data?.title || 'Video';
  828. case 'gallery': return block.data?.title || 'Gallery';
  829. case 'faq': return block.data?.title || 'FAQ';
  830. case 'team': return block.data?.title || 'Team';
  831. case 'audio': return block.data?.title || 'Audio Player';
  832. case 'countdown': return block.data?.title || 'Countdown Timer';
  833. case 'newsletter': return block.data?.title || 'Newsletter';
  834. case 'html': return 'Custom HTML';
  835. default: return block.type;
  836. }
  837. }
  838. ​
  839. function renderBlockFields(block, blockIndex) {
  840. switch (block.type) {
  841. case 'hero': {
  842. const badgeVal = escapeHtml(block.data?.badge || '');
  843. const titleVal = escapeHtml(block.data?.title || '');
  844. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  845. const btn1Val = escapeHtml(block.data?.button_primary || '');
  846. const btn1Url = block.data?.button_primary_url || '';
  847. const btn2Val = escapeHtml(block.data?.button_secondary || '');
  848. const btn2Url = block.data?.button_secondary_url || '';
  849. return '<div class="form-row">' +
  850. '<div class="block-field">' +
  851. '<label class="block-field-label">Badge Text</label>' +
  852. '<input type="text" class="block-field-input" value="' + badgeVal + '" oninput="updateBlockData(' + blockIndex + ', \'badge\', this.value)">' +
  853. '</div>' +
  854. '<div class="block-field">' +
  855. '<label class="block-field-label">Title</label>' +
  856. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  857. '</div>' +
  858. '</div>' +
  859. '<div class="block-field">' +
  860. '<label class="block-field-label">Subtitle</label>' +
  861. '<textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' + subtitleVal + '</textarea>' +
  862. '</div>' +
  863. '<div class="form-row">' +
  864. '<div class="block-field">' +
  865. '<label class="block-field-label">Primary Button Text</label>' +
  866. '<input type="text" class="block-field-input" value="' + btn1Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_primary\', this.value)">' +
  867. '</div>' +
  868. '<div class="block-field">' +
  869. '<label class="block-field-label">Primary Button URL</label>' +
  870. renderLinkInput(btn1Url, 'updateBlockData(' + blockIndex + ', \'button_primary_url\', VALUE)') +
  871. '</div>' +
  872. '</div>' +
  873. '<div class="form-row">' +
  874. '<div class="block-field">' +
  875. '<label class="block-field-label">Secondary Button Text</label>' +
  876. '<input type="text" class="block-field-input" value="' + btn2Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_secondary\', this.value)">' +
  877. '</div>' +
  878. '<div class="block-field">' +
  879. '<label class="block-field-label">Secondary Button URL</label>' +
  880. renderLinkInput(btn2Url, 'updateBlockData(' + blockIndex + ', \'button_secondary_url\', VALUE)') +
  881. '</div>' +
  882. '</div>';
  883. }
  884. ​
  885. case 'blog-hero': {
  886. const titleVal = escapeHtml(block.data?.title || '');
  887. const contentVal = escapeHtml(block.data?.content || '');
  888. const imageUrl = block.data?.image || '';
  889. ​
  890. return `
  891. <div class="block-field">
  892. <label class="block-field-label">Header image (URL)</label>
  893. <div class="image-input-group">
  894. <input type="text" data-media="image" class="block-field-input" value="${imageUrl}"
  895. oninput="updateBlockData(${blockIndex}, 'image', this.value)"
  896. placeholder="https://example.com/image.jpg">
  897. </div>
  898. </div>
  899. ​
  900. <div class="block-field">
  901. <label class="block-field-label">Blog Title</label>
  902. <input type="text" class="block-field-input" value="${titleVal}"
  903. oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  904. </div>
  905. ​
  906. <div class="block-field">
  907. <label class="block-field-label">Content / Introduction</label>
  908. <textarea data-rich="1" class="block-field-input block-field-textarea" rows="4"
  909. oninput="updateBlockData(${blockIndex}, 'content', this.value)">${contentVal}</textarea>
  910. </div>
  911. `;
  912. }
  913. ​
  914. case 'stats':
  915. return `
  916. <div class="block-field">
  917. <label class="block-field-label">Stats Items</label>
  918. <div class="repeater-items" id="stats-items-${blockIndex}">
  919. ${(block.data?.items || []).map((item, i) => `
  920. <div class="repeater-item expanded">
  921. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  922. <span class="repeater-item-title">${escapeHtml(item.value || 'New Stat')} - ${escapeHtml(item.label || '')}</span>
  923. <div class="repeater-item-actions">
  924. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  925. </div>
  926. </div>
  927. <div class="repeater-item-content">
  928. <div class="form-row">
  929. <div class="block-field">
  930. <label class="block-field-label">Value</label>
  931. <input type="text" class="block-field-input" value="${escapeHtml(item.value || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'value', this.value)">
  932. </div>
  933. <div class="block-field">
  934. <label class="block-field-label">Label</label>
  935. <input type="text" class="block-field-input" value="${escapeHtml(item.label || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'label', this.value)">
  936. </div>
  937. </div>
  938. </div>
  939. </div>
  940. `).join('')}
  941. </div>
  942. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {value: '', label: ''})">
  943. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  944. Add Stat
  945. </button>
  946. </div>
  947. `;
  948. ​
  949. case 'features':
  950. return `
  951. <div class="form-row">
  952. <div class="block-field">
  953. <label class="block-field-label">Section Title</label>
  954. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  955. </div>
  956. <div class="block-field">
  957. <label class="block-field-label">Section Subtitle</label>
  958. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  959. </div>
  960. </div>
  961. <div class="block-field">
  962. <label class="block-field-label">Feature Items</label>
  963. <div class="repeater-items" id="features-items-${blockIndex}">
  964. ${(block.data?.items || []).map((item, i) => `
  965. <div class="repeater-item">
  966. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  967. <span class="repeater-item-title">${escapeHtml(item.title || 'New Feature')}</span>
  968. <div class="repeater-item-actions">
  969. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  970. </div>
  971. </div>
  972. <div class="repeater-item-content">
  973. <div class="block-field">
  974. <label class="block-field-label">Icon</label>
  975. <div class="icon-select">
  976. ${Object.keys(ICONS).map(icon => `
  977. <div class="icon-option ${item.icon === icon ? 'selected' : ''}" onclick="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'icon', '${icon}'); renderBlocks();">
  978. ${ICONS[icon]}
  979. </div>
  980. `).join('')}
  981. </div>
  982. </div>
  983. <div class="block-field">
  984. <label class="block-field-label">Title</label>
  985. <input type="text" class="block-field-input" value="${escapeHtml(item.title || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'title', this.value)">
  986. </div>
  987. <div class="block-field">
  988. <label class="block-field-label">Description</label>
  989. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'description', this.value)">${escapeHtml(item.description || '')}</textarea>
  990. </div>
  991. </div>
  992. </div>
  993. `).join('')}
  994. </div>
  995. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {icon: 'bolt', title: '', description: ''})">
  996. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  997. Add Feature
  998. </button>
  999. </div>
  1000. `;
  1001. ​
  1002. case 'testimonials':
  1003. return `
  1004. <div class="form-row">
  1005. <div class="block-field">
  1006. <label class="block-field-label">Section Title</label>
  1007. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1008. </div>
  1009. <div class="block-field">
  1010. <label class="block-field-label">Section Subtitle</label>
  1011. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1012. </div>
  1013. </div>
  1014. <div class="block-field">
  1015. <label class="block-field-label">Testimonials</label>
  1016. <div class="repeater-items" id="testimonials-items-${blockIndex}">
  1017. ${(block.data?.items || []).map((item, i) => `
  1018. <div class="repeater-item">
  1019. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1020. <span class="repeater-item-title">${escapeHtml(item.name || 'New Testimonial')}</span>
  1021. <div class="repeater-item-actions">
  1022. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  1023. </div>
  1024. </div>
  1025. <div class="repeater-item-content">
  1026. <div class="block-field">
  1027. <label class="block-field-label">Quote</label>
  1028. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'quote', this.value)">${escapeHtml(item.quote || '')}</textarea>
  1029. </div>
  1030. <div class="form-row-3">
  1031. <div class="block-field">
  1032. <label class="block-field-label">Name</label>
  1033. <input type="text" class="block-field-input" value="${escapeHtml(item.name || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'name', this.value)">
  1034. </div>
  1035. <div class="block-field">
  1036. <label class="block-field-label">Role</label>
  1037. <input type="text" class="block-field-input" value="${escapeHtml(item.role || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'role', this.value)">
  1038. </div>
  1039. <div class="block-field">
  1040. <label class="block-field-label">Initials</label>
  1041. <input type="text" class="block-field-input" value="${escapeHtml(item.initials || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'initials', this.value)" maxlength="2">
  1042. </div>
  1043. </div>
  1044. </div>
  1045. </div>
  1046. `).join('')}
  1047. </div>
  1048. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {quote: '', name: '', role: '', initials: ''})">
  1049. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  1050. Add Testimonial
  1051. </button>
  1052. </div>
  1053. `;
  1054. ​
  1055. case 'pricing': {
  1056. const titleVal = escapeHtml(block.data?.title || '');
  1057. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  1058. let itemsHtml = '';
  1059. (block.data?.items || []).forEach((item, i) => {
  1060. const nameVal = escapeHtml(item.name || 'New Plan');
  1061. const priceVal = escapeHtml(item.price || '');
  1062. const descVal = escapeHtml(item.description || '');
  1063. const periodVal = escapeHtml(item.period || '');
  1064. const btnTextVal = escapeHtml(item.button_text || item.button || '');
  1065. const btnUrlVal = item.button_url || '#';
  1066. const featVal = item.featured ? 'checked' : '';
  1067. itemsHtml += '<div class="repeater-item">' +
  1068. '<div class="repeater-item-header" onclick="this.parentElement.classList.toggle(\'expanded\')">' +
  1069. '<span class="repeater-item-title">' + nameVal + ' - ' + priceVal + '</span>' +
  1070. '<div class="repeater-item-actions">' +
  1071. '<button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(' + blockIndex + ', \'items\', ' + i + ')" style="color: var(--error);">Remove</button>' +
  1072. '</div>' +
  1073. '</div>' +
  1074. '<div class="repeater-item-content">' +
  1075. '<div class="form-row-3">' +
  1076. '<div class="block-field">' +
  1077. '<label class="block-field-label">Plan Name</label>' +
  1078. '<input type="text" class="block-field-input" value="' + nameVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'name\', this.value)">' +
  1079. '</div>' +
  1080. '<div class="block-field">' +
  1081. '<label class="block-field-label">Price</label>' +
  1082. '<input type="text" class="block-field-input" value="' + priceVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'price\', this.value)">' +
  1083. '</div>' +
  1084. '<div class="block-field">' +
  1085. '<label class="block-field-label">Period</label>' +
  1086. '<input type="text" class="block-field-input" value="' + periodVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'period\', this.value)" placeholder="/month">' +
  1087. '</div>' +
  1088. '</div>' +
  1089. '<div class="block-field">' +
  1090. '<label class="block-field-label">Description</label>' +
  1091. '<input type="text" class="block-field-input" value="' + descVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'description\', this.value)">' +
  1092. '</div>' +
  1093. '<div class="block-field">' +
  1094. '<label class="block-field-label">Features (one per line)</label>' +
  1095. '<textarea class="block-field-input block-field-textarea" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'features\', this.value.split(\'\\n\').filter(f => f.trim()))">' + (item.features || []).join('\n') + '</textarea>' +
  1096. '</div>' +
  1097. '<div class="form-row">' +
  1098. '<div class="block-field">' +
  1099. '<label class="block-field-label">Button Text</label>' +
  1100. '<input type="text" class="block-field-input" value="' + btnTextVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'button_text\', this.value)">' +
  1101. '</div>' +
  1102. '<div class="block-field">' +
  1103. '<label class="block-field-label">Button URL</label>' +
  1104. renderLinkInput(btnUrlVal, 'updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'button_url\', VALUE)') +
  1105. '</div>' +
  1106. '</div>' +
  1107. '<div class="block-field">' +
  1108. '<label class="block-field-label" style="display: flex; align-items: center; gap: 8px;">' +
  1109. '<input type="checkbox" ' + featVal + ' onchange="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'featured\', this.checked)">' +
  1110. 'Featured Plan (highlighted)' +
  1111. '</label>' +
  1112. '</div>' +
  1113. '</div>' +
  1114. '</div>';
  1115. });
  1116. return '<div class="form-row">' +
  1117. '<div class="block-field">' +
  1118. '<label class="block-field-label">Section Title</label>' +
  1119. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  1120. '</div>' +
  1121. '<div class="block-field">' +
  1122. '<label class="block-field-label">Section Subtitle</label>' +
  1123. '<input type="text" class="block-field-input" value="' + subtitleVal + '" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' +
  1124. '</div>' +
  1125. '</div>' +
  1126. '<div class="block-field">' +
  1127. '<label class="block-field-label">Pricing Plans</label>' +
  1128. '<div class="repeater-items" id="pricing-items-' + blockIndex + '">' +
  1129. itemsHtml +
  1130. '</div>' +
  1131. '<button type="button" class="repeater-add" onclick="addRepeaterItem(' + blockIndex + ', \'items\', {name: \'\', price: \'\', period: \'/month\', description: \'\', features: [], button_text: \'Get Started\', button_url: \'#\', featured: false})">' +
  1132. '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>' +
  1133. 'Add Plan' +
  1134. '</button>' +
  1135. '</div>';
  1136. }
  1137. ​
  1138. case 'cta': {
  1139. const titleVal = escapeHtml(block.data?.title || '');
  1140. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  1141. const btn1Val = escapeHtml(block.data?.button_primary || '');
  1142. const btn1Url = block.data?.button_primary_url || '';
  1143. const btn2Val = escapeHtml(block.data?.button_secondary || '');
  1144. const btn2Url = block.data?.button_secondary_url || '';
  1145. return '<div class="form-row">' +
  1146. '<div class="block-field">' +
  1147. '<label class="block-field-label">Title</label>' +
  1148. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  1149. '</div>' +
  1150. '<div class="block-field">' +
  1151. '<label class="block-field-label">Subtitle</label>' +
  1152. '<input type="text" class="block-field-input" value="' + subtitleVal + '" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' +
  1153. '</div>' +
  1154. '</div>' +
  1155. '<div class="form-row">' +
  1156. '<div class="block-field">' +
  1157. '<label class="block-field-label">Primary Button Text</label>' +
  1158. '<input type="text" class="block-field-input" value="' + btn1Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_primary\', this.value)">' +
  1159. '</div>' +
  1160. '<div class="block-field">' +
  1161. '<label class="block-field-label">Primary Button URL</label>' +
  1162. renderLinkInput(btn1Url, 'updateBlockData(' + blockIndex + ', \'button_primary_url\', VALUE)') +
  1163. '</div>' +
  1164. '</div>' +
  1165. '<div class="form-row">' +
  1166. '<div class="block-field">' +
  1167. '<label class="block-field-label">Secondary Button Text</label>' +
  1168. '<input type="text" class="block-field-input" value="' + btn2Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_secondary\', this.value)">' +
  1169. '</div>' +
  1170. '<div class="block-field">' +
  1171. '<label class="block-field-label">Secondary Button URL</label>' +
  1172. renderLinkInput(btn2Url, 'updateBlockData(' + blockIndex + ', \'button_secondary_url\', VALUE)') +
  1173. '</div>' +
  1174. '</div>';
  1175. }
  1176. ​
  1177. case 'text':
  1178. return `
  1179. <div class="block-field">
  1180. <label class="block-field-label">Title (optional)</label>
  1181. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1182. </div>
  1183. <div class="block-field">
  1184. <label class="block-field-label">Content</label>
  1185. <textarea data-rich="1" class="block-field-input block-field-textarea" style="min-height: 200px;" oninput="updateBlockData(${blockIndex}, 'content', this.value)">${escapeHtml(block.data?.content || '')}</textarea>
  1186. </div>
  1187. `;
  1188. ​
  1189. case 'image':
  1190. return `
  1191. <div class="block-field">
  1192. <label class="block-field-label">Image URL</label>
  1193. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(block.data?.url || '')}" oninput="updateBlockData(${blockIndex}, 'url', this.value)" placeholder="https://...">
  1194. </div>
  1195. <div class="form-row">
  1196. <div class="block-field">
  1197. <label class="block-field-label">Alt Text</label>
  1198. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.alt || '')}" oninput="updateBlockData(${blockIndex}, 'alt', this.value)">
  1199. </div>
  1200. <div class="block-field">
  1201. <label class="block-field-label">Caption (optional)</label>
  1202. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.caption || '')}" oninput="updateBlockData(${blockIndex}, 'caption', this.value)">
  1203. </div>
  1204. </div>
  1205. `;
  1206. ​
  1207. case 'audio':
  1208. return `
  1209. <div class="form-row">
  1210. <div class="block-field">
  1211. <label class="block-field-label">Title</label>
  1212. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1213. </div>
  1214. <div class="block-field">
  1215. <label class="block-field-label">Subtitle</label>
  1216. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1217. </div>
  1218. </div>
  1219. <div class="block-field">
  1220. <label class="block-field-label">Audio File URL</label>
  1221. <input type="text" data-media="audio" class="block-field-input" value="${escapeHtml(block.data?.url || '')}" oninput="updateBlockData(${blockIndex}, 'url', this.value)" placeholder="https://example.com/audio.mp3">
  1222. </div>
  1223. <div class="form-row">
  1224. <div class="block-field">
  1225. <label class="block-field-label">Music Link URL (Optional)</label>
  1226. <input type="url" class="block-field-input" value="${escapeHtml(block.data?.music_link || '')}" oninput="updateBlockData(${blockIndex}, 'music_link', this.value)" placeholder="https://example.com/download">
  1227. </div>
  1228. <div class="block-field">
  1229. <label class="block-field-label">Music Link Text</label>
  1230. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.music_link_text || 'Download')}" oninput="updateBlockData(${blockIndex}, 'music_link_text', this.value)">
  1231. </div>
  1232. </div>
  1233. `;
  1234. ​
  1235. case 'countdown':
  1236. return `
  1237. <div class="form-row">
  1238. <div class="block-field">
  1239. <label class="block-field-label">Title</label>
  1240. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1241. </div>
  1242. <div class="block-field">
  1243. <label class="block-field-label">Subtitle</label>
  1244. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1245. </div>
  1246. </div>
  1247. <div class="form-row">
  1248. <div class="block-field">
  1249. <label class="block-field-label">Target Date</label>
  1250. <input type="date" class="block-field-input" value="${escapeHtml(block.data?.target_date || '')}" oninput="updateBlockData(${blockIndex}, 'target_date', this.value)">
  1251. </div>
  1252. <div class="block-field">
  1253. <label class="block-field-label">Target Time</label>
  1254. <input type="time" class="block-field-input" value="${escapeHtml(block.data?.target_time || '00:00')}" oninput="updateBlockData(${blockIndex}, 'target_time', this.value)">
  1255. </div>
  1256. </div>
  1257. `;
  1258. ​
  1259. case 'newsletter':
  1260. return `
  1261. <div class="block-field">
  1262. <label class="block-field-label">Title</label>
  1263. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1264. </div>
  1265. <div class="block-field">
  1266. <label class="block-field-label">Subtitle</label>
  1267. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">${escapeHtml(block.data?.subtitle || '')}</textarea>
  1268. </div>
  1269. <div class="form-row">
  1270. <div class="block-field">
  1271. <label class="block-field-label">Input Placeholder</label>
  1272. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.placeholder || '')}" oninput="updateBlockData(${blockIndex}, 'placeholder', this.value)">
  1273. </div>
  1274. <div class="block-field">
  1275. <label class="block-field-label">Button Text</label>
  1276. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.button_text || '')}" oninput="updateBlockData(${blockIndex}, 'button_text', this.value)">
  1277. </div>
  1278. </div>
  1279. `;
  1280. ​
  1281. case 'html':
  1282. return `
  1283. <div class="block-field">
  1284. <label class="block-field-label">Custom HTML Code</label>
  1285. <textarea class="block-field-input block-field-textarea" style="min-height: 300px; font-family: ui-monospace, monospace; font-size: 0.8125rem;" oninput="updateBlockData(${blockIndex}, 'html', this.value)">${escapeHtml(block.data?.html || '')}</textarea>
  1286. <p style="font-size: 0.75rem; color: var(--text-subtle); margin-top: 8px;">You can use any HTML, plus CSS in style tags and JavaScript in script tags.</p>
  1287. </div>
  1288. `;
  1289. ​
  1290. case 'image-text':
  1291. return `
  1292. <div class="form-row">
  1293. <div class="block-field">
  1294. <label class="block-field-label">Section Title</label>
  1295. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1296. </div>
  1297. <div class="block-field">
  1298. <label class="block-field-label">Section Subtitle</label>
  1299. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1300. </div>
  1301. </div>
  1302. <div class="block-field">
  1303. <label class="block-field-label">Image URL</label>
  1304. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(block.data?.image_url || '')}" oninput="updateBlockData(${blockIndex}, 'image_url', this.value)" placeholder="https://...">
  1305. </div>
  1306. <div class="form-row">
  1307. <div class="block-field">
  1308. <label class="block-field-label">Image Alt Text</label>
  1309. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.image_alt || '')}" oninput="updateBlockData(${blockIndex}, 'image_alt', this.value)">
  1310. </div>
  1311. <div class="block-field">
  1312. <label class="block-field-label">Image Position</label>
  1313. <select class="block-field-input" onchange="updateBlockData(${blockIndex}, 'image_position', this.value)">
  1314. <option value="left" ${block.data?.image_position === 'left' ? 'selected' : ''}>Left</option>
  1315. <option value="right" ${block.data?.image_position === 'right' ? 'selected' : ''}>Right</option>
  1316. </select>
  1317. </div>
  1318. </div>
  1319. <div class="block-field">
  1320. <label class="block-field-label">Content Text</label>
  1321. <textarea data-rich="1" class="block-field-input block-field-textarea" style="min-height: 150px;" oninput="updateBlockData(${blockIndex}, 'content', this.value)">${escapeHtml(block.data?.content || '')}</textarea>
  1322. </div>
  1323. <div class="form-row">
  1324. <div class="block-field">
  1325. <label class="block-field-label">Button Text (optional)</label>
  1326. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.button_text || '')}" oninput="updateBlockData(${blockIndex}, 'button_text', this.value)">
  1327. </div>
  1328. <div class="block-field">
  1329. <label class="block-field-label">Button URL</label>
  1330. ${renderLinkInput(block.data?.button_url || '#', 'updateBlockData(' + blockIndex + ', \'button_url\', VALUE)')}
  1331. </div>
  1332. </div>
  1333. `;
  1334. ​
  1335. case 'product-cards':
  1336. return `
  1337. <div class="form-row">
  1338. <div class="block-field">
  1339. <label class="block-field-label">Section Title</label>
  1340. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1341. </div>
  1342. <div class="block-field">
  1343. <label class="block-field-label">Section Subtitle</label>
  1344. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1345. </div>
  1346. </div>
  1347. <div class="block-field">
  1348. <label class="block-field-label">Products</label>
  1349. <div class="repeater-items" id="products-items-${blockIndex}">
  1350. ${(block.data?.products || []).map((item, i) => `
  1351. <div class="repeater-item">
  1352. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1353. <span class="repeater-item-title">${escapeHtml(item.title || 'New Product')}</span>
  1354. <div class="repeater-item-actions">
  1355. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'products', ${i})" style="color: var(--error);">Remove</button>
  1356. </div>
  1357. </div>
  1358. <div class="repeater-item-content">
  1359. <div class="form-row">
  1360. <div class="block-field">
  1361. <label class="block-field-label">Product Title</label>
  1362. <input type="text" class="block-field-input" value="${escapeHtml(item.title || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'title', this.value)">
  1363. </div>
  1364. <div class="block-field">
  1365. <label class="block-field-label">Product Image (48x48)</label>
  1366. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(item.image || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'image', this.value)" placeholder="https://...">
  1367. </div>
  1368. </div>
  1369. <div class="block-field">
  1370. <label class="block-field-label">Description</label>
  1371. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'description', this.value)">${escapeHtml(item.description || '')}</textarea>
  1372. </div>
  1373. <div class="block-field">
  1374. <label class="block-field-label">Features (one per line)</label>
  1375. <textarea class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'features', this.value.split('\\n').filter(f => f.trim()))">${(item.features || []).join('\\n')}</textarea>
  1376. </div>
  1377. <div class="form-row">
  1378. <div class="block-field">
  1379. <label class="block-field-label">Button Text</label>
  1380. <input type="text" class="block-field-input" value="${escapeHtml(item.button_text || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'button_text', this.value)">
  1381. </div>
  1382. <div class="block-field">
  1383. <label class="block-field-label">Button URL</label>
  1384. <input type="text" class="block-field-input" value="${escapeHtml(item.button_url || '#')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'button_url', this.value)">
  1385. </div>
  1386. </div>
  1387. </div>
  1388. </div>
  1389. `).join('')}
  1390. </div>
  1391. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'products', {title: '', image: '', description: '', features: [], button_text: 'View', button_url: '#'})">
  1392. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  1393. Add Product
  1394. </button>
  1395. </div>
  1396. `;
  1397. ​
  1398. case 'video':
  1399. return `
  1400. <div class="form-row">
  1401. <div class="block-field">
  1402. <label class="block-field-label">Section Title</label>
  1403. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1404. </div>
  1405. <div class="block-field">
  1406. <label class="block-field-label">Section Subtitle</label>
  1407. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1408. </div>
  1409. </div>
  1410. <div class="form-row">
  1411. <div class="block-field">
  1412. <label class="block-field-label">Video URL</label>
  1413. <input type="text" data-media="video" class="block-field-input" value="${escapeHtml(block.data?.url || '')}" oninput="updateBlockData(${blockIndex}, 'url', this.value)" placeholder="YouTube, Facebook, or direct video URL">
  1414. </div>
  1415. <div class="block-field">
  1416. <label class="block-field-label">Video Type</label>
  1417. <select class="block-field-input" onchange="updateBlockData(${blockIndex}, 'type', this.value)">
  1418. <option value="url" ${block.data?.type === 'url' ? 'selected' : ''}>Direct URL</option>
  1419. <option value="youtube" ${block.data?.type === 'youtube' ? 'selected' : ''}>YouTube</option>
  1420. <option value="facebook" ${block.data?.type === 'facebook' ? 'selected' : ''}>Facebook</option>
  1421. </select>
  1422. </div>
  1423. </div>
  1424. <div class="block-field">
  1425. <label class="block-field-label">Poster Image URL (Thumbnail)</label>
  1426. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(block.data?.posterUrl || '')}" oninput="updateBlockData(${blockIndex}, 'posterUrl', this.value)" placeholder="https://example.com/image.jpg">
  1427. </div>
  1428. <div class="block-field">
  1429. <label class="block-field-label">Caption</label>
  1430. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.caption || '')}" oninput="updateBlockData(${blockIndex}, 'caption', this.value)">
  1431. </div>
  1432. `;
  1433. ​
  1434. case 'gallery':
  1435. return `
  1436. <div class="form-row">
  1437. <div class="block-field">
  1438. <label class="block-field-label">Section Title</label>
  1439. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1440. </div>
  1441. <div class="block-field">
  1442. <label class="block-field-label">Section Subtitle</label>
  1443. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1444. </div>
  1445. </div>
  1446. <div class="block-field">
  1447. <label class="block-field-label">Images</label>
  1448. <div class="repeater-items" id="images-items-${blockIndex}">
  1449. ${(block.data?.images || []).map((item, i) => `
  1450. <div class="repeater-item">
  1451. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1452. <span class="repeater-item-title">${escapeHtml(item.alt || 'Image ' + (i + 1))}</span>
  1453. <div class="repeater-item-actions">
  1454. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'images', ${i})" style="color: var(--error);">Remove</button>
  1455. </div>
  1456. </div>
  1457. <div class="repeater-item-content">
  1458. <div class="form-row">
  1459. <div class="block-field">
  1460. <label class="block-field-label">Image URL</label>
  1461. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(item.url || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'url', this.value)" placeholder="https://...">
  1462. </div>
  1463. <div class="block-field">
  1464. <label class="block-field-label">Alt Text</label>
  1465. <input type="text" class="block-field-input" value="${escapeHtml(item.alt || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'alt', this.value)">
  1466. </div>
  1467. </div>
  1468. <div class="block-field">
  1469. <label class="block-field-label">Caption</label>
  1470. <input type="text" class="block-field-input" value="${escapeHtml(item.caption || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'caption', this.value)">
  1471. </div>
  1472. </div>
  1473. </div>
  1474. `).join('')}
  1475. </div>
  1476. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'images', {url: '', alt: '', caption: ''})">
  1477. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  1478. Add Image
  1479. </button>
  1480. </div>
  1481. `;
  1482. ​
  1483. case 'faq':
  1484. return `
  1485. <div class="form-row">
  1486. <div class="block-field">
  1487. <label class="block-field-label">Section Title</label>
  1488. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1489. </div>
  1490. <div class="block-field">
  1491. <label class="block-field-label">Section Subtitle</label>
  1492. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1493. </div>
  1494. </div>
  1495. <div class="block-field">
  1496. <label class="block-field-label">FAQ Items</label>
  1497. <div class="repeater-items" id="items-items-${blockIndex}">
  1498. ${(block.data?.items || []).map((item, i) => `
  1499. <div class="repeater-item">
  1500. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1501. <span class="repeater-item-title">${escapeHtml(item.question || 'Question ' + (i + 1))}</span>
  1502. <div class="repeater-item-actions">
  1503. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  1504. </div>
  1505. </div>
  1506. <div class="repeater-item-content">
  1507. <div class="block-field">
  1508. <label class="block-field-label">Question</label>
  1509. <input type="text" class="block-field-input" value="${escapeHtml(item.question || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'question', this.value)">
  1510. </div>
  1511. <div class="block-field">
  1512. <label class="block-field-label">Answer</label>
  1513. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'answer', this.value)">${escapeHtml(item.answer || '')}</textarea>
  1514. </div>
  1515. </div>
  1516. </div>
  1517. `).join('')}
  1518. </div>
  1519. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {question: '', answer: ''})">
  1520. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  1521. Add Question
  1522. </button>
  1523. </div>
  1524. `;
  1525. ​
  1526. case 'team':
  1527. return `
  1528. <div class="form-row">
  1529. <div class="block-field">
  1530. <label class="block-field-label">Section Title</label>
  1531. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1532. </div>
  1533. <div class="block-field">
  1534. <label class="block-field-label">Section Subtitle</label>
  1535. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1536. </div>
  1537. </div>
  1538. <div class="block-field">
  1539. <label class="block-field-label">Team Members</label>
  1540. <div class="repeater-items" id="members-items-${blockIndex}">
  1541. ${(block.data?.members || []).map((member, i) => `
  1542. <div class="repeater-item">
  1543. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1544. <span class="repeater-item-title">${escapeHtml(member.name || 'Team Member ' + (i + 1))}</span>
  1545. <div class="repeater-item-actions">
  1546. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'members', ${i})" style="color: var(--error);">Remove</button>
  1547. </div>
  1548. </div>
  1549. <div class="repeater-item-content">
  1550. <div class="form-row">
  1551. <div class="block-field">
  1552. <label class="block-field-label">Name</label>
  1553. <input type="text" class="block-field-input" value="${escapeHtml(member.name || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'name', this.value)">
  1554. </div>
  1555. <div class="block-field">
  1556. <label class="block-field-label">Role</label>
  1557. <input type="text" class="block-field-input" value="${escapeHtml(member.role || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'role', this.value)">
  1558. </div>
  1559. </div>
  1560. <div class="form-row">
  1561. <div class="block-field">
  1562. <label class="block-field-label">Photo URL</label>
  1563. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(member.image || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'image', this.value)" placeholder="https://... (optional)">
  1564. </div>
  1565. <div class="block-field">
  1566. <label class="block-field-label">Initials (if no photo)</label>
  1567. <input type="text" class="block-field-input" value="${escapeHtml(member.initials || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'initials', this.value)" maxlength="2">
  1568. </div>
  1569. </div>
  1570. <div class="block-field">
  1571. <label class="block-field-label">Bio</label>
  1572. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'bio', this.value)">${escapeHtml(member.bio || '')}</textarea>
  1573. </div>
  1574. <div class="block-field">
  1575. <label class="block-field-label">Social Links (JSON)</label>
  1576. <textarea class="block-field-input block-field-textarea" oninput="try { updateRepeaterItem(${blockIndex}, 'members', ${i}, 'social', JSON.parse(this.value)); } catch(e) {}" placeholder='[{"platform": "twitter", "url": "#"}]'>${escapeHtml(JSON.stringify(member.social || []))}</textarea>
  1577. </div>
  1578. </div>
  1579. </div>
  1580. `).join('')}
  1581. </div>
  1582. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'members', {name: '', role: '', initials: '', image: '', bio: '', social: []})">
  1583. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  1584. Add Team Member
  1585. </button>
  1586. </div>
  1587. `;
  1588. ​
  1589. default:
  1590. return '<p style="color: var(--text-muted);">This block type isn\'t supported.</p>';
  1591. }
  1592. }
  1593. ​
  1594. function renderLinkInput(value, callback) {
  1595. const id = 'link-' + Math.random().toString(36).substr(2, 9);
  1596. return '<div class="link-input-wrapper">' +
  1597. '<input type="text" class="block-field-input" id="' + id + '" value="' + escapeHtml(value) + '" oninput="' + callback.replace('VALUE', 'this.value') + '">' +
  1598. '<button type="button" class="link-page-btn" onclick="showLinkSelector(\'' + id + '\', \'' + callback.replace(/'/g, "\\'") + '\')" title="Select page">' +
  1599. '<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="16" height="16"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>' +
  1600. '</button>' +
  1601. '</div>';
  1602. }
  1603. ​
  1604. function updateBlockData(blockIndex, key, value) {
  1605. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1606. blocks[blockIndex].data[key] = value;
  1607. schedulePreviewUpdate();
  1608. }
  1609. ​
  1610. function updateRepeaterItem(blockIndex, key, itemIndex, field, value) {
  1611. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1612. if (!blocks[blockIndex].data[key]) blocks[blockIndex].data[key] = [];
  1613. if (!blocks[blockIndex].data[key][itemIndex]) blocks[blockIndex].data[key][itemIndex] = {};
  1614. blocks[blockIndex].data[key][itemIndex][field] = value;
  1615. schedulePreviewUpdate();
  1616. }
  1617. ​
  1618. function addRepeaterItem(blockIndex, key, defaultItem) {
  1619. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1620. if (!blocks[blockIndex].data[key]) blocks[blockIndex].data[key] = [];
  1621. blocks[blockIndex].data[key].push({ ...defaultItem });
  1622. schedulePreviewUpdate();
  1623. renderBlocks();
  1624. }
  1625. ​
  1626. function removeRepeaterItem(blockIndex, key, itemIndex) {
  1627. blocks[blockIndex].data[key].splice(itemIndex, 1);
  1628. renderBlocks();
  1629. schedulePreviewUpdate();
  1630. }
  1631. ​
  1632. function toggleBlock(index) {
  1633. const items = document.querySelectorAll('.block-item');
  1634. items[index]?.classList.toggle('expanded');
  1635. }
  1636. ​
  1637. function expandAllBlocks() {
  1638. document.querySelectorAll('.block-item').forEach(el => el.classList.add('expanded'));
  1639. }
  1640. ​
  1641. function collapseAllBlocks() {
  1642. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('expanded'));
  1643. }
  1644. ​
  1645. function addBlock(type) {
  1646. const defaultId = getDefaultBlockId(type);
  1647. const newBlock = {
  1648. id: defaultId,
  1649. type: type,
  1650. data: getDefaultBlockData(type)
  1651. };
  1652. blocks.push(newBlock);
  1653. renderBlocks();
  1654. hideAddBlockModal();
  1655. schedulePreviewUpdate();
  1656. ​
  1657. setTimeout(() => {
  1658. const items = document.querySelectorAll('.block-item');
  1659. items[items.length - 1]?.classList.add('expanded');
  1660. items[items.length - 1]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  1661. }, 50);
  1662. }
  1663. ​
  1664. function getDefaultBlockId(type) {
  1665. const baseName = type;
  1666. const existingIds = blocks
  1667. .filter(b => b.type === type && b.id)
  1668. .map(b => b.id);
  1669. ​
  1670. if (existingIds.length === 0) {
  1671. return baseName;
  1672. }
  1673. ​
  1674. let counter = 2;
  1675. while (existingIds.includes(baseName + '-' + counter)) {
  1676. counter++;
  1677. }
  1678. return baseName + '-' + counter;
  1679. }
  1680. ​
  1681. function getDefaultBlockData(type) {
  1682. switch (type) {
  1683. case 'hero':
  1684. return { badge: '', title: '', subtitle: '', button_primary: '', button_primary_url: '#', button_secondary: '', button_secondary_url: '#' };
  1685. case 'stats':
  1686. return { items: [] };
  1687. case 'features':
  1688. return { title: '', subtitle: '', items: [] };
  1689. case 'testimonials':
  1690. return { title: '', subtitle: '', items: [] };
  1691. case 'pricing':
  1692. return { title: '', subtitle: '', items: [] };
  1693. case 'cta':
  1694. return { title: '', subtitle: '', button_primary: '', button_primary_url: '#', button_secondary: '', button_secondary_url: '#' };
  1695. case 'text':
  1696. return { title: '', content: '' };
  1697. case 'image':
  1698. return { url: '', alt: '', caption: '' };
  1699. case 'image-text':
  1700. return { image_url: '', image_alt: '', title: '', subtitle: '', content: '', image_position: 'left', button_text: '', button_url: '#' };
  1701. case 'product-cards':
  1702. return { title: '', subtitle: '', products: [] };
  1703. case 'video':
  1704. return { title: 'Watch Our Video', subtitle: '', url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', type: 'youtube', caption: '' };
  1705. case 'gallery':
  1706. return {
  1707. title: 'Photo Gallery', subtitle: '', images: [
  1708. { url: 'https://placehold.co/800x600', alt: 'Gallery image 1', caption: '' },
  1709. { url: 'https://placehold.co/800x600', alt: 'Gallery image 2', caption: '' },
  1710. { url: 'https://placehold.co/800x600', alt: 'Gallery image 3', caption: '' }
  1711. ]
  1712. };
  1713. case 'faq':
  1714. return {
  1715. title: 'Frequently Asked Questions', subtitle: '', items: [
  1716. { question: 'What do you offer?', answer: 'Write a short, clear answer here.' },
  1717. { question: 'How does it work?', answer: 'Explain the steps in a sentence or two.' },
  1718. { question: 'How much does it cost?', answer: 'Mention your prices, or where to find them.' }
  1719. ]
  1720. };
  1721. case 'team':
  1722. return {
  1723. title: 'Meet Our Team', subtitle: '', members: [
  1724. { name: 'John Doe', role: 'CEO & Founder', initials: 'JD', image: '', bio: '', social: [{ platform: 'twitter', url: '#' }, { platform: 'linkedin', url: '#' }] },
  1725. { name: 'Jane Smith', role: 'Head of Design', initials: 'JS', image: '', bio: '', social: [{ platform: 'twitter', url: '#' }, { platform: 'linkedin', url: '#' }] }
  1726. ]
  1727. };
  1728. case 'audio':
  1729. return { title: 'Listen Now', subtitle: '', url: '', music_link: '', music_link_text: 'Download' };
  1730. case 'countdown':
  1731. return { title: 'Coming Soon', subtitle: '', target_date: '', target_time: '00:00' };
  1732. case 'newsletter':
  1733. return { title: 'Subscribe to Our Newsletter', subtitle: 'Get new posts and updates by email.', button_text: 'Subscribe', placeholder: 'Enter your email' };
  1734. case 'html':
  1735. return { html: '' };
  1736. default:
  1737. return {};
  1738. }
  1739. }
  1740. ​
  1741. function duplicateBlock(index) {
  1742. const newBlock = JSON.parse(JSON.stringify(blocks[index]));
  1743. const baseType = blocks[index].type;
  1744. newBlock.id = getDefaultBlockId(baseType);
  1745. blocks.splice(index + 1, 0, newBlock);
  1746. renderBlocks();
  1747. }
  1748. ​
  1749. function deleteBlock(index) {
  1750. if (confirm('Delete this block?')) {
  1751. blocks.splice(index, 1);
  1752. renderBlocks();
  1753. schedulePreviewUpdate();
  1754. }
  1755. }
  1756. ​
  1757. function moveBlockUp(index) {
  1758. if (index > 0) {
  1759. [blocks[index], blocks[index - 1]] = [blocks[index - 1], blocks[index]];
  1760. renderBlocks();
  1761. }
  1762. }
  1763. ​
  1764. function moveBlockDown(index) {
  1765. if (index < blocks.length - 1) {
  1766. [blocks[index], blocks[index + 1]] = [blocks[index + 1], blocks[index]];
  1767. renderBlocks();
  1768. }
  1769. }
  1770. ​
  1771. function handleDragStart(e) {
  1772. draggedBlock = this;
  1773. this.classList.add('dragging');
  1774. e.dataTransfer.effectAllowed = 'move';
  1775. }
  1776. ​
  1777. function handleDragEnd(e) {
  1778. this.classList.remove('dragging');
  1779. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('drag-over'));
  1780. draggedBlock = null;
  1781. }
  1782. ​
  1783. function handleDragOver(e) {
  1784. e.preventDefault();
  1785. e.dataTransfer.dropEffect = 'move';
  1786. this.classList.add('drag-over');
  1787. }
  1788. ​
  1789. function handleDragLeave(e) {
  1790. this.classList.remove('drag-over');
  1791. }
  1792. ​
  1793. function handleDrop(e) {
  1794. e.preventDefault();
  1795. this.classList.remove('drag-over');
  1796. ​
  1797. if (draggedBlock && draggedBlock !== this) {
  1798. const fromIndex = parseInt(draggedBlock.dataset.index);
  1799. const toIndex = parseInt(this.dataset.index);
  1800. ​
  1801. const [movedBlock] = blocks.splice(fromIndex, 1);
  1802. blocks.splice(toIndex, 0, movedBlock);
  1803. renderBlocks();
  1804. schedulePreviewUpdate();
  1805. }
  1806. }
  1807. ​
  1808. ​
  1809. const NE_SVG = {
  1810. plus: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
  1811. up: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="16" height="16"><polyline points="18 15 12 9 6 15"/></svg>',
  1812. down: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="16" height="16"><polyline points="6 9 12 15 18 9"/></svg>',
  1813. trash: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>',
  1814. image: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>'
  1815. };
  1816. ​
  1817. const SOCIAL_PLATFORMS = [
  1818. ['twitter', 'Twitter/X'], ['github', 'GitHub'], ['linkedin', 'LinkedIn'], ['facebook', 'Facebook'],
  1819. ['instagram', 'Instagram'], ['youtube', 'YouTube'], ['tiktok', 'TikTok'], ['pinterest', 'Pinterest'],
  1820. ['reddit', 'Reddit'], ['discord', 'Discord'], ['snapchat', 'Snapchat'], ['whatsapp', 'Whatsapp'],
  1821. ['telegram', 'Telegram'], ['twitch', 'Twitch'], ['spotify', 'Spotify'], ['medium', 'Medium'],
  1822. ['slack', 'Slack'], ['dribbble', 'Dribbble'], ['mastodon', 'Mastodon'], ['patreon', 'Patreon'],
  1823. ['kofi', 'Ko-Fi'], ['vimeo', 'Vimeo'], ['tumblr', 'Tumblr'], ['stackoverflow', 'Stack Overflow'],
  1824. ['gitlab', 'GitLab'], ['bluesky', 'Bluesky'], ['line', 'Line'], ['wechat', 'WeChat'],
  1825. ['flatlypage', 'FlatlyPage CMS'], ['xing', 'Xing']
  1826. ];
  1827. ​
  1828. let navIconPickerIndex = -1;
  1829. let navButtonIconPickerIndex = -1;
  1830. ​
  1831. function neIconSvg(id) {
  1832. return `<svg class="ne-icon-svg" aria-hidden="true"><use href="${FLATLY_BASE_URL}/assets/icons.svg#${id}"></use></svg>`;
  1833. }
  1834. ​
  1835. function neActions(moveFn, removeFn, index, count) {
  1836. return `
  1837. <div class="ne-actions">
  1838. <button type="button" class="ne-btn" title="Move up" ${index === 0 ? 'disabled' : ''} onclick="${moveFn}(${index}, -1)">${NE_SVG.up}</button>
  1839. <button type="button" class="ne-btn" title="Move down" ${index >= count - 1 ? 'disabled' : ''} onclick="${moveFn}(${index}, 1)">${NE_SVG.down}</button>
  1840. <button type="button" class="ne-btn ne-btn-danger" title="Remove" onclick="${removeFn}(${index})">${NE_SVG.trash}</button>
  1841. </div>`;
  1842. }
  1843. ​
  1844. function neMove(list, index, dir) {
  1845. const target = index + dir;
  1846. if (!list || target < 0 || target >= list.length) return false;
  1847. [list[index], list[target]] = [list[target], list[index]];
  1848. return true;
  1849. }
  1850. ​
  1851. function neEmpty(text) {
  1852. return `<div class="ne-empty">${text}</div>`;
  1853. }
  1854. ​
  1855. function neFocusLast(container, selector) {
  1856. if (!container) return;
  1857. const fields = container.querySelectorAll(selector);
  1858. if (fields.length) fields[fields.length - 1].focus();
  1859. }
  1860. ​
  1861. function renderNavLinks() {
  1862. const container = document.getElementById('navLinksContainer');
  1863. if (!container) return;
  1864. ​
  1865. const hasIcons = Array.isArray(ICON_IDS) && ICON_IDS.length > 0;
  1866. ​
  1867. container.innerHTML = navLinks.length ? `<div class="ne-list">${navLinks.map((link, i) => `
  1868. <div class="ne-item">
  1869. <div class="ne-row">
  1870. ${hasIcons ? `<button type="button" class="ne-icon-btn ${navIconPickerIndex === i ? 'active' : ''}" title="Choose icon" onclick="toggleNavIconPicker(${i})">${link.icon ? neIconSvg(escapeHtml(link.icon)) : NE_SVG.image}</button>` : ''}
  1871. <input type="text" class="ne-input ne-nav-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="navLinks[${i}].label = this.value">
  1872. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL or #anchor" oninput="navLinks[${i}].url = this.value">
  1873. ${neActions('moveNavLink', 'removeNavLink', i, navLinks.length)}
  1874. </div>
  1875. ${hasIcons && navIconPickerIndex === i ? `
  1876. <div class="ne-picker">
  1877. <div class="ne-picker-head">
  1878. <input type="text" class="ne-input" placeholder="Search icons" oninput="filterNavIcons(this.value, this)">
  1879. <button type="button" class="ne-chip" onclick="setNavLinkIcon(${i}, '')">No icon</button>
  1880. </div>
  1881. <div class="ne-picker-grid">
  1882. ${ICON_IDS.map(id => `<button type="button" class="ne-picker-item ${link.icon === id ? 'selected' : ''}" data-icon="${id}" title="${id.replace('icon-', '')}" onclick="setNavLinkIcon(${i}, '${id}')">${neIconSvg(id)}</button>`).join('')}
  1883. </div>
  1884. </div>` : ''}
  1885. </div>`).join('')}</div>` : neEmpty('No links yet. Add your first menu link.');
  1886. ​
  1887. if (navIconPickerIndex >= 0) {
  1888. const search = container.querySelector('.ne-picker .ne-input');
  1889. if (search) search.focus();
  1890. }
  1891. }
  1892. ​
  1893. function toggleNavIconPicker(index) {
  1894. navIconPickerIndex = navIconPickerIndex === index ? -1 : index;
  1895. renderNavLinks();
  1896. }
  1897. ​
  1898. function filterNavIcons(query, input) {
  1899. const q = query.trim().toLowerCase();
  1900. const scope = input && input.closest(".ne-picker") ? input.closest(".ne-picker") : document;
  1901. scope.querySelectorAll(".ne-picker-item").forEach(btn => {
  1902. btn.style.display = !q || btn.dataset.icon.includes(q) ? "" : "none";
  1903. });
  1904. }
  1905. ​
  1906. function setNavLinkIcon(index, icon) {
  1907. if (!navLinks[index]) return;
  1908. if (icon) {
  1909. navLinks[index].icon = icon;
  1910. } else {
  1911. delete navLinks[index].icon;
  1912. }
  1913. navIconPickerIndex = -1;
  1914. renderNavLinks();
  1915. }
  1916. ​
  1917. function addNavLink() {
  1918. navLinks.push({ label: '', url: '#' });
  1919. navIconPickerIndex = -1;
  1920. renderNavLinks();
  1921. neFocusLast(document.getElementById('navLinksContainer'), '.ne-nav-label');
  1922. }
  1923. ​
  1924. function removeNavLink(index) {
  1925. navLinks.splice(index, 1);
  1926. navIconPickerIndex = -1;
  1927. renderNavLinks();
  1928. }
  1929. ​
  1930. function moveNavLink(index, dir) {
  1931. if (neMove(navLinks, index, dir)) {
  1932. navIconPickerIndex = -1;
  1933. renderNavLinks();
  1934. }
  1935. }
  1936. ​
  1937. function renderNavButtons() {
  1938. const container = document.getElementById('navButtonsContainer');
  1939. if (!container) return;
  1940. ​
  1941. const hasIcons = Array.isArray(ICON_IDS) && ICON_IDS.length > 0;
  1942. ​
  1943. container.innerHTML = navButtons.length ? `<div class="ne-list">${navButtons.map((btn, i) => `
  1944. <div class="ne-item">
  1945. <div class="ne-row">
  1946. ${hasIcons ? `<button type="button" class="ne-icon-btn ${navButtonIconPickerIndex === i ? 'active' : ''}" title="Choose icon" onclick="toggleNavButtonIconPicker(${i})">${btn.icon ? neIconSvg(escapeHtml(btn.icon)) : NE_SVG.image}</button>` : ''}
  1947. <input type="text" class="ne-input ne-btn-label" value="${escapeHtml(btn.label || '')}" placeholder="Label" oninput="navButtons[${i}].label = this.value">
  1948. <input type="text" class="ne-input" value="${escapeHtml(btn.url || '')}" placeholder="URL" oninput="navButtons[${i}].url = this.value">
  1949. <select class="ne-input ne-select" onchange="navButtons[${i}].style = this.value">
  1950. <option value="ghost" ${btn.style === 'ghost' ? 'selected' : ''}>Ghost</option>
  1951. <option value="primary" ${btn.style === 'primary' ? 'selected' : ''}>Primary</option>
  1952. <option value="outline" ${btn.style === 'outline' ? 'selected' : ''}>Outline</option>
  1953. </select>
  1954. ${neActions('moveNavButton', 'removeNavButton', i, navButtons.length)}
  1955. </div>
  1956. ${hasIcons && navButtonIconPickerIndex === i ? `
  1957. <div class="ne-picker">
  1958. <div class="ne-picker-head">
  1959. <input type="text" class="ne-input" placeholder="Search icons" oninput="filterNavIcons(this.value, this)">
  1960. <button type="button" class="ne-chip" onclick="setNavButtonIcon(${i}, '')">No icon</button>
  1961. </div>
  1962. <div class="ne-picker-grid">
  1963. ${ICON_IDS.map(id => `<button type="button" class="ne-picker-item ${btn.icon === id ? 'selected' : ''}" data-icon="${id}" title="${id.replace('icon-', '')}" onclick="setNavButtonIcon(${i}, '${id}')">${neIconSvg(id)}</button>`).join('')}
  1964. </div>
  1965. </div>` : ''}
  1966. </div>`).join('')}</div>` : neEmpty('No buttons yet.');
  1967. ​
  1968. if (navButtonIconPickerIndex >= 0) {
  1969. const search = container.querySelector('.ne-picker .ne-input');
  1970. if (search) search.focus();
  1971. }
  1972. }
  1973. ​
  1974. function toggleNavButtonIconPicker(index) {
  1975. navButtonIconPickerIndex = navButtonIconPickerIndex === index ? -1 : index;
  1976. renderNavButtons();
  1977. }
  1978. ​
  1979. function setNavButtonIcon(index, icon) {
  1980. if (!navButtons[index]) return;
  1981. if (icon) {
  1982. navButtons[index].icon = icon;
  1983. } else {
  1984. delete navButtons[index].icon;
  1985. }
  1986. navButtonIconPickerIndex = -1;
  1987. renderNavButtons();
  1988. }
  1989. ​
  1990. function addNavButton() {
  1991. navButtons.push({ label: '', url: '#', style: 'ghost' });
  1992. navButtonIconPickerIndex = -1;
  1993. renderNavButtons();
  1994. neFocusLast(document.getElementById('navButtonsContainer'), '.ne-btn-label');
  1995. }
  1996. ​
  1997. function removeNavButton(index) {
  1998. navButtons.splice(index, 1);
  1999. navButtonIconPickerIndex = -1;
  2000. renderNavButtons();
  2001. }
  2002. ​
  2003. function moveNavButton(index, dir) {
  2004. if (neMove(navButtons, index, dir)) {
  2005. navButtonIconPickerIndex = -1;
  2006. renderNavButtons();
  2007. }
  2008. }
  2009. ​
  2010. function ensureFooterColumn(colIndex) {
  2011. if (!footerData.columns) footerData.columns = [];
  2012. if (!footerData.columns[colIndex]) footerData.columns[colIndex] = { title: '', links: [] };
  2013. if (!footerData.columns[colIndex].links) footerData.columns[colIndex].links = [];
  2014. return footerData.columns[colIndex];
  2015. }
  2016. ​
  2017. function updateFooterColumnTitle(colIndex, value) {
  2018. ensureFooterColumn(colIndex).title = value;
  2019. updateFooterData();
  2020. }
  2021. ​
  2022. function updateFooterColumnLinkLabel(colIndex, linkIndex, value) {
  2023. const col = ensureFooterColumn(colIndex);
  2024. if (!col.links[linkIndex]) col.links[linkIndex] = { label: '', url: '' };
  2025. col.links[linkIndex].label = value;
  2026. updateFooterData();
  2027. }
  2028. ​
  2029. function updateFooterColumnLinkUrl(colIndex, linkIndex, value) {
  2030. const col = ensureFooterColumn(colIndex);
  2031. if (!col.links[linkIndex]) col.links[linkIndex] = { label: '', url: '' };
  2032. col.links[linkIndex].url = value;
  2033. updateFooterData();
  2034. }
  2035. ​
  2036. function renderFooterColumns() {
  2037. const container = document.getElementById('footerColumnsContainer');
  2038. if (!container) return;
  2039. if (!footerData.columns) footerData.columns = [];
  2040. ​
  2041. container.innerHTML = footerData.columns.length ? `<div class="ne-columns">${footerData.columns.map((col, i) => {
  2042. if (!col) col = { title: '', links: [] };
  2043. const links = col.links || [];
  2044. return `
  2045. <div class="ne-card">
  2046. <div class="ne-card-head">
  2047. <input type="text" class="ne-input ne-title ne-col-title" value="${escapeHtml(col.title || '')}" placeholder="Column title" oninput="updateFooterColumnTitle(${i}, this.value)">
  2048. ${neActions('moveFooterColumn', 'removeFooterColumn', i, footerData.columns.length)}
  2049. </div>
  2050. <div class="ne-card-body">
  2051. ${links.length ? links.map((link, j) => `
  2052. <div class="ne-row ne-row-compact">
  2053. <input type="text" class="ne-input ne-link-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="updateFooterColumnLinkLabel(${i}, ${j}, this.value)">
  2054. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateFooterColumnLinkUrl(${i}, ${j}, this.value)">
  2055. <button type="button" class="ne-btn ne-btn-danger" title="Remove link" onclick="removeFooterColumnLink(${i}, ${j})">${NE_SVG.trash}</button>
  2056. </div>`).join('') : neEmpty('No links in this column.')}
  2057. <button type="button" class="ne-add" onclick="addFooterColumnLink(${i})">${NE_SVG.plus} Add Link</button>
  2058. </div>
  2059. </div>`;
  2060. }).join('')}</div>` : neEmpty('No columns yet. Add your first footer column.');
  2061. }
  2062. ​
  2063. function addFooterColumn() {
  2064. if (!footerData.columns) footerData.columns = [];
  2065. footerData.columns.push({ title: '', links: [] });
  2066. renderFooterColumns();
  2067. updateFooterData();
  2068. neFocusLast(document.getElementById('footerColumnsContainer'), '.ne-col-title');
  2069. }
  2070. ​
  2071. function removeFooterColumn(index) {
  2072. footerData.columns.splice(index, 1);
  2073. renderFooterColumns();
  2074. updateFooterData();
  2075. }
  2076. ​
  2077. function moveFooterColumn(index, dir) {
  2078. if (neMove(footerData.columns, index, dir)) {
  2079. renderFooterColumns();
  2080. updateFooterData();
  2081. }
  2082. }
  2083. ​
  2084. function addFooterColumnLink(colIndex) {
  2085. ensureFooterColumn(colIndex).links.push({ label: '', url: '#' });
  2086. renderFooterColumns();
  2087. updateFooterData();
  2088. const cards = document.querySelectorAll('#footerColumnsContainer .ne-card');
  2089. if (cards[colIndex]) neFocusLast(cards[colIndex], '.ne-link-label');
  2090. }
  2091. ​
  2092. function removeFooterColumnLink(colIndex, linkIndex) {
  2093. footerData.columns[colIndex].links.splice(linkIndex, 1);
  2094. renderFooterColumns();
  2095. updateFooterData();
  2096. }
  2097. ​
  2098. function renderSocialLinks() {
  2099. const container = document.getElementById('socialLinksContainer');
  2100. if (!container) return;
  2101. if (!footerData.social_links) footerData.social_links = [];
  2102. ​
  2103. container.innerHTML = footerData.social_links.length ? `<div class="ne-list">${footerData.social_links.map((link, i) => `
  2104. <div class="ne-item">
  2105. <div class="ne-row">
  2106. <select class="ne-input ne-select" onchange="updateSocialLink(${i}, 'platform', this.value)">
  2107. ${SOCIAL_PLATFORMS.map(([value, label]) => `<option value="${value}" ${link.platform === value ? 'selected' : ''}>${label}</option>`).join('')}
  2108. </select>
  2109. <input type="text" class="ne-input ne-social-url" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateSocialLink(${i}, 'url', this.value)">
  2110. ${neActions('moveSocialLink', 'removeSocialLink', i, footerData.social_links.length)}
  2111. </div>
  2112. </div>`).join('')}</div>` : neEmpty('No social links yet.');
  2113. }
  2114. ​
  2115. function updateSocialLink(index, field, value) {
  2116. if (!footerData.social_links[index]) return;
  2117. footerData.social_links[index][field] = value;
  2118. updateFooterData();
  2119. }
  2120. ​
  2121. function addSocialLink() {
  2122. if (!footerData.social_links) footerData.social_links = [];
  2123. footerData.social_links.push({ platform: 'twitter', url: '#' });
  2124. renderSocialLinks();
  2125. updateFooterData();
  2126. neFocusLast(document.getElementById('socialLinksContainer'), '.ne-social-url');
  2127. }
  2128. ​
  2129. function removeSocialLink(index) {
  2130. footerData.social_links.splice(index, 1);
  2131. renderSocialLinks();
  2132. updateFooterData();
  2133. }
  2134. ​
  2135. function moveSocialLink(index, dir) {
  2136. if (neMove(footerData.social_links, index, dir)) {
  2137. renderSocialLinks();
  2138. updateFooterData();
  2139. }
  2140. }
  2141. ​
  2142. function renderBottomLinks() {
  2143. const container = document.getElementById('bottomLinksContainer');
  2144. if (!container) return;
  2145. if (!footerData.bottom_links) footerData.bottom_links = [];
  2146. ​
  2147. container.innerHTML = footerData.bottom_links.length ? `<div class="ne-list">${footerData.bottom_links.map((link, i) => `
  2148. <div class="ne-item">
  2149. <div class="ne-row">
  2150. <input type="text" class="ne-input ne-bottom-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="updateBottomLink(${i}, 'label', this.value)">
  2151. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateBottomLink(${i}, 'url', this.value)">
  2152. ${neActions('moveBottomLink', 'removeBottomLink', i, footerData.bottom_links.length)}
  2153. </div>
  2154. </div>`).join('')}</div>` : neEmpty('No bottom links yet.');
  2155. }
  2156. ​
  2157. function updateBottomLink(index, field, value) {
  2158. if (!footerData.bottom_links[index]) return;
  2159. footerData.bottom_links[index][field] = value;
  2160. updateFooterData();
  2161. }
  2162. ​
  2163. function addBottomLink() {
  2164. if (!footerData.bottom_links) footerData.bottom_links = [];
  2165. footerData.bottom_links.push({ label: '', url: '#' });
  2166. renderBottomLinks();
  2167. updateFooterData();
  2168. neFocusLast(document.getElementById('bottomLinksContainer'), '.ne-bottom-label');
  2169. }
  2170. ​
  2171. function removeBottomLink(index) {
  2172. footerData.bottom_links.splice(index, 1);
  2173. renderBottomLinks();
  2174. updateFooterData();
  2175. }
  2176. ​
  2177. function moveBottomLink(index, dir) {
  2178. if (neMove(footerData.bottom_links, index, dir)) {
  2179. renderBottomLinks();
  2180. updateFooterData();
  2181. }
  2182. }
  2183. ​
  2184. function updateFooterData() {
  2185. footerData.brand_description = document.getElementById('footerBrandDesc')?.value || '';
  2186. footerData.copyright = document.getElementById('footerCopyright')?.value || '';
  2187. ​
  2188. if (!footerData.columns) footerData.columns = [];
  2189. if (!footerData.social_links) footerData.social_links = [];
  2190. if (!footerData.bottom_links) footerData.bottom_links = [];
  2191. }
  2192. ​
  2193. function updateAnchorsList() {
  2194. const anchorsList = document.getElementById('anchorsList');
  2195. if (!anchorsList) return;
  2196. ​
  2197. const anchors = new Set(['#']); // Always include top
  2198. ​
  2199. blocks.forEach(block => {
  2200. if (block.id && ['features', 'testimonials', 'pricing', 'faq', 'team', 'stats', 'cta', 'video', 'gallery', 'audio', 'countdown', 'newsletter'].includes(block.type)) {
  2201. anchors.add(`#${block.id}`);
  2202. }
  2203. });
  2204. ​
  2205. anchorsList.innerHTML = '';
  2206. anchors.forEach(anchor => {
  2207. const btn = document.createElement('button');
  2208. btn.type = 'button';
  2209. btn.className = 'btn btn-secondary btn-sm';
  2210. btn.onclick = () => selectLink(anchor);
  2211. btn.textContent = anchor === '#' ? '#top' : anchor;
  2212. btn.style.margin = '0 8px 8px 0';
  2213. anchorsList.appendChild(btn);
  2214. });
  2215. }
  2216. ​
  2217. function renderInternalPages() {
  2218. const container = document.getElementById('internalPages');
  2219. if (!container) return;
  2220. ​
  2221. container.innerHTML = AVAILABLE_PAGES.map(page => `
  2222. <button type="button" class="btn btn-secondary btn-sm" style="margin: 0 8px 8px 0;" onclick="selectLink('${escapeHtml(page.url)}')">${escapeHtml(page.label)}</button>
  2223. `).join('');
  2224. }
  2225. ​
  2226. function showLinkSelector(inputId, callback) {
  2227. currentLinkCallback = { inputId, callback };
  2228. updateAnchorsList();
  2229. document.getElementById('linkSelectorModal').classList.add('active');
  2230. }
  2231. ​
  2232. function hideLinkSelector() {
  2233. document.getElementById('linkSelectorModal').classList.remove('active');
  2234. currentLinkCallback = null;
  2235. }
  2236. ​
  2237. function selectLink(url) {
  2238. if (currentLinkCallback) {
  2239. const input = document.getElementById(currentLinkCallback.inputId);
  2240. if (input) {
  2241. input.value = url;
  2242. input.dispatchEvent(new Event('input'));
  2243. }
  2244. }
  2245. hideLinkSelector();
  2246. }
  2247. ​
  2248. ​
  2249. function showAddBlockModal() {
  2250. document.getElementById('addBlockModal').classList.add('active');
  2251. }
  2252. ​
  2253. function hideAddBlockModal() {
  2254. document.getElementById('addBlockModal').classList.remove('active');
  2255. }
  2256. ​
  2257. function confirmDelete(productId, productName) {
  2258. document.getElementById('deleteProductId').value = productId;
  2259. document.getElementById('deleteProductName').textContent = productName;
  2260. document.getElementById('deleteModal').classList.add('active');
  2261. }
  2262. ​
  2263. function hideDeleteModal() {
  2264. document.getElementById('deleteModal').classList.remove('active');
  2265. }
  2266. ​
  2267. ​
  2268. function escapeHtml(text) {
  2269. if (!text) return '';
  2270. const div = document.createElement('div');
  2271. div.textContent = text;
  2272. return div.innerHTML;
  2273. }
  2274. ​
  2275. document.addEventListener('keydown', function (e) {
  2276. if (e.key === 'Escape') {
  2277. hideAddBlockModal();
  2278. hideDeleteModal();
  2279. hideLinkSelector();
  2280. }
  2281. });
  2282. ​
  2283. document.querySelectorAll('.modal-overlay').forEach(overlay => {
  2284. overlay.addEventListener('click', function (e) {
  2285. if (e.target === this) {
  2286. this.classList.remove('active');
  2287. }
  2288. });
  2289. });
  2290. ​
  2291. ​
  2292. ​
  2293. ​
  2294. ​
  2295. ​
  2296. ​
  2297. ​
  2298. ​
  2299. ​
  2300. ​
  2301. ​
  2302. ​
  2303. ​
  2304. ​
  2305. ​
  2306. ​
  2307. ​
  2308. ​
  2309. ​
  2310. ​
  2311. function renderLanguages() {
  2312. const container = document.getElementById('languagesContainer');
  2313. if (!container || typeof languagesData === 'undefined') return;
  2314. ​
  2315. container.innerHTML = languagesData.length ? `<div class="ne-list">${languagesData.map((lang, i) => `
  2316. <div class="ne-item">
  2317. <div class="ne-row">
  2318. <input type="text" class="ne-input ne-lang-name" value="${escapeHtml(lang.name || '')}" placeholder="Language name, like English or Polski" maxlength="50" oninput="languagesData[${i}].name = this.value">
  2319. <input type="text" class="ne-input ne-lang-code" value="${escapeHtml(lang.code || '')}" placeholder="Code (en, pl, de)" maxlength="11" style="max-width: 140px;" oninput="languagesData[${i}].code = this.value.toLowerCase().trim()">
  2320. ${neActions('moveLanguage', 'removeLanguage', i, languagesData.length)}
  2321. </div>
  2322. </div>`).join('')}</div>` : neEmpty('No languages yet. Add your main language first, then the others.');
  2323. }
  2324. ​
  2325. function addLanguage() {
  2326. languagesData.push({ name: '', code: '' });
  2327. renderLanguages();
  2328. neFocusLast(document.getElementById('languagesContainer'), '.ne-lang-name');
  2329. }
  2330. ​
  2331. function removeLanguage(index) {
  2332. languagesData.splice(index, 1);
  2333. renderLanguages();
  2334. }
  2335. ​
  2336. function moveLanguage(index, dir) {
  2337. if (neMove(languagesData, index, dir)) {
  2338. renderLanguages();
  2339. }
  2340. }(function () {
  2341. const form = document.getElementById('pageForm') || document.getElementById('settingsForm');
  2342. if (!form) return;
  2343. ​
  2344. const isSettings = form.id === 'settingsForm';
  2345. const params = new URLSearchParams(location.search);
  2346. const draftKey = 'flatly-draft:' + location.pathname + ':' + (params.get('tab') || 'index') + ':' + (params.get('id') || '') + ':' + (params.get('lang') || '');
  2347. const pendingKey = 'flatly-draft-pending';
  2348. const skipFields = new Set(['csrf_token', 'action', 'blocks_data', 'nav_links', 'nav_buttons', 'footer_data', 'product_id', 'languages_data', 'analytics_scripts', 'custom_html_location[]', 'custom_html_code[]']);
  2349. let baseline = '';
  2350. let timer = 0;
  2351. let submitting = false;
  2352. ​
  2353. const storage = {
  2354. get(key) {
  2355. try { return localStorage.getItem(key); } catch (e) { return null; }
  2356. },
  2357. set(key, value) {
  2358. try { localStorage.setItem(key, value); } catch (e) {}
  2359. },
  2360. remove(key) {
  2361. try { localStorage.removeItem(key); } catch (e) {}
  2362. }
  2363. };
  2364. ​
  2365. function snapshot() {
  2366. const fields = {};
  2367. Array.from(form.elements).forEach(el => {
  2368. if (!el.name || skipFields.has(el.name) || el.type === 'file' || el.type === 'submit' || el.type === 'button') return;
  2369. fields[el.name] = el.type === 'checkbox' ? el.checked : el.value;
  2370. });
  2371. ​
  2372. const data = { fields };
  2373. if (isSettings) {
  2374. updateFooterData();
  2375. data.navLinks = navLinks;
  2376. data.navButtons = navButtons;
  2377. data.footerData = footerData;
  2378. if (typeof languagesData !== 'undefined') data.languages = languagesData;
  2379. } else {
  2380. data.blocks = blocks;
  2381. }
  2382. return data;
  2383. }
  2384. ​
  2385. function serialize() {
  2386. try {
  2387. return JSON.stringify(snapshot());
  2388. } catch (e) {
  2389. return '';
  2390. }
  2391. }
  2392. ​
  2393. function saveDraft() {
  2394. if (submitting) return;
  2395. const current = serialize();
  2396. if (!current) return;
  2397. if (current === baseline) {
  2398. storage.remove(draftKey);
  2399. return;
  2400. }
  2401. storage.set(draftKey, JSON.stringify({ savedAt: Date.now(), data: JSON.parse(current) }));
  2402. }
  2403. ​
  2404. function scheduleSave() {
  2405. clearTimeout(timer);
  2406. timer = setTimeout(saveDraft, 700);
  2407. }
  2408. ​
  2409. function applyDraft(data) {
  2410. Array.from(form.elements).forEach(el => {
  2411. if (!el.name || !(el.name in data.fields)) return;
  2412. if (el.type === 'checkbox') {
  2413. el.checked = !!data.fields[el.name];
  2414. } else {
  2415. el.value = data.fields[el.name];
  2416. }
  2417. });
  2418. ​
  2419. if (isSettings) {
  2420. navLinks.splice(0, navLinks.length, ...(data.navLinks || []));
  2421. navButtons.splice(0, navButtons.length, ...(data.navButtons || []));
  2422. Object.keys(footerData).forEach(k => delete footerData[k]);
  2423. Object.assign(footerData, data.footerData || {});
  2424. const desc = document.getElementById('footerBrandDesc');
  2425. const copy = document.getElementById('footerCopyright');
  2426. if (desc) desc.value = footerData.brand_description || '';
  2427. if (copy) copy.value = footerData.copyright || '';
  2428. renderNavLinks();
  2429. renderNavButtons();
  2430. renderFooterColumns();
  2431. renderSocialLinks();
  2432. renderBottomLinks();
  2433. if (typeof languagesData !== 'undefined') languagesData.splice(0, languagesData.length, ...(data.languages || languagesData));
  2434. if (typeof renderLanguages === 'function') renderLanguages();
  2435. updateFooterData();
  2436. } else {
  2437. blocks.splice(0, blocks.length, ...(data.blocks || []));
  2438. renderBlocks();
  2439. updateBlockCount();
  2440. if (typeof schedulePreviewUpdate === 'function') schedulePreviewUpdate();
  2441. }
  2442. }
  2443. ​
  2444. function showBanner(draft) {
  2445. const host = document.querySelector('.main-content');
  2446. if (!host) return;
  2447. ​
  2448. const banner = document.createElement('div');
  2449. banner.className = 'draft-banner';
  2450. banner.innerHTML = `
  2451. <div class="draft-banner-text">
  2452. <strong>You have unsaved changes</strong>
  2453. <span>Saved on this device at ${new Date(draft.savedAt).toLocaleString()}. Restore them to pick up where you left off.</span>
  2454. </div>
  2455. <div class="draft-banner-actions">
  2456. <button type="button" class="btn btn-secondary btn-sm" data-draft="discard">Discard</button>
  2457. <button type="button" class="btn btn-primary btn-sm" data-draft="restore">Restore</button>
  2458. </div>`;
  2459. ​
  2460. banner.addEventListener('click', e => {
  2461. const action = e.target.closest('[data-draft]')?.dataset.draft;
  2462. if (!action) return;
  2463. if (action === 'restore') {
  2464. applyDraft(draft.data);
  2465. saveDraft();
  2466. } else {
  2467. storage.remove(draftKey);
  2468. }
  2469. banner.remove();
  2470. });
  2471. ​
  2472. host.insertBefore(banner, host.firstChild);
  2473. }
  2474. ​
  2475. try {
  2476. const pending = sessionStorage.getItem(pendingKey);
  2477. if (pending) {
  2478. sessionStorage.removeItem(pendingKey);
  2479. if (document.querySelector('.message.success')) storage.remove(pending);
  2480. }
  2481. } catch (e) {}
  2482. ​
  2483. form.addEventListener('submit', () => {
  2484. submitting = true;
  2485. clearTimeout(timer);
  2486. try { sessionStorage.setItem(pendingKey, draftKey); } catch (e) {}
  2487. });
  2488. ​
  2489. document.addEventListener('DOMContentLoaded', () => {
  2490. setTimeout(() => {
  2491. baseline = serialize();
  2492. ​
  2493. const raw = storage.get(draftKey);
  2494. if (raw) {
  2495. try {
  2496. const draft = JSON.parse(raw);
  2497. if (draft && draft.data && JSON.stringify(draft.data) !== baseline) {
  2498. showBanner(draft);
  2499. } else {
  2500. storage.remove(draftKey);
  2501. }
  2502. } catch (e) {
  2503. storage.remove(draftKey);
  2504. }
  2505. }
  2506. ​
  2507. ['input', 'change', 'click'].forEach(evt => document.addEventListener(evt, scheduleSave, true));
  2508. window.addEventListener('pagehide', saveDraft);
  2509. document.addEventListener('visibilitychange', () => {
  2510. if (document.visibilityState === 'hidden') saveDraft();
  2511. });
  2512. }, 400);
  2513. });
  2514. })();
  2515. ​
  2516. const MEDIA_ACCEPT = {
  2517. image: 'image/jpeg,image/png,image/gif,image/webp,image/avif,image/x-icon,.jpg,.jpeg,.png,.gif,.webp,.avif,.ico',
  2518. video: 'video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.m4v,.webm,.ogv,.mov',
  2519. audio: 'audio/mpeg,audio/ogg,audio/wav,audio/mp4,audio/aac,audio/flac,audio/webm,.mp3,.ogg,.oga,.opus,.wav,.m4a,.aac,.flac,.weba'
  2520. };
  2521. ​
  2522. const MEDIA_MIME = {
  2523. mp4: 'video/mp4', m4v: 'video/mp4', webm: 'video/webm', ogv: 'video/ogg', mov: 'video/mp4',
  2524. mp3: 'audio/mpeg', ogg: 'audio/ogg', oga: 'audio/ogg', opus: 'audio/ogg', wav: 'audio/wav',
  2525. m4a: 'audio/mp4', aac: 'audio/aac', flac: 'audio/flac', weba: 'audio/webm'
  2526. };
  2527. ​
  2528. const MEDIA_ICONS = {
  2529. upload: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="15" height="15"><path d="M12 16V4M6 10l6-6 6 6"/><path d="M4 20h16"/></svg>',
  2530. library: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="15" height="15"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
  2531. close: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24" width="16" height="16"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
  2532. video: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="28" height="28"><rect x="3" y="5" width="14" height="14" rx="2"/><path d="M17 9.5l4-2.5v10l-4-2.5"/></svg>',
  2533. audio: '<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" width="28" height="28"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'
  2534. };
  2535. ​
  2536. function mediaMime(url, fallback) {
  2537. const path = String(url || '').split('?')[0].split('#')[0];
  2538. const ext = path.includes('.') ? path.split('.').pop().toLowerCase() : '';
  2539. return MEDIA_MIME[ext] || fallback;
  2540. }
  2541. ​
  2542. function mediaFieldFor(node) {
  2543. return node.closest('.media-field');
  2544. }
  2545. ​
  2546. function mediaSetStatus(field, text, state) {
  2547. const status = field.querySelector('.media-status');
  2548. if (!status) return;
  2549. status.textContent = text || '';
  2550. status.className = 'media-status' + (state ? ' ' + state : '');
  2551. clearTimeout(field._statusTimer);
  2552. if (state === 'success' || state === 'error') {
  2553. field._statusTimer = setTimeout(() => {
  2554. status.textContent = '';
  2555. status.className = 'media-status';
  2556. }, state === 'error' ? 8000 : 3000);
  2557. }
  2558. }
  2559. ​
  2560. function mediaApply(field, url) {
  2561. const input = field.querySelector('input[data-media]');
  2562. if (!input) return;
  2563. input.value = url;
  2564. input.dispatchEvent(new Event('input', { bubbles: true }));
  2565. input.dispatchEvent(new Event('change', { bubbles: true }));
  2566. }
  2567. ​
  2568. function mediaUploadFile(field, file) {
  2569. const kind = field.dataset.kind;
  2570. if (field.classList.contains('uploading')) return;
  2571. ​
  2572. const body = new FormData();
  2573. body.append('csrf_token', CSRF_TOKEN);
  2574. body.append('kind', kind);
  2575. body.append('file', file);
  2576. ​
  2577. const bar = field.querySelector('.media-progress-bar');
  2578. field.classList.add('uploading');
  2579. if (bar) bar.style.width = '0%';
  2580. mediaSetStatus(field, 'Uploading ' + file.name + '…', 'busy');
  2581. ​
  2582. const xhr = new XMLHttpRequest();
  2583. xhr.open('POST', FLATLY_BASE_URL + '/admin/upload');
  2584. xhr.upload.onprogress = e => {
  2585. if (e.lengthComputable && bar) bar.style.width = Math.round((e.loaded / e.total) * 100) + '%';
  2586. };
  2587. xhr.onerror = () => {
  2588. field.classList.remove('uploading');
  2589. mediaSetStatus(field, "Couldn't upload, check your connection and try again.", 'error');
  2590. };
  2591. xhr.onload = () => {
  2592. field.classList.remove('uploading');
  2593. let response = null;
  2594. try { response = JSON.parse(xhr.responseText); } catch (e) {}
  2595. if (response && response.success) {
  2596. mediaApply(field, response.url);
  2597. mediaSetStatus(field, 'Uploaded, ' + response.size, 'success');
  2598. } else {
  2599. mediaSetStatus(field, response && response.error ? response.error : 'Upload failed (HTTP ' + xhr.status + ').', 'error');
  2600. }
  2601. };
  2602. xhr.send(body);
  2603. }
  2604. ​
  2605. function mediaPickFile(button) {
  2606. const field = mediaFieldFor(button);
  2607. if (!field) return;
  2608. const picker = document.createElement('input');
  2609. picker.type = 'file';
  2610. picker.accept = MEDIA_ACCEPT[field.dataset.kind] || '';
  2611. picker.onchange = () => {
  2612. if (picker.files && picker.files[0]) mediaUploadFile(field, picker.files[0]);
  2613. };
  2614. picker.click();
  2615. }
  2616. ​
  2617. function mediaLibraryKey(e) {
  2618. if (e.key === 'Escape') mediaCloseLibrary();
  2619. }
  2620. ​
  2621. function mediaCloseLibrary() {
  2622. document.querySelector('.media-modal')?.remove();
  2623. document.removeEventListener('keydown', mediaLibraryKey);
  2624. }
  2625. ​
  2626. function mediaOpenLibrary(button) {
  2627. const field = mediaFieldFor(button);
  2628. if (!field) return;
  2629. const kind = field.dataset.kind;
  2630. ​
  2631. mediaCloseLibrary();
  2632. const modal = document.createElement('div');
  2633. modal.className = 'media-modal';
  2634. modal.innerHTML = `
  2635. <div class="media-modal-box">
  2636. <div class="media-modal-head">
  2637. <h3>Media library</h3>
  2638. <input type="text" class="ne-input" placeholder="Search files" data-media-search>
  2639. <button type="button" class="ne-btn" data-media-close title="Close">${MEDIA_ICONS.close}</button>
  2640. </div>
  2641. <div class="media-modal-body"><div class="media-empty">Loading...</div></div>
  2642. </div>`;
  2643. document.body.appendChild(modal);
  2644. document.addEventListener('keydown', mediaLibraryKey);
  2645. ​
  2646. const body = modal.querySelector('.media-modal-body');
  2647. let items = [];
  2648. ​
  2649. const draw = query => {
  2650. const q = (query || '').trim().toLowerCase();
  2651. const visible = items.filter(item => !q || item.name.toLowerCase().includes(q));
  2652. if (!visible.length) {
  2653. body.innerHTML = `<div class="media-empty">${items.length ? 'No matching files.' : 'No files uploaded yet.'}</div>`;
  2654. return;
  2655. }
  2656. body.innerHTML = `<div class="media-grid">${visible.map(item => `
  2657. <button type="button" class="media-item" data-url="${escapeHtml(item.url)}" title="${escapeHtml(item.name)}">
  2658. <span class="media-thumb">${kind === 'image' ? `<img src="${escapeHtml(flatlyUrl(item.url))}" alt="" loading="lazy">` : MEDIA_ICONS[kind] || ''}</span>
  2659. <span class="media-name">${escapeHtml(item.name)}</span>
  2660. <span class="media-size">${escapeHtml(item.size)}</span>
  2661. </button>`).join('')}</div>`;
  2662. };
  2663. ​
  2664. modal.addEventListener('click', e => {
  2665. if (e.target === modal || e.target.closest('[data-media-close]')) {
  2666. mediaCloseLibrary();
  2667. return;
  2668. }
  2669. const item = e.target.closest('.media-item');
  2670. if (item) {
  2671. mediaApply(field, item.dataset.url);
  2672. mediaCloseLibrary();
  2673. }
  2674. });
  2675. modal.querySelector('[data-media-search]').addEventListener('input', e => draw(e.target.value));
  2676. ​
  2677. fetch(FLATLY_BASE_URL + '/admin/upload?list=' + encodeURIComponent(kind), { credentials: 'same-origin' })
  2678. .then(r => r.json())
  2679. .then(data => {
  2680. if (!data.success) throw new Error(data.error || "Couldn't load your files.");
  2681. items = data.items || [];
  2682. draw('');
  2683. })
  2684. .catch(err => {
  2685. body.innerHTML = `<div class="media-empty">${escapeHtml(err.message)}</div>`;
  2686. });
  2687. }
  2688. ​
  2689. function enhanceMediaInputs(root) {
  2690. (root || document).querySelectorAll('input[data-media]:not([data-media-ready])').forEach(input => {
  2691. const kind = input.dataset.media;
  2692. if (!MEDIA_ACCEPT[kind]) return;
  2693. input.dataset.mediaReady = '1';
  2694. ​
  2695. const field = document.createElement('div');
  2696. field.className = 'media-field';
  2697. field.dataset.kind = kind;
  2698. input.parentNode.insertBefore(field, input);
  2699. ​
  2700. const row = document.createElement('div');
  2701. row.className = 'media-row';
  2702. field.appendChild(row);
  2703. row.appendChild(input);
  2704. ​
  2705. const actions = document.createElement('div');
  2706. actions.className = 'media-actions';
  2707. actions.innerHTML = `
  2708. <button type="button" class="btn btn-secondary btn-sm" onclick="mediaPickFile(this)">${MEDIA_ICONS.upload} Upload</button>
  2709. <button type="button" class="btn btn-secondary btn-sm" onclick="mediaOpenLibrary(this)">${MEDIA_ICONS.library} Library</button>`;
  2710. row.appendChild(actions);
  2711. ​
  2712. field.insertAdjacentHTML('beforeend', '<div class="media-progress"><div class="media-progress-bar"></div></div><div class="media-status"></div>');
  2713. });
  2714. }
  2715. ​
  2716. (function () {
  2717. let frame = 0;
  2718. const schedule = () => {
  2719. if (frame) return;
  2720. frame = requestAnimationFrame(() => {
  2721. frame = 0;
  2722. enhanceMediaInputs(document);
  2723. });
  2724. };
  2725. ​
  2726. const start = () => {
  2727. enhanceMediaInputs(document);
  2728. const host = document.querySelector('.main-content') || document.body;
  2729. new MutationObserver(schedule).observe(host, { childList: true, subtree: true });
  2730. };
  2731. ​
  2732. if (document.readyState === 'loading') {
  2733. document.addEventListener('DOMContentLoaded', start);
  2734. } else {
  2735. start();
  2736. }
  2737. ​
  2738. document.addEventListener('dragover', e => {
  2739. const field = e.target.closest && e.target.closest('.media-field');
  2740. if (!field || !e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
  2741. e.preventDefault();
  2742. field.classList.add('dragging');
  2743. });
  2744. ​
  2745. document.addEventListener('dragleave', e => {
  2746. const field = e.target.closest && e.target.closest('.media-field');
  2747. if (field && !field.contains(e.relatedTarget)) field.classList.remove('dragging');
  2748. });
  2749. ​
  2750. document.addEventListener('drop', e => {
  2751. const field = e.target.closest && e.target.closest('.media-field');
  2752. if (!field) return;
  2753. field.classList.remove('dragging');
  2754. const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
  2755. if (!file) return;
  2756. e.preventDefault();
  2757. mediaUploadFile(field, file);
  2758. });
  2759. })();
  2760. ​
  2761. function switchEditLang(code) {
  2762. const url = new URL(location.href);
  2763. if (code) {
  2764. url.searchParams.set('lang', code);
  2765. } else {
  2766. url.searchParams.delete('lang');
  2767. }
  2768. location.href = url.toString();
  2769. }