idk what i did, i forgot. go check the diffs

10 files changed, 309 insertions, 203 deletions

diff --git a/scripts/global.js b/scripts/global.js
new file mode 100644
index 0000000..df82ef6
--- /dev/null
+++ b/scripts/global.js
@@ -0,0 +1,21 @@
+// RETURN VALUE
+//	TYPE		: bool
+//	DESCRIPTION	: true = indonesia; false = english (fallback);
+function isLangIndonesia() {
+	if (localStorage.getItem("lang") == "id") {
+		return true
+	} else {
+		return false
+	}
+}
+
+// RETURN VALUE
+//	TYPE		: bool
+//	DESCRIPTION	: true = dark; false = light (fallback);
+function isDarkMode() {
+	if (localStorage.getItem("theme") == "dark") {
+		return true
+	} else {
+		return false
+	}
+}
diff --git a/scripts/globalElements.js b/scripts/globalElements.js
new file mode 100644
index 0000000..01d8516
--- /dev/null
+++ b/scripts/globalElements.js
@@ -0,0 +1,13 @@
+// DEPENDENCIES:
+// * /scripts/global.js
+function updateGlobalElements() {
+	if (isLangIndonesia()) {
+		document.getElementById("lang-switcher-text").innerHTML = "Baca dalam Bahasa Inggris";
+		document.getElementById("link-author").innerHTML = "Tentang Penulis";   
+		document.getElementById("link-school").innerHTML = "Tentang Sekolah";   
+		document.getElementById("link-lessons").innerHTML = "Mata Pelajaran";   
+		document.getElementById("toc-title").innerHTML = "Daftar Isi"
+	} else {
+		document.getElementById("lang-switcher-text").innerHTML = "Read in Indonesia";
+	}
+}
diff --git a/scripts/lesson.js b/scripts/lesson.js
index 0036fde..0c0cf47 100644
--- a/scripts/lesson.js
+++ b/scripts/lesson.js
@@ -1,120 +1,154 @@
+// DEPENDENCIES:
+// * /scripts/global.js
 function loadSubject(id) {
-    fetch("/lessons/index.json")
-	.then((response) => response.json())
-        .then((data) => {
-	    var title = document.getElementById("title-banner");
-	    var subtitle = document.getElementById("subtitle");
-	    var container = document.getElementById("container")
-
-	    console.log(data.subjects[id]);
-
-	    title.innerHTML = data.subjects[id].titleEn;
-	    subtitle.innerHTML = data.subjects[id].splash;
-	    container.innerHTML = "";
-
-	    var chapterLength = data.subjects[id].chapters.length;
-
-	    for (var i = 0; i < chapterLength; i++) {
-		var chapterContainer = `
-		    <h1 id="bab${i}">Chapter ${i + 1}: ${data.subjects[id].chapters[i].titleEn}</h1>
-		    <div class="button-group-container">
-		`
-
-		var lessonLength = data.subjects[id].chapters[i].lessons.length;
-
-	    	if (lessonLength > 1) {
-	    	    chapterContainer += `
-	    	        <a class="button-grouped button-grouped-top" href="lesson/?subject=${id}&chapter=${i}&id=0">
-	    	    	<span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[0].type == "lesson") ? '📚' :'✏️' }</span>
-	    	            <span>${data.subjects[id].chapters[i].lessons[0].titleEn}</span>
-	    	    	</a>
-	    	    `
-	    	    for (var j = 1; j < lessonLength - 1; j++) {
-	    	        chapterContainer += `
-	    	    	<a class="button-grouped" href="lesson/?subject=${id}&chapter=${i}&id=${j}">
-	    	    	    <span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[j].type == "lesson") ? '📚' :'✏️' }</span>
-	    	    	    <span>${data.subjects[id].chapters[i].lessons[j].titleEn}</span>
-	    	    	</a>
-	    	        `
-	    	    }
-	    	    chapterContainer += `
-	    	        <a class="button-grouped button-grouped-bottom" href="lesson/?subject=${id}&chapter=${i}&id=${lessonLength - 1}">
-	    	    	<span class="button-char-icon">${(data.subjects[id].chapters[i].lessons[lessonLength - 1].type == "lesson") ? '📚' :'✏️' }</span>
-	    	    	<span>${data.subjects[id].chapters[i].lessons[lessonLength - 1].titleEn}</span>
-	    	        </a>
-	    	    `
-	    	} else {
-
-	    	}
-
-		chapterContainer += `\n</div>`
-
-		container.innerHTML += chapterContainer;
-	    }
-	    // return data.subjects[id];
-    	}
-    );
+	fetch("/lessons/index.json")
+		.then((response) => response.json())
+		.then((data) => {
+			var title = document.getElementById("title-banner");
+			var subtitle = document.getElementById("subtitle");
+			var container = document.getElementById("container");
+			var banner = document.getElementById("img-dynamic-subject");
+
+			console.log(data.subjects[id]);
+
+			if (isLangIndonesia()) {
+				title.innerHTML = data.subjects[id].titleId;
+			} else {
+				title.innerHTML = data.subjects[id].titleEn;
+			}
+			subtitle.innerHTML = data.subjects[id].splash;
+			container.innerHTML = "";
+			var bannerPath = data.subjects[id].bannerOriginal;
+			banner.style.setProperty("background-image", `url(${bannerPath})`)
+
+			var chapterLength = data.subjects[id].chapters.length;
+
+			for (var i = 0; i < chapterLength; i++) {
+				var chapterContainer = `
+					<h1 id="bab${i}">${(isLangIndonesia()) ? "Bab" : "Chapter"} ${i + 1}: ${(isLangIndonesia()) ? data.subjects[id].chapters[i].titleId : data.subjects[id].chapters[i].titleEn}</h1>
+					<div class="button-group-container">
+				`
+
+				var lessonLength = data.subjects[id].chapters[i].lessons.length;
+
+					if (lessonLength > 1) {
+						for (var j = 0; j < lessonLength; j++) {
+						var l = data.subjects[id].chapters[i].lessons[j];
+						var style = "";
+
+						if (j == 0) {
+							style = "button-grouped-top";
+						} else if (j == lessonLength - 1) {
+							style = "button-grouped-bottom";
+						}
+							
+						chapterContainer += `
+								<a class="button-grouped ${style}" href="${(l.type == "lesson") ? 'lesson' : 'quiz' }/?subject=${id}&chapter=${i}&id=${j}">
+									<span class="button-char-icon">${(l.type == "lesson") ? '📚' :'✏️' }</span>
+									<span>${(isLangIndonesia()) ? l.titleId : l.titleEn}</span>
+								</a>
+							`
+						}
+				} else {
+
+				}
+
+				chapterContainer += `\n</div>`
+
+				container.innerHTML += chapterContainer;
+			}
+			// return data.subjects[id];
+		}
+	);
 }
 
 // DEPENDENCIES:
 // * /scripts/toc.js
+// * /scripts/global.js
 // * markdown-it
 function loadLesson(subject, chapter, lesson) {
-    fetch("/lessons/index.json")
-	.then((response) => response.json())
-        .then((data) => {
-	    var title = document.getElementById("title-banner");
-	    var subtitle = document.getElementById("subtitle");
-	    var container = document.getElementById("container")
-
-	    var chipStatus = document.getElementById("chip-status");
-	    var chipAuthor = document.getElementById("chip-author");
-	    var chipGrade = document.getElementById("chip-grade");
-
-	    var lessonData = data.subjects[subject].chapters[chapter].lessons[lesson];
-
-	    console.log(lessonData);
-
-	    title.innerHTML = lessonData.titleEn;
-	    subtitle.innerHTML = `Chapter ${parseInt(chapter) + 1}`;
-	    container.innerHTML = "";
-	    chipGrade.innerHTML = "Grade " + lessonData.grade;
-	    if (lessonData.authors.length == 1) {
-		chipAuthor.innerHTML = "Written by " + lessonData.authors[0];
-	    } else {
-		chipAuthor.innerHTML = "Written by ";
-		for (var i = 0; i < lessonData.authors.length - 1; i++) {
-		    chipAuthor.innerHTML += lessonData.authors[i] + ", ";
-		}
-		chipAuthor.innerHTML += "and " + lessonData.authors[lessonData.authors.length - 1];
-	    }
-	    // why the heck switch case not working
-	    // guess i'm too stupid for a switch case.
-	    // no i'm not yandev
-	    if (lessonData.status == 0) {    
-		chipStatus.innerHTML = "❓ Not Verified";
-	    } else if (lessonData.status == 1) {
-		    chipStatus.innerHTML = "✅ Verified";
-	    } else if (lessonData.status == 2) {
-		    chipStatus.innerHTML = "⚠️ Contains Wrong Information";
-	    }
-
-	    fetch(lessonData.pathEn)
-		.then((response) => response.text())
+	fetch("/lessons/index.json")
+		.then((response) => response.json())
 		.then((data) => {
-		    const md = markdownit();
-		    container.innerHTML = md.render(data);
-		}).then(() => {
-		    MathJax.typeset();
-		});
-	}
-    ).then(() => {
-	toc();
-    });
-    console.log(subject);
-    console.log(chapter);
-    console.log(lesson);
-    
+			var title = document.getElementById("title-banner");
+			var subtitle = document.getElementById("subtitle");
+			var container = document.getElementById("container")
+
+			var chipStatus = document.getElementById("chip-status");
+			var chipAuthor = document.getElementById("chip-author");
+			var chipGrade = document.getElementById("chip-grade");
+
+			var lessonData = data.subjects[subject].chapters[chapter].lessons[lesson];
+
+			console.log(lessonData);
+
+			if (isLangIndonesia()) {
+				title.innerHTML = lessonData.titleId;
+				subtitle.innerHTML = `Bab ${parseInt(chapter) + 1}`;
+				container.innerHTML = "";
+				chipGrade.innerHTML = "Kelas " + lessonData.grade;
+					if (lessonData.authors.length == 1) {
+						chipAuthor.innerHTML = "Ditulis oleh " + lessonData.authors[0];
+					} else {
+						chipAuthor.innerHTML = "Ditulis oleh ";
+						for (var i = 0; i < lessonData.authors.length - 1; i++) {
+							chipAuthor.innerHTML += lessonData.authors[i] + ", ";
+						}
+						chipAuthor.innerHTML += "dan " + lessonData.authors[lessonData.authors.length - 1];
+					}
+			} else {
+				title.innerHTML = lessonData.titleEn;
+				subtitle.innerHTML = `Chapter ${parseInt(chapter) + 1}`;
+				container.innerHTML = "";
+				chipGrade.innerHTML = "Grade " + lessonData.grade;
+					if (lessonData.authors.length == 1) {
+						chipAuthor.innerHTML = "Written by " + lessonData.authors[0];
+					} else {
+						chipAuthor.innerHTML = "Written by ";
+						for (var i = 0; i < lessonData.authors.length - 1; i++) {
+							chipAuthor.innerHTML += lessonData.authors[i] + ", ";
+						}
+						chipAuthor.innerHTML += "and " + lessonData.authors[lessonData.authors.length - 1];
+					}
+			}
+			// why the heck switch case not working
+			// guess i'm too stupid for a switch case.
+			// no i'm not yandev
+			if (isLangIndonesia()) {
+				if (lessonData.status == 0) {
+					chipStatus.innerHTML = "❓ Belum Terverifikasi";
+				} else if (lessonData.status == 1) {
+					chipStatus.innerHTML = "✅ Terverifikasi";
+				} else if (lessonData.status == 2) {
+					chipStatus.innerHTML = "⚠️ Mengandung Informasi Tidak Akurat";
+				}
+			} else {
+				if (lessonData.status == 0) {
+					chipStatus.innerHTML = "❓ Not Verified";
+				} else if (lessonData.status == 1) {
+					chipStatus.innerHTML = "✅ Verified";
+				} else if (lessonData.status == 2) {
+					chipStatus.innerHTML = "⚠️ Contains Wrong Information";
+				}
+			}
+
+			fetch((isLangIndonesia()) ? lessonData.pathId : lessonData.pathEn)
+				.then((response) => response.text())
+				.then((data) => {
+					const md = markdownit({
+						"html": true
+					});
+					container.innerHTML = md.render(data);
+				}).then(() => {
+					MathJax.typeset();
+				}).then(() => {
+					toc();
+				});
+		}
+	);
+	console.log(subject);
+	console.log(chapter);
+	console.log(lesson);
 }
 
 function loadQuiz(subject, chapter, lesson) {
@@ -122,24 +156,24 @@ function loadQuiz(subject, chapter, lesson) {
 }
 
 function listSubjects() {
-    fetch("/lessons/index.json")
-	.then((response) => response.json())
-        .then((data) => {
-	    var container = document.getElementById("subject-container");
-
-	    for (var i = 0; i < data.subjects.length; i++) {
-		var card = `
-                    <div class="card">
-                        <a href="/subject/?id=${i}" class="link-card"></a>
-                        <img src="${data.subjects[i].banner}" alt="" class="card-img">
-                        <a href="/subject/?id=${i}">
-                            <h2>${data.subjects[i].titleEn}</h2>
-                        </a>
-                    </div>
-		`;
-
-		container.innerHTML += card;
-	    }
-    	}
-    );
+	fetch("/lessons/index.json")
+		.then((response) => response.json())
+		.then((data) => {
+			var container = document.getElementById("subject-container");
+
+			for (var i = 0; i < data.subjects.length; i++) {
+				var card = `
+					<div class="card">
+						<a href="/subject/?id=${i}" class="link-card"></a>
+						<img src="${data.subjects[i].banner}" alt="" class="card-img">
+						<a href="/subject/?id=${i}">
+							<h2>${(isLangIndonesia()) ? data.subjects[i].titleId : data.subjects[i].titleEn}</h2>
+						</a>
+					</div>
+				`;
+
+				container.innerHTML += card;
+			}
+		}
+	);
 }
diff --git a/scripts/localStorage.js b/scripts/localStorage.js
new file mode 100644
index 0000000..c5eb43d
--- /dev/null
+++ b/scripts/localStorage.js
@@ -0,0 +1,27 @@
+function langIndonesia() {
+	localStorage.setItem("lang", "id");
+	window.location.reload();
+}
+
+function langEnglish() {
+	localStorage.setItem("lang", "en");
+	window.location.reload();
+}
+
+function switchLang() {
+	switchLangStorage();
+	window.location.reload();
+}
+
+function switchLangStorage() {
+	if (localStorage.getItem("lang") == "id") {
+		localStorage.setItem("lang", "en");
+	} else {
+		localStorage.setItem("lang", "id");
+	}
+}
+
+function switchLangHref(destination) {
+	switchLangStorage();
+	window.location.href = destination;
+}
diff --git a/scripts/onload/lesson.js b/scripts/onload/lesson.js
index 8e6d5e3..389cbf0 100644
--- a/scripts/onload/lesson.js
+++ b/scripts/onload/lesson.js
@@ -1,8 +1,10 @@
 // DEPENDENCIES
 // * /scripts/lesson.js
 // 	* /scripts/toc.js
+// * /scripts/global.js
 window.onload = function() {
     loadLesson(getUrlVars()['subject'], getUrlVars()['chapter'], getUrlVars()['id']);
+    updateGlobalElements();
 }
 
 function getUrlVars() {
diff --git a/scripts/onload/list.js b/scripts/onload/list.js
index 496c5dd..f67bc43 100644
--- a/scripts/onload/list.js
+++ b/scripts/onload/list.js
@@ -1,4 +1,5 @@
 window.onload = function() {
     toc();
     listSubjects();
+    updateGlobalElements();
 }
diff --git a/scripts/onload/subject.js b/scripts/onload/subject.js
index a22e3e8..2bb985d 100644
--- a/scripts/onload/subject.js
+++ b/scripts/onload/subject.js
@@ -1,6 +1,7 @@
 window.onload = function() {
     toc();
     loadSubject(getUrlVars()['id']);
+    updateGlobalElements();
 }
 
 function getUrlVars() {
diff --git a/scripts/onload/toc.js b/scripts/onload/toc.js
index f1101fe..067b5bf 100644
--- a/scripts/onload/toc.js
+++ b/scripts/onload/toc.js
@@ -1,3 +1,4 @@
 window.onload = function() {
     toc();
+    updateGlobalElements();
 }
diff --git a/scripts/sidebar.js b/scripts/sidebar.js
index 3fcb63d..5a82e89 100644
--- a/scripts/sidebar.js
+++ b/scripts/sidebar.js
@@ -1,43 +1,43 @@
 function toggleNav() {
-    const sidebar = document.getElementById("sidebar");
-    const sStyle = window.getComputedStyle(sidebar);
+	const sidebar = document.getElementById("sidebar");
+	const sStyle = window.getComputedStyle(sidebar);
 
-    if (sStyle.visibility == "hidden") {
-        if (document.body.clientWidth >= 1000) {
-            document.getElementById("main").style.marginLeft = "360px";
+	if (sStyle.visibility == "hidden") {
+		if (document.body.clientWidth >= 1000) {
+			document.getElementById("main").style.marginLeft = "360px";
 
-            try {
-                document.getElementById("banner").style.marginLeft = "375px";
-                document.getElementById("topbtn").style.left = "385px";
-            } catch {
-                
-            }
+			try {
+				document.getElementById("banner").style.marginLeft = "375px";
+				document.getElementById("topbtn").style.left = "385px";
+			} catch {
+				
+			}
 
-            try {
-                document.getElementById("chip-container").style.marginLeft = "355px";
-            } catch {
+			try {
+				document.getElementById("chip-container").style.marginLeft = "355px";
+			} catch {
 
-            }
-        }
-        
-        document.getElementById("sidebar").style.visibility = "visible";
-        document.getElementById("sidebar").style.opacity = "1";
-    } else {
-        document.getElementById("main").style.marginLeft = "0";
-        document.getElementById("sidebar").style.visibility = "hidden";
-        document.getElementById("sidebar").style.opacity = "0";
-        
-        try {
-            document.getElementById("banner").style.marginLeft = "20px";
-            document.getElementById("topbtn").style.left = "30px";
-        } catch {
-            
-        }
+			}
+		}
+		
+		document.getElementById("sidebar").style.visibility = "visible";
+		document.getElementById("sidebar").style.opacity = "1";
+	} else {
+		document.getElementById("main").style.marginLeft = "0";
+		document.getElementById("sidebar").style.visibility = "hidden";
+		document.getElementById("sidebar").style.opacity = "0";
+		
+		try {
+			document.getElementById("banner").style.marginLeft = "20px";
+			document.getElementById("topbtn").style.left = "30px";
+		} catch {
+			
+		}
 
-        try {
-            document.getElementById("chip-container").style.marginLeft = "0px";
-        } catch {
+		try {
+			document.getElementById("chip-container").style.marginLeft = "0px";
+		} catch {
 
-        }
-    }
+		}
+	}
 }
diff --git a/scripts/toc.js b/scripts/toc.js
index 107c846..2823b53 100644
--- a/scripts/toc.js
+++ b/scripts/toc.js
@@ -2,45 +2,51 @@
 // trying javascript
 
 function toc() {
-    const tocDiv = document.getElementById("toc");
-    const content = document.getElementById("main");
-    const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
-    
-    console.log(headers)
+	const tocDiv = document.getElementById("toc");
+	const content = document.getElementById("main");
+	const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
+	
+	console.log(headers)
 
-    const ul = document.createElement("ul");
-    tocDiv.appendChild(ul)
+	const ul = document.createElement("ul");
+	tocDiv.appendChild(ul)
+	
+	for (var i = 0; i < headers.length; i++) {
+		if (!headers[i].hasAttribute('id')) {
+			headers[i].setAttribute('id', `${headers[i].innerHTML.split(" ")[0]}-${i}`)
+		}
+	}
+	
+	for (var i = 0; i < headers.length; i++) {
+		if (headers[i].hasAttribute('id')) {
+			const li = document.createElement("li");
+			var level = headers[i].tagName[1];
+			console.log(level + headers[i].tagName + headers[i].id)
+			if (level == 1) {
+				const a = document.createElement("a");
+				ul.appendChild(li);
+				li.appendChild(a);
+				a.href = "#" + headers[i].id
+				a.textContent = headers[i].textContent
+			}
+			else
+			{
+				var nowUl = document.createElement("ul");
+				ul.appendChild(nowUl);
 
-    for (var i = 0; i < headers.length; i++) {
-        if (headers[i].hasAttribute('id')) {
-            const li = document.createElement("li");
-            var level = headers[i].tagName[1];
-            console.log(level + headers[i].tagName + headers[i].id)
-            if (level == 1) {
-                const a = document.createElement("a");
-                ul.appendChild(li);
-                li.appendChild(a);
-                a.href = "#" + headers[i].id
-                a.textContent = headers[i].textContent
-            }
-            else
-            {
-                var nowUl = document.createElement("ul");
-                ul.appendChild(nowUl);
-
-                for (var j = 0; j < level - 2; j++) {
-                    const currentUl = document.createElement("ul");
-                    nowUl.appendChild(currentUl);
-                    nowUl = currentUl;
-                }
-                
-                const currentLi = document.createElement("li");
-                const a = document.createElement("a");
-                nowUl.appendChild(currentLi);
-                currentLi.appendChild(a);
-                a.href = "#" + headers[i].id
-                a.textContent = headers[i].textContent
-            }
-        }
-    }
+				for (var j = 0; j < level - 2; j++) {
+					const currentUl = document.createElement("ul");
+					nowUl.appendChild(currentUl);
+					nowUl = currentUl;
+				}
+				
+				const currentLi = document.createElement("li");
+				const a = document.createElement("a");
+				nowUl.appendChild(currentLi);
+				currentLi.appendChild(a);
+				a.href = "#" + headers[i].id
+				a.textContent = headers[i].textContent
+			}
+		}
+	}
 }