WebOrbiton
v3.0.0.0

FlatlyPage

← Changes All versions
2,772 lines · 143.8 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. // A field in a hidden tab can't show its validation message, so the form would silently not submit.
  543. settingsForm.addEventListener('invalid', (event) => {
  544. const panel = event.target.closest('.settings-panel');
  545. if (panel && !panel.classList.contains('active')) activateSettingsTab(panel.id.replace(/^panel-/, ''));
  546. }, true);
  547. ​
  548. // Code fields are sent base64-encoded so hosting firewalls don't block posts containing <script>.
  549. settingsForm.addEventListener('submit', () => {
  550. settingsForm.querySelectorAll('.flatly-encoded').forEach(input => input.remove());
  551. settingsForm.querySelectorAll('textarea[data-encode]').forEach(area => {
  552. const name = area.name || area.dataset.encodeName;
  553. if (!name) return;
  554. area.dataset.encodeName = name;
  555. area.removeAttribute('name');
  556. const hidden = document.createElement('input');
  557. hidden.type = 'hidden';
  558. hidden.className = 'flatly-encoded';
  559. hidden.name = name.endsWith('[]') ? name.slice(0, -2) + '_b64[]' : name + '_b64';
  560. hidden.value = flatlyBase64Encode(area.value);
  561. settingsForm.appendChild(hidden);
  562. });
  563. });
  564. ​
  565. // Coming back to the page (bfcache) must give the fields their names back.
  566. window.addEventListener('pageshow', () => {
  567. settingsForm.querySelectorAll('.flatly-encoded').forEach(input => input.remove());
  568. settingsForm.querySelectorAll('textarea[data-encode-name]').forEach(area => { area.name = area.dataset.encodeName; });
  569. });
  570. }
  571. });
  572. ​
  573. function flatlyBase64Encode(text) {
  574. const bytes = new TextEncoder().encode(String(text));
  575. let binary = '';
  576. for (let i = 0; i < bytes.length; i += 0x8000) {
  577. binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
  578. }
  579. return btoa(binary);
  580. }
  581. ​
  582. function flatlyBase64Decode(encoded) {
  583. const binary = atob(encoded);
  584. const bytes = new Uint8Array(binary.length);
  585. for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  586. return new TextDecoder().decode(bytes);
  587. }
  588. ​
  589. (function () {
  590. const scrollKey = 'flatly-ui:scroll:' + location.pathname + location.search;
  591. const pendingKey = 'flatly-ui:scroll-pending';
  592. const desktop = window.matchMedia('(min-width: 769px)');
  593. let timer = 0;
  594. ​
  595. const scroller = () => (desktop.matches ? document.querySelector('.main') : document.scrollingElement) || document.documentElement;
  596. ​
  597. const save = () => {
  598. try { sessionStorage.setItem(scrollKey, String(scroller().scrollTop || 0)); } catch (e) {}
  599. };
  600. ​
  601. const navigationType = () => {
  602. const entry = performance.getEntriesByType && performance.getEntriesByType('navigation')[0];
  603. return entry ? entry.type : '';
  604. };
  605. ​
  606. let shouldRestore = ['reload', 'back_forward'].includes(navigationType());
  607. try {
  608. if (sessionStorage.getItem(pendingKey) === scrollKey) {
  609. shouldRestore = true;
  610. }
  611. sessionStorage.removeItem(pendingKey);
  612. } catch (e) {}
  613. ​
  614. document.addEventListener('submit', () => {
  615. save();
  616. try { sessionStorage.setItem(pendingKey, scrollKey); } catch (e) {}
  617. }, true);
  618. ​
  619. document.addEventListener('scroll', () => {
  620. clearTimeout(timer);
  621. timer = setTimeout(save, 150);
  622. }, { capture: true, passive: true });
  623. ​
  624. window.addEventListener('pagehide', save);
  625. ​
  626. if (!shouldRestore) return;
  627. ​
  628. let saved = 0;
  629. try { saved = parseInt(sessionStorage.getItem(scrollKey) || '0', 10) || 0; } catch (e) {}
  630. if (!saved) return;
  631. ​
  632. const apply = () => { scroller().scrollTop = saved; };
  633. window.addEventListener('load', () => {
  634. apply();
  635. setTimeout(apply, 250);
  636. });
  637. })();
  638. ​
  639. document.getElementById('pageForm')?.addEventListener('submit', function (e) {
  640. document.getElementById('blocksData').value = JSON.stringify(blocks);
  641. });
  642. ​
  643. document.getElementById('settingsForm')?.addEventListener('submit', function (e) {
  644. document.getElementById('navLinksData').value = JSON.stringify(navLinks);
  645. document.getElementById('navButtonsData').value = JSON.stringify(navButtons);
  646. updateFooterData();
  647. document.getElementById('footerData').value = JSON.stringify(footerData);
  648. const languagesField = document.getElementById('languagesDataField');
  649. if (languagesField && typeof languagesData !== 'undefined') languagesField.value = JSON.stringify(languagesData);
  650. });
  651. ​
  652. ​
  653. function generateId() {
  654. return 'block-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
  655. }
  656. ​
  657. function updateBlockCount() {
  658. const countEl = document.getElementById('blockCount');
  659. if (countEl) countEl.textContent = blocks.length;
  660. }
  661. ​
  662. function getUniqueBlockId(baseId, currentIndex) {
  663. if (!baseId || baseId.trim() === '') return '';
  664. ​
  665. const cleanId = baseId.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
  666. ​
  667. let counter = 2;
  668. let finalId = cleanId;
  669. ​
  670. blocks.forEach((block, index) => {
  671. if (index !== currentIndex) {
  672. if (block.id === finalId) {
  673. ​
  674. while (blocks.some((b, i) => i !== currentIndex && b.id === `${cleanId}-${counter}`)) {
  675. counter++;
  676. }
  677. finalId = `${cleanId}-${counter}`;
  678. } else if (block.id === cleanId && counter === 2) {
  679. ​
  680. }
  681. }
  682. });
  683. ​
  684. return finalId;
  685. }
  686. ​
  687. function renderBlocks() {
  688. const container = document.getElementById('blocksContainer');
  689. if (!container) return;
  690. ​
  691. const blockTypes = {};
  692. blocks.forEach((block) => {
  693. if (!block.id) {
  694. const type = block.type;
  695. if (!blockTypes[type]) {
  696. blockTypes[type] = [];
  697. }
  698. blockTypes[type].push(block);
  699. }
  700. });
  701. ​
  702. Object.keys(blockTypes).forEach(type => {
  703. const existingIds = blocks
  704. .filter(b => b.type === type && b.id)
  705. .map(b => b.id);
  706. ​
  707. blockTypes[type].forEach((block) => {
  708. let counter = 1;
  709. let newId = type;
  710. ​
  711. if (existingIds.includes(newId)) {
  712. counter = 2;
  713. while (existingIds.includes(`${type}-${counter}`)) {
  714. counter++;
  715. }
  716. newId = `${type}-${counter}`;
  717. }
  718. ​
  719. block.id = newId;
  720. existingIds.push(newId);
  721. });
  722. });
  723. ​
  724. blocks.forEach((block, index) => {
  725. if (block.id) {
  726. block.id = getUniqueBlockId(block.id, index);
  727. }
  728. });
  729. ​
  730. const expandedItems = document.querySelectorAll('.block-item.expanded');
  731. expandedBlockIndices.clear();
  732. expandedItems.forEach(item => {
  733. const index = item.dataset.index;
  734. if (index !== undefined) expandedBlockIndices.add(parseInt(index));
  735. });
  736. ​
  737. container.innerHTML = '';
  738. ​
  739. blocks.forEach((block, index) => {
  740. const el = createBlockElement(block, index);
  741. container.appendChild(el);
  742. ​
  743. if (expandedBlockIndices.has(index)) {
  744. el.classList.add('expanded');
  745. }
  746. });
  747. ​
  748. updateBlockCount();
  749. }
  750. ​
  751. function createBlockElement(block, index) {
  752. const div = document.createElement('div');
  753. div.className = 'block-item';
  754. div.dataset.index = index;
  755. div.draggable = false;
  756. ​
  757. div.addEventListener('dragover', handleDragOver);
  758. div.addEventListener('drop', handleDrop);
  759. div.addEventListener('dragleave', handleDragLeave);
  760. ​
  761. const title = getBlockTitle(block);
  762. ​
  763. div.innerHTML = `
  764. <div class="block-header" onclick="toggleBlock(${index})">
  765. <div class="block-drag" draggable="true" onmousedown="event.stopPropagation()">
  766. <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>
  767. </div>
  768. <span class="block-type">${block.type}</span>
  769. <span class="block-title">${escapeHtml(title)}</span>
  770. <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;">
  771. <div class="block-actions">
  772. <button type="button" class="block-toggle" onclick="event.stopPropagation(); moveBlockUp(${index})" title="Move Up">
  773. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"/></svg>
  774. </button>
  775. <button type="button" class="block-toggle" onclick="event.stopPropagation(); moveBlockDown(${index})" title="Move Down">
  776. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
  777. </button>
  778. <button type="button" class="block-toggle" onclick="event.stopPropagation(); duplicateBlock(${index})" title="Duplicate">
  779. <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>
  780. </button>
  781. <button type="button" class="block-toggle" onclick="event.stopPropagation(); deleteBlock(${index})" title="Delete" style="color: var(--error);">
  782. <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>
  783. </button>
  784. <button type="button" class="block-toggle block-toggle-arrow">
  785. <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
  786. </button>
  787. </div>
  788. </div>
  789. <div class="block-content">
  790. ${renderBlockFields(block, index)}
  791. </div>
  792. `;
  793. ​
  794. setTimeout(() => {
  795. const dragHandle = div.querySelector('.block-drag');
  796. if (dragHandle) {
  797. dragHandle.addEventListener('dragstart', function (e) {
  798. e.stopPropagation();
  799. draggedBlock = div;
  800. div.classList.add('dragging');
  801. e.dataTransfer.effectAllowed = 'move';
  802. });
  803. ​
  804. dragHandle.addEventListener('dragend', function (e) {
  805. e.stopPropagation();
  806. div.classList.remove('dragging');
  807. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('drag-over'));
  808. draggedBlock = null;
  809. });
  810. }
  811. }, 0);
  812. ​
  813. return div;
  814. }
  815. ​
  816. ​
  817. function getBlockTitle(block) {
  818. switch (block.type) {
  819. case 'hero': return block.data?.title || 'Hero Section';
  820. case 'blog-hero': return block.data?.title || 'Blog Hero Section';
  821. case 'stats': return 'Statistics';
  822. case 'features': return block.data?.title || 'Features';
  823. case 'testimonials': return block.data?.title || 'Testimonials';
  824. case 'pricing': return block.data?.title || 'Pricing';
  825. case 'cta': return block.data?.title || 'Call to Action';
  826. case 'text': return block.data?.title || 'Text Block';
  827. case 'image': return block.data?.alt || 'Image';
  828. case 'image-text': return block.data?.title || 'Image + Text';
  829. case 'product-cards': return block.data?.title || 'Product Cards';
  830. case 'video': return block.data?.title || 'Video';
  831. case 'gallery': return block.data?.title || 'Gallery';
  832. case 'faq': return block.data?.title || 'FAQ';
  833. case 'team': return block.data?.title || 'Team';
  834. case 'audio': return block.data?.title || 'Audio Player';
  835. case 'countdown': return block.data?.title || 'Countdown Timer';
  836. case 'newsletter': return block.data?.title || 'Newsletter';
  837. case 'html': return 'Custom HTML';
  838. default: return block.type;
  839. }
  840. }
  841. ​
  842. function renderBlockFields(block, blockIndex) {
  843. switch (block.type) {
  844. case 'hero': {
  845. const badgeVal = escapeHtml(block.data?.badge || '');
  846. const titleVal = escapeHtml(block.data?.title || '');
  847. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  848. const btn1Val = escapeHtml(block.data?.button_primary || '');
  849. const btn1Url = block.data?.button_primary_url || '';
  850. const btn2Val = escapeHtml(block.data?.button_secondary || '');
  851. const btn2Url = block.data?.button_secondary_url || '';
  852. return '<div class="form-row">' +
  853. '<div class="block-field">' +
  854. '<label class="block-field-label">Badge Text</label>' +
  855. '<input type="text" class="block-field-input" value="' + badgeVal + '" oninput="updateBlockData(' + blockIndex + ', \'badge\', this.value)">' +
  856. '</div>' +
  857. '<div class="block-field">' +
  858. '<label class="block-field-label">Title</label>' +
  859. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  860. '</div>' +
  861. '</div>' +
  862. '<div class="block-field">' +
  863. '<label class="block-field-label">Subtitle</label>' +
  864. '<textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' + subtitleVal + '</textarea>' +
  865. '</div>' +
  866. '<div class="form-row">' +
  867. '<div class="block-field">' +
  868. '<label class="block-field-label">Primary Button Text</label>' +
  869. '<input type="text" class="block-field-input" value="' + btn1Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_primary\', this.value)">' +
  870. '</div>' +
  871. '<div class="block-field">' +
  872. '<label class="block-field-label">Primary Button URL</label>' +
  873. renderLinkInput(btn1Url, 'updateBlockData(' + blockIndex + ', \'button_primary_url\', VALUE)') +
  874. '</div>' +
  875. '</div>' +
  876. '<div class="form-row">' +
  877. '<div class="block-field">' +
  878. '<label class="block-field-label">Secondary Button Text</label>' +
  879. '<input type="text" class="block-field-input" value="' + btn2Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_secondary\', this.value)">' +
  880. '</div>' +
  881. '<div class="block-field">' +
  882. '<label class="block-field-label">Secondary Button URL</label>' +
  883. renderLinkInput(btn2Url, 'updateBlockData(' + blockIndex + ', \'button_secondary_url\', VALUE)') +
  884. '</div>' +
  885. '</div>';
  886. }
  887. ​
  888. case 'blog-hero': {
  889. const titleVal = escapeHtml(block.data?.title || '');
  890. const contentVal = escapeHtml(block.data?.content || '');
  891. const imageUrl = block.data?.image || '';
  892. ​
  893. return `
  894. <div class="block-field">
  895. <label class="block-field-label">Header image (URL)</label>
  896. <div class="image-input-group">
  897. <input type="text" data-media="image" class="block-field-input" value="${imageUrl}"
  898. oninput="updateBlockData(${blockIndex}, 'image', this.value)"
  899. placeholder="https://example.com/image.jpg">
  900. </div>
  901. </div>
  902. ​
  903. <div class="block-field">
  904. <label class="block-field-label">Blog Title</label>
  905. <input type="text" class="block-field-input" value="${titleVal}"
  906. oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  907. </div>
  908. ​
  909. <div class="block-field">
  910. <label class="block-field-label">Content / Introduction</label>
  911. <textarea data-rich="1" class="block-field-input block-field-textarea" rows="4"
  912. oninput="updateBlockData(${blockIndex}, 'content', this.value)">${contentVal}</textarea>
  913. </div>
  914. `;
  915. }
  916. ​
  917. case 'stats':
  918. return `
  919. <div class="block-field">
  920. <label class="block-field-label">Stats Items</label>
  921. <div class="repeater-items" id="stats-items-${blockIndex}">
  922. ${(block.data?.items || []).map((item, i) => `
  923. <div class="repeater-item expanded">
  924. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  925. <span class="repeater-item-title">${escapeHtml(item.value || 'New Stat')} - ${escapeHtml(item.label || '')}</span>
  926. <div class="repeater-item-actions">
  927. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  928. </div>
  929. </div>
  930. <div class="repeater-item-content">
  931. <div class="form-row">
  932. <div class="block-field">
  933. <label class="block-field-label">Value</label>
  934. <input type="text" class="block-field-input" value="${escapeHtml(item.value || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'value', this.value)">
  935. </div>
  936. <div class="block-field">
  937. <label class="block-field-label">Label</label>
  938. <input type="text" class="block-field-input" value="${escapeHtml(item.label || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'label', this.value)">
  939. </div>
  940. </div>
  941. </div>
  942. </div>
  943. `).join('')}
  944. </div>
  945. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {value: '', label: ''})">
  946. <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>
  947. Add Stat
  948. </button>
  949. </div>
  950. `;
  951. ​
  952. case 'features':
  953. return `
  954. <div class="form-row">
  955. <div class="block-field">
  956. <label class="block-field-label">Section Title</label>
  957. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  958. </div>
  959. <div class="block-field">
  960. <label class="block-field-label">Section Subtitle</label>
  961. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  962. </div>
  963. </div>
  964. <div class="block-field">
  965. <label class="block-field-label">Feature Items</label>
  966. <div class="repeater-items" id="features-items-${blockIndex}">
  967. ${(block.data?.items || []).map((item, i) => `
  968. <div class="repeater-item">
  969. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  970. <span class="repeater-item-title">${escapeHtml(item.title || 'New Feature')}</span>
  971. <div class="repeater-item-actions">
  972. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  973. </div>
  974. </div>
  975. <div class="repeater-item-content">
  976. <div class="block-field">
  977. <label class="block-field-label">Icon</label>
  978. <div class="icon-select">
  979. ${Object.keys(ICONS).map(icon => `
  980. <div class="icon-option ${item.icon === icon ? 'selected' : ''}" onclick="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'icon', '${icon}'); renderBlocks();">
  981. ${ICONS[icon]}
  982. </div>
  983. `).join('')}
  984. </div>
  985. </div>
  986. <div class="block-field">
  987. <label class="block-field-label">Title</label>
  988. <input type="text" class="block-field-input" value="${escapeHtml(item.title || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'title', this.value)">
  989. </div>
  990. <div class="block-field">
  991. <label class="block-field-label">Description</label>
  992. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'description', this.value)">${escapeHtml(item.description || '')}</textarea>
  993. </div>
  994. </div>
  995. </div>
  996. `).join('')}
  997. </div>
  998. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {icon: 'bolt', title: '', description: ''})">
  999. <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>
  1000. Add Feature
  1001. </button>
  1002. </div>
  1003. `;
  1004. ​
  1005. case 'testimonials':
  1006. return `
  1007. <div class="form-row">
  1008. <div class="block-field">
  1009. <label class="block-field-label">Section Title</label>
  1010. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1011. </div>
  1012. <div class="block-field">
  1013. <label class="block-field-label">Section Subtitle</label>
  1014. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1015. </div>
  1016. </div>
  1017. <div class="block-field">
  1018. <label class="block-field-label">Testimonials</label>
  1019. <div class="repeater-items" id="testimonials-items-${blockIndex}">
  1020. ${(block.data?.items || []).map((item, i) => `
  1021. <div class="repeater-item">
  1022. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1023. <span class="repeater-item-title">${escapeHtml(item.name || 'New Testimonial')}</span>
  1024. <div class="repeater-item-actions">
  1025. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  1026. </div>
  1027. </div>
  1028. <div class="repeater-item-content">
  1029. <div class="block-field">
  1030. <label class="block-field-label">Quote</label>
  1031. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'quote', this.value)">${escapeHtml(item.quote || '')}</textarea>
  1032. </div>
  1033. <div class="form-row-3">
  1034. <div class="block-field">
  1035. <label class="block-field-label">Name</label>
  1036. <input type="text" class="block-field-input" value="${escapeHtml(item.name || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'name', this.value)">
  1037. </div>
  1038. <div class="block-field">
  1039. <label class="block-field-label">Role</label>
  1040. <input type="text" class="block-field-input" value="${escapeHtml(item.role || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'role', this.value)">
  1041. </div>
  1042. <div class="block-field">
  1043. <label class="block-field-label">Initials</label>
  1044. <input type="text" class="block-field-input" value="${escapeHtml(item.initials || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'initials', this.value)" maxlength="2">
  1045. </div>
  1046. </div>
  1047. </div>
  1048. </div>
  1049. `).join('')}
  1050. </div>
  1051. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {quote: '', name: '', role: '', initials: ''})">
  1052. <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>
  1053. Add Testimonial
  1054. </button>
  1055. </div>
  1056. `;
  1057. ​
  1058. case 'pricing': {
  1059. const titleVal = escapeHtml(block.data?.title || '');
  1060. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  1061. let itemsHtml = '';
  1062. (block.data?.items || []).forEach((item, i) => {
  1063. const nameVal = escapeHtml(item.name || 'New Plan');
  1064. const priceVal = escapeHtml(item.price || '');
  1065. const descVal = escapeHtml(item.description || '');
  1066. const periodVal = escapeHtml(item.period || '');
  1067. const btnTextVal = escapeHtml(item.button_text || item.button || '');
  1068. const btnUrlVal = item.button_url || '#';
  1069. const featVal = item.featured ? 'checked' : '';
  1070. itemsHtml += '<div class="repeater-item">' +
  1071. '<div class="repeater-item-header" onclick="this.parentElement.classList.toggle(\'expanded\')">' +
  1072. '<span class="repeater-item-title">' + nameVal + ' - ' + priceVal + '</span>' +
  1073. '<div class="repeater-item-actions">' +
  1074. '<button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(' + blockIndex + ', \'items\', ' + i + ')" style="color: var(--error);">Remove</button>' +
  1075. '</div>' +
  1076. '</div>' +
  1077. '<div class="repeater-item-content">' +
  1078. '<div class="form-row-3">' +
  1079. '<div class="block-field">' +
  1080. '<label class="block-field-label">Plan Name</label>' +
  1081. '<input type="text" class="block-field-input" value="' + nameVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'name\', this.value)">' +
  1082. '</div>' +
  1083. '<div class="block-field">' +
  1084. '<label class="block-field-label">Price</label>' +
  1085. '<input type="text" class="block-field-input" value="' + priceVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'price\', this.value)">' +
  1086. '</div>' +
  1087. '<div class="block-field">' +
  1088. '<label class="block-field-label">Period</label>' +
  1089. '<input type="text" class="block-field-input" value="' + periodVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'period\', this.value)" placeholder="/month">' +
  1090. '</div>' +
  1091. '</div>' +
  1092. '<div class="block-field">' +
  1093. '<label class="block-field-label">Description</label>' +
  1094. '<input type="text" class="block-field-input" value="' + descVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'description\', this.value)">' +
  1095. '</div>' +
  1096. '<div class="block-field">' +
  1097. '<label class="block-field-label">Features (one per line)</label>' +
  1098. '<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>' +
  1099. '</div>' +
  1100. '<div class="form-row">' +
  1101. '<div class="block-field">' +
  1102. '<label class="block-field-label">Button Text</label>' +
  1103. '<input type="text" class="block-field-input" value="' + btnTextVal + '" oninput="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'button_text\', this.value)">' +
  1104. '</div>' +
  1105. '<div class="block-field">' +
  1106. '<label class="block-field-label">Button URL</label>' +
  1107. renderLinkInput(btnUrlVal, 'updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'button_url\', VALUE)') +
  1108. '</div>' +
  1109. '</div>' +
  1110. '<div class="block-field">' +
  1111. '<label class="block-field-label" style="display: flex; align-items: center; gap: 8px;">' +
  1112. '<input type="checkbox" ' + featVal + ' onchange="updateRepeaterItem(' + blockIndex + ', \'items\', ' + i + ', \'featured\', this.checked)">' +
  1113. 'Featured Plan (highlighted)' +
  1114. '</label>' +
  1115. '</div>' +
  1116. '</div>' +
  1117. '</div>';
  1118. });
  1119. return '<div class="form-row">' +
  1120. '<div class="block-field">' +
  1121. '<label class="block-field-label">Section Title</label>' +
  1122. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  1123. '</div>' +
  1124. '<div class="block-field">' +
  1125. '<label class="block-field-label">Section Subtitle</label>' +
  1126. '<input type="text" class="block-field-input" value="' + subtitleVal + '" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' +
  1127. '</div>' +
  1128. '</div>' +
  1129. '<div class="block-field">' +
  1130. '<label class="block-field-label">Pricing Plans</label>' +
  1131. '<div class="repeater-items" id="pricing-items-' + blockIndex + '">' +
  1132. itemsHtml +
  1133. '</div>' +
  1134. '<button type="button" class="repeater-add" onclick="addRepeaterItem(' + blockIndex + ', \'items\', {name: \'\', price: \'\', period: \'/month\', description: \'\', features: [], button_text: \'Get Started\', button_url: \'#\', featured: false})">' +
  1135. '<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>' +
  1136. 'Add Plan' +
  1137. '</button>' +
  1138. '</div>';
  1139. }
  1140. ​
  1141. case 'cta': {
  1142. const titleVal = escapeHtml(block.data?.title || '');
  1143. const subtitleVal = escapeHtml(block.data?.subtitle || '');
  1144. const btn1Val = escapeHtml(block.data?.button_primary || '');
  1145. const btn1Url = block.data?.button_primary_url || '';
  1146. const btn2Val = escapeHtml(block.data?.button_secondary || '');
  1147. const btn2Url = block.data?.button_secondary_url || '';
  1148. return '<div class="form-row">' +
  1149. '<div class="block-field">' +
  1150. '<label class="block-field-label">Title</label>' +
  1151. '<input type="text" class="block-field-input" value="' + titleVal + '" oninput="updateBlockData(' + blockIndex + ', \'title\', this.value)">' +
  1152. '</div>' +
  1153. '<div class="block-field">' +
  1154. '<label class="block-field-label">Subtitle</label>' +
  1155. '<input type="text" class="block-field-input" value="' + subtitleVal + '" oninput="updateBlockData(' + blockIndex + ', \'subtitle\', this.value)">' +
  1156. '</div>' +
  1157. '</div>' +
  1158. '<div class="form-row">' +
  1159. '<div class="block-field">' +
  1160. '<label class="block-field-label">Primary Button Text</label>' +
  1161. '<input type="text" class="block-field-input" value="' + btn1Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_primary\', this.value)">' +
  1162. '</div>' +
  1163. '<div class="block-field">' +
  1164. '<label class="block-field-label">Primary Button URL</label>' +
  1165. renderLinkInput(btn1Url, 'updateBlockData(' + blockIndex + ', \'button_primary_url\', VALUE)') +
  1166. '</div>' +
  1167. '</div>' +
  1168. '<div class="form-row">' +
  1169. '<div class="block-field">' +
  1170. '<label class="block-field-label">Secondary Button Text</label>' +
  1171. '<input type="text" class="block-field-input" value="' + btn2Val + '" oninput="updateBlockData(' + blockIndex + ', \'button_secondary\', this.value)">' +
  1172. '</div>' +
  1173. '<div class="block-field">' +
  1174. '<label class="block-field-label">Secondary Button URL</label>' +
  1175. renderLinkInput(btn2Url, 'updateBlockData(' + blockIndex + ', \'button_secondary_url\', VALUE)') +
  1176. '</div>' +
  1177. '</div>';
  1178. }
  1179. ​
  1180. case 'text':
  1181. return `
  1182. <div class="block-field">
  1183. <label class="block-field-label">Title (optional)</label>
  1184. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1185. </div>
  1186. <div class="block-field">
  1187. <label class="block-field-label">Content</label>
  1188. <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>
  1189. </div>
  1190. `;
  1191. ​
  1192. case 'image':
  1193. return `
  1194. <div class="block-field">
  1195. <label class="block-field-label">Image URL</label>
  1196. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(block.data?.url || '')}" oninput="updateBlockData(${blockIndex}, 'url', this.value)" placeholder="https://...">
  1197. </div>
  1198. <div class="form-row">
  1199. <div class="block-field">
  1200. <label class="block-field-label">Alt Text</label>
  1201. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.alt || '')}" oninput="updateBlockData(${blockIndex}, 'alt', this.value)">
  1202. </div>
  1203. <div class="block-field">
  1204. <label class="block-field-label">Caption (optional)</label>
  1205. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.caption || '')}" oninput="updateBlockData(${blockIndex}, 'caption', this.value)">
  1206. </div>
  1207. </div>
  1208. `;
  1209. ​
  1210. case 'audio':
  1211. return `
  1212. <div class="form-row">
  1213. <div class="block-field">
  1214. <label class="block-field-label">Title</label>
  1215. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1216. </div>
  1217. <div class="block-field">
  1218. <label class="block-field-label">Subtitle</label>
  1219. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1220. </div>
  1221. </div>
  1222. <div class="block-field">
  1223. <label class="block-field-label">Audio File URL</label>
  1224. <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">
  1225. </div>
  1226. <div class="form-row">
  1227. <div class="block-field">
  1228. <label class="block-field-label">Music Link URL (Optional)</label>
  1229. <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">
  1230. </div>
  1231. <div class="block-field">
  1232. <label class="block-field-label">Music Link Text</label>
  1233. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.music_link_text || 'Download')}" oninput="updateBlockData(${blockIndex}, 'music_link_text', this.value)">
  1234. </div>
  1235. </div>
  1236. `;
  1237. ​
  1238. case 'countdown':
  1239. return `
  1240. <div class="form-row">
  1241. <div class="block-field">
  1242. <label class="block-field-label">Title</label>
  1243. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1244. </div>
  1245. <div class="block-field">
  1246. <label class="block-field-label">Subtitle</label>
  1247. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1248. </div>
  1249. </div>
  1250. <div class="form-row">
  1251. <div class="block-field">
  1252. <label class="block-field-label">Target Date</label>
  1253. <input type="date" class="block-field-input" value="${escapeHtml(block.data?.target_date || '')}" oninput="updateBlockData(${blockIndex}, 'target_date', this.value)">
  1254. </div>
  1255. <div class="block-field">
  1256. <label class="block-field-label">Target Time</label>
  1257. <input type="time" class="block-field-input" value="${escapeHtml(block.data?.target_time || '00:00')}" oninput="updateBlockData(${blockIndex}, 'target_time', this.value)">
  1258. </div>
  1259. </div>
  1260. `;
  1261. ​
  1262. case 'newsletter':
  1263. return `
  1264. <div class="block-field">
  1265. <label class="block-field-label">Title</label>
  1266. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1267. </div>
  1268. <div class="block-field">
  1269. <label class="block-field-label">Subtitle</label>
  1270. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">${escapeHtml(block.data?.subtitle || '')}</textarea>
  1271. </div>
  1272. <div class="form-row">
  1273. <div class="block-field">
  1274. <label class="block-field-label">Input Placeholder</label>
  1275. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.placeholder || '')}" oninput="updateBlockData(${blockIndex}, 'placeholder', this.value)">
  1276. </div>
  1277. <div class="block-field">
  1278. <label class="block-field-label">Button Text</label>
  1279. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.button_text || '')}" oninput="updateBlockData(${blockIndex}, 'button_text', this.value)">
  1280. </div>
  1281. </div>
  1282. `;
  1283. ​
  1284. case 'html':
  1285. return `
  1286. <div class="block-field">
  1287. <label class="block-field-label">Custom HTML Code</label>
  1288. <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>
  1289. <p style="font-size: 0.75rem; color: var(--text-subtle); margin-top: 8px;">You can use any HTML, CSS (in style tags), and JavaScript (in script tags).</p>
  1290. </div>
  1291. `;
  1292. ​
  1293. case 'image-text':
  1294. return `
  1295. <div class="form-row">
  1296. <div class="block-field">
  1297. <label class="block-field-label">Section Title</label>
  1298. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1299. </div>
  1300. <div class="block-field">
  1301. <label class="block-field-label">Section Subtitle</label>
  1302. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1303. </div>
  1304. </div>
  1305. <div class="block-field">
  1306. <label class="block-field-label">Image URL</label>
  1307. <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://...">
  1308. </div>
  1309. <div class="form-row">
  1310. <div class="block-field">
  1311. <label class="block-field-label">Image Alt Text</label>
  1312. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.image_alt || '')}" oninput="updateBlockData(${blockIndex}, 'image_alt', this.value)">
  1313. </div>
  1314. <div class="block-field">
  1315. <label class="block-field-label">Image Position</label>
  1316. <select class="block-field-input" onchange="updateBlockData(${blockIndex}, 'image_position', this.value)">
  1317. <option value="left" ${block.data?.image_position === 'left' ? 'selected' : ''}>Left</option>
  1318. <option value="right" ${block.data?.image_position === 'right' ? 'selected' : ''}>Right</option>
  1319. </select>
  1320. </div>
  1321. </div>
  1322. <div class="block-field">
  1323. <label class="block-field-label">Content Text</label>
  1324. <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>
  1325. </div>
  1326. <div class="form-row">
  1327. <div class="block-field">
  1328. <label class="block-field-label">Button Text (optional)</label>
  1329. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.button_text || '')}" oninput="updateBlockData(${blockIndex}, 'button_text', this.value)">
  1330. </div>
  1331. <div class="block-field">
  1332. <label class="block-field-label">Button URL</label>
  1333. ${renderLinkInput(block.data?.button_url || '#', 'updateBlockData(' + blockIndex + ', \'button_url\', VALUE)')}
  1334. </div>
  1335. </div>
  1336. `;
  1337. ​
  1338. case 'product-cards':
  1339. return `
  1340. <div class="form-row">
  1341. <div class="block-field">
  1342. <label class="block-field-label">Section Title</label>
  1343. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1344. </div>
  1345. <div class="block-field">
  1346. <label class="block-field-label">Section Subtitle</label>
  1347. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1348. </div>
  1349. </div>
  1350. <div class="block-field">
  1351. <label class="block-field-label">Products</label>
  1352. <div class="repeater-items" id="products-items-${blockIndex}">
  1353. ${(block.data?.products || []).map((item, i) => `
  1354. <div class="repeater-item">
  1355. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1356. <span class="repeater-item-title">${escapeHtml(item.title || 'New Product')}</span>
  1357. <div class="repeater-item-actions">
  1358. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'products', ${i})" style="color: var(--error);">Remove</button>
  1359. </div>
  1360. </div>
  1361. <div class="repeater-item-content">
  1362. <div class="form-row">
  1363. <div class="block-field">
  1364. <label class="block-field-label">Product Title</label>
  1365. <input type="text" class="block-field-input" value="${escapeHtml(item.title || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'title', this.value)">
  1366. </div>
  1367. <div class="block-field">
  1368. <label class="block-field-label">Product Image (48x48)</label>
  1369. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(item.image || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'image', this.value)" placeholder="https://...">
  1370. </div>
  1371. </div>
  1372. <div class="block-field">
  1373. <label class="block-field-label">Description</label>
  1374. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'description', this.value)">${escapeHtml(item.description || '')}</textarea>
  1375. </div>
  1376. <div class="block-field">
  1377. <label class="block-field-label">Features (one per line)</label>
  1378. <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>
  1379. </div>
  1380. <div class="form-row">
  1381. <div class="block-field">
  1382. <label class="block-field-label">Button Text</label>
  1383. <input type="text" class="block-field-input" value="${escapeHtml(item.button_text || '')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'button_text', this.value)">
  1384. </div>
  1385. <div class="block-field">
  1386. <label class="block-field-label">Button URL</label>
  1387. <input type="text" class="block-field-input" value="${escapeHtml(item.button_url || '#')}" oninput="updateRepeaterItem(${blockIndex}, 'products', ${i}, 'button_url', this.value)">
  1388. </div>
  1389. </div>
  1390. </div>
  1391. </div>
  1392. `).join('')}
  1393. </div>
  1394. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'products', {title: '', image: '', description: '', features: [], button_text: 'View', button_url: '#'})">
  1395. <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>
  1396. Add Product
  1397. </button>
  1398. </div>
  1399. `;
  1400. ​
  1401. case 'video':
  1402. return `
  1403. <div class="form-row">
  1404. <div class="block-field">
  1405. <label class="block-field-label">Section Title</label>
  1406. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1407. </div>
  1408. <div class="block-field">
  1409. <label class="block-field-label">Section Subtitle</label>
  1410. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1411. </div>
  1412. </div>
  1413. <div class="form-row">
  1414. <div class="block-field">
  1415. <label class="block-field-label">Video URL</label>
  1416. <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">
  1417. </div>
  1418. <div class="block-field">
  1419. <label class="block-field-label">Video Type</label>
  1420. <select class="block-field-input" onchange="updateBlockData(${blockIndex}, 'type', this.value)">
  1421. <option value="url" ${block.data?.type === 'url' ? 'selected' : ''}>Direct URL</option>
  1422. <option value="youtube" ${block.data?.type === 'youtube' ? 'selected' : ''}>YouTube</option>
  1423. <option value="facebook" ${block.data?.type === 'facebook' ? 'selected' : ''}>Facebook</option>
  1424. </select>
  1425. </div>
  1426. </div>
  1427. <div class="block-field">
  1428. <label class="block-field-label">Poster Image URL (Thumbnail)</label>
  1429. <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">
  1430. </div>
  1431. <div class="block-field">
  1432. <label class="block-field-label">Caption</label>
  1433. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.caption || '')}" oninput="updateBlockData(${blockIndex}, 'caption', this.value)">
  1434. </div>
  1435. `;
  1436. ​
  1437. case 'gallery':
  1438. return `
  1439. <div class="form-row">
  1440. <div class="block-field">
  1441. <label class="block-field-label">Section Title</label>
  1442. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1443. </div>
  1444. <div class="block-field">
  1445. <label class="block-field-label">Section Subtitle</label>
  1446. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1447. </div>
  1448. </div>
  1449. <div class="block-field">
  1450. <label class="block-field-label">Images</label>
  1451. <div class="repeater-items" id="images-items-${blockIndex}">
  1452. ${(block.data?.images || []).map((item, i) => `
  1453. <div class="repeater-item">
  1454. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1455. <span class="repeater-item-title">${escapeHtml(item.alt || 'Image ' + (i + 1))}</span>
  1456. <div class="repeater-item-actions">
  1457. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'images', ${i})" style="color: var(--error);">Remove</button>
  1458. </div>
  1459. </div>
  1460. <div class="repeater-item-content">
  1461. <div class="form-row">
  1462. <div class="block-field">
  1463. <label class="block-field-label">Image URL</label>
  1464. <input type="text" data-media="image" class="block-field-input" value="${escapeHtml(item.url || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'url', this.value)" placeholder="https://...">
  1465. </div>
  1466. <div class="block-field">
  1467. <label class="block-field-label">Alt Text</label>
  1468. <input type="text" class="block-field-input" value="${escapeHtml(item.alt || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'alt', this.value)">
  1469. </div>
  1470. </div>
  1471. <div class="block-field">
  1472. <label class="block-field-label">Caption</label>
  1473. <input type="text" class="block-field-input" value="${escapeHtml(item.caption || '')}" oninput="updateRepeaterItem(${blockIndex}, 'images', ${i}, 'caption', this.value)">
  1474. </div>
  1475. </div>
  1476. </div>
  1477. `).join('')}
  1478. </div>
  1479. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'images', {url: '', alt: '', caption: ''})">
  1480. <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>
  1481. Add Image
  1482. </button>
  1483. </div>
  1484. `;
  1485. ​
  1486. case 'faq':
  1487. return `
  1488. <div class="form-row">
  1489. <div class="block-field">
  1490. <label class="block-field-label">Section Title</label>
  1491. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1492. </div>
  1493. <div class="block-field">
  1494. <label class="block-field-label">Section Subtitle</label>
  1495. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1496. </div>
  1497. </div>
  1498. <div class="block-field">
  1499. <label class="block-field-label">FAQ Items</label>
  1500. <div class="repeater-items" id="items-items-${blockIndex}">
  1501. ${(block.data?.items || []).map((item, i) => `
  1502. <div class="repeater-item">
  1503. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1504. <span class="repeater-item-title">${escapeHtml(item.question || 'Question ' + (i + 1))}</span>
  1505. <div class="repeater-item-actions">
  1506. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'items', ${i})" style="color: var(--error);">Remove</button>
  1507. </div>
  1508. </div>
  1509. <div class="repeater-item-content">
  1510. <div class="block-field">
  1511. <label class="block-field-label">Question</label>
  1512. <input type="text" class="block-field-input" value="${escapeHtml(item.question || '')}" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'question', this.value)">
  1513. </div>
  1514. <div class="block-field">
  1515. <label class="block-field-label">Answer</label>
  1516. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'items', ${i}, 'answer', this.value)">${escapeHtml(item.answer || '')}</textarea>
  1517. </div>
  1518. </div>
  1519. </div>
  1520. `).join('')}
  1521. </div>
  1522. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'items', {question: '', answer: ''})">
  1523. <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>
  1524. Add Question
  1525. </button>
  1526. </div>
  1527. `;
  1528. ​
  1529. case 'team':
  1530. return `
  1531. <div class="form-row">
  1532. <div class="block-field">
  1533. <label class="block-field-label">Section Title</label>
  1534. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.title || '')}" oninput="updateBlockData(${blockIndex}, 'title', this.value)">
  1535. </div>
  1536. <div class="block-field">
  1537. <label class="block-field-label">Section Subtitle</label>
  1538. <input type="text" class="block-field-input" value="${escapeHtml(block.data?.subtitle || '')}" oninput="updateBlockData(${blockIndex}, 'subtitle', this.value)">
  1539. </div>
  1540. </div>
  1541. <div class="block-field">
  1542. <label class="block-field-label">Team Members</label>
  1543. <div class="repeater-items" id="members-items-${blockIndex}">
  1544. ${(block.data?.members || []).map((member, i) => `
  1545. <div class="repeater-item">
  1546. <div class="repeater-item-header" onclick="this.parentElement.classList.toggle('expanded')">
  1547. <span class="repeater-item-title">${escapeHtml(member.name || 'Team Member ' + (i + 1))}</span>
  1548. <div class="repeater-item-actions">
  1549. <button type="button" class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); removeRepeaterItem(${blockIndex}, 'members', ${i})" style="color: var(--error);">Remove</button>
  1550. </div>
  1551. </div>
  1552. <div class="repeater-item-content">
  1553. <div class="form-row">
  1554. <div class="block-field">
  1555. <label class="block-field-label">Name</label>
  1556. <input type="text" class="block-field-input" value="${escapeHtml(member.name || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'name', this.value)">
  1557. </div>
  1558. <div class="block-field">
  1559. <label class="block-field-label">Role</label>
  1560. <input type="text" class="block-field-input" value="${escapeHtml(member.role || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'role', this.value)">
  1561. </div>
  1562. </div>
  1563. <div class="form-row">
  1564. <div class="block-field">
  1565. <label class="block-field-label">Photo URL</label>
  1566. <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)">
  1567. </div>
  1568. <div class="block-field">
  1569. <label class="block-field-label">Initials (if no photo)</label>
  1570. <input type="text" class="block-field-input" value="${escapeHtml(member.initials || '')}" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'initials', this.value)" maxlength="2">
  1571. </div>
  1572. </div>
  1573. <div class="block-field">
  1574. <label class="block-field-label">Bio</label>
  1575. <textarea data-rich="1" class="block-field-input block-field-textarea" oninput="updateRepeaterItem(${blockIndex}, 'members', ${i}, 'bio', this.value)">${escapeHtml(member.bio || '')}</textarea>
  1576. </div>
  1577. <div class="block-field">
  1578. <label class="block-field-label">Social Links (JSON)</label>
  1579. <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>
  1580. </div>
  1581. </div>
  1582. </div>
  1583. `).join('')}
  1584. </div>
  1585. <button type="button" class="repeater-add" onclick="addRepeaterItem(${blockIndex}, 'members', {name: '', role: '', initials: '', image: '', bio: '', social: []})">
  1586. <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>
  1587. Add Team Member
  1588. </button>
  1589. </div>
  1590. `;
  1591. ​
  1592. default:
  1593. return '<p style="color: var(--text-muted);">Unknown block type</p>';
  1594. }
  1595. }
  1596. ​
  1597. function renderLinkInput(value, callback) {
  1598. const id = 'link-' + Math.random().toString(36).substr(2, 9);
  1599. return '<div class="link-input-wrapper">' +
  1600. '<input type="text" class="block-field-input" id="' + id + '" value="' + escapeHtml(value) + '" oninput="' + callback.replace('VALUE', 'this.value') + '">' +
  1601. '<button type="button" class="link-page-btn" onclick="showLinkSelector(\'' + id + '\', \'' + callback.replace(/'/g, "\\'") + '\')" title="Select page">' +
  1602. '<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>' +
  1603. '</button>' +
  1604. '</div>';
  1605. }
  1606. ​
  1607. function updateBlockData(blockIndex, key, value) {
  1608. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1609. blocks[blockIndex].data[key] = value;
  1610. schedulePreviewUpdate();
  1611. }
  1612. ​
  1613. function updateRepeaterItem(blockIndex, key, itemIndex, field, value) {
  1614. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1615. if (!blocks[blockIndex].data[key]) blocks[blockIndex].data[key] = [];
  1616. if (!blocks[blockIndex].data[key][itemIndex]) blocks[blockIndex].data[key][itemIndex] = {};
  1617. blocks[blockIndex].data[key][itemIndex][field] = value;
  1618. schedulePreviewUpdate();
  1619. }
  1620. ​
  1621. function addRepeaterItem(blockIndex, key, defaultItem) {
  1622. if (!blocks[blockIndex].data) blocks[blockIndex].data = {};
  1623. if (!blocks[blockIndex].data[key]) blocks[blockIndex].data[key] = [];
  1624. blocks[blockIndex].data[key].push({ ...defaultItem });
  1625. schedulePreviewUpdate();
  1626. renderBlocks();
  1627. }
  1628. ​
  1629. function removeRepeaterItem(blockIndex, key, itemIndex) {
  1630. blocks[blockIndex].data[key].splice(itemIndex, 1);
  1631. renderBlocks();
  1632. schedulePreviewUpdate();
  1633. }
  1634. ​
  1635. function toggleBlock(index) {
  1636. const items = document.querySelectorAll('.block-item');
  1637. items[index]?.classList.toggle('expanded');
  1638. }
  1639. ​
  1640. function expandAllBlocks() {
  1641. document.querySelectorAll('.block-item').forEach(el => el.classList.add('expanded'));
  1642. }
  1643. ​
  1644. function collapseAllBlocks() {
  1645. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('expanded'));
  1646. }
  1647. ​
  1648. function addBlock(type) {
  1649. const defaultId = getDefaultBlockId(type);
  1650. const newBlock = {
  1651. id: defaultId,
  1652. type: type,
  1653. data: getDefaultBlockData(type)
  1654. };
  1655. blocks.push(newBlock);
  1656. renderBlocks();
  1657. hideAddBlockModal();
  1658. schedulePreviewUpdate();
  1659. ​
  1660. setTimeout(() => {
  1661. const items = document.querySelectorAll('.block-item');
  1662. items[items.length - 1]?.classList.add('expanded');
  1663. items[items.length - 1]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  1664. }, 50);
  1665. }
  1666. ​
  1667. function getDefaultBlockId(type) {
  1668. const baseName = type;
  1669. const existingIds = blocks
  1670. .filter(b => b.type === type && b.id)
  1671. .map(b => b.id);
  1672. ​
  1673. if (existingIds.length === 0) {
  1674. return baseName;
  1675. }
  1676. ​
  1677. let counter = 2;
  1678. while (existingIds.includes(baseName + '-' + counter)) {
  1679. counter++;
  1680. }
  1681. return baseName + '-' + counter;
  1682. }
  1683. ​
  1684. function getDefaultBlockData(type) {
  1685. switch (type) {
  1686. case 'hero':
  1687. return { badge: '', title: '', subtitle: '', button_primary: '', button_primary_url: '#', button_secondary: '', button_secondary_url: '#' };
  1688. case 'stats':
  1689. return { items: [] };
  1690. case 'features':
  1691. return { title: '', subtitle: '', items: [] };
  1692. case 'testimonials':
  1693. return { title: '', subtitle: '', items: [] };
  1694. case 'pricing':
  1695. return { title: '', subtitle: '', items: [] };
  1696. case 'cta':
  1697. return { title: '', subtitle: '', button_primary: '', button_primary_url: '#', button_secondary: '', button_secondary_url: '#' };
  1698. case 'text':
  1699. return { title: '', content: '' };
  1700. case 'image':
  1701. return { url: '', alt: '', caption: '' };
  1702. case 'image-text':
  1703. return { image_url: '', image_alt: '', title: '', subtitle: '', content: '', image_position: 'left', button_text: '', button_url: '#' };
  1704. case 'product-cards':
  1705. return { title: '', subtitle: '', products: [] };
  1706. case 'video':
  1707. return { title: 'Watch Our Video', subtitle: '', url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', type: 'youtube', caption: '' };
  1708. case 'gallery':
  1709. return {
  1710. title: 'Photo Gallery', subtitle: '', images: [
  1711. { url: 'https://placehold.co/800x600', alt: 'Gallery image 1', caption: '' },
  1712. { url: 'https://placehold.co/800x600', alt: 'Gallery image 2', caption: '' },
  1713. { url: 'https://placehold.co/800x600', alt: 'Gallery image 3', caption: '' }
  1714. ]
  1715. };
  1716. case 'faq':
  1717. return {
  1718. title: 'Frequently Asked Questions', subtitle: '', items: [
  1719. { question: 'What is this?', answer: 'This is a great product that helps you achieve your goals.' },
  1720. { question: 'How does it work?', answer: 'It works by combining cutting-edge technology with user-friendly design.' },
  1721. { question: 'How much does it cost?', answer: 'We offer both free and premium plans to suit your needs.' }
  1722. ]
  1723. };
  1724. case 'team':
  1725. return {
  1726. title: 'Meet Our Team', subtitle: '', members: [
  1727. { name: 'John Doe', role: 'CEO & Founder', initials: 'JD', image: '', bio: '', social: [{ platform: 'twitter', url: '#' }, { platform: 'linkedin', url: '#' }] },
  1728. { name: 'Jane Smith', role: 'Head of Design', initials: 'JS', image: '', bio: '', social: [{ platform: 'twitter', url: '#' }, { platform: 'linkedin', url: '#' }] }
  1729. ]
  1730. };
  1731. case 'audio':
  1732. return { title: 'Listen Now', subtitle: '', url: '', music_link: '', music_link_text: 'Download' };
  1733. case 'countdown':
  1734. return { title: 'Coming Soon', subtitle: '', target_date: '', target_time: '00:00' };
  1735. case 'newsletter':
  1736. return { title: 'Subscribe to Our Newsletter', subtitle: 'Get the latest updates delivered to your inbox.', button_text: 'Subscribe', placeholder: 'Enter your email' };
  1737. case 'html':
  1738. return { html: '' };
  1739. default:
  1740. return {};
  1741. }
  1742. }
  1743. ​
  1744. function duplicateBlock(index) {
  1745. const newBlock = JSON.parse(JSON.stringify(blocks[index]));
  1746. const baseType = blocks[index].type;
  1747. newBlock.id = getDefaultBlockId(baseType);
  1748. blocks.splice(index + 1, 0, newBlock);
  1749. renderBlocks();
  1750. }
  1751. ​
  1752. function deleteBlock(index) {
  1753. if (confirm('Are you sure you want to delete this block?')) {
  1754. blocks.splice(index, 1);
  1755. renderBlocks();
  1756. schedulePreviewUpdate();
  1757. }
  1758. }
  1759. ​
  1760. function moveBlockUp(index) {
  1761. if (index > 0) {
  1762. [blocks[index], blocks[index - 1]] = [blocks[index - 1], blocks[index]];
  1763. renderBlocks();
  1764. }
  1765. }
  1766. ​
  1767. function moveBlockDown(index) {
  1768. if (index < blocks.length - 1) {
  1769. [blocks[index], blocks[index + 1]] = [blocks[index + 1], blocks[index]];
  1770. renderBlocks();
  1771. }
  1772. }
  1773. ​
  1774. function handleDragStart(e) {
  1775. draggedBlock = this;
  1776. this.classList.add('dragging');
  1777. e.dataTransfer.effectAllowed = 'move';
  1778. }
  1779. ​
  1780. function handleDragEnd(e) {
  1781. this.classList.remove('dragging');
  1782. document.querySelectorAll('.block-item').forEach(el => el.classList.remove('drag-over'));
  1783. draggedBlock = null;
  1784. }
  1785. ​
  1786. function handleDragOver(e) {
  1787. e.preventDefault();
  1788. e.dataTransfer.dropEffect = 'move';
  1789. this.classList.add('drag-over');
  1790. }
  1791. ​
  1792. function handleDragLeave(e) {
  1793. this.classList.remove('drag-over');
  1794. }
  1795. ​
  1796. function handleDrop(e) {
  1797. e.preventDefault();
  1798. this.classList.remove('drag-over');
  1799. ​
  1800. if (draggedBlock && draggedBlock !== this) {
  1801. const fromIndex = parseInt(draggedBlock.dataset.index);
  1802. const toIndex = parseInt(this.dataset.index);
  1803. ​
  1804. const [movedBlock] = blocks.splice(fromIndex, 1);
  1805. blocks.splice(toIndex, 0, movedBlock);
  1806. renderBlocks();
  1807. schedulePreviewUpdate();
  1808. }
  1809. }
  1810. ​
  1811. ​
  1812. const NE_SVG = {
  1813. 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>',
  1814. 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>',
  1815. 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>',
  1816. 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>',
  1817. 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>'
  1818. };
  1819. ​
  1820. const SOCIAL_PLATFORMS = [
  1821. ['twitter', 'Twitter/X'], ['github', 'GitHub'], ['linkedin', 'LinkedIn'], ['facebook', 'Facebook'],
  1822. ['instagram', 'Instagram'], ['youtube', 'YouTube'], ['tiktok', 'TikTok'], ['pinterest', 'Pinterest'],
  1823. ['reddit', 'Reddit'], ['discord', 'Discord'], ['snapchat', 'Snapchat'], ['whatsapp', 'Whatsapp'],
  1824. ['telegram', 'Telegram'], ['twitch', 'Twitch'], ['spotify', 'Spotify'], ['medium', 'Medium'],
  1825. ['slack', 'Slack'], ['dribbble', 'Dribbble'], ['mastodon', 'Mastodon'], ['patreon', 'Patreon'],
  1826. ['kofi', 'Ko-Fi'], ['vimeo', 'Vimeo'], ['tumblr', 'Tumblr'], ['stackoverflow', 'Stack Overflow'],
  1827. ['gitlab', 'GitLab'], ['bluesky', 'Bluesky'], ['line', 'Line'], ['wechat', 'WeChat'],
  1828. ['flatlypage', 'FlatlyPage CMS'], ['xing', 'Xing']
  1829. ];
  1830. ​
  1831. let navIconPickerIndex = -1;
  1832. let navButtonIconPickerIndex = -1;
  1833. ​
  1834. function neIconSvg(id) {
  1835. return `<svg class="ne-icon-svg" aria-hidden="true"><use href="${FLATLY_BASE_URL}/assets/icons.svg#${id}"></use></svg>`;
  1836. }
  1837. ​
  1838. function neActions(moveFn, removeFn, index, count) {
  1839. return `
  1840. <div class="ne-actions">
  1841. <button type="button" class="ne-btn" title="Move up" ${index === 0 ? 'disabled' : ''} onclick="${moveFn}(${index}, -1)">${NE_SVG.up}</button>
  1842. <button type="button" class="ne-btn" title="Move down" ${index >= count - 1 ? 'disabled' : ''} onclick="${moveFn}(${index}, 1)">${NE_SVG.down}</button>
  1843. <button type="button" class="ne-btn ne-btn-danger" title="Remove" onclick="${removeFn}(${index})">${NE_SVG.trash}</button>
  1844. </div>`;
  1845. }
  1846. ​
  1847. function neMove(list, index, dir) {
  1848. const target = index + dir;
  1849. if (!list || target < 0 || target >= list.length) return false;
  1850. [list[index], list[target]] = [list[target], list[index]];
  1851. return true;
  1852. }
  1853. ​
  1854. function neEmpty(text) {
  1855. return `<div class="ne-empty">${text}</div>`;
  1856. }
  1857. ​
  1858. function neFocusLast(container, selector) {
  1859. if (!container) return;
  1860. const fields = container.querySelectorAll(selector);
  1861. if (fields.length) fields[fields.length - 1].focus();
  1862. }
  1863. ​
  1864. function renderNavLinks() {
  1865. const container = document.getElementById('navLinksContainer');
  1866. if (!container) return;
  1867. ​
  1868. const hasIcons = Array.isArray(ICON_IDS) && ICON_IDS.length > 0;
  1869. ​
  1870. container.innerHTML = navLinks.length ? `<div class="ne-list">${navLinks.map((link, i) => `
  1871. <div class="ne-item">
  1872. <div class="ne-row">
  1873. ${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>` : ''}
  1874. <input type="text" class="ne-input ne-nav-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="navLinks[${i}].label = this.value">
  1875. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL or #anchor" oninput="navLinks[${i}].url = this.value">
  1876. ${neActions('moveNavLink', 'removeNavLink', i, navLinks.length)}
  1877. </div>
  1878. ${hasIcons && navIconPickerIndex === i ? `
  1879. <div class="ne-picker">
  1880. <div class="ne-picker-head">
  1881. <input type="text" class="ne-input" placeholder="Search icons" oninput="filterNavIcons(this.value, this)">
  1882. <button type="button" class="ne-chip" onclick="setNavLinkIcon(${i}, '')">No icon</button>
  1883. </div>
  1884. <div class="ne-picker-grid">
  1885. ${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('')}
  1886. </div>
  1887. </div>` : ''}
  1888. </div>`).join('')}</div>` : neEmpty('No links yet. Add your first navigation link.');
  1889. ​
  1890. if (navIconPickerIndex >= 0) {
  1891. const search = container.querySelector('.ne-picker .ne-input');
  1892. if (search) search.focus();
  1893. }
  1894. }
  1895. ​
  1896. function toggleNavIconPicker(index) {
  1897. navIconPickerIndex = navIconPickerIndex === index ? -1 : index;
  1898. renderNavLinks();
  1899. }
  1900. ​
  1901. function filterNavIcons(query, input) {
  1902. const q = query.trim().toLowerCase();
  1903. const scope = input && input.closest(".ne-picker") ? input.closest(".ne-picker") : document;
  1904. scope.querySelectorAll(".ne-picker-item").forEach(btn => {
  1905. btn.style.display = !q || btn.dataset.icon.includes(q) ? "" : "none";
  1906. });
  1907. }
  1908. ​
  1909. function setNavLinkIcon(index, icon) {
  1910. if (!navLinks[index]) return;
  1911. if (icon) {
  1912. navLinks[index].icon = icon;
  1913. } else {
  1914. delete navLinks[index].icon;
  1915. }
  1916. navIconPickerIndex = -1;
  1917. renderNavLinks();
  1918. }
  1919. ​
  1920. function addNavLink() {
  1921. navLinks.push({ label: '', url: '#' });
  1922. navIconPickerIndex = -1;
  1923. renderNavLinks();
  1924. neFocusLast(document.getElementById('navLinksContainer'), '.ne-nav-label');
  1925. }
  1926. ​
  1927. function removeNavLink(index) {
  1928. navLinks.splice(index, 1);
  1929. navIconPickerIndex = -1;
  1930. renderNavLinks();
  1931. }
  1932. ​
  1933. function moveNavLink(index, dir) {
  1934. if (neMove(navLinks, index, dir)) {
  1935. navIconPickerIndex = -1;
  1936. renderNavLinks();
  1937. }
  1938. }
  1939. ​
  1940. function renderNavButtons() {
  1941. const container = document.getElementById('navButtonsContainer');
  1942. if (!container) return;
  1943. ​
  1944. const hasIcons = Array.isArray(ICON_IDS) && ICON_IDS.length > 0;
  1945. ​
  1946. container.innerHTML = navButtons.length ? `<div class="ne-list">${navButtons.map((btn, i) => `
  1947. <div class="ne-item">
  1948. <div class="ne-row">
  1949. ${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>` : ''}
  1950. <input type="text" class="ne-input ne-btn-label" value="${escapeHtml(btn.label || '')}" placeholder="Label" oninput="navButtons[${i}].label = this.value">
  1951. <input type="text" class="ne-input" value="${escapeHtml(btn.url || '')}" placeholder="URL" oninput="navButtons[${i}].url = this.value">
  1952. <select class="ne-input ne-select" onchange="navButtons[${i}].style = this.value">
  1953. <option value="ghost" ${btn.style === 'ghost' ? 'selected' : ''}>Ghost</option>
  1954. <option value="primary" ${btn.style === 'primary' ? 'selected' : ''}>Primary</option>
  1955. <option value="outline" ${btn.style === 'outline' ? 'selected' : ''}>Outline</option>
  1956. </select>
  1957. ${neActions('moveNavButton', 'removeNavButton', i, navButtons.length)}
  1958. </div>
  1959. ${hasIcons && navButtonIconPickerIndex === i ? `
  1960. <div class="ne-picker">
  1961. <div class="ne-picker-head">
  1962. <input type="text" class="ne-input" placeholder="Search icons" oninput="filterNavIcons(this.value, this)">
  1963. <button type="button" class="ne-chip" onclick="setNavButtonIcon(${i}, '')">No icon</button>
  1964. </div>
  1965. <div class="ne-picker-grid">
  1966. ${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('')}
  1967. </div>
  1968. </div>` : ''}
  1969. </div>`).join('')}</div>` : neEmpty('No buttons yet.');
  1970. ​
  1971. if (navButtonIconPickerIndex >= 0) {
  1972. const search = container.querySelector('.ne-picker .ne-input');
  1973. if (search) search.focus();
  1974. }
  1975. }
  1976. ​
  1977. function toggleNavButtonIconPicker(index) {
  1978. navButtonIconPickerIndex = navButtonIconPickerIndex === index ? -1 : index;
  1979. renderNavButtons();
  1980. }
  1981. ​
  1982. function setNavButtonIcon(index, icon) {
  1983. if (!navButtons[index]) return;
  1984. if (icon) {
  1985. navButtons[index].icon = icon;
  1986. } else {
  1987. delete navButtons[index].icon;
  1988. }
  1989. navButtonIconPickerIndex = -1;
  1990. renderNavButtons();
  1991. }
  1992. ​
  1993. function addNavButton() {
  1994. navButtons.push({ label: '', url: '#', style: 'ghost' });
  1995. navButtonIconPickerIndex = -1;
  1996. renderNavButtons();
  1997. neFocusLast(document.getElementById('navButtonsContainer'), '.ne-btn-label');
  1998. }
  1999. ​
  2000. function removeNavButton(index) {
  2001. navButtons.splice(index, 1);
  2002. navButtonIconPickerIndex = -1;
  2003. renderNavButtons();
  2004. }
  2005. ​
  2006. function moveNavButton(index, dir) {
  2007. if (neMove(navButtons, index, dir)) {
  2008. navButtonIconPickerIndex = -1;
  2009. renderNavButtons();
  2010. }
  2011. }
  2012. ​
  2013. function ensureFooterColumn(colIndex) {
  2014. if (!footerData.columns) footerData.columns = [];
  2015. if (!footerData.columns[colIndex]) footerData.columns[colIndex] = { title: '', links: [] };
  2016. if (!footerData.columns[colIndex].links) footerData.columns[colIndex].links = [];
  2017. return footerData.columns[colIndex];
  2018. }
  2019. ​
  2020. function updateFooterColumnTitle(colIndex, value) {
  2021. ensureFooterColumn(colIndex).title = value;
  2022. updateFooterData();
  2023. }
  2024. ​
  2025. function updateFooterColumnLinkLabel(colIndex, linkIndex, value) {
  2026. const col = ensureFooterColumn(colIndex);
  2027. if (!col.links[linkIndex]) col.links[linkIndex] = { label: '', url: '' };
  2028. col.links[linkIndex].label = value;
  2029. updateFooterData();
  2030. }
  2031. ​
  2032. function updateFooterColumnLinkUrl(colIndex, linkIndex, value) {
  2033. const col = ensureFooterColumn(colIndex);
  2034. if (!col.links[linkIndex]) col.links[linkIndex] = { label: '', url: '' };
  2035. col.links[linkIndex].url = value;
  2036. updateFooterData();
  2037. }
  2038. ​
  2039. function renderFooterColumns() {
  2040. const container = document.getElementById('footerColumnsContainer');
  2041. if (!container) return;
  2042. if (!footerData.columns) footerData.columns = [];
  2043. ​
  2044. container.innerHTML = footerData.columns.length ? `<div class="ne-columns">${footerData.columns.map((col, i) => {
  2045. if (!col) col = { title: '', links: [] };
  2046. const links = col.links || [];
  2047. return `
  2048. <div class="ne-card">
  2049. <div class="ne-card-head">
  2050. <input type="text" class="ne-input ne-title ne-col-title" value="${escapeHtml(col.title || '')}" placeholder="Column title" oninput="updateFooterColumnTitle(${i}, this.value)">
  2051. ${neActions('moveFooterColumn', 'removeFooterColumn', i, footerData.columns.length)}
  2052. </div>
  2053. <div class="ne-card-body">
  2054. ${links.length ? links.map((link, j) => `
  2055. <div class="ne-row ne-row-compact">
  2056. <input type="text" class="ne-input ne-link-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="updateFooterColumnLinkLabel(${i}, ${j}, this.value)">
  2057. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateFooterColumnLinkUrl(${i}, ${j}, this.value)">
  2058. <button type="button" class="ne-btn ne-btn-danger" title="Remove link" onclick="removeFooterColumnLink(${i}, ${j})">${NE_SVG.trash}</button>
  2059. </div>`).join('') : neEmpty('No links in this column.')}
  2060. <button type="button" class="ne-add" onclick="addFooterColumnLink(${i})">${NE_SVG.plus} Add Link</button>
  2061. </div>
  2062. </div>`;
  2063. }).join('')}</div>` : neEmpty('No columns yet. Add your first footer column.');
  2064. }
  2065. ​
  2066. function addFooterColumn() {
  2067. if (!footerData.columns) footerData.columns = [];
  2068. footerData.columns.push({ title: '', links: [] });
  2069. renderFooterColumns();
  2070. updateFooterData();
  2071. neFocusLast(document.getElementById('footerColumnsContainer'), '.ne-col-title');
  2072. }
  2073. ​
  2074. function removeFooterColumn(index) {
  2075. footerData.columns.splice(index, 1);
  2076. renderFooterColumns();
  2077. updateFooterData();
  2078. }
  2079. ​
  2080. function moveFooterColumn(index, dir) {
  2081. if (neMove(footerData.columns, index, dir)) {
  2082. renderFooterColumns();
  2083. updateFooterData();
  2084. }
  2085. }
  2086. ​
  2087. function addFooterColumnLink(colIndex) {
  2088. ensureFooterColumn(colIndex).links.push({ label: '', url: '#' });
  2089. renderFooterColumns();
  2090. updateFooterData();
  2091. const cards = document.querySelectorAll('#footerColumnsContainer .ne-card');
  2092. if (cards[colIndex]) neFocusLast(cards[colIndex], '.ne-link-label');
  2093. }
  2094. ​
  2095. function removeFooterColumnLink(colIndex, linkIndex) {
  2096. footerData.columns[colIndex].links.splice(linkIndex, 1);
  2097. renderFooterColumns();
  2098. updateFooterData();
  2099. }
  2100. ​
  2101. function renderSocialLinks() {
  2102. const container = document.getElementById('socialLinksContainer');
  2103. if (!container) return;
  2104. if (!footerData.social_links) footerData.social_links = [];
  2105. ​
  2106. container.innerHTML = footerData.social_links.length ? `<div class="ne-list">${footerData.social_links.map((link, i) => `
  2107. <div class="ne-item">
  2108. <div class="ne-row">
  2109. <select class="ne-input ne-select" onchange="updateSocialLink(${i}, 'platform', this.value)">
  2110. ${SOCIAL_PLATFORMS.map(([value, label]) => `<option value="${value}" ${link.platform === value ? 'selected' : ''}>${label}</option>`).join('')}
  2111. </select>
  2112. <input type="text" class="ne-input ne-social-url" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateSocialLink(${i}, 'url', this.value)">
  2113. ${neActions('moveSocialLink', 'removeSocialLink', i, footerData.social_links.length)}
  2114. </div>
  2115. </div>`).join('')}</div>` : neEmpty('No social links yet.');
  2116. }
  2117. ​
  2118. function updateSocialLink(index, field, value) {
  2119. if (!footerData.social_links[index]) return;
  2120. footerData.social_links[index][field] = value;
  2121. updateFooterData();
  2122. }
  2123. ​
  2124. function addSocialLink() {
  2125. if (!footerData.social_links) footerData.social_links = [];
  2126. footerData.social_links.push({ platform: 'twitter', url: '#' });
  2127. renderSocialLinks();
  2128. updateFooterData();
  2129. neFocusLast(document.getElementById('socialLinksContainer'), '.ne-social-url');
  2130. }
  2131. ​
  2132. function removeSocialLink(index) {
  2133. footerData.social_links.splice(index, 1);
  2134. renderSocialLinks();
  2135. updateFooterData();
  2136. }
  2137. ​
  2138. function moveSocialLink(index, dir) {
  2139. if (neMove(footerData.social_links, index, dir)) {
  2140. renderSocialLinks();
  2141. updateFooterData();
  2142. }
  2143. }
  2144. ​
  2145. function renderBottomLinks() {
  2146. const container = document.getElementById('bottomLinksContainer');
  2147. if (!container) return;
  2148. if (!footerData.bottom_links) footerData.bottom_links = [];
  2149. ​
  2150. container.innerHTML = footerData.bottom_links.length ? `<div class="ne-list">${footerData.bottom_links.map((link, i) => `
  2151. <div class="ne-item">
  2152. <div class="ne-row">
  2153. <input type="text" class="ne-input ne-bottom-label" value="${escapeHtml(link.label || '')}" placeholder="Label" oninput="updateBottomLink(${i}, 'label', this.value)">
  2154. <input type="text" class="ne-input" value="${escapeHtml(link.url || '')}" placeholder="URL" oninput="updateBottomLink(${i}, 'url', this.value)">
  2155. ${neActions('moveBottomLink', 'removeBottomLink', i, footerData.bottom_links.length)}
  2156. </div>
  2157. </div>`).join('')}</div>` : neEmpty('No bottom links yet.');
  2158. }
  2159. ​
  2160. function updateBottomLink(index, field, value) {
  2161. if (!footerData.bottom_links[index]) return;
  2162. footerData.bottom_links[index][field] = value;
  2163. updateFooterData();
  2164. }
  2165. ​
  2166. function addBottomLink() {
  2167. if (!footerData.bottom_links) footerData.bottom_links = [];
  2168. footerData.bottom_links.push({ label: '', url: '#' });
  2169. renderBottomLinks();
  2170. updateFooterData();
  2171. neFocusLast(document.getElementById('bottomLinksContainer'), '.ne-bottom-label');
  2172. }
  2173. ​
  2174. function removeBottomLink(index) {
  2175. footerData.bottom_links.splice(index, 1);
  2176. renderBottomLinks();
  2177. updateFooterData();
  2178. }
  2179. ​
  2180. function moveBottomLink(index, dir) {
  2181. if (neMove(footerData.bottom_links, index, dir)) {
  2182. renderBottomLinks();
  2183. updateFooterData();
  2184. }
  2185. }
  2186. ​
  2187. function updateFooterData() {
  2188. footerData.brand_description = document.getElementById('footerBrandDesc')?.value || '';
  2189. footerData.copyright = document.getElementById('footerCopyright')?.value || '';
  2190. ​
  2191. if (!footerData.columns) footerData.columns = [];
  2192. if (!footerData.social_links) footerData.social_links = [];
  2193. if (!footerData.bottom_links) footerData.bottom_links = [];
  2194. }
  2195. ​
  2196. function updateAnchorsList() {
  2197. const anchorsList = document.getElementById('anchorsList');
  2198. if (!anchorsList) return;
  2199. ​
  2200. const anchors = new Set(['#']); // Always include top
  2201. ​
  2202. blocks.forEach(block => {
  2203. if (block.id && ['features', 'testimonials', 'pricing', 'faq', 'team', 'stats', 'cta', 'video', 'gallery', 'audio', 'countdown', 'newsletter'].includes(block.type)) {
  2204. anchors.add(`#${block.id}`);
  2205. }
  2206. });
  2207. ​
  2208. anchorsList.innerHTML = '';
  2209. anchors.forEach(anchor => {
  2210. const btn = document.createElement('button');
  2211. btn.type = 'button';
  2212. btn.className = 'btn btn-secondary btn-sm';
  2213. btn.onclick = () => selectLink(anchor);
  2214. btn.textContent = anchor === '#' ? '#top' : anchor;
  2215. btn.style.margin = '0 8px 8px 0';
  2216. anchorsList.appendChild(btn);
  2217. });
  2218. }
  2219. ​
  2220. function renderInternalPages() {
  2221. const container = document.getElementById('internalPages');
  2222. if (!container) return;
  2223. ​
  2224. container.innerHTML = AVAILABLE_PAGES.map(page => `
  2225. <button type="button" class="btn btn-secondary btn-sm" style="margin: 0 8px 8px 0;" onclick="selectLink('${escapeHtml(page.url)}')">${escapeHtml(page.label)}</button>
  2226. `).join('');
  2227. }
  2228. ​
  2229. function showLinkSelector(inputId, callback) {
  2230. currentLinkCallback = { inputId, callback };
  2231. updateAnchorsList();
  2232. document.getElementById('linkSelectorModal').classList.add('active');
  2233. }
  2234. ​
  2235. function hideLinkSelector() {
  2236. document.getElementById('linkSelectorModal').classList.remove('active');
  2237. currentLinkCallback = null;
  2238. }
  2239. ​
  2240. function selectLink(url) {
  2241. if (currentLinkCallback) {
  2242. const input = document.getElementById(currentLinkCallback.inputId);
  2243. if (input) {
  2244. input.value = url;
  2245. input.dispatchEvent(new Event('input'));
  2246. }
  2247. }
  2248. hideLinkSelector();
  2249. }
  2250. ​
  2251. ​
  2252. function showAddBlockModal() {
  2253. document.getElementById('addBlockModal').classList.add('active');
  2254. }
  2255. ​
  2256. function hideAddBlockModal() {
  2257. document.getElementById('addBlockModal').classList.remove('active');
  2258. }
  2259. ​
  2260. function confirmDelete(productId, productName) {
  2261. document.getElementById('deleteProductId').value = productId;
  2262. document.getElementById('deleteProductName').textContent = productName;
  2263. document.getElementById('deleteModal').classList.add('active');
  2264. }
  2265. ​
  2266. function hideDeleteModal() {
  2267. document.getElementById('deleteModal').classList.remove('active');
  2268. }
  2269. ​
  2270. ​
  2271. function escapeHtml(text) {
  2272. if (!text) return '';
  2273. const div = document.createElement('div');
  2274. div.textContent = text;
  2275. return div.innerHTML;
  2276. }
  2277. ​
  2278. document.addEventListener('keydown', function (e) {
  2279. if (e.key === 'Escape') {
  2280. hideAddBlockModal();
  2281. hideDeleteModal();
  2282. hideLinkSelector();
  2283. }
  2284. });
  2285. ​
  2286. document.querySelectorAll('.modal-overlay').forEach(overlay => {
  2287. overlay.addEventListener('click', function (e) {
  2288. if (e.target === this) {
  2289. this.classList.remove('active');
  2290. }
  2291. });
  2292. });
  2293. ​
  2294. ​
  2295. ​
  2296. ​
  2297. ​
  2298. ​
  2299. ​
  2300. ​
  2301. ​
  2302. ​
  2303. ​
  2304. ​
  2305. ​
  2306. ​
  2307. ​
  2308. ​
  2309. ​
  2310. ​
  2311. ​
  2312. ​
  2313. ​
  2314. function renderLanguages() {
  2315. const container = document.getElementById('languagesContainer');
  2316. if (!container || typeof languagesData === 'undefined') return;
  2317. ​
  2318. container.innerHTML = languagesData.length ? `<div class="ne-list">${languagesData.map((lang, i) => `
  2319. <div class="ne-item">
  2320. <div class="ne-row">
  2321. <input type="text" class="ne-input ne-lang-name" value="${escapeHtml(lang.name || '')}" placeholder="Language name (e.g. English, Polski, 中文)" maxlength="50" oninput="languagesData[${i}].name = this.value">
  2322. <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()">
  2323. ${neActions('moveLanguage', 'removeLanguage', i, languagesData.length)}
  2324. </div>
  2325. </div>`).join('')}</div>` : neEmpty('No languages yet. Add your main language and the languages you want to offer.');
  2326. }
  2327. ​
  2328. function addLanguage() {
  2329. languagesData.push({ name: '', code: '' });
  2330. renderLanguages();
  2331. neFocusLast(document.getElementById('languagesContainer'), '.ne-lang-name');
  2332. }
  2333. ​
  2334. function removeLanguage(index) {
  2335. languagesData.splice(index, 1);
  2336. renderLanguages();
  2337. }
  2338. ​
  2339. function moveLanguage(index, dir) {
  2340. if (neMove(languagesData, index, dir)) {
  2341. renderLanguages();
  2342. }
  2343. }(function () {
  2344. const form = document.getElementById('pageForm') || document.getElementById('settingsForm');
  2345. if (!form) return;
  2346. ​
  2347. const isSettings = form.id === 'settingsForm';
  2348. const params = new URLSearchParams(location.search);
  2349. const draftKey = 'flatly-draft:' + location.pathname + ':' + (params.get('tab') || 'index') + ':' + (params.get('id') || '') + ':' + (params.get('lang') || '');
  2350. const pendingKey = 'flatly-draft-pending';
  2351. 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[]']);
  2352. let baseline = '';
  2353. let timer = 0;
  2354. let submitting = false;
  2355. ​
  2356. const storage = {
  2357. get(key) {
  2358. try { return localStorage.getItem(key); } catch (e) { return null; }
  2359. },
  2360. set(key, value) {
  2361. try { localStorage.setItem(key, value); } catch (e) {}
  2362. },
  2363. remove(key) {
  2364. try { localStorage.removeItem(key); } catch (e) {}
  2365. }
  2366. };
  2367. ​
  2368. function snapshot() {
  2369. const fields = {};
  2370. Array.from(form.elements).forEach(el => {
  2371. if (!el.name || skipFields.has(el.name) || el.type === 'file' || el.type === 'submit' || el.type === 'button') return;
  2372. fields[el.name] = el.type === 'checkbox' ? el.checked : el.value;
  2373. });
  2374. ​
  2375. const data = { fields };
  2376. if (isSettings) {
  2377. updateFooterData();
  2378. data.navLinks = navLinks;
  2379. data.navButtons = navButtons;
  2380. data.footerData = footerData;
  2381. if (typeof languagesData !== 'undefined') data.languages = languagesData;
  2382. } else {
  2383. data.blocks = blocks;
  2384. }
  2385. return data;
  2386. }
  2387. ​
  2388. function serialize() {
  2389. try {
  2390. return JSON.stringify(snapshot());
  2391. } catch (e) {
  2392. return '';
  2393. }
  2394. }
  2395. ​
  2396. function saveDraft() {
  2397. if (submitting) return;
  2398. const current = serialize();
  2399. if (!current) return;
  2400. if (current === baseline) {
  2401. storage.remove(draftKey);
  2402. return;
  2403. }
  2404. storage.set(draftKey, JSON.stringify({ savedAt: Date.now(), data: JSON.parse(current) }));
  2405. }
  2406. ​
  2407. function scheduleSave() {
  2408. clearTimeout(timer);
  2409. timer = setTimeout(saveDraft, 700);
  2410. }
  2411. ​
  2412. function applyDraft(data) {
  2413. Array.from(form.elements).forEach(el => {
  2414. if (!el.name || !(el.name in data.fields)) return;
  2415. if (el.type === 'checkbox') {
  2416. el.checked = !!data.fields[el.name];
  2417. } else {
  2418. el.value = data.fields[el.name];
  2419. }
  2420. });
  2421. ​
  2422. if (isSettings) {
  2423. navLinks.splice(0, navLinks.length, ...(data.navLinks || []));
  2424. navButtons.splice(0, navButtons.length, ...(data.navButtons || []));
  2425. Object.keys(footerData).forEach(k => delete footerData[k]);
  2426. Object.assign(footerData, data.footerData || {});
  2427. const desc = document.getElementById('footerBrandDesc');
  2428. const copy = document.getElementById('footerCopyright');
  2429. if (desc) desc.value = footerData.brand_description || '';
  2430. if (copy) copy.value = footerData.copyright || '';
  2431. renderNavLinks();
  2432. renderNavButtons();
  2433. renderFooterColumns();
  2434. renderSocialLinks();
  2435. renderBottomLinks();
  2436. if (typeof languagesData !== 'undefined') languagesData.splice(0, languagesData.length, ...(data.languages || languagesData));
  2437. if (typeof renderLanguages === 'function') renderLanguages();
  2438. updateFooterData();
  2439. } else {
  2440. blocks.splice(0, blocks.length, ...(data.blocks || []));
  2441. renderBlocks();
  2442. updateBlockCount();
  2443. if (typeof schedulePreviewUpdate === 'function') schedulePreviewUpdate();
  2444. }
  2445. }
  2446. ​
  2447. function showBanner(draft) {
  2448. const host = document.querySelector('.main-content');
  2449. if (!host) return;
  2450. ​
  2451. const banner = document.createElement('div');
  2452. banner.className = 'draft-banner';
  2453. banner.innerHTML = `
  2454. <div class="draft-banner-text">
  2455. <strong>Unsaved draft found</strong>
  2456. <span>Autosaved ${new Date(draft.savedAt).toLocaleString()}. Restore it to continue where you left off.</span>
  2457. </div>
  2458. <div class="draft-banner-actions">
  2459. <button type="button" class="btn btn-secondary btn-sm" data-draft="discard">Discard</button>
  2460. <button type="button" class="btn btn-primary btn-sm" data-draft="restore">Restore</button>
  2461. </div>`;
  2462. ​
  2463. banner.addEventListener('click', e => {
  2464. const action = e.target.closest('[data-draft]')?.dataset.draft;
  2465. if (!action) return;
  2466. if (action === 'restore') {
  2467. applyDraft(draft.data);
  2468. saveDraft();
  2469. } else {
  2470. storage.remove(draftKey);
  2471. }
  2472. banner.remove();
  2473. });
  2474. ​
  2475. host.insertBefore(banner, host.firstChild);
  2476. }
  2477. ​
  2478. try {
  2479. const pending = sessionStorage.getItem(pendingKey);
  2480. if (pending) {
  2481. sessionStorage.removeItem(pendingKey);
  2482. if (document.querySelector('.message.success')) storage.remove(pending);
  2483. }
  2484. } catch (e) {}
  2485. ​
  2486. form.addEventListener('submit', () => {
  2487. submitting = true;
  2488. clearTimeout(timer);
  2489. try { sessionStorage.setItem(pendingKey, draftKey); } catch (e) {}
  2490. });
  2491. ​
  2492. document.addEventListener('DOMContentLoaded', () => {
  2493. setTimeout(() => {
  2494. baseline = serialize();
  2495. ​
  2496. const raw = storage.get(draftKey);
  2497. if (raw) {
  2498. try {
  2499. const draft = JSON.parse(raw);
  2500. if (draft && draft.data && JSON.stringify(draft.data) !== baseline) {
  2501. showBanner(draft);
  2502. } else {
  2503. storage.remove(draftKey);
  2504. }
  2505. } catch (e) {
  2506. storage.remove(draftKey);
  2507. }
  2508. }
  2509. ​
  2510. ['input', 'change', 'click'].forEach(evt => document.addEventListener(evt, scheduleSave, true));
  2511. window.addEventListener('pagehide', saveDraft);
  2512. document.addEventListener('visibilitychange', () => {
  2513. if (document.visibilityState === 'hidden') saveDraft();
  2514. });
  2515. }, 400);
  2516. });
  2517. })();
  2518. ​
  2519. const MEDIA_ACCEPT = {
  2520. image: 'image/jpeg,image/png,image/gif,image/webp,image/avif,image/x-icon,.jpg,.jpeg,.png,.gif,.webp,.avif,.ico',
  2521. video: 'video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.m4v,.webm,.ogv,.mov',
  2522. audio: 'audio/mpeg,audio/ogg,audio/wav,audio/mp4,audio/aac,audio/flac,audio/webm,.mp3,.ogg,.oga,.opus,.wav,.m4a,.aac,.flac,.weba'
  2523. };
  2524. ​
  2525. const MEDIA_MIME = {
  2526. mp4: 'video/mp4', m4v: 'video/mp4', webm: 'video/webm', ogv: 'video/ogg', mov: 'video/mp4',
  2527. mp3: 'audio/mpeg', ogg: 'audio/ogg', oga: 'audio/ogg', opus: 'audio/ogg', wav: 'audio/wav',
  2528. m4a: 'audio/mp4', aac: 'audio/aac', flac: 'audio/flac', weba: 'audio/webm'
  2529. };
  2530. ​
  2531. const MEDIA_ICONS = {
  2532. 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>',
  2533. 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>',
  2534. 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>',
  2535. 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>',
  2536. 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>'
  2537. };
  2538. ​
  2539. function mediaMime(url, fallback) {
  2540. const path = String(url || '').split('?')[0].split('#')[0];
  2541. const ext = path.includes('.') ? path.split('.').pop().toLowerCase() : '';
  2542. return MEDIA_MIME[ext] || fallback;
  2543. }
  2544. ​
  2545. function mediaFieldFor(node) {
  2546. return node.closest('.media-field');
  2547. }
  2548. ​
  2549. function mediaSetStatus(field, text, state) {
  2550. const status = field.querySelector('.media-status');
  2551. if (!status) return;
  2552. status.textContent = text || '';
  2553. status.className = 'media-status' + (state ? ' ' + state : '');
  2554. clearTimeout(field._statusTimer);
  2555. if (state === 'success' || state === 'error') {
  2556. field._statusTimer = setTimeout(() => {
  2557. status.textContent = '';
  2558. status.className = 'media-status';
  2559. }, state === 'error' ? 8000 : 3000);
  2560. }
  2561. }
  2562. ​
  2563. function mediaApply(field, url) {
  2564. const input = field.querySelector('input[data-media]');
  2565. if (!input) return;
  2566. input.value = url;
  2567. input.dispatchEvent(new Event('input', { bubbles: true }));
  2568. input.dispatchEvent(new Event('change', { bubbles: true }));
  2569. }
  2570. ​
  2571. function mediaUploadFile(field, file) {
  2572. const kind = field.dataset.kind;
  2573. if (field.classList.contains('uploading')) return;
  2574. ​
  2575. const body = new FormData();
  2576. body.append('csrf_token', CSRF_TOKEN);
  2577. body.append('kind', kind);
  2578. body.append('file', file);
  2579. ​
  2580. const bar = field.querySelector('.media-progress-bar');
  2581. field.classList.add('uploading');
  2582. if (bar) bar.style.width = '0%';
  2583. mediaSetStatus(field, 'Uploading ' + file.name + '...', 'busy');
  2584. ​
  2585. const xhr = new XMLHttpRequest();
  2586. xhr.open('POST', FLATLY_BASE_URL + '/admin/upload');
  2587. xhr.upload.onprogress = e => {
  2588. if (e.lengthComputable && bar) bar.style.width = Math.round((e.loaded / e.total) * 100) + '%';
  2589. };
  2590. xhr.onerror = () => {
  2591. field.classList.remove('uploading');
  2592. mediaSetStatus(field, 'Network error. Upload failed.', 'error');
  2593. };
  2594. xhr.onload = () => {
  2595. field.classList.remove('uploading');
  2596. let response = null;
  2597. try { response = JSON.parse(xhr.responseText); } catch (e) {}
  2598. if (response && response.success) {
  2599. mediaApply(field, response.url);
  2600. mediaSetStatus(field, 'Uploaded (' + response.size + ')', 'success');
  2601. } else {
  2602. mediaSetStatus(field, response && response.error ? response.error : 'Upload failed (HTTP ' + xhr.status + ').', 'error');
  2603. }
  2604. };
  2605. xhr.send(body);
  2606. }
  2607. ​
  2608. function mediaPickFile(button) {
  2609. const field = mediaFieldFor(button);
  2610. if (!field) return;
  2611. const picker = document.createElement('input');
  2612. picker.type = 'file';
  2613. picker.accept = MEDIA_ACCEPT[field.dataset.kind] || '';
  2614. picker.onchange = () => {
  2615. if (picker.files && picker.files[0]) mediaUploadFile(field, picker.files[0]);
  2616. };
  2617. picker.click();
  2618. }
  2619. ​
  2620. function mediaLibraryKey(e) {
  2621. if (e.key === 'Escape') mediaCloseLibrary();
  2622. }
  2623. ​
  2624. function mediaCloseLibrary() {
  2625. document.querySelector('.media-modal')?.remove();
  2626. document.removeEventListener('keydown', mediaLibraryKey);
  2627. }
  2628. ​
  2629. function mediaOpenLibrary(button) {
  2630. const field = mediaFieldFor(button);
  2631. if (!field) return;
  2632. const kind = field.dataset.kind;
  2633. ​
  2634. mediaCloseLibrary();
  2635. const modal = document.createElement('div');
  2636. modal.className = 'media-modal';
  2637. modal.innerHTML = `
  2638. <div class="media-modal-box">
  2639. <div class="media-modal-head">
  2640. <h3>Media library</h3>
  2641. <input type="text" class="ne-input" placeholder="Search files" data-media-search>
  2642. <button type="button" class="ne-btn" data-media-close title="Close">${MEDIA_ICONS.close}</button>
  2643. </div>
  2644. <div class="media-modal-body"><div class="media-empty">Loading...</div></div>
  2645. </div>`;
  2646. document.body.appendChild(modal);
  2647. document.addEventListener('keydown', mediaLibraryKey);
  2648. ​
  2649. const body = modal.querySelector('.media-modal-body');
  2650. let items = [];
  2651. ​
  2652. const draw = query => {
  2653. const q = (query || '').trim().toLowerCase();
  2654. const visible = items.filter(item => !q || item.name.toLowerCase().includes(q));
  2655. if (!visible.length) {
  2656. body.innerHTML = `<div class="media-empty">${items.length ? 'No matching files.' : 'No files uploaded yet.'}</div>`;
  2657. return;
  2658. }
  2659. body.innerHTML = `<div class="media-grid">${visible.map(item => `
  2660. <button type="button" class="media-item" data-url="${escapeHtml(item.url)}" title="${escapeHtml(item.name)}">
  2661. <span class="media-thumb">${kind === 'image' ? `<img src="${escapeHtml(flatlyUrl(item.url))}" alt="" loading="lazy">` : MEDIA_ICONS[kind] || ''}</span>
  2662. <span class="media-name">${escapeHtml(item.name)}</span>
  2663. <span class="media-size">${escapeHtml(item.size)}</span>
  2664. </button>`).join('')}</div>`;
  2665. };
  2666. ​
  2667. modal.addEventListener('click', e => {
  2668. if (e.target === modal || e.target.closest('[data-media-close]')) {
  2669. mediaCloseLibrary();
  2670. return;
  2671. }
  2672. const item = e.target.closest('.media-item');
  2673. if (item) {
  2674. mediaApply(field, item.dataset.url);
  2675. mediaCloseLibrary();
  2676. }
  2677. });
  2678. modal.querySelector('[data-media-search]').addEventListener('input', e => draw(e.target.value));
  2679. ​
  2680. fetch(FLATLY_BASE_URL + '/admin/upload?list=' + encodeURIComponent(kind), { credentials: 'same-origin' })
  2681. .then(r => r.json())
  2682. .then(data => {
  2683. if (!data.success) throw new Error(data.error || 'Could not load media.');
  2684. items = data.items || [];
  2685. draw('');
  2686. })
  2687. .catch(err => {
  2688. body.innerHTML = `<div class="media-empty">${escapeHtml(err.message)}</div>`;
  2689. });
  2690. }
  2691. ​
  2692. function enhanceMediaInputs(root) {
  2693. (root || document).querySelectorAll('input[data-media]:not([data-media-ready])').forEach(input => {
  2694. const kind = input.dataset.media;
  2695. if (!MEDIA_ACCEPT[kind]) return;
  2696. input.dataset.mediaReady = '1';
  2697. ​
  2698. const field = document.createElement('div');
  2699. field.className = 'media-field';
  2700. field.dataset.kind = kind;
  2701. input.parentNode.insertBefore(field, input);
  2702. ​
  2703. const row = document.createElement('div');
  2704. row.className = 'media-row';
  2705. field.appendChild(row);
  2706. row.appendChild(input);
  2707. ​
  2708. const actions = document.createElement('div');
  2709. actions.className = 'media-actions';
  2710. actions.innerHTML = `
  2711. <button type="button" class="btn btn-secondary btn-sm" onclick="mediaPickFile(this)">${MEDIA_ICONS.upload} Upload</button>
  2712. <button type="button" class="btn btn-secondary btn-sm" onclick="mediaOpenLibrary(this)">${MEDIA_ICONS.library} Library</button>`;
  2713. row.appendChild(actions);
  2714. ​
  2715. field.insertAdjacentHTML('beforeend', '<div class="media-progress"><div class="media-progress-bar"></div></div><div class="media-status"></div>');
  2716. });
  2717. }
  2718. ​
  2719. (function () {
  2720. let frame = 0;
  2721. const schedule = () => {
  2722. if (frame) return;
  2723. frame = requestAnimationFrame(() => {
  2724. frame = 0;
  2725. enhanceMediaInputs(document);
  2726. });
  2727. };
  2728. ​
  2729. const start = () => {
  2730. enhanceMediaInputs(document);
  2731. const host = document.querySelector('.main-content') || document.body;
  2732. new MutationObserver(schedule).observe(host, { childList: true, subtree: true });
  2733. };
  2734. ​
  2735. if (document.readyState === 'loading') {
  2736. document.addEventListener('DOMContentLoaded', start);
  2737. } else {
  2738. start();
  2739. }
  2740. ​
  2741. document.addEventListener('dragover', e => {
  2742. const field = e.target.closest && e.target.closest('.media-field');
  2743. if (!field || !e.dataTransfer || !Array.from(e.dataTransfer.types || []).includes('Files')) return;
  2744. e.preventDefault();
  2745. field.classList.add('dragging');
  2746. });
  2747. ​
  2748. document.addEventListener('dragleave', e => {
  2749. const field = e.target.closest && e.target.closest('.media-field');
  2750. if (field && !field.contains(e.relatedTarget)) field.classList.remove('dragging');
  2751. });
  2752. ​
  2753. document.addEventListener('drop', e => {
  2754. const field = e.target.closest && e.target.closest('.media-field');
  2755. if (!field) return;
  2756. field.classList.remove('dragging');
  2757. const file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
  2758. if (!file) return;
  2759. e.preventDefault();
  2760. mediaUploadFile(field, file);
  2761. });
  2762. })();
  2763. ​
  2764. function switchEditLang(code) {
  2765. const url = new URL(location.href);
  2766. if (code) {
  2767. url.searchParams.set('lang', code);
  2768. } else {
  2769. url.searchParams.delete('lang');
  2770. }
  2771. location.href = url.toString();
  2772. }