From 3fa37da7ee8caf1baf02f4b86fbe7bb1cfe5acd5 Mon Sep 17 00:00:00 2001
From: derzombiiie <derz@elidragon.com>
Date: Wed, 18 Aug 2021 01:37:25 +0200
Subject: [PATCH] Cookie pannel is there now.  + theme toggle (light mode works
 the rest is "placeholder") removed some debug stuff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
TODO:
- rating (idk how mby a copy of commenting func; problem is "user"; you can upvote /downvote only once per IP / user or sth)
- menubar with firefox style
- more themes
- clean up stuff (comments / posts)
- search something
- use other database with like database things and not .json files mby mongodb lol

if * exept search + dbupgrade betterdb is done its getting public / to blog.derzombiiie.com/derzombiiie.com idk jet

---
its ~1:40AM
have a great night! (2myself)
\#fuck€DU/CSU
---
 html/js/keks.js      | 36 +++++++++++++++++++++++++------
 html/js/themes.js    | 51 ++++++++++++++++++++++++++++++++++----------
 html/keks.html       | 12 +++++------
 html/style/light.css | 11 ++++++++++
 4 files changed, 87 insertions(+), 23 deletions(-)

diff --git a/html/js/keks.js b/html/js/keks.js
index 0412130..f55a833 100644
--- a/html/js/keks.js
+++ b/html/js/keks.js
@@ -3,6 +3,15 @@ switchcb.ads = (s) => {
 	console.log("settings ads setting to "+s)
 }
 switchcb.the = (s) => {
+	switch ( s ) {
+		case "on":
+			themes.set($(".themeselect").val())
+			break
+
+		case "off":
+			setCookie("theme", "", 1)
+			break
+	}
 	console.log("themes "+s)
 }
 switchcb.oth = (s) => {
@@ -13,7 +22,7 @@ toggler = new class {
 	constructor() {
 		
 	}
-	toggle( jtag, s ) {
+	toggle( jtag, s, cb ) {
 		if ( !s ) {
 			s = $(jtag).attr("state")
 			if ( s == "on") {
@@ -25,27 +34,42 @@ toggler = new class {
 			}
 
 		}
-		let je = $(jtag).attr("state", s)
+		let je = $(jtag)
+		je.attr("state", s)
 		let classes = je.attr("class").split(" ")
 		switch ( s ) {
 			case "noff":
-				classes.splice(2,2)
+				classes.splice(2,-1)
 				classes[2] = "noff"
 				break
 
 			case "on":
-				classes.splice(2,2)
+				classes.splice(2,-1)
 				classes[2] = "on"
 				break
 
 			case "off":
-				classes.splice(2,2)
+				classes.splice(2,-1)
 				classes[2] = "off"
 				break
 		}
 		je.attr("class", classes.join(" "))
-		switchcb[je.attr("cb")](s)
+		if ( !cb ) eval(`s="${s}";`+je.attr("cb"))
 		return s
 	}
 }
 
+// readout theme and create selector
+$(document).ready(() => {
+let c = getCookie("theme")
+if ( !c )
+	toggler.toggle(".cookie.setting.theme", "noff", true)
+else
+	toggler.toggle(".cookie.setting.theme", "on", true)
+
+$(".cookiesetting.theme").append(`<select class="themeselect" onchange='toggler.toggle(".cookie.setting.theme", "on")'>
+<option value="light" ${c == "light" ? "selected": ""}>Light-mode</option>
+<option value="dark"  ${c == "dark" ? "selected" : ""}>Dark-mode</option>
+<option value=""      ${c != "light" && c != "dark" && c != "" ? "selected" : ""}>-mode</option>
+</select>`)
+})
diff --git a/html/js/themes.js b/html/js/themes.js
index c7d3236..f94e801 100644
--- a/html/js/themes.js
+++ b/html/js/themes.js
@@ -1,21 +1,50 @@
-class themes {
+function setCookie(cname, cvalue, exdays) {
+	if ( !exdays ) {
+		exdays = 10**20
+	}
+	const d = new Date();
+	d.setTime(d.getTime() + (exdays*24*60*60*1000));
+	let expires = "expires="+ d.toUTCString();
+	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function getCookie(cname) {
+	let name = cname + "=";
+	let decodedCookie = decodeURIComponent(document.cookie);
+	let ca = decodedCookie.split(';');
+	for(let i = 0; i <ca.length; i++) {
+		let c = ca[i];
+		while (c.charAt(0) == ' ') {
+			c = c.substring(1);
+		}
+		if (c.indexOf(name) == 0) {
+			return c.substring(name.length, c.length);
+		}
+	}
+	return "";
+}
+
+themes = new class {
     constructor( theme ) {
-        if ( theme ) return this.loadstyle(theme)
-        fetch("/usermeta?theme").then( d => d.json()).then( d => {
-            if ( d.type == "s" )
-                this.loadstyle( d.style )
-            else
-                console.error("Couldnt read user style")
-        })
+		this.theme = getCookie("theme")
+
+		if( !this.theme ) {
+			this.theme = "light"
+		}
+
+		this.loadstyle(this.theme)
     }
     
     loadstyle( style ) {
+    this.theme = style
         $.get( "/static/style/" + style + ".css" , css => {
             $('<style type="text/css"></style>')
             .html(css).appendTo("head")
         })
     }
-}
 
-// static until cookie model implemented / user / idk preferences
-new themes("light")
+    set( style ) {
+    	setCookie( "theme", style )
+    	location = location
+    }
+}
diff --git a/html/keks.html b/html/keks.html
index 77d53bd..3f0d44d 100644
--- a/html/keks.html
+++ b/html/keks.html
@@ -30,13 +30,13 @@
 					Here you can change your cookie settings:<br>
 					<br>
 					<div class="cookiesetting">
+					Other:  <div class="cookie setting off"  cb="switchcb.oth()" state="noff"  d="on" onclick="toggler.toggle(this)"><div class="switcher"></div></div>(does nothing)<br>
+					</div>
+					<!--<div class="cookiesetting">
 					Ads:    <div class="cookie setting noff" cb="ads" state="noff" d="on"  onclick="toggler.toggle(this)"><div class="switcher"></div></div><br>
-					</div>
-					<div class="cookiesetting">
-					Themes: <div class="cookie setting on"   cb="the" state="noff"   d="on"  onclick="toggler.toggle(this)"><div class="switcher"></div></div><br>
-					</div>
-					<div class="cookiesetting">
-					Other:  <div class="cookie setting off"  cb="oth" state="noff"  d="off" onclick="toggler.toggle(this)"><div class="switcher"></div></div><br>
+					</div>-->
+					<div class="cookiesetting theme select">
+					Themes: <div class="cookie setting off theme"   cb="switchcb.the(s)" state="off"   d="off"  onclick="toggler.toggle(this)"><div class="switcher"></div></div><br>
 					</div>
 				</div>
 			</div>
diff --git a/html/style/light.css b/html/style/light.css
index 87f8be7..2d71adf 100644
--- a/html/style/light.css
+++ b/html/style/light.css
@@ -164,3 +164,14 @@
 .footer > a.text {
 	font-size: 0.7em;
 }
+
+/* cookie settings */
+.cookiesetting > * {
+	margin-right: 0px;
+	margin-left: 0.5em;
+}
+.cookiesetting {
+	display: flex;
+	justify-content: left;
+}
+