From 4842836da8cfa0e138682668fb2edcfe64fb38f8 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Thu, 25 Apr 2024 13:16:25 +0700 Subject: sidebar localStorage --- scripts/darkmode.js | 1 + scripts/global.js | 11 ++++++ scripts/globalElements.js | 7 ++++ scripts/lesson.js | 6 +++- scripts/localStorage.js | 8 +++++ scripts/sidebar.js | 88 ++++++++++++++++++++++++++++++++++------------- 6 files changed, 96 insertions(+), 25 deletions(-) create mode 100644 scripts/darkmode.js (limited to 'scripts') diff --git a/scripts/darkmode.js b/scripts/darkmode.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/scripts/darkmode.js @@ -0,0 +1 @@ + diff --git a/scripts/global.js b/scripts/global.js index df82ef6..48a16df 100644 --- a/scripts/global.js +++ b/scripts/global.js @@ -19,3 +19,14 @@ function isDarkMode() { return false } } + +// RETURN VALUE +// TYPE : bool +// DESCRIPTION : true = sidebar open (fallback); false = sidebar close; +function isSidebarOpen() { + if (localStorage.getItem("sidebar") == "closed") { + return false + } else { + return true + } +} diff --git a/scripts/globalElements.js b/scripts/globalElements.js index 01d8516..381f564 100644 --- a/scripts/globalElements.js +++ b/scripts/globalElements.js @@ -1,5 +1,6 @@ // DEPENDENCIES: // * /scripts/global.js +// * /scripts/sidebar.js function updateGlobalElements() { if (isLangIndonesia()) { document.getElementById("lang-switcher-text").innerHTML = "Baca dalam Bahasa Inggris"; @@ -10,4 +11,10 @@ function updateGlobalElements() { } else { document.getElementById("lang-switcher-text").innerHTML = "Read in Indonesia"; } + + if (isSidebarOpen() && document.body.clientWidth >= 1000) { + openSidebar(false); + } else { + closeSidebar(false); + } } diff --git a/scripts/lesson.js b/scripts/lesson.js index 0c0cf47..5901b35 100644 --- a/scripts/lesson.js +++ b/scripts/lesson.js @@ -138,7 +138,11 @@ function loadLesson(subject, chapter, lesson) { const md = markdownit({ "html": true }); - container.innerHTML = md.render(data); + data = data.replaceAll("!---(", `\n
\n`); + data = data.replaceAll(")---!", `\n
\n`); + data = data.replaceAll("#--(", `\n\n`); + data = data.replaceAll(")--#", `\n\n`); + container.innerHTML += md.render(data); }).then(() => { MathJax.typeset(); }).then(() => { diff --git a/scripts/localStorage.js b/scripts/localStorage.js index c5eb43d..b5753fd 100644 --- a/scripts/localStorage.js +++ b/scripts/localStorage.js @@ -8,6 +8,14 @@ function langEnglish() { window.location.reload(); } +function setSidebarStorage(open) { + if (open) { + localStorage.setItem("sidebar", "open"); + } else { + localStorage.setItem("sidebar", "closed") + } +} + function switchLang() { switchLangStorage(); window.location.reload(); diff --git a/scripts/sidebar.js b/scripts/sidebar.js index 5a82e89..542eb4d 100644 --- a/scripts/sidebar.js +++ b/scripts/sidebar.js @@ -3,41 +3,81 @@ function toggleNav() { const sStyle = window.getComputedStyle(sidebar); if (sStyle.visibility == "hidden") { - if (document.body.clientWidth >= 1000) { - document.getElementById("main").style.marginLeft = "360px"; + openSidebar(true); + } else { + closeSidebar(true); + } +} - try { - document.getElementById("banner").style.marginLeft = "375px"; - document.getElementById("topbtn").style.left = "385px"; - } catch { - - } +function openSidebar(useAnim) { + if (useAnim) { + document.getElementById("main").style.removeProperty("transition"); + document.getElementById("banner").style.removeProperty("transition"); + document.getElementById("topbtn").style.removeProperty("transition"); + document.getElementById("chip-container").style.removeProperty("transition"); + document.getElementById("sidebar").style.removeProperty("transition"); + } else { + document.getElementById("main").style.transition = "none"; + document.getElementById("banner").style.transition = "none"; + document.getElementById("topbtn").style.transition = "none"; + document.getElementById("chip-container").style.transition = "none"; + document.getElementById("sidebar").style.transition = "none"; + } - try { - document.getElementById("chip-container").style.marginLeft = "355px"; - } catch { + if (document.body.clientWidth >= 1000) { + document.getElementById("main").style.marginLeft = "360px"; - } - } - - 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"; + document.getElementById("banner").style.marginLeft = "375px"; + document.getElementById("topbtn").style.left = "385px"; } catch { } try { - document.getElementById("chip-container").style.marginLeft = "0px"; + document.getElementById("chip-container").style.marginLeft = "355px"; } catch { } } + + document.getElementById("sidebar").style.visibility = "visible"; + document.getElementById("sidebar").style.opacity = "1"; + + setSidebarStorage(true); +} + +function closeSidebar(useAnim) { + if (useAnim) { + document.getElementById("main").style.removeProperty("transition"); + document.getElementById("banner").style.removeProperty("transition"); + document.getElementById("topbtn").style.removeProperty("transition"); + document.getElementById("chip-container").style.removeProperty("transition"); + document.getElementById("sidebar").style.removeProperty("transition"); + } else { + document.getElementById("main").style.transition = "none"; + document.getElementById("banner").style.transition = "none"; + document.getElementById("topbtn").style.transition = "none"; + document.getElementById("chip-container").style.transition = "none"; + document.getElementById("sidebar").style.transition = "none"; + } + + 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 { + + } + + setSidebarStorage(false); } -- cgit v1.2.3