From 891cb9ef7b5555b681b28001ca4b766139b5c43c Mon Sep 17 00:00:00 2001
From: Iris Lightshard <nilix@nilfm.cc>
Date: Mon, 18 Mar 2024 00:45:11 -0600
Subject: [PATCH] implement wallpaper storage

---
 static/style.css      |  5 +++
 static/theme.js       | 71 +++++++++++++++++++++++++++++++++++++------
 static/theme2.js      |  4 +++
 templates/config.html |  2 +-
 templates/footer.html |  2 +-
 templates/header.html |  1 +
 6 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 static/theme2.js

diff --git a/static/style.css b/static/style.css
index ecce73c..03ffbaf 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4,6 +4,9 @@
   --main_color: #1f9b92;
   --sub_color: #00000000;
   --err_color: #DC143C;
+  
+  --main_bg: '/static/bg2.png';
+  --login_bg: '/static/bg.png';
 }
 
 * { scrollbar-color:var(--main_color) var(--sub_color); }
@@ -21,6 +24,7 @@ body {
   background: var(--bg_color);
   color: var(--fg_color);
   background: url('/static/bg2.png');
+  background: url(var(--main_bg));
   background-size: cover;
   background-position: top left;
   background-attachment: fixed;
@@ -28,6 +32,7 @@ body {
 
 .login-body {
   background: url('/static/bg.png');
+  background: url(var(--login_bg));
   background-size: cover;
   background-position: center center;
   height: 100vh;
diff --git a/static/theme.js b/static/theme.js
index 554204a..abfe56f 100644
--- a/static/theme.js
+++ b/static/theme.js
@@ -1,4 +1,6 @@
 const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
+const loginBgReader = new FileReader();
+const mainBgReader = new FileReader();
 
 const saveData = {
   theme: defaultTheme,
@@ -28,7 +30,7 @@ function toByte(v) {
   ).slice(-2);
 }
 
-function resetTheme(theme) {
+function resetTheme(theme, bg = false) {
   try{
     let bg_col = theme[0];
     let fg_col = theme[1];
@@ -58,6 +60,13 @@ function resetTheme(theme) {
     $("err_col_input").value = err_col;
     $("err_col_opacity").value = err_opacity;
   } catch {}
+  
+  if (bg) {
+    localStorage.setItem("loginScreen", '/static/bg.png');
+    localStorage.setItem("mainScreen", '/static/bg2.png');
+    resetBG("login");
+    resetBG("main");
+  }
 }
 
 function setTheme() {
@@ -87,23 +96,65 @@ function setTheme() {
     document.body.style.setProperty("--sub_color", saveData.theme[3]);
     document.body.style.setProperty("--err_color", saveData.theme[4]);
   }
+  
+  setBG("login");
+  setBG("main");
 }
 
 function setBG(screen) {
-  // get the input element based on screen
-  // create the reader
-  // save dataURL into localstorage
-  
-  // resetBG(screen)
+  let reader = null;
+  switch(screen) {
+    case "login":
+      reader = loginBgReader;
+      break;
+    case "main":
+      reader = mainBgReader;
+      break;
+  }
+  const imgPath = $(`${screen}_bg_upload`)?.files[0];
+  if (imgPath) {
+    reader.readAsDataURL(imgPath);
+  }
 }
 
 function resetBG(screen) {
   // set dataURL from localstorage to theme state
+  saveData[screen + "Screen"] = localStorage.getItem(screen + "Screen");
   // bind reader load -> body background set dataURL
+  let selector = null;
+  switch (screen) {
+    case "login":
+      selector = ".login-body";
+      break;
+    case "main":
+      selector = "body";
+      break;
+  }
+  const rules = document.styleSheets[0].cssRules;
+  let rule = null;
+  for (var i = 0; i < rules.length; i++) {
+    if (rules[i].selectorText == selector) {
+      rule = rules[i];
+      break;
+    }
+  }
+
+  rule.style.setProperty("background", `url('${saveData[screen + "Screen"]}`);
+  rule.style.setProperty("background-size", "cover");
+  rule.style.setProperty("background-attachment", "fixed");
 }
 
-loadStorage();
-resetTheme(saveData.theme);
-setTheme();
+function initializeReaders() {
+  loginBgReader.addEventListener("load", () => {
+     localStorage.setItem("loginScreen", loginBgReader.result);
+     resetBG("login");
+  }, false);
+    mainBgReader.addEventListener("load", () => {
+     localStorage.setItem("mainScreen", mainBgReader.result);
+     resetBG("main");
+  }, false);
+}
+
+initializeReaders();
 resetBG("login");
-resetBG("main");
\ No newline at end of file
+resetBG("main");
diff --git a/static/theme2.js b/static/theme2.js
new file mode 100644
index 0000000..f908d91
--- /dev/null
+++ b/static/theme2.js
@@ -0,0 +1,4 @@
+
+loadStorage();
+resetTheme(saveData.theme);
+setTheme();
\ No newline at end of file
diff --git a/templates/config.html b/templates/config.html
index 63f1256..7bdb6fa 100644
--- a/templates/config.html
+++ b/templates/config.html
@@ -28,7 +28,7 @@
   <label for="main-upload">Set Main BG</label><br/>
   <input type="file" id="main_bg_upload" name="file"/>
   </div>
-        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme)">Reset</button>
+        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme, true)">Reset</button>
       </form>
     </details>
 
diff --git a/templates/footer.html b/templates/footer.html
index ee324c8..1354ab6 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,6 +1,6 @@
 {{define "footer"}}
   </body>
   
-    <script src="/static/theme.js" type="text/javascript"></script>
+    <script src="/static/theme2.js" type="text/javascript"></script>
 </html>
 {{end}}
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
index 00acf75..30e1eab 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -8,6 +8,7 @@
     <link rel='stylesheet' type='text/css' href='/static/style.css'>
     <link rel='shortcut icon' href='/static/favicon.png'>
     
+    <script src="/static/theme.js" type="text/javascript"></script>
     <title>Nirvash &mdash; CMS</title>
   </head>
   <body>