Fix #54 - Allow specifying custom night mode times

nt1m · Jun 2, 2018 · 0cc9c12 · 0cc9c12
1 parent f0e1e4b
commit 0cc9c12
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 22 deletions.
diff --git a/background/addon-state.js b/background/addon-state.js
@@ -64,7 +64,6 @@ class AddonState {
         // await browser.tabs.sendMessage(tabId, {hi: "hi"});
         await browser.tabs.executeScript(tabId, {code: "'hi';"});
       } catch (e) {
-        console.log(e);
         let color = false;
         let baseColor = await findBaseColor(tab);
         if (baseColor) {
@@ -83,6 +82,10 @@ class AddonState {
     this.refreshAddon = async () => {
       onInit();
 
+      browser.alarms.create(
+        "nightToggle", { when: (await firstAlarm()) }
+      );
+
       await new Promise(r => setTimeout(r, 400));
 
       let tabs = await browser.tabs.query({ active: true });
@@ -101,31 +104,45 @@ class AddonState {
     Settings.onChanged(this.refreshAddon);
     browser.windows.onFocusChanged.addListener(onWindowFocusChange);
 
-    browser.alarms.create(
-      "nightToggle",
-      {
-        when: firstAlarm(),
-        periodInMinutes: (NIGHTMODE_EVENING - NIGHTMODE_MORNING) * 60,
-      }
-    );
-    browser.alarms.onAlarm.addListener(({name}) => {
+    (async () => {
+      browser.alarms.create(
+        "nightToggle", { when: (await firstAlarm()) }
+      );
+    })();
+    browser.alarms.onAlarm.addListener(async ({name}) => {
       if (name === "nightToggle") {
         onNightMode();
+        browser.alarms.create(
+          "nightToggle", { when: (await firstAlarm()) }
+        );
       }
     });
     onInit();
   }
 }
 
-function firstAlarm() {
+async function firstAlarm() {
   let now = new Date(Date.now());
   let then = new Date(Date.now());
-  if (now.getHours() >= NIGHTMODE_EVENING) {
-    then.setHours(24 + NIGHTMODE_MORNING);
-  } else if (now.getHours() < NIGHTMODE_MORNING) {
-    then.setHours(NIGHTMODE_MORNING);
+  let nightModeStart = await Settings.getNightModeStart();
+  let nightModeEnd = await Settings.getNightModeEnd();
+
+  if (nightModeStart > nightModeEnd) {
+    if (now.getHours() >= nightModeStart) {
+      then.setHours(24 + nightModeEnd);
+    } else if (now.getHours() < nightModeEnd) {
+      then.setHours(nightModeEnd);
+    } else {
+      then.setHours(nightModeStart);
+    }
   } else {
-    then.setHours(NIGHTMODE_EVENING);
+    if (now.getHours() >= nightModeEnd) {
+      then.setHours(24 + nightModeStart);
+    } else if (now.getHours() < nightModeStart) {
+      then.setHours(nightModeStart);
+    } else {
+      then.setHours(nightModeEnd);
+    }
   }
   then.setMinutes(0);
   then.setSeconds(0);

diff --git a/background/background.js b/background/background.js
@@ -15,13 +15,26 @@ async function setColor({id, windowId}, tabColorMap) {
   }
 }
 
+async function isDayMode() {
+  let date = new Date(Date.now());
+  let nightModeStart = await Settings.getNightModeStart();
+  let nightModeEnd = await Settings.getNightModeEnd();
+
+  if (nightModeStart > nightModeEnd) {
+    return date.getHours() >= nightModeEnd &&
+           date.getHours() < nightModeStart;
+  } else {
+    return date.getHours() < nightModeStart ||
+           date.getHours() >= nightModeEnd;
+  }
+}
+
 new AddonState({
   async onInit() {
     let themes = await Settings.getThemes();
-    let date = new Date(Date.now());
 
     let selectedTheme;
-    if (date.getHours() >= NIGHTMODE_MORNING && date.getHours() < NIGHTMODE_EVENING) {
+    if (await isDayMode()) {
       selectedTheme = await Settings.getDefaultTheme();
     } else {
       selectedTheme = await Settings.getNightTheme();

diff --git a/options/components/input.js b/options/components/input.js
@@ -0,0 +1,26 @@
+"use strict";
+
+/* exported Checkbox */
+
+const Input = createFactory(class extends Component {
+  componentDidUpdate() {
+    if (this.refs.input.value !== this.props.defaultValue) {
+      this.refs.input.value = this.props.defaultValue;
+    }
+  }
+  render() {
+    let {defaultValue, onChange, type, min, max} = this.props;
+    return createElement("input", {
+      type,
+      defaultValue,
+      onChange: (e) => {
+        if (e.target.reportValidity()) {
+          onChange(e);
+        }
+      },
+      min,
+      max,
+      ref: "input"
+    });
+  }
+});
diff --git a/options/components/options.js b/options/components/options.js
@@ -7,6 +7,8 @@ function Options({ settings: {
   colorSource,
   defaultTheme,
   nightTheme,
+  nightModeStart,
+  nightModeEnd,
   whiteBackgroundFavicons,
   pageColorsOnInactive,
   usePageDefinedColors,
@@ -18,7 +20,7 @@ function Options({ settings: {
       component: ThemeEditor(themes[theme], Object.keys(themes).length > 1),
     };
   });
-  let nightThemeDesc = "The night theme is enabled from 8pm to 8am. " +
+  let nightThemeDesc =
     "To disable this feature, choose the same theme as the default theme.";
   let pageColorDesc = "Select where the page color is extracted from:";
   return createElement("div", {},
@@ -32,9 +34,32 @@ function Options({ settings: {
         }
       }),
       createElement("h2", {}, "Night theme"),
+      createElement("p", { className: "disabled" },
+        createElement("span", {}, "Enable from "),
+        Input({
+          defaultValue: nightModeStart,
+          type: "number",
+          min: 0,
+          max: 23,
+          onChange: ({ target }) => {
+            app.actions.setNightModeStart(target.value);
+          }
+        }),
+        createElement("span", {}, "h to "),
+        Input({
+          defaultValue: nightModeEnd,
+          type: "number",
+          min: 0,
+          max: 23,
+          onChange: ({ target }) => {
+            app.actions.setNightModeEnd(target.value);
+          }
+        }),
+        createElement("span", {}, "h. " + nightThemeDesc),
+      ),
       createElement("p", {
         className: "disabled"
-      }, nightThemeDesc),
+      }, ),
       ThemeSelect({
         themes,
         defaultValue: nightTheme,

diff --git a/options/options.css b/options/options.css
@@ -26,6 +26,14 @@ p {
   text-align: start;
 }
 
+p > input {
+  font: inherit;
+  border: 0;
+  width: 2ch;
+  -moz-appearance: textfield;
+  border-bottom: 1px solid currentColor;
+}
+
 .header {
   position: sticky;
   top: 0;
@@ -56,6 +64,9 @@ p {
 
 .disabled {
   opacity: 0.5;
+}
+
+.disabled:not(p) {
   pointer-events: none;
 }
 
@@ -98,7 +109,7 @@ section {
   width: 100%;
   position: absolute;
   bottom: 0;
-  left: 0;  
+  left: 0;
 }
 
 .tabs li.selected a {
@@ -108,7 +119,7 @@ section {
   transform: none;
 }
 
-/* 
+/*
 .browser {
   border: 1px solid rgba(12, 12, 13, 0.3);
   font: message-box;

diff --git a/options/options.html b/options/options.html
@@ -14,7 +14,7 @@ <h1><span class="icon"></span>VivaldiFox Options</h1>
   <div id="app">
 
   </div>
-  <section id="about" class="card">    
+  <section id="about" class="card">
     <h1>About</h1>
     <p>This add-on was created by <a href="https://twitter.com/therealntim">Tim Nguyen</a>.</p>
     <p>You can support the add-on by: </p>
@@ -30,6 +30,7 @@ <h1>About</h1>
   <script src="options.js"></script>
   <script src="components/theme-select.js"></script>
   <script src="components/select.js"></script>
+  <script src="components/input.js"></script>
   <script src="components/slider.js"></script>
   <script src="components/checkbox.js"></script>
   <script src="components/section.js"></script>

diff --git a/options/options.js b/options/options.js
@@ -17,6 +17,8 @@ async function init() {
         themes: processThemes(await Settings.getThemes()),
         defaultTheme: await Settings.getDefaultTheme(),
         nightTheme: await Settings.getNightTheme(),
+        nightModeStart: await Settings.getNightModeStart(),
+        nightModeEnd: await Settings.getNightModeEnd(),
         pageColorsOnInactive: await Settings.getPageColorsOnInactive(),
         whiteBackgroundFavicons: await Settings.getWhiteBackgroundFavicons(),
         colorSource: await Settings.getColorSource(),
@@ -65,6 +67,14 @@ async function init() {
         this.state.settings.nightTheme = name;
         Settings.setNightTheme(name);
       },
+      setNightModeStart(time) {
+        this.state.settings.nightModeStart = time;
+        Settings.setNightModeStart(time);
+      },
+      setNightModeEnd(time) {
+        this.state.settings.nightModeEnd = time;
+        Settings.setNightModeEnd(time);
+      },
       setThemeProperty(theme, type, property, value) {
         let {themes} = this.state.settings;
         themes[theme].properties[type][property] = value;

diff --git a/shared/settings.js b/shared/settings.js
@@ -48,6 +48,12 @@ const Settings = {
   getNightTheme() {
     return getSetting("nightTheme", "light");
   },
+  getNightModeStart() {
+    return getSetting("nightModeStart", 20);
+  },
+  getNightModeEnd() {
+    return getSetting("nightModeEnd", 8);
+  },
   getPageColorsOnInactive() {
     return getSetting("pageColorsOnInactive", true);
   },
@@ -72,6 +78,12 @@ const Settings = {
   setNightTheme(theme) {
     setSetting("nightTheme", theme);
   },
+  setNightModeStart(time) {
+    setSetting("nightModeStart", time);
+  },
+  setNightModeEnd(time) {
+    setSetting("nightModeEnd", time);
+  },
   setPageColorsOnInactive(value) {
     setSetting("pageColorsOnInactive", value);
   },