spanish-quizzer

commit 35e8dbd58abb2127b256e9ffcc7ebc9790fd6be4
parent 159ddd95c3dfe7873ef8e78271f4b1a936e08d2b
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Fri,  9 Oct 2020 15:09:37 -0700

Implement global.js.

Diffstat:
M
index.html
 | 
1
+
A
js/global.js
 | 
49
+++++++++++++++++++++++++++++++++++++++++++++++++
M
js/home.js
 | 
36
++++++------------------------------
M
js/reference.js
 | 
41
+++--------------------------------------
M
reference.html
 | 
1
+

5 files changed, 60 insertions(+), 68 deletions(-)
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
         <link rel="stylesheet" href="css/quizzer.css">
         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
         <script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js"></script>
+        <script src="js/global.js"></script>
         <script src="js/home.js"></script>
         <script src="js/settings.js"></script>
         <script src="js/quizzer.js"></script>
diff --git a/js/global.js b/js/global.js
@@ -0,0 +1,49 @@
+/**
+ * Set the app theme.
+ * @param {Boolean} darkTheme - Whether to use the dark theme. If null, a theme will be automatically chosen.
+ * @returns {void}
+ */
+function SetTheme(darkTheme = null) {
+    // Get theme from localStorage if null
+    if (darkTheme === null) {
+        try {
+            darkTheme = JSON.parse(localStorage.getItem("darkTheme"));
+        }
+        catch { }
+    }
+
+    // Detect preferred color scheme if null
+    if (darkTheme === null) {
+        try {
+            darkTheme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        }
+        catch { }
+    }
+
+    // Apply theme
+    if (darkTheme) {
+        document.body.classList.add("dark");
+    }
+    else {
+        document.body.classList.remove("dark");
+    }
+
+    // Save theme
+    localStorage.setItem("darkTheme", darkTheme);
+}
+
+
+
+/**
+ * Loads the page.
+ * @returns {void}
+ */
+function LoadPage() {
+    // Add event Listeners
+    document.addEventListener("click", function (e) {
+        document.getElementById('share').hidden = true;
+    });
+
+    // Update theme
+    SetTheme(null);
+}
diff --git a/js/home.js b/js/home.js
@@ -13,7 +13,7 @@ function loadVue() {
 
         data: {
             state: "home",
-            darkTheme: false,
+            darkTheme: document.body.classList.contains("dark"),
             verbFilters: [],
             vocabFilters: [],
             errorMsg: "",
@@ -254,27 +254,8 @@ function loadVue() {
             /**
              * Update the app theme.
              */
-            darkTheme: function() {
-                // Get theme from localStorage if null
-                if (this.darkTheme === null) {
-                    this.darkTheme = JSON.parse(localStorage.getItem("darkTheme"));
-                }
-
-                // Detect preferred color scheme if null
-                if (this.darkTheme === null) {
-                    this.darkTheme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
-                }
-
-                // Apply theme
-                if (this.darkTheme) {
-                    document.body.classList.add("dark");
-                }
-                else {
-                    document.body.classList.remove("dark");
-                }
-
-                // Save theme
-                localStorage.setItem("darkTheme", this.darkTheme);
+            darkTheme: function(value) {
+                SetTheme(value);
             },
 
             /**
@@ -309,11 +290,6 @@ function loadVue() {
                 app.errorMsg = "";
             }
         },
-
-        created: function() {
-            // Force theme to update
-            this.darkTheme = null;
-        },
     });
 }
 
@@ -323,6 +299,9 @@ function loadVue() {
  * Load the document.
  */
 function Load() {
+    // Call LoadPage method from global.js
+    LoadPage();
+
     // Initialize the Vue app
     loadVue();
 
@@ -334,9 +313,6 @@ function Load() {
     document.querySelector("footer").hidden = false;
 
     // Add event Listeners
-    document.addEventListener("click", function (e) {
-        document.getElementById('share').hidden = true;
-    });
     document.addEventListener("keydown", KeyDown);
 
     // Load CSVs
diff --git a/js/reference.js b/js/reference.js
@@ -11,7 +11,6 @@ function loadVue() {
         el: "#app", // Mount to app div
 
         data: {
-            darkTheme: false,
             set: "Choose a vocab set",
             sets: {"Choose a vocab set":[]},
             query: ""
@@ -31,34 +30,6 @@ function loadVue() {
                     return "en";
                 }
             }
-        },
-
-        watch: {
-            /**
-             * Update the app theme.
-             */
-            darkTheme: function() {
-                // Get theme from localStorage if null
-                if (this.darkTheme === null) {
-                    this.darkTheme = JSON.parse(localStorage.getItem("darkTheme"));
-                }
-
-                // Detect preferred color scheme if null
-                if (this.darkTheme === null) {
-                    this.darkTheme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
-                }
-
-                // Apply theme
-                if (this.darkTheme) {
-                    document.body.classList.add("dark");
-                }
-                else {
-                    document.body.classList.remove("dark");
-                }
-
-                // Save theme
-                localStorage.setItem("darkTheme", this.darkTheme);
-            }
         }
     });
 }
@@ -69,6 +40,9 @@ function loadVue() {
  * Load the document
  */
 function Load() {
+    // Call LoadPage method from global.js
+    LoadPage();
+    
     // Initialize the Vue
     loadVue();
 
@@ -79,18 +53,9 @@ function Load() {
     document.getElementById("referenceTable").hidden = false;
     document.querySelector("footer").hidden = false;
 
-
-    // Load settings
-    app.darkTheme = null;   // Force theme to update
-
     // Set table height
     setTableHeight();
 
-    // Add event Listeners
-    document.addEventListener("click", function (e) {
-        document.getElementById('share').hidden = true;
-    });
-
     // Load CSVs
     let setNames = ["Verbs", "Adjectives", "Adverbs", "Prepositions", "Transitions",
                     "Colors", "Days", "Months", "Questions", "Weather", "Family", "Clothes",
diff --git a/reference.html b/reference.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="css/reference.css">
         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
         <script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js"></script>
+        <script src="js/global.js"></script>
         <script src="js/reference.js"></script>
     </head>