_wui: store and load the vfs width in local storage

This is allow user to resize vfs width in one window and when new window
is opened the vfs width is restored with the same size.

Implements: https://todo.sr.ht/~shulhan/awwan/6

3 files changed, 36 insertions, 16 deletions

diff --git a/_wui/awwan.ts b/_wui/awwan.ts
index 21ec343..af79369 100644
--- a/_wui/awwan.ts
+++ b/_wui/awwan.ts
@@ -36,6 +36,8 @@ const ID_OUTPUT = "output";
 
 const MAX_FILE_SIZE = 1000000; // 1MiB
 
+const STORAGE_KEY_VFS_WIDTH = "vfs_width";
+
 interface ExecRequestInterface {
   mode: string;
   script: string;
@@ -154,6 +156,8 @@ export class Awwan {
   private _posy: number = 0;
 
   constructor() {
+    renderHtml();
+
     let el: HTMLElement | null;
 
     el = document.getElementById(ID_AWWAN_NAV_LEFT);
@@ -325,6 +329,12 @@ export class Awwan {
         this._posy = 0;
       });
     }
+
+    // Restore state from local storage.
+    const vfsWidth = localStorage.getItem(STORAGE_KEY_VFS_WIDTH);
+    if (vfsWidth) {
+      this.setVfsWidth(parseInt(vfsWidth, 10));
+    }
   }
 
   onHashChange(hash: string) {
@@ -781,21 +791,25 @@ export class Awwan {
     if (this.comNavLeft.clientWidth <= 300) {
       return false;
     }
-    let width = this.comNavLeft.clientWidth - diff;
+    const width = this.comNavLeft.clientWidth - diff;
+    this.setVfsWidth(width);
+    localStorage.setItem(STORAGE_KEY_VFS_WIDTH, `${width}`);
+    return true;
+  }
+
+  private setVfsWidth(width: number) {
     this.comNavLeft.style.width = `${width}px`;
     width += 30;
     this.comNavRight.style.width = `calc(100% - ${width}px)`;
-    return true;
   }
 
   private resizeVfsRight(diff: number) {
     if (this.comNavRight.clientWidth <= 500) {
       return false;
     }
-    let width = this.comNavLeft.clientWidth + diff;
-    this.comNavLeft.style.width = `${width}px`;
-    width += 30;
-    this.comNavRight.style.width = `calc(100% - ${width}px)`;
+    const width = this.comNavLeft.clientWidth + diff;
+    this.setVfsWidth(width);
+    localStorage.setItem(STORAGE_KEY_VFS_WIDTH, `${width}`);
     return true;
   }
 
diff --git a/_wui/main.js b/_wui/main.js
index c5c217c..0aa5543 100644
--- a/_wui/main.js
+++ b/_wui/main.js
@@ -479,6 +479,7 @@ var awwan = (() => {
   var ID_OUTPUT_WRAPPER = "output_wrapper";
   var ID_OUTPUT = "output";
   var MAX_FILE_SIZE = 1e6;
+  var STORAGE_KEY_VFS_WIDTH = "vfs_width";
   function renderHtml() {
     const el = document.createElement("div");
     el.classList.add("awwan");
@@ -541,6 +542,7 @@ var awwan = (() => {
       this.orgContent = "";
       this._posx = 0;
       this._posy = 0;
+      renderHtml();
       let el;
       el = document.getElementById(ID_AWWAN_NAV_LEFT);
       if (el) {
@@ -688,6 +690,10 @@ var awwan = (() => {
           this._posy = 0;
         });
       }
+      const vfsWidth = localStorage.getItem(STORAGE_KEY_VFS_WIDTH);
+      if (vfsWidth) {
+        this.setVfsWidth(parseInt(vfsWidth, 10));
+      }
     }
     onHashChange(hash) {
       if (hash === "") {
@@ -1074,20 +1080,23 @@ var awwan = (() => {
       if (this.comNavLeft.clientWidth <= 300) {
         return false;
       }
-      let width = this.comNavLeft.clientWidth - diff;
+      const width = this.comNavLeft.clientWidth - diff;
+      this.setVfsWidth(width);
+      localStorage.setItem(STORAGE_KEY_VFS_WIDTH, `${width}`);
+      return true;
+    }
+    setVfsWidth(width) {
       this.comNavLeft.style.width = `${width}px`;
       width += 30;
       this.comNavRight.style.width = `calc(100% - ${width}px)`;
-      return true;
     }
     resizeVfsRight(diff) {
       if (this.comNavRight.clientWidth <= 500) {
         return false;
       }
-      let width = this.comNavLeft.clientWidth + diff;
-      this.comNavLeft.style.width = `${width}px`;
-      width += 30;
-      this.comNavRight.style.width = `calc(100% - ${width}px)`;
+      const width = this.comNavLeft.clientWidth + diff;
+      this.setVfsWidth(width);
+      localStorage.setItem(STORAGE_KEY_VFS_WIDTH, `${width}`);
       return true;
     }
     doResizeEditor(ev) {
@@ -1127,7 +1136,6 @@ var awwan = (() => {
   };
 
   // _wui/main.ts
-  renderHtml();
   var awwan = new Awwan();
   awwan.onHashChange(window.location.hash);
 })();
diff --git a/_wui/main.ts b/_wui/main.ts
index 85e64a5..b6f27ab 100644
--- a/_wui/main.ts
+++ b/_wui/main.ts
@@ -1,9 +1,7 @@
 // SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-import { renderHtml, Awwan } from "./awwan";
-
-renderHtml();
+import { Awwan } from "./awwan";
 
 const awwan = new Awwan();