Merge pull request #64 from kabir-afk/migrating-to-service-worker

State Refactoring, Module Import, and UI Enhancements

SignItCoreContent.js

@@ -1,6 +1,14 @@
 // const { default: backgroundPage } = require("./background-script"); // to try
 
-var SignItCoreContent = function (banana) {
+var banana;
+(async()=>{
+  const sourceMap = new Map(
+    await chrome.runtime.sendMessage({ command: "getBanana" })
+  );
+  banana = { i18n: (msg) => sourceMap.get("fr")[msg] };
+})();
+
+var SignItCoreContent = function () {
   console.log("Passed trough ! :", banana)
   console.log("SignItCoreContent.js");
   // console.log("banana",banana) // -> Uncaught (in promise) Error: banana is not defined
@@ -13,32 +21,32 @@ var SignItCoreContent = function (banana) {
 			<div class="signit-popup-content">
         <div class="signit-panel-videos">
           <div class="signit-panel-videos signit-novideo">
-            <h2>Media:` +
-            /* ${ banana.i18n("si-overlay-coreContent-left-title") } */ `</h2>
-            Pas de video disponible.` + /* ${ banana.i18n("si-overlay-coreContent-left-novideo") } */`<br><br>
+            <h2>Media:
+            ${ banana.i18n("si-overlay-coreContent-left-title") }</h2>
+            Pas de video disponible.${ banana.i18n("si-overlay-coreContent-left-novideo") }<br><br>
           </div>
           <div class="signit-panel-videos signit-video"></div>
         </div>
 				<div class="signit-panel-separator"></div>
         <div class="signit-panel-definition">
           <div class="signit-panel-definition signit-definition">
-            <h2>Definition:` +
-            /* ${ banana.i18n("si-overlay-coreContent-right-title") } */ `</h2>
+            <h2>Definition:
+            ${ banana.i18n("si-overlay-coreContent-right-title") }</h2>
             <button id="video_toggle" >video?</button>
             <div class="signit-definition-text"></div>
             <div class="signit-definition-source">
-              <a href="https://fr` +
-          /* ${ banana.i18n("si-overlay-coreContent-right-wikt-iso") } */ `.wiktionary.org">voir sur Wiktionaire` +
-          /* ${ banana.i18n("si-overlay-coreContent-right-wikt-pointer") } */ `</a>
+              <a href="https://fr
+          ${ banana.i18n("si-overlay-coreContent-right-wikt-iso") }.wiktionary.org">voir sur Wiktionaire
+          ${ banana.i18n("si-overlay-coreContent-right-wikt-pointer") }</a>
             </div>
           </div>
           <div class="signit-panel-definition signit-loading">
             <img class="signit-loading-spinner" src="${browser.runtime.getURL(
               "icons/Spinner_font_awesome.svg"
             )}" width="40" height="40">
           </div>
-          <div class="signit-panel-definition signit-error">Pas définition disponible.` +
-          /* ${ banana.i18n("si-overlay-coreContent-right-error") } */ `</div>
+          <div class="signit-panel-definition signit-error">Pas définition disponible.
+          ${ banana.i18n("si-overlay-coreContent-right-error") }</div>
         </div>
 			</div>
 		</div>

popup/popup.css

@@ -223,28 +223,28 @@ html, body {
 }
 
 .oo-ui-icon-next {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQluZXh0Cgk8L3RpdGxlPgoJPHBhdGggZD0iTTcgMUw1LjYgMi41IDEzIDEwbC03LjQgNy41TDcgMTlsOS05eiIvPgo8L3N2Zz4K' );
+	background-image: url( '../icons/arrow-right-solid.svg' );
 }
 
 .oo-ui-icon-previous {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjx0aXRsZT5wcmV2aW91czwvdGl0bGU+PHBhdGggZD0iTTQgMTBsOSA5IDEuNC0xLjVMNyAxMGw3LjQtNy41TDEzIDF6Ii8+PC9zdmc+' );
+	background-image: url( '../icons/arrow-left-solid.svg' );
 }
 
 .oo-ui-icon-search {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlzZWFyY2gKCTwvdGl0bGU+Cgk8cGF0aCBkPSJNMTkgMTdsLTUuMTUtNS4xNWE3IDcgMCAxIDAtMiAyTDE3IDE5ek0zLjUgOEE0LjUgNC41IDAgMSAxIDggMTIuNSA0LjUgNC41IDAgMCAxIDMuNSA4eiIvPgo8L3N2Zz4K' );
+	background-image: url( '../icons/magnifying-glass-solid.svg' );
 }
 
 .oo-ui-icon-subtract {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjx0aXRsZT5zdWJ0cmFjdDwvdGl0bGU+PHBhdGggZD0iTTQgOWgxMnYySDR6Ii8+PC9zdmc+' );
+	background-image: url( '../icons/minus-solid.svg' );
 
 }
 
 .oo-ui-icon-add {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjx0aXRsZT5hZGQ8L3RpdGxlPjxwYXRoIGQ9Ik0xMSA5VjRIOXY1SDR2Mmg1djVoMnYtNWg1Vjl6Ii8+PC9zdmc+' );
+	background-image: url( '../icons/plus-solid.svg' );
 
 }
 
 .oo-ui-indicator-down {
-	background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjx0aXRsZT5kb3duPC90aXRsZT48cGF0aCBkPSJNMTAuMDg1IDIuOTQzTDYuMDUgNi44MDNsLTMuOTQ3LTMuODZMMS4wNSAzLjk5Nmw1IDUgNS01eiIvPjwvc3ZnPg==' );
+	background-image: url( '../icons/down-long-solid.svg' );
 
 }

sw.js

@@ -66,7 +66,9 @@ WHERE {
 
   /* *************************************************************** */
   /* Initial state if no localStorage ********************************* */
-  var state = "up", // up, loading, ready, error
+  var 
+//   state = "up", // up, loading, ready, error
+  state, // up, loading, ready, error
     records = {},
     signLanguages = [],
     uiLanguages = [],
@@ -397,15 +399,30 @@ async function fetchJS(filepath) {
 }
 messages = await fetchJS(`i18n/${locale}.json`); */
 
+async function setState(value) {
+    // state = await browser.storage.local.set({state:"up"});
+    await browser.storage.local.set({state:"up"});
+    if (value) {
+        await browser.storage.local.set({state:value}).then(()=>{
+           console.log(`Value  = ${value}`);
+        });
+    }
+
+    const newState = await browser.storage.local.get("state");
+    return newState.state;
+}
+
   // Loading all UI translations
   async function loadI18nLocalization(uiLanguageQid) {
     var localizedPhrases = {};
 
     console.log("uiLanguageQid)", uiLanguageQid);
     console.log("supportedUiLanguages", supportedUiLanguages);
 
-    state = "loading";
-
+    // state = "loading";
+    state = await setState("loading");
+    console.log(`Initial state inside loadI18nLocalization() ${state}`);
+
     // Get locale code and corresponding wiktionary
     var lang = supportedUiLanguages.filter(
       (item) => item.wdQid == uiLanguageQid
@@ -424,7 +441,9 @@ messages = await fetchJS(`i18n/${locale}.json`); */
     banana.setLocale(locale); // Change to new locale
     storeParam("bananaInStore", banana);
 
-    state = "ready";
+    // state = "ready";
+    state = await setState("ready");
+    console.log(`Final state inside loadI18nLocalization() ${state}`);
 
     console.log(Object.keys(localizedPhrases).length + " i18n messages loaded");
   }
@@ -529,7 +548,8 @@ messages = await fetchJS(`i18n/${locale}.json`); */
       response,
       records = {};
     try {
-      state = "loading";
+    //   state = "loading";
+      state = await setState("loading");
 
       response = await fetch(sparqlEndpoints.lingualibre.url, {
         method: "POST",
@@ -557,7 +577,9 @@ messages = await fetchJS(`i18n/${locale}.json`); */
         });
       }
 
-      state = "ready";
+    //   state = "ready";
+      state = await setState("ready");
+
 
       console.log(Object.keys(records).length + " records loaded");
       return records;
@@ -774,7 +796,8 @@ messages = await fetchJS(`i18n/${locale}.json`); */
   /* *************************************************************** */
   /* Main ********************************************************** */
   async function main() {
-    state = "loading";
+    // state = "loading";
+    state = await setState("loading");
 
     // Get local storage value if exist, else get default values
     // promise.all
@@ -794,7 +817,9 @@ messages = await fetchJS(`i18n/${locale}.json`); */
     uiLanguages = supportedUiLanguages;
     // records = await getAllRecords( signLanguage );
 
-    state = "ready";
+    // state = "ready";
+    state = await setState("ready");
+
   }
 
 // Run it
@@ -803,7 +828,8 @@ main();
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 	if (message.command === "getBackground") {
     // temporary fix , needs to be persisted in chrome.storage.local but will get to that later
-    const a = {state:"ready",params};
+    console.log(state);
+    const a = {state,params};
     sendResponse(a);
 	}
 });