From 052315764983a4d2ddf1c0c0e5b53cfd1c14d85b Mon Sep 17 00:00:00 2001
From: 0xmac <gabriel@weingardt.dev>
Date: Tue, 24 Sep 2024 12:27:15 +0200
Subject: [PATCH] Added "Show Buttons" button

---
 global/global.js | 53 +++++++++++++++++++++++++++++++++++++++++++-----
 global/style.css | 13 +++++++++---
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/global/global.js b/global/global.js
index 34c2eb5..cd97be4 100644
--- a/global/global.js
+++ b/global/global.js
@@ -119,6 +119,14 @@ function updateStyle(type){
     }
 }
 
+function ButtonToggle(checkstate){
+    if (checkstate){
+        document.querySelector(".button-container").style.display = "flex";
+    } else {
+        document.querySelector(".button-container").style.display = "none";
+    }
+}
+
 function LoadWebsite(){
 
     dirDepth = document.getElementById("toplevel").getAttribute("data-");
@@ -208,12 +216,20 @@ function LoadWebsite(){
     footing.appendChild(webside_name);
 
     var button_span = document.createElement("span");
-    button_span.setAttribute("class", "prefSpan")
-    button_span.textContent = "Style: "
-
+    button_span.setAttribute("class", "prefSpan");
+    
+   
+    
+    var button_select_label = document.createElement("label");
+    button_select_label.textContent = "Style: ";
+    button_select_label.setAttribute("for", "styleselector");
+    button_select_label.setAttribute("class", "styleSelector"); 
+    
     var button_select = document.createElement("select");
     button_select.id = "styleselector";
-
+    button_select.setAttribute("class", "styleSelector");
+    
+    
     for (let i = 0; i < styles.length; i++) {
         var button_item = document.createElement("option");
         button_item.textContent = styles[Number(i)];
@@ -222,8 +238,35 @@ function LoadWebsite(){
 
         button_select.appendChild(button_item);
     }
+    
+    if (localStorage.getItem("showButtons") == undefined) localStorage.setItem("showButtons", "true")
 
-    button_span.appendChild(button_select);
+    var button_check_buttons = document.createElement("input");
+    button_check_buttons.type = "checkbox";
+    button_check_buttons.id = "buttonToggle";
+    button_check_buttons.setAttribute("class", "buttonToggle");
+    if (localStorage.getItem("showButtons") == "true") button_check_buttons.checked = true;
+    
+    button_check_buttons.addEventListener("change", (event) => { 
+        ButtonToggle(button_check_buttons.checked);
+        localStorage.setItem("showButtons", button_check_buttons.checked);
+    });
+    
+    var button_check_label = document.createElement("label");
+    button_check_label.textContent = " Show Buttons";
+    button_check_label.setAttribute("for", "buttonToggle");
+    button_check_label.setAttribute("class", "buttonToggle");
+    
+    button_span.appendChild(button_check_buttons);
+    button_span.appendChild(button_check_label);
+    
+    button_span.appendChild(button_select_label);
+    button_select_label.appendChild(button_select);
+    
+    if (document.getElementById("please-no-buttons") == null) ButtonToggle(localStorage.getItem("showButtons") == "true");
+    else ButtonToggle(false);
+    
+    
     footing.appendChild(button_span);
 
     if(dirDepth === ""){
diff --git a/global/style.css b/global/style.css
index 75c2da6..b5c3526 100644
--- a/global/style.css
+++ b/global/style.css
@@ -439,12 +439,19 @@ input{
 
 
 .prefSpan{
-    width: fit-content;
-    margin-left: auto;
-   /* margin-top: -16px; */
    display: block;
 }
 
 a {
     color: #0066cc;
 }
+
+.buttonToggle {
+    width: fit-content;
+}
+
+.styleSelector {
+    float:right;
+    display: flex;
+    align-items: center;
+}