Reorganized FileStructure and added Cookie-Banner

out/js/cookie.js

@@ -0,0 +1,65 @@
+// Check if cookie banner has been accepted by running cookieAccepted()
+
+// Please import cookie.css!!!!
+
+function __cookie_internal_addBanner__(){
+	let banner 				= document.createElement("div");
+	let text 				= document.createElement("div");
+	let link_datenschutz 	= document.createElement("a");
+	let button_accept 		= document.createElement("button");
+	let button_deny			= document.createElement("button");
+
+	banner.classList.add("cookie-banner");
+
+	text.innerText 		= 
+		"In order for this computer to keep it's data after reloading,\
+		this page uses cookies and localStorage. ";
+
+	link_datenschutz.href 		= "https://yokta.de/i/datenschutz.html";
+	link_datenschutz.innerText 	= "Privacy Policy";
+	link_datenschutz.target		= "_blank";
+	text.appendChild( link_datenschutz );
+
+	button_accept.innerText 	= "I'm ok with that"
+	button_deny.innerText		= "Not on my watch!"
+
+	button_accept.addEventListener("click", (message) => {
+		localStorage.setItem("cookie", "accepted");
+		let parent = message.target.parentElement;
+		document.body.removeChild(parent);
+	});
+	button_deny.addEventListener("click", (message) => {
+		let parent = message.target.parentElement;
+		document.body.removeChild(parent);
+	});
+
+
+	banner.appendChild( text );
+	banner.appendChild( button_accept );
+	banner.appendChild( button_deny );
+
+	document.body.appendChild(banner);
+}
+
+// Returns true if cookies are accepted
+function cookieAccepted() {
+	let maybe_cookie_status = localStorage.getItem("cookie");
+	let cookie_status = 0; 		// 0 = not answered, 1 = accepted, 2 = denied
+
+	if( maybe_cookie_status == null ) 				cookie_status = 0;
+	else if(maybe_cookie_status == "accepted")		cookie_status = 1;
+	else											cookie_status = 2;
+
+	if (cookie_status == 1)		return true;
+	if (cookie_status == 0) {
+		let maybe_banner = document.getElementsByClassName("cookie-banner")[0];
+		if(maybe_banner == undefined){
+			__cookie_internal_addBanner__();
+		}
+
+		return false;
+	}
+	return false;
+}
+
+cookieAccepted();

out/js/pc.js

@@ -0,0 +1,89 @@
+// Init Elm
+var app = Elm.Main.init({
+    node: document.getElementById("elm"),
+    // flags: Date.now()
+});
+
+// Dom Objects
+let pc      = document.getElementsByClassName("pc")[0];
+let pc_ram  = pc.getElementsByClassName("ram")[0];
+let pc_cu   = pc.getElementsByClassName("cu")[0];
+let pc_alu  = pc.getElementsByClassName("alu")[0];
+
+let pc_ram_scroller = pc_ram.getElementsByClassName("scroller")[0];
+let pc_cu_scroller = pc_cu.getElementsByClassName("scroller")[0];
+
+let control_autoscroll = document.getElementById("enableScrolling");
+
+// Methods
+function scrollToCurrent(){
+    if( control_autoscroll.checked == false ) return;
+
+    let current_ram = pc_ram.getElementsByClassName("current")[0];
+    let current_uCode = pc_cu.getElementsByClassName("current")[0];
+
+    if( pc.scrollIntoViewIfNeeded == undefined ){
+        if( typeof current_ram != "undefined"){
+            current_ram.scrollIntoView({behavior: "smooth", block: "nearest"});
+        }        
+        if( typeof current_uCode != "undefined"){
+            current_uCode.scrollIntoView({behavior: "smooth", block: "nearest"});
+        }
+    }else{
+        if( typeof current_ram != "undefined"){
+            current_ram.scrollIntoViewIfNeeded({behavior: "smooth", block: "nearest"});
+        }        
+        if( typeof current_uCode != "undefined"){
+            current_uCode.scrollIntoViewIfNeeded({behavior: "smooth", block: "nearest"});
+        }
+    }
+
+    // pc.scrollIntoView();
+}
+
+
+function shrinkTableHead(scroll){
+    let scroller = scroll.target;
+    let pos = scroller.scrollTop;
+    let thead = scroller.getElementsByClassName("head")[0];
+
+    if( pos > 70 ){
+        thead.classList.add("shrunk");
+    }else if (pos < 40){
+        thead.classList.remove("shrunk");
+    }
+    thead.classList.add("shrunk");
+
+}
+
+function loadStorage() {
+    let content = localStorage.getItem("pc_data");
+    if( typeof content == "string" ){
+        app.ports.localStorageRecieve.send( content );
+    }
+}
+
+
+
+// Load last state of pc
+loadStorage();
+
+// EVENT LISTENERS
+pc_ram_scroller.addEventListener("scroll", shrinkTableHead);
+pc_cu_scroller.addEventListener("scroll", shrinkTableHead);
+
+// Recieve Elm updates via ports
+app.ports.sendUUpdate.subscribe( (message) => {
+    // console.log("Update: ", message);
+    scrollToCurrent();
+
+    // Make sure that even when the calculation takes longer it will scroll correctly
+    setTimeout( scrollToCurrent, 100 );
+} );
+
+// Recieve LocalSession Updates via Ports
+app.ports.localStorageSend.subscribe( (message) => {
+    // console.log("localSessionSend: ", message);
+    if( cookieAccepted() )
+        localStorage.setItem("pc_data", message);
+} );

out/js/script.js

@@ -0,0 +1,26 @@
+let text_de = document.getElementById("langDE");
+let text_en = document.getElementById("langEN");
+
+let btn_changeToDe = document.getElementById("langPickerDE");
+let btn_changeToEn = document.getElementById("langPickerEN");
+
+let lang = (typeof document.documentElement.lang == "string") ? document.documentElement.lang: "en"
+
+
+function changeLang(lang){
+	if(lang == "de"){
+		text_de.classList.remove("hidden");
+		text_en.classList.add("hidden");
+	}else{
+		text_en.classList.remove("hidden");
+		text_de.classList.add("hidden");
+	}
+}
+
+btn_changeToEn.addEventListener("click", () => { changeLang("en") } );
+btn_changeToDe.addEventListener("click", () => { changeLang("de") } );
+
+
+
+// Do stuff on loading
+changeLang( lang );