refactors folder structure and adds share function

undistro · Apr 18, 2024 · 1b43521 · 1b43521
1 parent b8cf0ed
commit 1b43521
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 81 deletions.
diff --git a/web/assets/js/components/modals/playground-mode.js b/web/assets/js/components/modals/playground-mode.js
@@ -21,6 +21,7 @@ import {
 } from "../../utils/render-functions.js";
 import { ModesService } from "../../services/modes.js";
 import { ExampleService } from "../../services/examples.js";
+import { applyThemeToEditors } from "../../theme.js";
 
 const playgroundModesModalEl = document.getElementById(
   "playground-modes__modal"
@@ -186,5 +187,6 @@ function renderUIChangesByMode(mode) {
     renderExpressionContent(mode, examples);
     renderTabs(mode, examples);
     renderExamplesInSelectInstance(mode, examples);
+    applyThemeToEditors();
   });
 }
diff --git a/web/assets/js/main.js b/web/assets/js/main.js
@@ -70,72 +70,10 @@ function run() {
   }
 }
 
-window.addEventListener("load", () => {
-  let theme = localStorage.getItem("theme");
-  if (theme === "dark") {
-    toggleTheme("dark");
-  }
-});
-
-const toggleBtn = document.getElementsByClassName("toggle-theme")[0];
-toggleBtn.addEventListener("click", function () {
-  let currTheme = localStorage.getItem("theme");
-  if (currTheme === "dark") toggleTheme("light");
-  else toggleTheme("dark");
-});
-
-export function loadCurrentTheme() {
-  const theme = localStorage.getItem("theme");
-  const exprEditor = new AceEditor(
-    localStorage.getItem(localStorageModeKey) ?? "cel",
-    "ace/theme/clouds"
-  );
-  const editorsInputEl = document.querySelectorAll(".tabs-button");
-
-  if (theme === "dark") {
-    exprEditor.editor.setTheme("ace/theme/tomorrow_night");
-    editorsInputEl.forEach((editor) => {
-      new AceEditor(editor.id, "ace/theme/tomorrow_night");
-    });
-  } else {
-    exprEditor.editor.setTheme("ace/theme/clouds");
-    editorsInputEl.forEach((editor) => {
-      new AceEditor(editor.id, "ace/theme/clouds");
-    });
-  }
-}
-
-function toggleTheme(theme) {
-  let toggleIcon = document.getElementsByClassName("toggle-theme__icon")[0];
-  let celLogo = document.getElementsByClassName("cel-logo")[0];
-  let copyIcon = document.querySelectorAll(".editor-copy-icon");
-
-  if (theme === "dark") {
-    document.body.classList.add("dark");
-    toggleIcon.src = "./assets/img/moon.svg";
-    celLogo.src = "./assets/img/logo-dark.svg";
-    copyIcon[0].src = "./assets/img/copy-dark.svg";
-    copyIcon[1].src = "./assets/img/copy-dark.svg";
-  } else {
-    document.body.classList.remove("dark");
-    toggleIcon.src = "./assets/img/sun.svg";
-    celLogo.src = "./assets/img/logo.svg";
-    copyIcon[0].src = "./assets/img/copy.svg";
-    copyIcon[1].src = "./assets/img/copy.svg";
-  }
-  localStorage.setItem("theme", theme);
-}
-
 function share() {
-  const data = dataEditor.getValue();
-  const expression = celEditor.getValue();
-
-  const obj = {
-    data: data,
-    expression: expression,
-  };
+  const values = getRunValues();
 
-  const str = JSON.stringify(obj);
+  const str = JSON.stringify(values);
   var compressed_uint8array = pako.gzip(str);
   var b64encoded_string = btoa(
     String.fromCharCode.apply(null, compressed_uint8array)

diff --git a/web/assets/js/theme.js b/web/assets/js/theme.js
@@ -0,0 +1,59 @@
+import { AceEditor } from "./editor.js";
+const toggleBtn = document.getElementsByClassName("toggle-theme")[0];
+
+window.addEventListener("load", () => {
+  let theme = localStorage.getItem("theme");
+  if (theme === "dark") {
+    toggleTheme("dark");
+  }
+});
+
+toggleBtn.addEventListener("click", function () {
+  let currTheme = localStorage.getItem("theme");
+  if (currTheme === "dark") toggleTheme("light");
+  else toggleTheme("dark");
+});
+
+export function applyThemeToEditors() {
+  const theme = localStorage.getItem("theme");
+  const exprEditor = new AceEditor(
+    localStorage.getItem(localStorageModeKey) ?? "cel"
+  );
+  const editorsInputEl = document.querySelectorAll(
+    ".editor__input.data__input"
+  );
+
+  if (theme === "dark") {
+    exprEditor.editor.setTheme("ace/theme/tomorrow_night");
+    editorsInputEl.forEach((editor) => {
+      new AceEditor(editor.id).editor.setTheme("ace/theme/tomorrow_night");
+    });
+  } else {
+    exprEditor.editor.setTheme("ace/theme/clouds");
+    editorsInputEl.forEach((editor) => {
+      new AceEditor(editor.id);
+    });
+  }
+}
+
+function toggleTheme(theme) {
+  let toggleIcon = document.getElementsByClassName("toggle-theme__icon")[0];
+  let celLogo = document.getElementsByClassName("cel-logo")[0];
+  let copyIcon = document.querySelectorAll(".editor-copy-icon");
+
+  if (theme === "dark") {
+    document.body.classList.add("dark");
+    toggleIcon.src = "./assets/img/moon.svg";
+    celLogo.src = "./assets/img/logo-dark.svg";
+    copyIcon[0].src = "./assets/img/copy-dark.svg";
+    copyIcon[1].src = "./assets/img/copy-dark.svg";
+  } else {
+    document.body.classList.remove("dark");
+    toggleIcon.src = "./assets/img/sun.svg";
+    celLogo.src = "./assets/img/logo.svg";
+    copyIcon[0].src = "./assets/img/copy.svg";
+    copyIcon[1].src = "./assets/img/copy.svg";
+  }
+  localStorage.setItem("theme", theme);
+  applyThemeToEditors();
+}
diff --git a/web/assets/js/utils/render-functions.js b/web/assets/js/utils/render-functions.js
@@ -19,6 +19,8 @@ import { AceEditor } from "../editor.js";
 const examplesList = document.getElementById("examples");
 const selectInstance = NiceSelect.bind(examplesList);
 
+const dataEditorInputClassNames = ".editor__input.data__input";
+
 export function renderExamplesInSelectInstance(mode, examples) {
   examplesList.innerHTML = `<option data-display="Examples" value="" disabled selected hidden>
       Examples
@@ -36,24 +38,20 @@ export function renderExamplesInSelectInstance(mode, examples) {
     ([key, value]) => ({ label: key, value })
   );
 
-  examplesByCategory.forEach((example, i) => {
+  examplesByCategory.forEach((example) => {
     const optGroup = document.createElement("optgroup");
     optGroup.label = example.label;
 
     example.value.forEach((item) => {
-      const option = document.createElement("option");
       const itemName = item.name;
-
+      const option = document.createElement("option");
+      option.className = "examples__option";
       option.value = itemName;
       option.innerText = itemName;
       optGroup.appendChild(option);
     });
 
-    if (example.label === "default") {
-      if (!urlParams.has("content")) {
-      }
-      // setEditors(example.value[0].data, example.value[0].inputs[0].data);
-    } else if (example.label === "Blank") {
+    if (example.label === "Blank" || example.label === "default") {
       return;
     } else {
       examplesList.appendChild(optGroup);
@@ -74,7 +72,7 @@ export function renderExamplesInSelectInstance(mode, examples) {
       const currentMode = localStorage.getItem(localStorageModeKey) ?? "cel";
       new AceEditor(currentMode).setValue("", -1);
       document
-        .querySelectorAll(".editor__input.data__input")
+        .querySelectorAll(dataEditorInputClassNames)
         .forEach((container) => {
           const containerId = container.id;
           new AceEditor(containerId).setValue("");
@@ -127,7 +125,7 @@ export function renderTabs(mode, examples) {
   divParent.className = "tabs";
   divParent.id = "tabs";
 
-  document.querySelectorAll(".editor__input.data__input")?.forEach((editor) => {
+  document.querySelectorAll(dataEditorInputClassNames)?.forEach((editor) => {
     editor.remove();
   });
 
@@ -147,7 +145,7 @@ export function renderTabs(mode, examples) {
 
     tabButton.onclick = () => {
       document
-        .querySelectorAll(".editor__input.data__input")
+        .querySelectorAll(dataEditorInputClassNames)
         ?.forEach((editor) => {
           editor.style.display = "none";
         });
@@ -204,10 +202,8 @@ function resetTabs() {
     } else tabButton.classList.remove("active");
   });
 
-  document
-    .querySelectorAll(".editor__input.data__input")
-    .forEach((editor, i) => {
-      if (i === 0) editor.style.display = "block";
-      else editor.style.display = "none";
-    });
+  document.querySelectorAll(dataEditorInputClassNames).forEach((editor, i) => {
+    if (i === 0) editor.style.display = "block";
+    else editor.style.display = "none";
+  });
 }
diff --git a/web/index.html b/web/index.html
@@ -313,6 +313,7 @@ <h1 class="modal__title">Playground modes</h1>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
     <script src="dist/nice-select2.js"></script>
+    <script type="module" src="assets/js/theme.js"></script>
     <script type="module" src="assets/js/services/modes.js"></script>
     <script type="module" src="assets/js/services/examples.js"></script>
     <script type="module" src="assets/js/utils/render-functions.js"></script>