adds an on-page settings screen

- the old settings screen doesn't work now

Author: robacarp

web_extension/assets/gear.svg

@@ -3,21 +3,15 @@
 import Builder from '../../shared/lib/builder.js'
 import Storage from '../../shared/storage_manager.js'
 import StartPage from '../../shared/start-page/start-page.js'
-import SettingsPage from '../../shared/settings_page/index.js'
+import SettingsPage from '../../shared/settings-page/settings-page.js'
 import InfoBox from '../../shared/info-box/info-box.js'
 import ImageChooser from '../../shared/image_chooser.js'
+import Version from '../../shared/version.js'
 
 // Setup the event listener for when local storage is changed
 const display_options = Storage.display
 const chooser = new ImageChooser()
 
-let option_read_timeout = 0
-
-browser.storage.onChanged.addListener(() => {
-  clearTimeout(option_read_timeout)
-  option_read_timeout = setTimeout(() => display_options.read(), 150)
-})
-
 // Switches between images
 async function loadImage(historyOffset) {
   await chooser.sortHistory()
@@ -52,13 +46,14 @@ chooser.choose().then(image => {
   info_box.waitForReady(()=>{ info_box.image = image })
 })
 
+document.querySelector('body').appendChild(
+  Builder.tag('settings-page')
+).classList.add('hidden')
 
-// document.querySelector('body').appendChild(
-//   Builder.tag('settings-page')
-// )
-
-//   document.querySelector(selector).innerHTML = `<version>${Version.number}</version>`
+document.querySelector('body').appendChild(
+  Builder.tag('version', Version.number)
+)
 
 document.querySelector('#gear').addEventListener('click', ()  => {
-  document.querySelector('#settings-page').classList.toggle('hidden')
+  document.querySelector('settings-page').classList.toggle('hidden')
 })

web_extension/content/scripts/new_tab.js

@@ -43,6 +43,7 @@ a#gear {
   right: 0.5em;
   color: rgba(250, 250, 250, 0.4);
   user-select: none;
+  z-index: 1;
 }
 
 a#gear img {
@@ -67,7 +68,11 @@ settings-page {
   height: 100%;
   margin: 0 auto;
 
-  background-color: rgba(250, 250, 250, 0.5);
+  background-color: rgba(250, 250, 250, 0.7);
+}
+
+settings-page.hidden {
+  display: none;
 }
 
 start-page {

web_extension/content/styles/main.css

@@ -1,6 +1,8 @@
 :host { display: inline-block }
 body { margin: 0 }
 
+.hidden { display: none }
+
 bezel {
   padding: 0 1em;
   display: flex;

web_extension/shared/info-box/info-box.css

@@ -1,4 +1,4 @@
-<bezel class="subtle">
+<bezel class="hidden subtle">
   <clock>
     <time></time>
     <date></date>

web_extension/shared/info-box/info-box.html

@@ -0,0 +1,7 @@
+body {
+  font-size: 0.8rem;
+}
+
+#url {
+  width: 32em;
+}

web_extension/shared/settings-page/settings-page.css

@@ -84,5 +84,5 @@ <h3>Options:</h3>
 
 </form>
 <p>
-  The icon for Photographic Start is from the <a href="https://thenounproject.com/vectorsmarket/collection/hunt-solid-icons/">Hunt Solid Collection</a> by <a href="https://thenounproject.com/vectorsmarket/">Vectors Market</a> on <a href="https://thenounproject.com">The Noun Project</a>.
+  The icon for Start.Photos is from the <a href="https://thenounproject.com/vectorsmarket/collection/hunt-solid-icons/">Hunt Solid Collection</a> by <a href="https://thenounproject.com/vectorsmarket/">Vectors Market</a> on <a href="https://thenounproject.com">The Noun Project</a>.
 </p>

web_extension/shared/settings_page/settings_page.html web_extension/shared/settings-page/settings-page.html

@@ -0,0 +1,100 @@
+"use strict";
+
+import BaseComponent from '../lib/base-component.js'
+import Storage from '../../shared/storage_manager.js'
+
+export default class SettingsPage extends BaseComponent {
+  constructor() {
+    super()
+    this.attachCSS('../shared/settings-page/settings-page.css')
+    this.attachHTML('../shared/settings-page/settings-page.html')
+  }
+
+  readyCallback () {
+    this.read()
+
+    const inputEvent = (event) => {
+      this.write()
+      this.hideAndShowThings()
+    }
+
+    for (let input of this.shadowRoot.querySelectorAll("input,select")) {
+      input.addEventListener('change', inputEvent)
+    }
+  }
+
+  hideAndShowThings() {
+    const hideIfChecked = async (checkboxes, toggled_control) => {
+      let visible = false
+      checkboxes = [].concat(checkboxes)
+
+      for (let box_id of checkboxes)
+        visible = visible || this.shadowRoot.querySelector(box_id).checked
+
+      for (let element of this.shadowRoot.querySelectorAll(toggled_control))
+        element.style.display = visible ? "" : "none"
+    }
+
+    hideIfChecked('#show_clock',  '.hide_unless_clock')
+    hideIfChecked('#show_date',   '.hide_unless_date')
+    hideIfChecked('#custom_feed', '.hide_unless_custom_feed')
+  }
+
+  fillDateFormats() {
+    const date_format = this.shadowRoot.querySelector("#date_format")
+    date_format.querySelectorAll('option').forEach(o => o.remove())
+
+    let today = new Date()
+    date_format.appendChild(Builder.option(terse_date(today), "good"))
+    date_format.appendChild(Builder.option(verbose_date(today), "bad"))
+  }
+
+  get checks () {
+    return this.shadowRoot.querySelectorAll('input[type=checkbox]')
+  }
+
+  get selects () {
+    return this.shadowRoot.querySelectorAll('select')
+  }
+
+  get texts () {
+    return this.shadowRoot.querySelectorAll('input[type=text]')
+  }
+
+  async read () {
+    await Storage.ensureRead()
+
+    for (let check_box of this.checks)
+      if (check_box.dataset.namespace) {
+        check_box.checked = Storage[check_box.dataset.namespace][check_box.id]
+    }
+
+    for (let select_box of this.selects)
+      if (select_box.dataset.namespace)
+        for (let option of select_box.options)
+          option.selected = (
+            option.value == Storage[select_box.dataset.namespace][select_box.id]
+          )
+
+    for (let text_box of this.texts)
+      text_box.value = Storage[text_box.dataset.namespace][text_box.id]
+  }
+
+  async write () {
+    for (let check_box of this.checks)
+      if (check_box.dataset.namespace)
+        Storage[check_box.dataset.namespace][check_box.id] = check_box.checked
+
+    for (let select_box of this.selects)
+      if (select_box.dataset.namespace)
+        Storage[select_box.dataset.namespace][select_box.id] = select_box.value
+
+    for (let text_box of this.texts)
+      Storage[text_box.dataset.namespace][text_box.id] = text_box.value
+
+    return Promise.all([Storage.display.write(), Storage.feed.write()])
+  }
+}
+
+customElements.define('settings-page', SettingsPage)
+