add button to hide the code editor

Author: luizbills

public/app.css

@@ -89,6 +89,10 @@ svg {
   color: #101820;
 }
 
+.top-bar button#hide-editor.active {
+  color: #606060;
+}
+
 .editor {
   display: flex;
   flex-flow: row wrap;

public/app.js

@@ -88,6 +88,27 @@ <h1>Litecanvas</h1>
           />
         </svg>
       </a>
+      <button
+        type="button"
+        id="hide-editor"
+        title="Hide the code editor"
+        aria-label="Hide the code editor"
+        hidden
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          role="img"
+          width="24"
+          height="24"
+        >
+          <path
+            d="M12 4.5v15m-7.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125Z"
+          />
+        </svg>
+      </button>
       <button
         type="button"
         id="share"
@@ -122,7 +143,6 @@ <h1>Litecanvas</h1>
           height="24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="w-6 h-6"
         >
           <path
             stroke-linecap="round"

public/index.html

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "2.31.0";
+const version = "2.32.0";
 
 const precacheResources = [
   "/",

public/sw.js

@@ -64,6 +64,7 @@ const playButton = $("#play");
 const stopButton = $("#stop");
 const shareButton = $("#share");
 const copyButton = $("#copy");
+const hideEditor = $("#hide-editor");
 /** @type {HTMLIFrameElement} */
 const iframe = $("#frame");
 const iframeOverlay = $("#frame-overlay");
@@ -102,11 +103,12 @@ shareButton.addEventListener("click", (evt) => {
       "Your browser not support this feature. Consider installing Firefox or Chrome."
     );
   }
-  const code = codeEditor.state.doc.toString();
+  const code = window.codeEditor.state.doc.toString();
   const url =
     location.origin + "?c=" + encodeURIComponent(compressString(code));
 
-  if (url.length > 2048) {
+  if (url.length > 2000) {
+    console.log("Your too long URL:", url);
     return alert("Code too long to encode in URL");
   }
 
@@ -127,7 +129,7 @@ copyButton.addEventListener("click", (evt) => {
       "Your browser not support this feature. Consider installing Firefox or Chrome."
     );
   }
-  const code = codeEditor.state.doc.toString();
+  const code = window.codeEditor.state.doc.toString();
 
   navigator.clipboard.writeText(code).then(
     () => {},
@@ -138,12 +140,23 @@ copyButton.addEventListener("click", (evt) => {
   );
 });
 
+hideEditor.addEventListener("click", (evt) => {
+  if (code.hasAttribute("hidden")) {
+    code.removeAttribute("hidden");
+    hideEditor.classList.remove("active");
+  } else {
+    code.setAttribute("hidden", true);
+    hideEditor.classList.add("active");
+  }
+  iframe.focus();
+});
+
 function runCode() {
   iframe.src = "preview.html"; // reload the iframe
 }
 
 iframe.addEventListener("load", () => {
-  const code = codeEditor.state.doc.toString();
+  const code = window.codeEditor.state.doc.toString();
   iframe.contentDocument.querySelector("#code").innerHTML = code;
 });
 
@@ -220,13 +233,14 @@ iframeOverlay.onmousedown = iframeOverlay.ontouchstart = (evt) => {
   if (evt.target === iframeOverlay) {
     hide(iframeOverlay);
     iframe.focus();
-    return;
   }
 };
 
 window.addEventListener("click", (evt) => {
   if (evt.target === iframeOverlay) return;
   if (evt.target === playButton) return;
+  if (evt.target === hideEditor) return;
+
   show(iframeOverlay);
   iframe.blur();
 });
@@ -291,7 +305,10 @@ if (config.autosave) {
 }
 
 function saveCode() {
-  localStorage.setItem("litecanvas_code", codeEditor.state.doc.toString());
+  localStorage.setItem(
+    "litecanvas_code",
+    window.codeEditor.state.doc.toString()
+  );
 }
 
 function loadFromStorage() {
@@ -303,7 +320,7 @@ function resetStorage() {
 }
 
 if (isMobile) {
-  mobileBar(codeEditor);
+  mobileBar(window.codeEditor);
 }
 
 window.isUpdateAvailable = new Promise(function (resolve) {
@@ -353,6 +370,7 @@ window.isUpdateAvailable.then((isAvailable) => {
 
 if (!smallScreen) {
   show(iframeOverlay);
+  show(hideEditor);
   if (autoplay) runCode();
 } else {
   show(playButton);