Merge pull request #40 from dark0dave/feature/scroll

feat(scroll): Closes #39
dark0dave · Sep 20, 2024 · 57016b1 · 57016b1
2 parents b522a64 + db5caa2
commit 57016b1
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "infinity-viewer",
   "displayName": "infinity-viewer",
   "description": "Infinity Viewer lets you view infinity engine binary files as json",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "keywords": [
     "Infinity Engine",
     "Baldur's Gate",

diff --git a/src/ui/infinityPreview.ts b/src/ui/infinityPreview.ts
@@ -123,7 +123,7 @@ export class InfinityPreview extends Disposable {
     };
     const display = syntaxHighlight(obj);
 
-    let html: string = `<!DOCTYPE html>
+    const html: string = `<!DOCTYPE html>
     <html dir="ltr" mozdisallowselectionprint>
     <head>
     <meta charset="utf-8">
@@ -150,10 +150,50 @@ export class InfinityPreview extends Disposable {
       .key {
         color: white;
       }
+      .panel {
+        position: fixed;
+        right: 0;
+        top: 30%;
+        display: flex;
+        background: #34ebb1;
+        color: black;
+        width: 50px;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+      button {
+        background: none;
+        border: none;
+        border-radius: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: 0.2s;
+      }
     </style>
+    <script>
+      function increaseFont() {
+        const content = document.getElementById("pre");
+        content.style.fontSize = (parseInt(content.style.fontSize.replace("%", ""), 10) + 10) + "%";
+        const value = document.getElementById("font-size");
+        value.innerHTML = content.style.fontSize;
+      }
+      function decreaseFont() {
+        const content = document.getElementById("pre");
+        content.style.fontSize = (parseInt(content.style.fontSize.replace("%", ""), 10) - 10) + "%";
+        const value = document.getElementById("font-size");
+        value.innerHTML = content.style.fontSize;
+      }
+    </script>
     <title>Infinity viewer</title>
     </head>
+    <div class="panel">
+      <button onclick="increaseFont()">⬆</button>
+      <span id="font-size">100%</span>
+      <button onclick="decreaseFont()">⬇</button>
+    </div>
     <h1>${path.basename(this.resource.path)}</h1>`;
-    this.webviewEditor.webview.html = `${html}<div><pre>${display}<div><pre>`;
+    this.webviewEditor.webview.html = `${html}<div><pre id="pre" style="font-size:100%">${display}<div><pre>`;
   }
 }