Merge pull request #3 from ryoyakawai/uienhance

tweak: options page, bug fix: around chrome storage
ryoyakawai · Aug 5, 2018 · 7d28355 · 7d28355
2 parents 64819e6 + e09ea03
commit 7d28355
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 21 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Timezone Clocks",
-    "version": "1.0.11",
+    "version": "1.0.14",
     "description": "Display Multibple Timezone at once",
     "permissions": [
         "storage",

diff --git a/src/options.html b/src/options.html
@@ -49,8 +49,9 @@
        flex-direction: column;
        align-items: center;
        justify-content: center;
-       border: 1px solid #efefef;
+       border: 2px solid rgba(255, 255, 255, 0);
        border-radius: 3px;
+       transition: 0.2s;
      }
      .disp-as-icon {
        border: 2px solid #00BCD4;
@@ -59,6 +60,7 @@
        font-weight: bold;
      }
      .dummy-inner-container {
+       width:700px;
        opacity: 0.5;
        transition: 0.6s;
      }

diff --git a/src/scripts/background.js b/src/scripts/background.js
@@ -32,11 +32,20 @@ chrome.runtime.onInstalled.addListener(function() {
     };
 
     async function updateIconClock() {
-        let onTick = () => {};
-        const cutils = new ChromeUtils();
+          let onTick = () => {};
+          const cutils = new ChromeUtils();
 
-        async function dispDateTime() {
+          async function dispDateTime() {
             let tzConfig = await cutils.storageGet(config.storage_name);
+            if(typeof tzConfig == 'undefined') {
+              await cutils.storageSet(config.storage_name, [config.defaultsetting]);
+              tzConfig = await cutils.storageGet(config.storage_name);
+            }
+
+            if(typeof tzConfig == 'undefined') {
+              console.log(config.defaultsetting, config.storage_name);
+              await cutils.storageSet(config.storage_name, tzConfig);
+            }
             let zone = tzConfig[0].zone;
             for(let idx in tzConfig) {
                 if(tzConfig[idx].dispicon === true) {

diff --git a/src/scripts/config.js b/src/scripts/config.js
@@ -1,4 +1,4 @@
-const _STORAGE_NAME_ = 'tzConfig';
+const _STORAGE_NAME_ = 'tzConfigAAAAAAAAAA';
 const _CLOCLFACE_WIDTH_ = 80;
 const _ICONSIZE_ = 19;
 const _CLOCKMAX_ = 8;
@@ -8,7 +8,7 @@ const _DEFAULTSETTING_ =  {
     elemId: null,
     persistent: false,
     zoneLabel:"London / +1:00",
-    dispicon: true
+    dispicon: false
 };
 
 // -------------------------

diff --git a/src/scripts/options.js b/src/scripts/options.js
@@ -298,6 +298,7 @@ import config from './config.js';
     div_clock.classList.add('clockface');
     div_clock.id = `clock_face_${idx}`;
     let loading = document.createElement('img');
+    loading.id = 'loading-image';
     loading.src='./images/loading01.gif';
     loading.width = 20;
     div_clock.appendChild(loading);
@@ -315,8 +316,8 @@ import config from './config.js';
     clock_preview.appendChild(div_d_time);
     clock_preview.appendChild(div_date);
 
-    timezone_container_p.appendChild(timezone_container);
     timezone_container_p.appendChild(clock_preview);
+    timezone_container_p.appendChild(timezone_container);
 
     clockorder.appendChild(span03);
     clockorder.appendChild(order_down);
@@ -346,7 +347,9 @@ import config from './config.js';
   async function createSettingItems(item) {
     let tzConfig = await cutils.storageGet(config.storage_name);
     let main = document.querySelector('#main');
+    let check_dispasicon = false;
     for(let idx in tzConfig) {
+      if(tzConfig[idx].dispicon === true) check_dispasicon = true;;
       let elem = await createEditBLock(idx, tzConfig);
       main.appendChild(elem);
 
@@ -357,6 +360,7 @@ import config from './config.js';
 
       async function onTick(tzConfig) {
         let elem = document.querySelector(`#clock-preview_${idx}`);
+        if(elem == null) return;
         let e_name = elem.querySelector('#clock_name');
         let e_face = elem.querySelector(`#clock_face_${idx}`);
         let e_date = elem.querySelector('#clock_date');
@@ -372,13 +376,28 @@ import config from './config.js';
         if(tzConfig[idx].dispicon === true) elem.classList.add('disp-as-icon');
 
         let clock_preview_id = `clock_face_${idx}`;
-        e_name.innerHTML = name;
-        e_face.innerHTML = '';
-        tzc.drawClock(time, clock_preview_id, config.clockface_width/2, 'default');
-        e_date.innerHTML = disp_date;
-        e_time.innerHTML = disp_time;
+        if(elem.querySelector('#loading-image') !== null) {
+          elem.style.setProperty('opacity', '0');
+          setTimeout(() => {
+            e_face.innerHTML = '';
+            tzc.drawClock(time, clock_preview_id, config.clockface_width/2, 'default');
+          }, 100);
+        } else {
+          e_name.innerHTML = name;
+          e_face.innerHTML = '';
+          e_date.innerHTML = disp_date;
+          e_time.innerHTML = disp_time;
+          tzc.drawClock(time, clock_preview_id, config.clockface_width/2, 'default');
+          elem.style.setProperty('opacity', '1');
+        }
       }
     }
+    // set default of dispasicon selection
+    if(check_dispasicon == false) {
+      document.querySelector('#display-as-icon_0').setAttribute('checked', 'checked');
+      tzConfig[0].dispicon = true;
+      await cutils.storageSet(config.storage_name, tzConfig);
+    }
 
     if(typeof item == 'object' && parseInt(item.idx) < tzConfig.length) {
       let idx = item.idx = parseInt(item.idx);
@@ -387,9 +406,11 @@ import config from './config.js';
         let nextElem = document.querySelector(`#timezone_${idx}`);
         let dummyBlock = document.createElement('div');
         dummyBlock.id = 'dummy-inner-container';
-        dummyBlock.classList.add('timezone-container', 'dummy-inner-container');
+        dummyBlock.classList.add('dummy-inner-container');
         dummyBlock.innerHTML = nextElem.innerHTML;
-        nextElem.parentNode.insertBefore(dummyBlock, nextElem);
+        //nextElem.parentNode.insertBefore(dummyBlock, nextElem);
+        nextElem.parentNode.parentNode.insertBefore(dummyBlock, nextElem.parentNode);
+        console.log(nextElem.parentNode.parentNode,nextElem.parentNode, nextElem);
         setTimeout(() => {
           dummyBlock.style.setProperty('opacity', '0');
         }, 10);

diff --git a/src/scripts/popup.js b/src/scripts/popup.js
@@ -19,13 +19,13 @@ import TimezoneClock from './timezoneclock.js';
 import config from './config.js';
 
 (async function(){
-    const _ELEMPRE_ = 'clock_';
-    const tzc = new TimezoneClock();
-    let onTick = () => {};
-    const cutils = new ChromeUtils();
-    let tzConfig = await cutils.storageGet(config.storage_name);
+  const _ELEMPRE_ = 'clock_';
+  const tzc = new TimezoneClock();
+  let onTick = () => {};
+  const cutils = new ChromeUtils();
+  let tzConfig = await cutils.storageGet(config.storage_name);
 
-    const dispDateTime = async(iconUpdate) => {
+  const dispDateTime = async(iconUpdate) => {
         for(let i in tzConfig) {
             let zone = tzConfig[i].zone;
             let elemId = tzConfig[i].elemId;