refactors code separating responsibilities

undistro · Apr 29, 2024 · 6fe6ce3 · 6fe6ce3
1 parent c035bc5
commit 6fe6ce3
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 158 deletions.
diff --git a/web/assets/js/main.js b/web/assets/js/main.js
@@ -15,14 +15,12 @@
  */
 
 import { setCost } from "./utils/render-functions.js";
-import { AceEditor } from "./editor.js";
 import {
   handleRenderAccordions,
   hideAccordions,
 } from "./components/accordions/result.js";
 import { localStorageModeKey } from "./constants.js";
-import { setEditorTheme } from "./theme.js";
-import { getExprEditorValue, getInputEditorValue } from "./utils/editor.js";
+import { getRunValues } from "./utils/editor.js";
 
 // Add the following polyfill for Microsoft Edge 17/18 support:
 // <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/encoding.min.js"></script>
@@ -37,27 +35,6 @@ if (!WebAssembly.instantiateStreaming) {
 
 const output = document.getElementById("output");
 
-function getRunValues() {
-  const currentMode = localStorage.getItem(localStorageModeKey) ?? "cel";
-  const exprEditor = new AceEditor(currentMode);
-  setEditorTheme(exprEditor);
-  let values = {
-    [currentMode]: exprEditor.getValue(),
-  };
-
-  document.querySelectorAll(".editor__input.data__input").forEach((editor) => {
-    const containerId = editor.id;
-    const dataEditor = new AceEditor(containerId);
-    setEditorTheme(dataEditor);
-    values = {
-      ...values,
-      [containerId]: dataEditor.getValue(),
-    };
-  });
-
-  return values;
-}
-
 function run() {
   const values = getRunValues();
   output.value = "Evaluating...";
@@ -91,136 +68,6 @@ function run() {
   }
 }
 
-function share() {
-  const values = getRunValues();
-
-  const str = JSON.stringify({
-    ...values,
-    mode: localStorage.getItem(localStorageModeKey) ?? "cel",
-  });
-  var compressed_uint8array = pako.gzip(str);
-  var b64encoded_string = btoa(
-    String.fromCharCode.apply(null, compressed_uint8array)
-  );
-
-  const url = new URL(window.location.href);
-  url.searchParams.set("content", b64encoded_string);
-  window.history.pushState({}, "", url.toString());
-
-  document.querySelector(".share-url__container").style.display = "flex";
-  document.querySelector(".share-url__input").value = url.toString();
-}
-
-var urlParams = new URLSearchParams(window.location.search);
-if (urlParams.has("content")) {
-  const content = urlParams.get("content");
-  try {
-    const decodedUint8Array = new Uint8Array(
-      atob(content)
-        .split("")
-        .map(function (char) {
-          return char.charCodeAt(0);
-        })
-    );
-
-    const decompressedData = pako.ungzip(decodedUint8Array, { to: "string" });
-    if (!decompressedData) {
-      throw new Error("Invalid content parameter");
-    }
-    const obj = JSON.parse(decompressedData);
-    localStorage.setItem(localStorageModeKey, obj.mode);
-    const editorEl = document.getElementById(obj.mode);
-
-    if (editorEl) {
-      new AceEditor(obj.mode).setValue(obj[obj.mode], -1);
-
-      document
-        .querySelectorAll(".editor__input.data__input")
-        .forEach((editor) => {
-          const containerId = editor.id;
-          new AceEditor(containerId).setValue(obj[containerId], -1);
-        });
-    }
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-let celCopyIcon = document.getElementById("cel-copy-icon");
-let celCopyHover = document.getElementById("cel-copy-hover");
-let celCopyClick = document.getElementById("cel-copy-click");
-let celInput = document.getElementById("cel-cont");
-
-celInput.addEventListener("mouseover", () => {
-  celCopyIcon.style.display = "inline";
-});
-celInput.addEventListener("mouseleave", () => {
-  celCopyIcon.style.display = "none";
-});
-
-celCopyIcon.addEventListener("click", () => {
-  const exprEditorValue = getExprEditorValue();
-  navigator.clipboard.writeText(exprEditorValue).catch(console.error);
-  celCopyHover.style.display = "none";
-  celCopyClick.style.display = "flex";
-  setTimeout(() => {
-    celCopyClick.style.display = "none";
-  }, 1000);
-});
-
-celCopyIcon.addEventListener("mouseover", () => {
-  celCopyHover.style.display = "flex";
-});
-
-celCopyIcon.addEventListener("mouseleave", () => {
-  celCopyHover.style.display = "none";
-});
-
-let dataCopyIcon = document.getElementById("data-copy-icon");
-let dataCopyHover = document.getElementById("data-copy-hover");
-let dataCopyClick = document.getElementById("data-copy-click");
-let dataInput = document.getElementById("data-cont");
-
-dataInput.addEventListener("mouseover", () => {
-  dataCopyIcon.style.display = "inline";
-});
-
-dataInput.addEventListener("mouseleave", () => {
-  dataCopyIcon.style.display = "none";
-});
-
-dataCopyIcon.addEventListener("click", () => {
-  const dataInputValue = getInputEditorValue();
-  navigator.clipboard.writeText(dataInputValue);
-  dataCopyHover.style.display = "none";
-  dataCopyClick.style.display = "flex";
-  setTimeout(() => {
-    dataCopyClick.style.display = "none";
-  }, 1000);
-});
-
-dataCopyIcon.addEventListener("mouseover", () => {
-  dataCopyHover.style.display = "flex";
-});
-
-dataCopyIcon.addEventListener("mouseleave", () => {
-  dataCopyHover.style.display = "none";
-});
-
-function copy() {
-  const copyText = document.querySelector(".share-url__input");
-  copyText.select();
-  copyText.setSelectionRange(0, 99999);
-  navigator.clipboard.writeText(copyText.value);
-  window.getSelection().removeAllRanges();
-
-  const tooltip = document.querySelector(".share-url__tooltip");
-  tooltip.style.opacity = 1;
-  setTimeout(() => {
-    tooltip.style.opacity = 0;
-  }, 3000);
-}
-
 (async function loadAndRunGoWasm() {
   const go = new Go();
 
@@ -247,12 +94,8 @@ function copy() {
 })();
 
 const runButton = document.getElementById("run");
-const shareButton = document.getElementById("share");
-const copyButton = document.getElementById("copy");
 
 runButton.addEventListener("click", run);
-shareButton.addEventListener("click", share);
-copyButton.addEventListener("click", copy);
 document.addEventListener("keydown", (event) => {
   if ((event.ctrlKey || event.metaKey) && event.code === "Enter") {
     run();

diff --git a/web/assets/js/share.js b/web/assets/js/share.js
@@ -0,0 +1,142 @@
+import { AceEditor } from "./editor.js";
+import {
+  getExprEditorValue,
+  getInputEditorValue,
+  getRunValues,
+} from "./utils/editor.js";
+
+const shareButton = document.getElementById("share");
+shareButton.addEventListener("click", share);
+
+function share() {
+  const values = getRunValues();
+
+  const str = JSON.stringify({
+    ...values,
+    mode: localStorage.getItem(localStorageModeKey) ?? "cel",
+  });
+  var compressed_uint8array = pako.gzip(str);
+  var b64encoded_string = btoa(
+    String.fromCharCode.apply(null, compressed_uint8array)
+  );
+
+  const url = new URL(window.location.href);
+  url.searchParams.set("content", b64encoded_string);
+  window.history.pushState({}, "", url.toString());
+
+  document.querySelector(".share-url__container").style.display = "flex";
+  document.querySelector(".share-url__input").value = url.toString();
+}
+
+var urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has("content")) {
+  const content = urlParams.get("content");
+  try {
+    const decodedUint8Array = new Uint8Array(
+      atob(content)
+        .split("")
+        .map(function (char) {
+          return char.charCodeAt(0);
+        })
+    );
+
+    const decompressedData = pako.ungzip(decodedUint8Array, { to: "string" });
+    if (!decompressedData) {
+      throw new Error("Invalid content parameter");
+    }
+    const obj = JSON.parse(decompressedData);
+    localStorage.setItem(localStorageModeKey, obj.mode);
+    const editorEl = document.getElementById(obj.mode);
+
+    if (editorEl) {
+      new AceEditor(obj.mode).setValue(obj[obj.mode], -1);
+
+      document
+        .querySelectorAll(".editor__input.data__input")
+        .forEach((editor) => {
+          const containerId = editor.id;
+          new AceEditor(containerId).setValue(obj[containerId], -1);
+        });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+let celCopyIcon = document.getElementById("cel-copy-icon");
+let celCopyHover = document.getElementById("cel-copy-hover");
+let celCopyClick = document.getElementById("cel-copy-click");
+let celInput = document.getElementById("cel-cont");
+
+celInput.addEventListener("mouseover", () => {
+  celCopyIcon.style.display = "inline";
+});
+celInput.addEventListener("mouseleave", () => {
+  celCopyIcon.style.display = "none";
+});
+
+celCopyIcon.addEventListener("click", () => {
+  const exprEditorValue = getExprEditorValue();
+  navigator.clipboard.writeText(exprEditorValue).catch(console.error);
+  celCopyHover.style.display = "none";
+  celCopyClick.style.display = "flex";
+  setTimeout(() => {
+    celCopyClick.style.display = "none";
+  }, 1000);
+});
+
+celCopyIcon.addEventListener("mouseover", () => {
+  celCopyHover.style.display = "flex";
+});
+
+celCopyIcon.addEventListener("mouseleave", () => {
+  celCopyHover.style.display = "none";
+});
+
+let dataCopyIcon = document.getElementById("data-copy-icon");
+let dataCopyHover = document.getElementById("data-copy-hover");
+let dataCopyClick = document.getElementById("data-copy-click");
+let dataInput = document.getElementById("data-cont");
+
+dataInput.addEventListener("mouseover", () => {
+  dataCopyIcon.style.display = "inline";
+});
+
+dataInput.addEventListener("mouseleave", () => {
+  dataCopyIcon.style.display = "none";
+});
+
+dataCopyIcon.addEventListener("click", () => {
+  const dataInputValue = getInputEditorValue();
+  navigator.clipboard.writeText(dataInputValue);
+  dataCopyHover.style.display = "none";
+  dataCopyClick.style.display = "flex";
+  setTimeout(() => {
+    dataCopyClick.style.display = "none";
+  }, 1000);
+});
+
+dataCopyIcon.addEventListener("mouseover", () => {
+  dataCopyHover.style.display = "flex";
+});
+
+dataCopyIcon.addEventListener("mouseleave", () => {
+  dataCopyHover.style.display = "none";
+});
+
+const copyButton = document.getElementById("copy");
+copyButton.addEventListener("click", copy);
+
+function copy() {
+  const copyText = document.querySelector(".share-url__input");
+  copyText.select();
+  copyText.setSelectionRange(0, 99999);
+  navigator.clipboard.writeText(copyText.value);
+  window.getSelection().removeAllRanges();
+
+  const tooltip = document.querySelector(".share-url__tooltip");
+  tooltip.style.opacity = 1;
+  setTimeout(() => {
+    tooltip.style.opacity = 0;
+  }, 3000);
+}
diff --git a/web/assets/js/utils/editor.js b/web/assets/js/utils/editor.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { localStorageModeKey } from "../constants.js";
 import { AceEditor } from "../editor.js";
 import { setEditorTheme } from "../theme.js";
 import { getCurrentMode } from "./localStorage.js";
@@ -36,3 +37,24 @@ export function getInputEditorValue() {
   setEditorTheme(inputEditor);
   return inputEditor.getValue();
 }
+
+export function getRunValues() {
+  const currentMode = localStorage.getItem(localStorageModeKey) ?? "cel";
+  const exprEditor = new AceEditor(currentMode);
+  setEditorTheme(exprEditor);
+  let values = {
+    [currentMode]: exprEditor.getValue(),
+  };
+
+  document.querySelectorAll(".editor__input.data__input").forEach((editor) => {
+    const containerId = editor.id;
+    const dataEditor = new AceEditor(containerId);
+    setEditorTheme(dataEditor);
+    values = {
+      ...values,
+      [containerId]: dataEditor.getValue(),
+    };
+  });
+
+  return values;
+}
diff --git a/web/index.html b/web/index.html
@@ -318,6 +318,7 @@ <h1 class="modal__title">Playground modes</h1>
     <script type="module" src="assets/js/utils/localStorage.js"></script>
     <script type="module" src="assets/js/utils/render-functions.js"></script>
     <script type="module" src="assets/js/main.js"></script>
+    <script type="module" src="assets/js/share.js"></script>
     <script
       type="module"
       src="assets/js/components/modals/playground-mode.js"