From ba6f79b720ca4c18a0c48f5b97c51cebb9f87044 Mon Sep 17 00:00:00 2001 From: Ethan Rogers Date: Fri, 10 Jan 2025 22:23:41 -0700 Subject: [PATCH] add themes and icon for home button --- favicon.ico | Bin 0 -> 15406 bytes icons/tg192transparent.png | Bin 0 -> 589 bytes icons/{tg512png => tg512.png} | Bin manifest.json | 8 +-- topics/index.html | 4 +- topics/topics.css | 10 ++-- topics/topics.js | 94 +++++++++++++++++++++++++++++----- 7 files changed, 94 insertions(+), 22 deletions(-) create mode 100644 favicon.ico create mode 100644 icons/tg192transparent.png rename icons/{tg512png => tg512.png} (100%) diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..ac5ccf1862d345c10468a546cdde528c87dd9054 GIT binary patch literal 15406 zcmeHN%}N4M6h2W8V2d^;{w>0lnpU_GiVA7bMld%n#87G_6s~d;NDzsODB87grz;=A zq(Crwgn9v=;B*frsLZG{-qFT610SQ;x#!&Z?sw0*b4Gv_SOuF6#MuoOYXExy;CA=E z`_=(oMO!fV_xl#W+XjG7TqC-O9=&#PQat>2J2HA4*sd59G&EA2 zaSQAVP<&E5tjI0jGv^l8z+?@)R4Ul0)imQemy;69KUyv9cDtJK^zg70{=+U8?szVMJv>*Z}(`ss~7gE5P2=;g!e`q!I( z2Xi*r(91vfo4iM2j+i4eYe20oV3l^NlZX;6qy@N6!fV;gYnjK+`ehBU23P~EfkkQH zBoe{fLILlJMX5Ll1m^M_dznh%&-b_Hn)6`IP3d!T%==N9bH(FVeqS&z{!gP(tdvUl zTrNw+Q7AMQ{RcKTG3anehhNy0sdKi)InD?T?0UU;DAw9>IBY1$2lU0bR`5<4i$8S{r8qLX+jeqT|Z`Dzq0kn_J;Mn?0gute^c5Mk}uhO8nu5O z-H+2AoqWk2Kj$yy=P%B`)5Rg9>L;W17^=~bFWLHMd(+J`^Ta%{23P~E0oDL(;Qwnt M{5^;dW~}U&3=E97JY5_^D(1YsyRlH%QKIeP zUC{~=4@FrEg+{eIjIFzv%O9K(-16YXGocOcyO*dWJ&~O8^=0)uu6Oo z{0m6uujn>B=Bv5%?7f5WU!z{1ej_;jmqGP`Xr0raBC`J)RkJ_uHJs{08GiI&5AC>+4rnSZT@BfOwfdT{xJgCZf<@IFOy7^Jr^6Bp% z?78>*^~Z{ud3zrR&Hkl*qIiuX?|JvpJGwAm;Vt;BckssXKGmz6JWkto`sq_qAVBzx7F)eGTt0JhoSR;{SU< z=Xh)0Pk%q-V0|NAyO10+yGp?L*bdD_f9310Mjd}6h-NKTuEE{>moIJ8eCBUY1j&24 L`njxgN@xNAY@x{P literal 0 HcmV?d00001 diff --git a/icons/tg512png b/icons/tg512.png similarity index 100% rename from icons/tg512png rename to icons/tg512.png diff --git a/manifest.json b/manifest.json index d10f151a..55628b34 100644 --- a/manifest.json +++ b/manifest.json @@ -1,11 +1,11 @@ { - "name": "Topical Guide", - "short_name": "TopicalGuide", + "name": "Topics", + "short_name": "Topics", "description": "A way to study the topical guide", "start_url": "/topics/", "display": "standalone", - "background_color": "#ffffff", - "theme_color": "#007aff", + "background_color": "#1A1A2E", + "theme_color": "#1A1A2E", "icons": [ { "src": "icons/tg192.png", diff --git a/topics/index.html b/topics/index.html index fef884a5..897121e2 100644 --- a/topics/index.html +++ b/topics/index.html @@ -8,7 +8,7 @@ - + @@ -21,7 +21,7 @@
- + Topics
diff --git a/topics/topics.css b/topics/topics.css index 36054c16..304f436d 100644 --- a/topics/topics.css +++ b/topics/topics.css @@ -18,6 +18,10 @@ color: #B0BEC5; "wdth" 100; } +.home-logo{ + height:100%; +} + .dark-mode-midnight{ background: #1A1A2E; color: #F1F1F1; @@ -67,13 +71,11 @@ color: #E4E4E4; height:7vh; } -.home-button, .home-button-spacer { - padding-left:3%; - padding-right:3% -} .home-button-spacer{ color:#ffffff00; + height:100%; + aspect-ratio:1; } #inner_body_header_link { diff --git a/topics/topics.js b/topics/topics.js index c997d49a..948192b3 100644 --- a/topics/topics.js +++ b/topics/topics.js @@ -3,8 +3,25 @@ let allVerseDivs; let globalLastRead = {}; +let themes = [ +"dark-mode-midnight", +"dark-mode-classic", +"dark-mode-charcoal", +"dark-mode-deep-space", +"dark-mode-slate", +"dark-mode-elegant", +] + // Localstorage stuff +function setLocalStorageString(name, value){ + localStorage.setItem(name, value); +} + +function getLocalStorageString(name){ + return localStorage.getItem(name); +} + function setLocalStorageDict(name, dict){ localStorage.setItem(name, JSON.stringify(dict)); } @@ -150,7 +167,7 @@ function addVerseForTopic(verseToGet, counter){ const scrollableVersesParent = document.getElementById('scrollable_verses_parent'); // create divs - const parentDiv = createDiv('scrollable-verse', 'div', '', `verse_${counter}`); + const scrollableVerseDiv = createDiv('scrollable-verse', 'div', '', `verse_${counter}`); const verseLink = createDiv('verse-link', 'a'); const verseTitle = createDiv('verse-title', 'div', `${verseToGet.replace("_", " ")}`); verseTitle.classList.add('roboto-medium'); @@ -175,9 +192,9 @@ function addVerseForTopic(verseToGet, counter){ // create hierarchy of divs verseLink.appendChild(verseTitle) - parentDiv.appendChild(verseLink); - parentDiv.appendChild(verseContent); - scrollableVersesParent.appendChild(parentDiv); + scrollableVerseDiv.appendChild(verseLink); + scrollableVerseDiv.appendChild(verseContent); + scrollableVersesParent.appendChild(scrollableVerseDiv); } let topicIdx; @@ -226,15 +243,17 @@ function addDivSeeAlso(seeAlso){ const toSplit = seeAlso.replace("See also ", ""); const seeAlsoList = toSplit.split("; ") - const seeAlsoDiv = createDiv('see-also', 'div', "See also ") + const seeAlsoDiv = createDiv('scrollable-verse', 'div') + const seeAlsoContentDiv = createDiv('verse-content', 'div', "See also ") for (const s of seeAlsoList){ const a = createDiv('see-also-inner', 'a', s+'; '); a.href = `/topics/?topic=${topics_dict[s]}`; - seeAlsoDiv.appendChild(a); + seeAlsoContentDiv.appendChild(a); } const scrollableVersesParent = document.getElementById('scrollable_verses_parent'); + seeAlsoDiv.appendChild(seeAlsoContentDiv); scrollableVersesParent.appendChild(seeAlsoDiv); } @@ -273,6 +292,51 @@ function addDivForSearch(){ scrollableVersesParent.prepend(search); } +function themePickerOnclick(){ + this.className = "theme-picker"; + let nextTheme = themes[0]; + let useNext = false; + for (const theme of themes){ + if (useNext){ + nextTheme = theme; + break; + } + if (theme == currentTheme){ + useNext = true; + } + } + + currentTheme = nextTheme; + setLocalStorageString('theme', currentTheme); + this.classList.add(currentTheme) + document.body.className = currentTheme; +} + +let currentTheme; + +function initTheme(){ + const savedTheme = getLocalStorageString('theme'); + if (savedTheme){ + currentTheme = savedTheme; + } + else{ + currentTheme = themes[0]; + } + return currentTheme; +} + +function addDivForThemePicker(){ + const themePicker = createDiv('theme-picker', 'div', 'Change Theme'); + const currentTheme = initTheme(); + themePicker.classList.add(currentTheme); + document.body.classList.add(currentTheme); + themePicker.onclick = themePickerOnclick; + + + const scrollableVersesParent = document.getElementById('toc_parent'); + scrollableVersesParent.prepend(themePicker); +} + function addDivForTopic(topic){ const tocTopic = createDiv('toc-topic', 'div'); const tocTopicA = createDiv('toc-topic-a', 'a', topic[1]); @@ -294,7 +358,10 @@ function afterLoadingVerses(){ else{ if (topicIdx in globalLastRead){ const last_read = globalLastRead[topicIdx]; - document.getElementById(last_read).scrollIntoView(); + const last_read_div = document.getElementById(last_read); + if (last_read_div){ + last_read_div.scrollIntoView(); + } } } @@ -303,6 +370,7 @@ function afterLoadingVerses(){ function setupTopicListPage(){ addDivForSearch(); + addDivForThemePicker(); for (const topic of topics_list){ addDivForTopic(topic); } @@ -322,9 +390,12 @@ function getTopicDisplayName(topic){ function addHomeButton(){ const homeButton = createDiv('home-button', 'a') const homeButtonSpacer = createDiv('home-button-spacer', 'div') - homeButton.textContent = String.fromCharCode(8801); homeButton.href = "/topics/" - homeButtonSpacer.textContent = String.fromCharCode(8801); + const homeLogo = createDiv('home-logo', 'img'); + homeLogo.src = "/icons/tg192transparent.png"; + homeButtonSpacer.src = "/icons/tg192transparent.png"; + homeButton.appendChild(homeLogo); + const parent = document.getElementById('inner_body_header'); const child = document.getElementById('inner_body_header_link'); parent.insertBefore(homeButton, child); @@ -334,10 +405,9 @@ function addHomeButton(){ //onload function pageLoaded() { const params = new URLSearchParams(window.location.search); - if (params.has('colormode')){ - document.body.classList.add(`dark-mode-${params.get('colormode')}`); - } if (params.has('topic')){ + document.body.className = initTheme(); + const topic = params.get('topic') const header_link = document.getElementById("inner_body_header_link") header_link.classList.add('roboto-medium');