The export and editor have been improved. Fonts are now pulled up in …

…the editor. Also added the ability to export styles in developer mode (CDN) or production mode, with styles embedded in html
hinddy · Aug 10, 2024 · 5adfa06 · 5adfa06
1 parent 77c74e9
commit 5adfa06
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 52 deletions.
diff --git a/editor.html b/editor.html
@@ -19,10 +19,14 @@
       font-size: 0.9em;
     }
 
+    div.block-wrapper.highlight-border  {
+      outline: 3px dotted #6445e2;
+      box-shadow: 0 0 5px rgba(51, 1, 231, 0.5);
+    }
+
     .highlight-border {
       outline: 3px dotted #0ea5e8;
-      /* Цвет подсветки можно изменить */
-      outline-offset: -3px;
+      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
     }
   </style>
 </head>
@@ -48,11 +52,97 @@ <h3 class="text-2xl font-bold mb-4 text-slate-800 dark:text-white">Edit Content<
     </div>
   </div>
   </div>
-
-  <!--script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script-->
+
   <script defer src="./js/lib/quill.js"></script>
   <script defer src="./js/default.js"></script>
+  <script defer src="./js/classes.js"></script>
   <script defer src="./js/editor.js"></script>
+  <script>
+    // Get Current FontFamily
+    function safeGet(obj, path) {
+      return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    }
+    function currentFontFamily() {
+      const currentPage = JSON.parse(localStorage.getItem("currentState"));
+      //const configString = JSON.stringify(currentState.sceleton.config);
+      let config;
+
+      const configString = safeGet(currentPage, 'sceleton.config');
+
+      try {
+        config = JSON.parse(configString);
+      } catch (error) {
+        console.error('Error config process: ', error);
+        return;
+      }
+
+      const sans = safeGet(config, 'theme.fontFamily.sans');
+
+      if (sans) {
+        const fontFamily = Array.isArray(config.theme.fontFamily.sans)
+          ? config.theme.fontFamily.sans[0]
+          : config.theme.fontFamily.sans;
+        const systemFonts = ['sans-serif', 'serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-sans-serif', 'ui-serif', 'ui-monospace', 'ui-rounded'];
+        if (typeof fontFamily === 'string' && !systemFonts.includes(fontFamily.toLowerCase())) {
+          return fontFamily;
+        }
+      }
+    }
+    function setFontLink() {
+      const fontFamily = currentFontFamily();
+      if (fontFamily) {
+        const linkElement = document.createElement('link');
+        linkElement.href = `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@400;500;600;700&display=swap`;
+        linkElement.rel = 'stylesheet';
+
+        const titleElement = document.querySelector('title');
+        if (titleElement) {
+          titleElement.insertAdjacentElement('afterend', linkElement);
+        } else {
+          document.head.appendChild(linkElement);
+        }
+      }
+    }
+
+    setFontLink();
+
+    function addSectionControls(section) {
+      const controlButton = document.createElement('div');
+      controlButton.style.position = 'absolute';
+      controlButton.style.top = '5px';
+      controlButton.style.right = '5px';
+      controlButton.style.width = '20px';
+      controlButton.style.height = '20px';
+      controlButton.style.backgroundColor = 'rgba(0, 123, 255, 0.8)';
+      controlButton.style.cursor = 'pointer';
+      controlButton.style.zIndex = '1000';
+      controlButton.title = 'Select Section';
+
+      controlButton.addEventListener('click', (event) => {
+        event.stopPropagation(); // Останавливаем распространение клика, чтобы избежать открытия внутреннего div
+        handleSectionClick(section); // Обрабатываем клик по секции
+      });
+
+      section.style.position = 'relative'; // Делаем секцию позиционируемой
+      section.appendChild(controlButton);
+    }
+
+    function handleSectionClick(section) {
+      // Здесь добавьте логику для открытия секции в редакторе
+      console.log('Section clicked:', section);
+    }
+
+    function initializeSectionControls() {
+      document.querySelectorAll('section').forEach(addSectionControls);
+    }
+
+    // Вызывайте функцию при загрузке контента
+    document.addEventListener('DOMContentLoaded', () => {
+      initializeSectionControls();
+    });
+
+
+  </script>
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -55,37 +55,37 @@
               </button>
               <div id="tools-menu"
                 class="origin-top-right absolute right-0 mt-2 w-48 text-[.75em] rounded-md shadow-lg py-1 bg-white dark:bg-slate-800 ring-1 ring-black ring-opacity-5 hidden">
+                <button id="openSceletonButton"
+                  class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
+                  title="Reset to Default Configuration">
+                  <i data-lucide="pencil-ruler" class="w-4 h-4 inline"></i>
+                  Layout Settings
+                </button>
                 <button id="config-btn"
                   class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 border-b border-slate-200 dark:border-slate-700"
                   title="Theme Pattern">
-                  <i data-lucide="pencil-ruler" class="w-4 h-4 mb-1 inline"></i>
+                  <i data-lucide="cog" class="w-4 h-4 mb-1 inline"></i>
                   Configuration
                 </button>
-                <button id="openSceletonButton"
+                <label for="import-project"
+                  class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer"
+                  title="Import Blocks">
+                  <i data-lucide="upload" class="w-4 h-4 mb-1 inline"></i>
+                  Import Json
+                </label>
+                <input type="file" id="import-project" accept=".json" class="hidden" />
+                <button id="export-project-btn"
                   class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
-                  title="Reset to Default Configuration">
-                  <i data-lucide="file-cog" class="w-4 h-4 inline"></i>
-                  Export Setting
+                  title="Export to JSON">
+                  <i data-lucide="download" class="w-4 h-4 mb-1 inline"></i>
+                  Export to Json
                 </button>
                 <button id="export-html-btn"
                   class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 border-b border-slate-200 dark:border-slate-700"
                   title="Export to HTML">
                   <i data-lucide="file-down" class="w-4 h-4 mb-1 inline"></i>
                   Export to HTML
                 </button>
-                <button id="export-project-btn"
-                  class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
-                  title="Export to JSON">
-                  <i data-lucide="download" class="w-4 h-4 mb-1 inline"></i>
-                  Export Project
-                </button>
-                <label for="import-project"
-                  class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer"
-                  title="Import Blocks">
-                  <i data-lucide="upload" class="w-4 h-4 mb-1 inline"></i>
-                  Import Project
-                </label>
-                <input type="file" id="import-project" accept=".json" class="hidden" />
                 <button id="clearCurrentStateButton"
                   class="block w-full text-start px-4 py-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
                   title="Reset to Default Configuration">

diff --git a/js/classes.js b/js/classes.js
@@ -6,7 +6,7 @@ class PageSkeleton {
   generate() {
     return `
 <!DOCTYPE html>
-<html lang="en" class="${this.getDarkModeClass()}">
+<html lang="en">
   <head>
     ${this.getHead()}
   </head>
@@ -18,8 +18,15 @@ class PageSkeleton {
       `;
   }
 
-  getDarkModeClass() {
-    return this.config.darkMode ? "dark" : "";
+  getHead() {
+    return `
+${this.getBeforeHead()}
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${this.config.title}</title>
+${this.getAfterTitle()}
+${this.getAfterHead()}
+      `;
   }
 
   getAfterTitle() {
@@ -33,22 +40,11 @@ class PageSkeleton {
   }
 
   getAfterHead() {
-    return ``;
-  }
-
-  getHead() {
     return `
-${this.getBeforeHead()}
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>${this.config.title}</title>
-${this.getAfterTitle()}
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
   tailwind.config = ${this.config.tailwindConfig};
-</script>
-${this.getAfterHead()}
-      `;
+</script>`;
   }
 
   getBodyClasses() {
@@ -208,6 +204,7 @@ class PageSceletonSetter {
         label: "Body Start Snippet",
       },
       { key: "bodyClasses", type: "text", label: "Body Classes" },
+      { key: "useDevStyles", type: "checkbox", label: "Use Development Styles" },
     ];
 
     this.initModal();
@@ -218,6 +215,16 @@ class PageSceletonSetter {
   initModal() {
     let fieldsHtml = "";
     this.fields.forEach((field) => {
+      if (field.type === "checkbox") {
+        fieldsHtml += `
+          <div class="mb-4">
+            <label class="flex items-center">
+              <input type="checkbox" id="${field.key}" name="${field.key}" class="mr-2">
+              <span>${field.label}</span>
+            </label>
+          </div>
+        `;
+      } else {
       const inputType = field.type === "textarea" ? "textarea" : "input";
       fieldsHtml += `
         <div class="mb-4">
@@ -228,6 +235,7 @@ class PageSceletonSetter {
         }></${inputType}>
         </div>
       `;
+      }
     });
 
     this.modal.innerHTML = `
@@ -274,7 +282,11 @@ class PageSceletonSetter {
     this.fields.forEach((field) => {
       const element = document.getElementById(field.key);
       if (element) {
-        element.value = currentState.sceleton?.[field.key] || "";
+        if (field.type === "checkbox") {
+          element.checked = currentState.sceleton?.[field.key] || false;
+        } else {
+          element.value = currentState.sceleton?.[field.key] || "";
+        }
       }
     });
   }
@@ -285,7 +297,11 @@ class PageSceletonSetter {
     this.fields.forEach((field) => {
       const element = document.getElementById(field.key);
       if (element) {
-        data[field.key] = element.value;
+        if (field.type === "checkbox") {
+          data[field.key] = element.checked;
+        } else {
+          data[field.key] = element.value;
+        }
       }
     });
     this.updateLocalStorage(data);

diff --git a/js/editor.js b/js/editor.js