Add the dark top sites background switch

hkamran80 · Nov 5, 2021 · ec9cc90 · ec9cc90
1 parent 2677692
commit ec9cc90
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "nebula-new-tab",
-    "version": "1.1.0-beta.0",
+    "version": "1.1.0",
     "private": true,
     "description": "A clean and simple new tab page",
     "repository": {

diff --git a/src/background.ts b/src/background.ts
@@ -3,6 +3,7 @@ browser.runtime.onInstalled.addListener(async () => {
         hourStatus: "12",
         topSites: false,
         topSitesContainer: "center",
+        topSitesBackground: "dark",
     });
 
     await browser.tabs.create({});

diff --git a/src/index.ts b/src/index.ts
@@ -18,6 +18,9 @@ const topSitesSwitch = document.getElementById(
 const topSitesCenterPositionSwitch = document.getElementById(
     "top-sites-center-position-switch"
 ) as HTMLInputElement;
+const topSitesDarkBackgroundSwitch = document.getElementById(
+    "top-sites-dark-background-switch"
+) as HTMLInputElement;
 const newBackgroundButton = document.getElementById("new-background-button");
 const newBackgroundButtonIcon = document.getElementById(
     "new-background-button-icon"
@@ -205,6 +208,7 @@ if (
     hourModeSwitch &&
     topSitesSwitch &&
     topSitesCenterPositionSwitch &&
+    topSitesDarkBackgroundSwitch &&
     newBackgroundButton &&
     newBackgroundButtonIcon
 ) {
@@ -222,6 +226,11 @@ if (
         (topSitesValue: boolean) => (topSitesSwitch.checked = topSitesValue)
     );
 
+    getTopSiteBackground().then(
+        (background: string) =>
+            (topSitesDarkBackgroundSwitch.checked = background === "dark")
+    );
+
     // Event Listeners
     hourModeSwitch.addEventListener("click", () =>
         getUserHour((twelveHour: boolean) => {
@@ -242,10 +251,10 @@ if (
         })
     );
 
-    topSitesCenterPositionSwitch.addEventListener("click", () => {
+    topSitesCenterPositionSwitch.addEventListener("click", (evt: Event) => {
         toggleTopSiteContainer().then(
             (newPosition: string) =>
-                (topSitesCenterPositionSwitch.checked =
+                ((evt.target as HTMLInputElement).checked =
                     newPosition === "center" ? true : false)
         );
 
@@ -257,6 +266,19 @@ if (
         });
     });
 
+    topSitesDarkBackgroundSwitch.addEventListener("click", (evt: Event) =>
+        toggleTopSiteBackground().then((background: string) => {
+            (evt.target as HTMLInputElement).checked = background === "dark";
+
+            getTopSiteValue().then((topSitesValue: boolean) => {
+                if (topSitesValue) {
+                    unloadTopSites();
+                    loadTopSites();
+                }
+            });
+        })
+    );
+
     newBackgroundButton.addEventListener("click", () => {
         newBackgroundButtonIcon.classList.add("animate-spin");
 
@@ -308,10 +330,34 @@ async function toggleTopSiteContainer(): Promise<string> {
     }
 
     browser.storage.local.set({ topSitesContainer: newPosition });
-
     return newPosition;
 }
 
+async function getTopSiteBackground(): Promise<string> {
+    const storageResponse = await browser.storage.local.get(
+        "topSitesBackground"
+    );
+    if (storageResponse.topSitesBackground !== "dark") {
+        return "light";
+    } else {
+        return "dark";
+    }
+}
+
+async function toggleTopSiteBackground(): Promise<string> {
+    const currentBackground = await getTopSiteBackground();
+    let newBackground = "";
+
+    if (currentBackground === "dark") {
+        newBackground = "light";
+    } else {
+        newBackground = "dark";
+    }
+
+    browser.storage.local.set({ topSitesBackground: newBackground });
+    return newBackground;
+}
+
 async function getTopSiteValue(): Promise<boolean> {
     await getTopSiteContainer();
 
@@ -341,11 +387,15 @@ function unloadTopSites(): void {
     }
 }
 
-function loadTopSites(): void {
+async function loadTopSites(): Promise<void> {
     if (topSitesContainer) {
         const linkClassNames =
             topSitesContainer.id === "topSitesCenter"
-                ? "p-4 bg-black bg-opacity-75 rounded-lg"
+                ? `p-4 bg-opacity-75 rounded-lg ${
+                      (await getTopSiteBackground()) === "dark"
+                          ? "bg-black"
+                          : "bg-gray-700"
+                  }`
                 : "";
         const imgClassNames =
             topSitesContainer.id === "topSitesCenter" ? "w-8" : "w-6";

diff --git a/src/template.html b/src/template.html
@@ -208,6 +208,15 @@
                             />
                         </div>
 
+                        <div class="flex pt-1">
+                            <span class="flex-grow"> Dark Top Sites Background </span>
+                            <input
+                                id="top-sites-dark-background-switch"
+                                class="flew-grow-0 inline-block"
+                                type="checkbox"
+                            />
+                        </div>
+
                         <div id="new-background-button" class="flex pt-1">
                             <div class="inline-flex">
                                 <span class="mr-3"> Refresh Background </span>