code preview

cqb13 · Jul 24, 2024 · 7381c98 · 7381c98
1 parent 1c7f3c1
commit 7381c98
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 3 deletions.
diff --git a/programs.html b/programs.html
@@ -52,6 +52,34 @@ <h1>TI Programs</h1>
     <main>
       <p id="loading">Loading Programs...</p>
       <section id="programs"></section>
+      <div id="code-preview">
+        <div>
+          <button id="close-preview">
+            <svg
+              fill="#449f44"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              width="40px"
+              height="40px"
+              viewBox="0 0 100 100"
+              xml:space="preserve"
+            >
+              <path
+                d="M84.707,68.752L65.951,49.998l18.75-18.752c0.777-0.777,0.777-2.036,0-2.813L71.566,15.295
+    c-0.777-0.777-2.037-0.777-2.814,0L49.999,34.047l-18.75-18.752c-0.746-0.747-2.067-0.747-2.814,0L15.297,28.431
+    c-0.373,0.373-0.583,0.88-0.583,1.407c0,0.527,0.21,1.034,0.583,1.407L34.05,49.998L15.294,68.753
+    c-0.373,0.374-0.583,0.88-0.583,1.407c0,0.528,0.21,1.035,0.583,1.407l13.136,13.137c0.373,0.373,0.881,0.583,1.41,0.583
+    c0.525,0,1.031-0.21,1.404-0.583l18.755-18.755l18.756,18.754c0.389,0.388,0.896,0.583,1.407,0.583c0.511,0,1.019-0.195,1.408-0.583
+    l13.138-13.137C85.484,70.789,85.484,69.53,84.707,68.752z"
+              />
+            </svg>
+          </button>
+          <pre>
+            <code id="code-content"></code>
+          </pre>
+        </div>
+      </div>
     </main>
     <footer>
       <a
@@ -63,6 +91,6 @@ <h1>TI Programs</h1>
         >Created by Maksim Straus</a
       >
     </footer>
-    <script src="./loadPrograms.js"></script>
+    <script src="./script.js"></script>
   </body>
 </html>
diff --git a/loadPrograms.js → script.js b/loadPrograms.js → script.js
@@ -1,5 +1,8 @@
 const loading = document.getElementById("loading");
 const programs = document.getElementById("programs");
+const codePreview = document.getElementById("code-preview");
+const closePreview = document.getElementById("close-preview");
+const codeContent = document.getElementById("code-content");
 
 const loadPrograms = async () => {
   loading.style.display = "block";
@@ -29,7 +32,7 @@ const loadPrograms = async () => {
               if (file.name.endsWith(".8xp")) {
                 download_url = file.download_url;
               } else if (file.name.endsWith(".txt")) {
-                txt_file_url = file.html_url;
+                txt_file_url = file.url;
               } else if (file.name === "about.md") {
                 const aboutResponse = await fetch(file.download_url);
 
@@ -98,7 +101,7 @@ const createProgramCard = (name, description, download_url, txt_file_url) => {
   const view = document.createElement("button");
   view.textContent = "View Code";
   view.addEventListener("click", () => {
-    window.location.href = txt_file_url;
+    openCodeViewModel(txt_file_url);
   });
 
   div.appendChild(download);
@@ -112,3 +115,30 @@ const createProgramCard = (name, description, download_url, txt_file_url) => {
 };
 
 loadPrograms();
+
+const openCodeViewModel = async (codeUrl) => {
+  document.body.style.overflow = "hidden";
+  codePreview.style.display = "flex";
+
+  const response = await fetch(codeUrl);
+  const data = await response.json();
+  const encodedContent = data.content;
+  // content is base64 encoded
+  const decodedContent = atob(encodedContent);
+  codeContent.textContent = decodedContent;
+};
+
+closePreview.addEventListener("click", () => {
+  closeCodeViewModel();
+});
+
+codePreview.addEventListener("click", (e) => {
+  if (e.target === codePreview) {
+    closeCodeViewModel();
+  }
+});
+
+const closeCodeViewModel = () => {
+  document.body.style.overflow = "auto";
+  codePreview.style.display = "none";
+};
diff --git a/style/programs.css b/style/programs.css
@@ -42,3 +42,40 @@
   transition: ease-in-out;
   transition-duration: 400ms;
 }
+
+#code-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #44444442;
+}
+
+#code-preview div {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  background-color: #fff;
+  border-radius: 1rem;
+  padding: 1rem;
+  overflow: auto;
+}
+
+#close-preview {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
+  border: none;
+  background-color: #ffffff00;
+}
+
+#close-preview:hover svg {
+  fill: rgba(68, 159, 68, 0.873);
+  transition: ease-in-out;
+  transition-duration: 400ms;
+}