feat: Option to choose different emojis - plumbing (#15)

lib/AddonBase.js

@@ -8,6 +8,8 @@ export const DEFAULTS = {
   blockList: [],
   comment: { text: '' },
   duration: 10, // minutes.
+  emoji: '🌲',
+  emojiId: 'evergreen_tree',
   isRunning: false
   // , log: []
 };
@@ -76,6 +78,20 @@ export class AddonBase {
     this._value = `${minutes}:${seconds}`;
     return this._value;
   }
+
+  _attachTemplate (elem, templateHtml, attachShadow = true) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(templateHtml, 'text/html');
+
+    const template = doc.querySelector('template');
+    const docFragment = template.content.cloneNode(true);
+
+    if (attachShadow) {
+      elem.attachShadow({ mode: 'open' }).appendChild(docFragment);
+    } else {
+      elem.appendChild(docFragment);
+    }
+  }
 }
 
 export default AddonBase;

lib/Icons.js

@@ -27,7 +27,7 @@ export const EMOJI = [
     codepoint: 'U+1F36B'
   }, {
     name: 'Hot drink',
-    phrase: 'Have a hot drink!',
+    phrase: 'Have a drink!',
     emoji: '☕',
     code: 'hot_beverage',
     codepoint: 'U+2615'
@@ -49,6 +49,18 @@ export const EMOJI = [
     emoji: '🚶',
     code: 'person_walking',
     codepoint: 'U+1F6B6'
+  }, {
+    name: 'Bicycle',
+    phrase: 'Ride a bike!',
+    emoji: '🚲',
+    code: 'bicycle',
+    codepoint: 'U+1F6B2'
+  }, {
+    name: 'Boat',
+    phrase: 'Sail a boat!',
+    emoji: '⛵',
+    code: 'sailboat',
+    codepoint: 'U+26F5'
   }
 ];
 

lib/index.js

@@ -18,7 +18,7 @@ class PopupTimer /* was: TimerDisplay */ extends AddonBase {
   }
 
   async initializeState () {
-    const { comment, duration, isRunning } = await super._fromStorage();
+    const { comment, duration, emojiId, isRunning } = await super._fromStorage();
 
     this._form('comment').value = comment ? comment.text : '';
 
@@ -29,7 +29,8 @@ class PopupTimer /* was: TimerDisplay */ extends AddonBase {
       this._form('timer').value = super._formatTime(duration * 60);
     }
 
-    await this._importShowEmojiSVG();
+    await this._importShowEmojiSVG(emojiId);
+    console.debug('PT ~ state:', isRunning, emojiId, duration);
   }
 
   _form (name) {
@@ -97,10 +98,10 @@ class PopupTimer /* was: TimerDisplay */ extends AddonBase {
     myAudio.play();
   }
 
-  async _importShowEmojiSVG () {
+  async _importShowEmojiSVG (emojiId) {
     const icons = new Icons();
     await icons.importEmojiSVG();
-    this._emojiSvgElem.innerHTML = icons.findEmojiSVG('beans');
+    this._emojiSvgElem.innerHTML = icons.findEmojiSVG(emojiId);
   }
 }
 

lib/service-worker.js

@@ -19,16 +19,17 @@ const log = new Log();
 async function stopCallback (reason) {
   await offScreenAudio.play();
   dynamicIcon.stop();
-  const comment = await commentFromStorage();
-  await log.append({ type: 'timer:stop', reason, comment });
+  const { comment, emoji, emojiId } = await commentEtcFromStorage();
+  // const { emoji, emojiId } = await log._fromStorage();
+  await log.append({ type: 'timer:stop', reason, comment, emojiId, emoji });
 
   console.debug('stopCallback - timer:stopped');
 }
 
-async function commentFromStorage () {
-  const { comment } = await log._fromStorage();
+async function commentEtcFromStorage () {
+  const { comment, emoji, emojiId } = await log._fromStorage();
   await log._store({ comment: null });
-  return comment || { text: '' };
+  return { comment: (comment || { text: '' }), emoji, emojiId };
 }
 
 workerTimer.addStopCallback(stopCallback);

lib/worker/Log.js

@@ -7,6 +7,7 @@
  */
 
 import AddonBase from '../AddonBase.js';
+import Icons from '../Icons.js';
 
 export class Log extends AddonBase {
   /*
@@ -50,12 +51,16 @@ export class Log extends AddonBase {
           startISOtime = it.timeISO || it.time_fmt;
           break;
         case 'timer:stop':
-        case 'timer:stopped': // Drop-through.
+        case 'timer:stopped': { // Drop-through.
+          const { comment, emoji, emojiId, time } = it;
+          const { name, role } = this._emojiNameRole(emojiId);
           listItems.push(`
             <li><time dt>${this._fmtDate(startISOtime)}</time><comma>,</comma>
-            duration: <time dur>${this._duration(it.time, startTS)}</time><comma>,</comma>
-            <q>${it.comment ? it.comment.text : ''}</q></li>`);
+            dur: <time dur>${this._duration(time, startTS)}</time><comma>,</comma>
+            <q>${comment ? comment.text : ''}</q>
+            <x-emj role="${role}" title="${name}">${emoji || ''}</x-emj></li>`);
           break;
+        }
       }
     });
 
@@ -64,6 +69,13 @@ export class Log extends AddonBase {
     console.debug('Log:', log);
   }
 
+  _emojiNameRole (emojiId) {
+    if (!emojiId) return { name: '', role: '' };
+    const icons = new Icons();
+    const { name } = icons.find(emojiId);
+    return { name, role: 'img' };
+  }
+
   _formatTime (time) {
     let minutes = parseInt(time / 60, 10);
     let seconds = parseInt(time % 60, 10);

options/options.html

@@ -1,8 +1,10 @@
 <!doctype html>
 <html lang="en">
-
+  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
+
   <link rel="stylesheet" href="/assets/options.css">
 
   <title> Options &ndash; My Pomodoro </title>
@@ -18,6 +20,14 @@ <h2> Duration </h2>
     </p>
   </form>
 
+  <h2> Choose an emoji </h2>
+
+  <form id="emojiForm">
+    <p>
+      <label>Emoji <select name="emoji" X_size="3"></select></label>
+    </p>
+  </form>
+
   <h2> Block list </h2>
 
   <form id="blockListForm">

options/options.js

@@ -5,6 +5,7 @@
 */
 
 import { AddonBase, DEFAULTS } from '../lib/AddonBase.js';
+import Icons from '../lib/Icons.js';
 
 const DURATION = {
   default: DEFAULTS.duration, // new AddonBase()._defaults.duration,
@@ -17,33 +18,46 @@ class OptionsStorage extends AddonBase {
   attachDOM () {
     this._blockListForm = document.querySelector('#blockListForm');
     this._durationForm = document.querySelector('#durationForm');
+    this._emojiForm = document.querySelector('#emojiForm');
     this._resetStorageForm = document.querySelector('#resetStorageForm');
     this._userAgentElem = document.querySelector('#userAgent');
 
     console.assert(this._blockListForm);
     console.assert(this._durationForm);
+    console.assert(this._emojiForm);
     console.assert(this._resetStorageForm);
     console.assert(this._userAgentElem);
     this._userAgentElem.textContent = navigator.userAgent;
+
+    this._initializeEmojiForm();
+  }
+
+  _initializeEmojiForm () {
+    const icons = new Icons();
+    const optionsTemplate = `<template>${icons.getSelectOptions()}</template>`;
+    this._attachTemplate(this._emojiSelectElem, optionsTemplate, false);
   }
 
   get _blockListElem () { return this._blockListForm.elements.list; }
   get _durationElem () { return this._durationForm.elements.duration; }
+  get _emojiSelectElem () { return this._emojiForm.elements.emoji; }
 
   handleUserEvents () {
     this._blockListForm.addEventListener('submit', (ev) => this._blockListSubmitHandler(ev));
     this._blockListForm.addEventListener('reset', (ev) => this._blockListResetHandler(ev));
 
     this._durationElem.addEventListener('change', (ev) => this._durationChangeHandler(ev));
+    this._emojiSelectElem.addEventListener('change', (ev) => this._emojiChangeHandler(ev));
 
     this._resetStorageForm.addEventListener('reset', (ev) => this._resetStorageHandler(ev));
   }
 
   async fromStorage () {
-    const { blockList, duration } = await super._fromStorage();
+    const { blockList, duration, emojiId } = await super._fromStorage();
 
     this._blockListElem.value = (blockList || []).join('\n');
     this._durationElem.value = parseInt(duration);
+    this._emojiSelectElem.value = emojiId;
 
     console.debug('OptionsStorage ~ duration, blockList:', duration, blockList);
   }
@@ -94,6 +108,16 @@ class OptionsStorage extends AddonBase {
     console.debug('OS ~ duration change:', duration, ev);
   }
 
+  async _emojiChangeHandler (ev) {
+    const icons = new Icons();
+    const emojiId = ev.target.value;
+    const { emoji } = icons.find(emojiId);
+
+    await super._store({ emoji, emojiId });
+
+    console.debug('OS ~ emoji change:', emoji, ev);
+  }
+
   async _resetStorageHandler (ev) {
     ev.preventDefault();
 
@@ -117,4 +141,4 @@ optionsStorage.attachDOM();
 optionsStorage.handleUserEvents();
 optionsStorage.fromStorage();
 
-console.debug('>> options.js');
+console.debug('>> options.js', optionsStorage);