summaryrefslogtreecommitdiff
path: root/scripts
diff options
context:
space:
mode:
Diffstat (limited to 'scripts')
-rw-r--r--scripts/global.js21
-rw-r--r--scripts/globalElements.js13
-rw-r--r--scripts/lesson.js292
-rw-r--r--scripts/localStorage.js27
-rw-r--r--scripts/onload/lesson.js2
-rw-r--r--scripts/onload/list.js1
-rw-r--r--scripts/onload/subject.js1
-rw-r--r--scripts/onload/toc.js1
-rw-r--r--scripts/sidebar.js70
-rw-r--r--scripts/toc.js84
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
+ }
+ }
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-04 15:12:12 +0000