Add optional progress bar to lists

* Progress bars are disabled by default
* Add config setting to make nav bar compact
* Refactor Settings component

Author: JuanKman94

assets/components.js

@@ -9,10 +9,11 @@ window.LIST_EVENTS = {
   DELETE: 'list:delete',
 }
 
-function dispatchTaskEvent(eventName, task, isDone) {
+function dispatchTaskEvent(eventName, task, isDone, target) {
+  target = target || document
   const taskChangeEvent = new CustomEvent(eventName, { detail: { task: task, done: isDone } })
 
-  document.dispatchEvent(taskChangeEvent)
+  target.dispatchEvent(taskChangeEvent)
 }
 
 /**
@@ -32,7 +33,7 @@ class TaskControl extends HTMLElement {
 
   get form() { return this.querySelector('form') }
 
-  get taskCategory() { return Sortable.utils.closest(this, `.${TaskCategory.TAG}`) }
+  get taskCategory() { return Sortable.utils.closest(this, TaskCategory.TAG) }
 
   setup() {
     this.on(this.form, 'submit', this._submitHandler.bind(this))
@@ -46,6 +47,7 @@ class TaskControl extends HTMLElement {
 
     taskItem = this.taskCategory.addTask(taskItem)
     dispatchTaskEvent(TASK_EVENTS.CHANGE, task, false)
+    dispatchTaskEvent(TASK_EVENTS.CHANGE, task, false, this.taskCategory)
 
     return taskItem
   }
@@ -94,6 +96,8 @@ class TaskItem extends HTMLElement {
 
   get task() { return this.getAttribute('name') }
 
+  get taskCategory() { return Sortable.utils.closest(this, TaskCategory.TAG) }
+
   setup() {
     if (this.hasAttribute('done') && this.getAttribute('done') !== 'false') {
       this.done = true
@@ -111,12 +115,14 @@ class TaskItem extends HTMLElement {
 
     // order here is important, bubble up event before changing internal state
     dispatchTaskEvent(TASK_EVENTS.CHANGE, this.name, checked)
+    dispatchTaskEvent(TASK_EVENTS.CHANGE, this.name, checked, this.taskCategory)
     this.done = checked
   }
 
   _deleteHandler() {
     this.remove()
     dispatchTaskEvent(TASK_EVENTS.DELETE, this.name)
+    dispatchTaskEvent(TASK_EVENTS.DELETE, this.name, checked, this.taskCategory)
   }
 }
 
@@ -142,6 +148,10 @@ class TaskCategory extends HTMLElement {
 
   get deleteButton() { return this.querySelector('.delete') }
 
+  get progress() { return this.querySelector('progress') }
+
+  get progressLabel() { return this.querySelector('.progress-label') }
+
   get name() { return this.getAttribute('name').trim() }
 
   get nameLabel() { return this.querySelector('.category--name') }
@@ -151,15 +161,10 @@ class TaskCategory extends HTMLElement {
   get tasksContainer() { return this.querySelector('.tasks-container') }
 
   get tasks() {
-    const _tasks = []
-
-    this.querySelectorAll(TaskItem.TAG)
-      .forEach((task) => _tasks.push({ done: !!task.done, name: task.name }))
-
-    return _tasks;
+    return Array.from(this.querySelectorAll(TaskItem.TAG))
+      .map(task => ({ done: !!task.done, name: task.name }))
   }
 
-
   static addList(target) {
     const listName = window.prompt(NEW_LIST_PROMPT)
 
@@ -179,6 +184,9 @@ class TaskCategory extends HTMLElement {
 
     this.on(this.colorPicker, 'change', this._colorChangeHandler.bind(this))
     this.on(this.deleteButton, 'click', this._deleteHandler.bind(this))
+    this.on(this, TASK_EVENTS.CHANGE, this._updateProgress.bind(this))
+    this.on(this, TASK_EVENTS.DELETE, this._updateProgress.bind(this))
+    this._updateProgress()
   }
 
   addTask(taskItem) {
@@ -196,6 +204,18 @@ class TaskCategory extends HTMLElement {
       document.dispatchEvent(new CustomEvent(LIST_EVENTS.DELETE, { detail: { name: this.name } }))
     }
   }
+
+  _updateProgress(ev) {
+    // give a few milliseconds to the browser to update elements
+    window.setTimeout(() => {
+      const _tasks = this.tasks
+      const doneAmount = _tasks.filter(task => task.done).length
+      const percent = (doneAmount / _tasks.length) * 100
+
+      this.progress.value = percent
+      this.progressLabel.textContent = `${percent.toFixed(2)}%`
+    }, 100)
+  }
 }
 
 class ColorPicker extends HTMLElement {
@@ -268,11 +288,11 @@ class ColorPicker extends HTMLElement {
   }
 }
 
-class BackendSettings extends HTMLElement {
+class TodoSettings extends HTMLElement {
   static EXTENDED_ELEMENT = 'article'
-  static TAG = 'backend-settings'
-  static TEMPLATE_ID = 'backendsettings-template'
-  static BACKEND_CHANGE_EVENT = 'backend:change'
+  static TAG = 'todo-settings'
+  static TEMPLATE_ID = 'todo-settings-template'
+  static SETTINGS_CHANGE_EVENT = 'settings:change'
 
   get form() { return this.querySelector('form') }
 
@@ -288,6 +308,9 @@ class BackendSettings extends HTMLElement {
   get passphrase() { return this.querySelector('form textarea[name=backend_passphrase]') }
   set passphrase(newVal) { this.querySelector('form textarea[name=backend_passphrase]').value = newVal }
 
+  get navCompact() { return this.querySelector('#nav_compact') }
+  get tasksProgress() { return this.querySelector('#tasks_progress') }
+
   /**
    * Setup controls reactivity:
    *
@@ -300,10 +323,9 @@ class BackendSettings extends HTMLElement {
    */
   setup() {
     this.setupAutoStorage()
-    this.on(this.url, 'input', this._inputHandler.bind(this))
-    this.on(this.username, 'input', this._inputHandler.bind(this))
-    this.on(this.passphrase, 'input', this._inputHandler.bind(this))
-    this.on(this.enabled, 'input', this._inputHandler.bind(this))
+    Array.from(this.querySelectorAll('input')).forEach((el) => {
+      this.on(el, 'input', this._inputHandler.bind(this))
+    })
     this.on(this.form, 'submit', this._submitHandler.bind(this))
   }
 
@@ -324,16 +346,33 @@ class BackendSettings extends HTMLElement {
 
   emitConfig() {
     const payload = {
-      url: this.url.value,
-      username: this.username.value,
-      passphrase: this.passphrase.value,
-      enabled: !!this.enabled.checked,
+      backend: {
+        enabled: !!this.enabled.checked,
+        passphrase: this.passphrase.value,
+        username: this.username.value,
+        url: this.url.value,
+      },
+      nav: {
+        compact: this.navCompact.checked,
+      },
+      tasks: {
+        progress: this.tasksProgress.checked,
+      },
     }
-    const newEv = new CustomEvent(this.constructor.BACKEND_CHANGE_EVENT, { detail: payload })
+    const newEv = new CustomEvent(this.constructor.SETTINGS_CHANGE_EVENT, { detail: payload })
 
     document.dispatchEvent(newEv)
   }
 
+  applyConfig(config) {
+    this.enabled = config.backend?.enabled
+    this.passphrase = config.backend?.passphrase
+    this.url = config.backend?.url
+    this.username = config.backend?.username
+    this.navCompact.checked = !!config.nav?.compact
+    this.tasksProgress.checked = !!config.tasks?.progress
+  }
+
   _inputHandler(ev) {
     this.emitConfig()
   }
@@ -411,7 +450,7 @@ class LogMessage extends HTMLElement {
 
 function defineComponents() {
   const components = [
-    BackendSettings,
+    TodoSettings,
     ColorPicker,
     LogMessage,
     TaskCategory,

assets/lib.js

@@ -16,6 +16,21 @@ const INITIAL_STATE = {
   ]
 }
 
+const INITIAL_SETTINGS = {
+  backend: {
+    enabled: false,
+    passphrase: null,
+    username: null,
+    url: null
+  },
+  nav: {
+    compact: false
+  },
+  tasks: {
+    progress: false
+  }
+}
+
 // https://javascript.info/mixins
 // Object.assign(ComponentClass, CustomElementStaticMixin)
 const CustomElementStaticMixin = {
@@ -344,6 +359,17 @@ class StateManager {
     StateManager.persistState(newState)
     return StateManager.loadState()
   }
+
+  static settings() {
+    const storageState = localStorage.getItem('todoSettings')
+    const settings = storageState ? JSON.parse(storageState) : INITIAL_SETTINGS
+
+    return settings
+  }
+
+  static persistSettings(settings) {
+    localStorage.setItem('todoSettings', JSON.stringify(settings))
+  }
 }
 
 function serializeString(str) {

assets/main.js

@@ -118,21 +118,12 @@ function init(ev) {
   if (window.DEBUG_MODE)
     setupDebugControls()
 
-  function stateUpdated() {
-    const newState = StateManager.updateState()
-    setupSortable()
-
-    postToBackend(newState)
-  }
-
   document.addEventListener(LIST_EVENTS.CHANGE, stateUpdated)
   document.addEventListener(LIST_EVENTS.DELETE, ev => { removeListLink(ev) ; stateUpdated() })
   document.addEventListener(TASK_EVENTS.CHANGE, stateUpdated)
   document.addEventListener(TASK_EVENTS.DELETE, stateUpdated)
 
-  document.addEventListener(BackendSettings.BACKEND_CHANGE_EVENT, (ev) => {
-    window.backendClient = new BackendClient(ev.detail.url, ev.detail.username, ev.detail.passphrase, ev.detail.enabled)
-  })
+  document.addEventListener(TodoSettings.SETTINGS_CHANGE_EVENT, (ev) => applySettings(ev.detail))
 
   document.querySelector('.new-list')?.addEventListener('click', ev => {
     const listName = TaskCategory.addList(document.getElementById('lists'))
@@ -147,9 +138,47 @@ function init(ev) {
   )
   document.querySelector('#import_json')?.addEventListener('change', importJson)
 
+  const todoSettings = document.querySelector(TodoSettings.TAG)
+  const config = StateManager.settings()
+
   StateManager.loadState()
+  applySettings(config)
+
   window.backendClient.get()
   setupSortable()
+
+  if (todoSettings) {
+    todoSettings.applyConfig(config)
+  }
+}
+
+function stateUpdated() {
+  const newState = StateManager.updateState()
+  setupSortable()
+
+  postToBackend(newState)
+}
+
+function applySettings(config) {
+  const backend = config.backend
+
+  StateManager.persistSettings(config)
+
+  window.backendClient = new BackendClient(backend.url, backend.username, backend.passphrase, backend.enabled)
+
+  if (config.nav) {
+    if (config.nav.compact)
+      document.body.classList.add('config--nav-compact')
+    else
+      document.body.classList.remove('config--nav-compact')
+  }
+
+  if (config.tasks) {
+    if (config.tasks.progress)
+      document.body.classList.add('config--tasks-progress')
+    else
+      document.body.classList.remove('config--tasks-progress')
+  }
 }
 
 function importJson(importEv) {

assets/styles.css

@@ -26,7 +26,7 @@
   --danger: #D54F4F;
   --link-color: var(--yellow);
 
-  --bottomnav-height: 3.5rem;
+  --bottomnav-height: 4.5rem;
   --bg-navbar: #404040;
 
   --card-padding: 0.75rem;
@@ -312,9 +312,14 @@ task-control {
   margin: -1.75rem auto 0;
 
   background-image: url(sticky-tape.png);
+  background-repeat: no-repeat;
   width: 8rem;
   height: 2rem;
   content: '';
+  transform: rotate(-4deg);
+}
+.task-category:nth-child(even)::before {
+  transform: rotate(4deg);
 }
 task-category:not(:first-child),
 .task-category:not(:first-child) {
@@ -326,6 +331,10 @@ task-category:not(:first-child),
   padding: 0.75rem;
 }
 
+.task-category .progress-container {
+  display: none;
+}
+
 .task-list .task-list--title,
 .task-category .task-category--title {
   font-size: 1.2rem;
@@ -398,6 +407,10 @@ task-item .delete,
   flex-grow: 1;
 }
 
+fieldset {
+  border-radius: 2px;
+}
+
 .field {
   margin-bottom: 0.75rem;
 }
@@ -583,11 +596,25 @@ input#import_json {
 /***** width *****/
 .max-w-10r { max-width: 10rem; }
 .container { margin: 0 auto; max-width: 90vw; }
+.w-full { width: 100%; }
 
 .block { display: block; }
 .inline-block { display: inline-block; }
 .white-space-none { white-space: none; }
 
+/***** settings/config *****/
+
+body.config--nav-compact {
+  --bottomnav-height: 3.5rem;
+}
+
+body.config--tasks-progress task-category .progress-container {
+  display: flex;
+  align-items: align-center;
+}
+
+/***** fonts *****/
+
 @font-face {
   font-family: 'xkcd';
   src: url('fonts/xkcd.otf');