From 6fe6ce3fafa20c058740f63bb70da2b25ed945b1 Mon Sep 17 00:00:00 2001 From: joaovictor3g Date: Mon, 29 Apr 2024 10:18:20 -0300 Subject: [PATCH] refactors code separating responsibilities --- web/assets/js/main.js | 159 +--------------------------------- web/assets/js/share.js | 142 ++++++++++++++++++++++++++++++ web/assets/js/utils/editor.js | 22 +++++ web/index.html | 1 + 4 files changed, 166 insertions(+), 158 deletions(-) create mode 100644 web/assets/js/share.js diff --git a/web/assets/js/main.js b/web/assets/js/main.js index ea60d99..cc0ff3b 100644 --- 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: // @@ -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 new file mode 100644 index 0000000..95d801c --- /dev/null +++ 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 index 11c765a..25cb2eb 100644 --- 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 index 5e7038f..d2f10c3 100644 --- a/web/index.html +++ b/web/index.html @@ -318,6 +318,7 @@

Playground modes

+