add themes and icon for home button

ethanroj23 · Jan 11, 2025 · ba6f79b · ba6f79b
1 parent 2129ebd
commit ba6f79b
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 22 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/icons/tg192transparent.png b/icons/tg192transparent.png
diff --git a/icons/tg512png → icons/tg512.png b/icons/tg512png → icons/tg512.png
diff --git 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
@@ -8,7 +8,7 @@
 
 
   <link rel="manifest" href="/manifest.json">
-  <meta name="theme-color" content="#007aff">
+  <meta name="theme-color" content="#1A1A2E">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Topics">
 
@@ -21,7 +21,7 @@
  <body onload="pageLoaded()">
   <div class="inner-body">
     <div class="inner-body-header" id="inner_body_header">
-      <a id="inner_body_header_link"></a>
+      <a id="inner_body_header_link">Topics</a>
     </div>
     <div class="scrollable-verses-parent" id="scrollable_verses_parent">
     <div class="toc-parent" id="toc_parent">

diff --git 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
@@ -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');