Merge pull request #31 from db-2001/hover-css-onclick

Changed CSS feature to update whenever the checkbox is clicked instead of when the update button is clicked

Website/index.html

@@ -98,7 +98,7 @@
               <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
             </div>
             <div>
-              <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css">
+              <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
               <label for="css-style"> Show manga titles and sources on hover</label><br>
             </div>
             <div>

Website/interaction.js

@@ -101,6 +101,18 @@ function Setup(){
 }
 Setup();
 
+function updateCSS(){
+  if (document.getElementById("mangaHoverCheckbox").checked == true){
+    ChangeStyleSheet('hover')
+    document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
+    //console.log('Changing theme to mangahover')
+  } else {
+    ChangeStyleSheet('default');
+    document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
+    //console.log('Changing theme to default')
+  }
+}
+
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -413,15 +425,6 @@ function UpdateSettings(){
     Setup();
   }
   
-  // If the checkbox is checked, set the style to style_mangahover.css and 
-  if (document.getElementById("mangaHoverCheckbox").checked == true){
-    ChangeStyleSheet('hover')
-    //console.log('Changing theme to mangahover')
-  } else {
-    ChangeStyleSheet('default');
-    //console.log('Changing theme to default')
-  }
-  
   if(settingKomgaUrl.value != "" &&
      settingKomgaUser.value != "" &&
      settingKomgaPass.value != ""){