new branch! decided to revive this old project. lessons now support markdown, rebrand?

7 files changed, 191 insertions, 6 deletions

diff --git a/scripts/lesson.js b/scripts/lesson.js
new file mode 100644
index 0000000..0036fde
--- /dev/null
+++ b/scripts/lesson.js
@@ -0,0 +1,145 @@
+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];
+    	}
+    );
+}
+
+// DEPENDENCIES:
+// * /scripts/toc.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())
+		.then((data) => {
+		    const md = markdownit();
+		    container.innerHTML = md.render(data);
+		}).then(() => {
+		    MathJax.typeset();
+		});
+	}
+    ).then(() => {
+	toc();
+    });
+    console.log(subject);
+    console.log(chapter);
+    console.log(lesson);
+    
+}
+
+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;
+	    }
+    	}
+    );
+}
diff --git a/scripts/onload/lesson.js b/scripts/onload/lesson.js
new file mode 100644
index 0000000..8e6d5e3
--- /dev/null
+++ b/scripts/onload/lesson.js
@@ -0,0 +1,17 @@
+// DEPENDENCIES
+// * /scripts/lesson.js
+// 	* /scripts/toc.js
+window.onload = function() {
+    loadLesson(getUrlVars()['subject'], getUrlVars()['chapter'], getUrlVars()['id']);
+}
+
+function getUrlVars() {
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for (var i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
diff --git a/scripts/onload/list.js b/scripts/onload/list.js
new file mode 100644
index 0000000..496c5dd
--- /dev/null
+++ b/scripts/onload/list.js
@@ -0,0 +1,4 @@
+window.onload = function() {
+    toc();
+    listSubjects();
+}
diff --git a/scripts/onload/subject.js b/scripts/onload/subject.js
new file mode 100644
index 0000000..a22e3e8
--- /dev/null
+++ b/scripts/onload/subject.js
@@ -0,0 +1,16 @@
+window.onload = function() {
+    toc();
+    loadSubject(getUrlVars()['id']);
+}
+
+function getUrlVars() {
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for (var i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
+
diff --git a/scripts/onload/toc.js b/scripts/onload/toc.js
new file mode 100644
index 0000000..f1101fe
--- /dev/null
+++ b/scripts/onload/toc.js
@@ -0,0 +1,3 @@
+window.onload = function() {
+    toc();
+}
diff --git a/scripts/sidebar.js b/scripts/sidebar.js
index 22a54a6..3fcb63d 100644
--- a/scripts/sidebar.js
+++ b/scripts/sidebar.js
@@ -3,7 +3,7 @@ function toggleNav() {
     const sStyle = window.getComputedStyle(sidebar);
 
     if (sStyle.visibility == "hidden") {
-        if (document.body.clientWidth >= 700) {
+        if (document.body.clientWidth >= 1000) {
             document.getElementById("main").style.marginLeft = "360px";
 
             try {
@@ -14,7 +14,7 @@ function toggleNav() {
             }
 
             try {
-                document.getElementById("chip-container").style.marginLeft = "375px";
+                document.getElementById("chip-container").style.marginLeft = "355px";
             } catch {
 
             }
@@ -35,9 +35,9 @@ function toggleNav() {
         }
 
         try {
-            document.getElementById("chip-container").style.marginLeft = "20px";
+            document.getElementById("chip-container").style.marginLeft = "0px";
         } catch {
 
         }
     }
-}
\ No newline at end of file
+}
diff --git a/scripts/toc.js b/scripts/toc.js
index bfdfe42..107c846 100644
--- a/scripts/toc.js
+++ b/scripts/toc.js
@@ -1,7 +1,7 @@
 // i am a C# developer
 // trying javascript
 
-window.onload = function() {
+function toc() {
     const tocDiv = document.getElementById("toc");
     const content = document.getElementById("main");
     const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
@@ -43,4 +43,4 @@ window.onload = function() {
             }
         }
     }
-}
\ No newline at end of file
+}