From 6304977f2f020fbf4f7f5c09ad80431a03d68b44 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 20:29:57 +0530 Subject: [PATCH 01/11] refactor : `storeParams` now working properly --- background-script.js | 9 +++++---- sw.js | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/background-script.js b/background-script.js index add5293..d8e4e32 100644 --- a/background-script.js +++ b/background-script.js @@ -408,6 +408,11 @@ browser.runtime.onMessage.addListener( async function ( message ) { else if (message.command === "changeUiLanguage") { await changeUiLanguage(message.argument); return; +} +else if (message.command === "storeParam") { + const [name,value] = message.argument; + storeParam(name,value); + return; } message = normalizeMessage(message); @@ -429,10 +434,6 @@ browser.runtime.onMessage.addListener( async function ( message ) { else if ( message.command === 'signit.hinticon' ) { callModal(message); } - else if (message.command === "storeParam") { - storeParam([...message.arguments]); - return; - } }); /* *************************************************************** */ diff --git a/sw.js b/sw.js index 48f2d6f..5634305 100644 --- a/sw.js +++ b/sw.js @@ -736,7 +736,8 @@ async function setState(value) { checkActiveTabInjections(message.argument); } else if (message.command === "storeParam") { - storeParam([...message.argument]); + const [name,value] = message.argument; + storeParam(name,value); } else if (message.command === "changeUiLanguage") { await changeUiLanguage(message.argument); From 94aaa8d7df34bf4ace617acf987f1e563ecdd18d Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 20:35:20 +0530 Subject: [PATCH 02/11] chore: passing message to execute i18n natively inside sw/bg.js --- background-script.js | 9 ++++----- sw.js | 12 ++++-------- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/background-script.js b/background-script.js index d8e4e32..e74bad2 100644 --- a/background-script.js +++ b/background-script.js @@ -422,11 +422,10 @@ else if (message.command === "storeParam") { return records[ message.text ] || records[ message.text.toLowerCase() ] || []; } // When message 'signit.i18nCode' is heard, returns banada object - else if ( message.command === 'signit.getfilesb' ) { - console.log('bg>signit.getfilesB') - // var locale = await getStoredParam( 'uiLanguage' ) - // loadI18nLocalization(locale); - return banana; + else if (message.command === 'bananai18n') { + let [msg,placeholderValue] = message.arg; + const i18nMessage = banana.i18n(msg,placeholderValue); + return i18nMessage; } // Start modal diff --git a/sw.js b/sw.js index 5634305..5537cd8 100644 --- a/sw.js +++ b/sw.js @@ -717,14 +717,10 @@ async function setState(value) { sendResponse(records[message.text] || records[message.text.toLowerCase()] || []); } // When message 'signit.i18nCode' is heard, returns banada object - else if ( - message.command === "signit.getfilesb" || - message.command === "getBanana" - ) { - console.log("bg>signit.getfilesB"); - // What this does is it accesses the messageStore inside banana amd spreads the sourecMap - // which is an instanceof Map thereby converting it into an array. This is later recreated inside popup - sendResponse([[...banana.messageStore.sourceMap], banana.locale]); + else if (message.command === 'bananai18n') { + let [msg,placeholderValue] = message.arg; + const i18nMessage = banana.i18n(msg,placeholderValue); + sendResponse(i18nMessage); } // Start modal From 569136841b36e2536419b1c3b3008d7b348a645f Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 20:48:49 +0530 Subject: [PATCH 03/11] reverting to banana.i18n --- popup/popup.js | 56 +++++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/popup/popup.js b/popup/popup.js index 3b4102a..2e44090 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -50,12 +50,12 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') /* *********************************************************** */ // Master var UI = function () { - document.querySelector('#fetchVideosList').innerHTML = browser.i18n.getMessage('si_addon_preload'); + document.querySelector('#fetchVideosList').innerHTML = banana.i18n('si-addon-preload'); // Setup the main tabs - this.viewTab = new OO.ui.TabPanelLayout( 'view', { label: browser.i18n.getMessage('si_popup_browse_title') } ); - this.historyTab = new OO.ui.TabPanelLayout( 'history', { label: browser.i18n.getMessage('si_popup_history_title'), classes: [ 'signit-popup-tab-history' ] } ); - this.paramTab = new OO.ui.TabPanelLayout( 'param', { label: browser.i18n.getMessage('si_popup_settings_title'), classes: [ 'signit-popup-tab-settings' ] } ); + this.viewTab = new OO.ui.TabPanelLayout( 'view', { label: banana.i18n('si-popup-browse-title') } ); + this.historyTab = new OO.ui.TabPanelLayout( 'history', { label: banana.i18n('si-popup-history-title'), classes: [ 'signit-popup-tab-history' ] } ); + this.paramTab = new OO.ui.TabPanelLayout( 'param', { label: banana.i18n('si-popup-settings-title'), classes: [ 'signit-popup-tab-settings' ] } ); // Set up the popup page layout this.indexLayout = new OO.ui.IndexLayout( { autoFocus: false, classes: [ 'signit-popup-tabs' ] } ); @@ -83,19 +83,19 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') // Browse tab UI.prototype.initView = async function () { // Word input 2 : text field - // browser.i18n.getMessage accepts string value as substitutes for placeholders, hence JSON.stringify - this.searchWidget = new SearchWidget( { placeholder: browser.i18n.getMessage("si_popup_browse_placeholder", JSON.stringify(Object.keys( _backgroundPage.records ).length) ) } ); + // banana.i18n accepts string value as substitutes for placeholders, hence JSON.stringify + this.searchWidget = new SearchWidget( { placeholder: banana.i18n("si-popup-browse-placeholder", JSON.stringify(Object.keys( _backgroundPage.records ).length) ) } ); this.searchWidget.setRecords( _backgroundPage.records ); var searchButton = new OO.ui.ButtonWidget( { icon:"search", - label: browser.i18n.getMessage("si_popup_browse_label"), + label: banana.i18n("si-popup-browse-label"), invisibleLabel: true, - title: browser.i18n.getMessage("si_popup_browse_icon") + title: banana.i18n("si-popup-browse-icon") } ); var searchLayout = new OO.ui.ActionFieldLayout( this.searchWidget, searchButton, { align: 'top', - label: browser.i18n.getMessage("si_popup_browse_label"), + label: banana.i18n("si-popup-browse-label"), invisibleLabel: true, classes: [ 'signit-popup-tab-browse' ] } ); @@ -116,7 +116,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') var tabs = await browser.tabs.query({active: true, currentWindow: true}); // optimizing message passing for the functions that are present in - // sw.js as well background_script.js + // sw.js as well background-script.js await sendMessageUp("checkActiveTabInjections",tabs[0].id); var selection = await browser.tabs.sendMessage( tabs[ 0 ].id, { @@ -135,7 +135,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') if (typeof text !== "string") { text = this.searchWidget.getValue(); } - // runs normalize function and wordToFiles in a single go and retruns an array of _word and _files + // runs normalize function and wordToFiles in a single go and retruns an array of -word and -files const [_word,_files] = await sendMessageUp("normalizeWordAndReturnFiles",text); this.coreContent.refresh(_word, _files); @@ -148,7 +148,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') // History tab // .initHistory calls .addHistory which calls .cleanHistory UI.prototype.initHistory = function () { - this.$noHistory = $( `
${browser.i18n.getMessage("si_popup_history_empty")}
` ); + this.$noHistory = $( `
${banana.i18n("si-popup-history-empty")}
` ); this.history = []; this.$history = []; this.historyTab.$element.append( this.$noHistory ); @@ -213,14 +213,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout signLanguageDropdown = new OO.ui.DropdownWidget( { - label: browser.i18n.getMessage("si_popup_settings_signlanguage-dropdown"), + label: banana.i18n("si-popup-settings-signlanguage-dropdown"), menu: { items: items }, $overlay: $( 'body' ) } ); signLanguageLayout = new OO.ui.FieldLayout( signLanguageDropdown, { - label: browser.i18n.getMessage("si_popup_settings_signlanguage"), + label: banana.i18n("si-popup-settings-signlanguage"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_signlanguage-help"), + help: banana.i18n("si-popup-settings-signlanguage-help"), //helpInline: true } ); @@ -240,14 +240,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout uiLanguageDropdown = new OO.ui.DropdownWidget({ - label: browser.i18n.getMessage("si_popup-settings_signlanguage"), + label: banana.i18n("si-popup-settings-signlanguage"), menu: { items: items }, $overlay: $( 'body' ) } ); uiLanguageLayout = new OO.ui.FieldLayout( uiLanguageDropdown, { - label: browser.i18n.getMessage("si_popup_settings_uilanguage"), + label: banana.i18n("si-popup-settings-uilanguage"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_uilanguage-help"), + help: banana.i18n("si-popup-settings-uilanguage-help"), //helpInline: true } ); @@ -257,9 +257,9 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') min: 0 } ); historyLayout = new OO.ui.FieldLayout( historyWidget, { - label: browser.i18n.getMessage("si_popup_settings_history"), + label: banana.i18n("si-popup-settings-history"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_history_help"), + help: banana.i18n("si-popup-settings-history-help"), } ); @@ -269,7 +269,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.wpintegration, } ); wpintegrationLayout = new OO.ui.FieldLayout( wpintegrationWidget, { - label: browser.i18n.getMessage("si_popup_settings_wpintegration"), + label: banana.i18n("si-popup-settings-wpintegration"), align: 'inline', } ); @@ -278,7 +278,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.twospeed, } ); twospeedLayout = new OO.ui.FieldLayout( twospeedWidget, { - label: browser.i18n.getMessage("si_popup_settings_twospeed"), + label: banana.i18n("si-popup-settings-twospeed"), align: 'inline', } ); // Hint icon shortcut @@ -286,7 +286,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.hinticon, }); hinticonLayout = new OO.ui.FieldLayout(hinticonWidget, { - label: browser.i18n.getMessage('si_popup_settings_hint-icon'), + label: banana.i18n('si-popup-settings-hint-icon'), align: 'inline', }); // Colored text @@ -294,29 +294,29 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.coloredwords, }); coloredwordsLayout = new OO.ui.FieldLayout(coloredwordsWidget, { - label: browser.i18n.getMessage('si_popup_settings_enlighten'), + label: banana.i18n('si-popup-settings-enlighten'), align: 'inline', }); // Choose panels : both, definition, video var panelsOption0 = new OO.ui.ButtonOptionWidget( { data: 'definition', - label: browser.i18n.getMessage("si_popup_settings_choosepanels_definition") + label: banana.i18n("si-popup-settings-choosepanels-definition") } ), panelsOption1 = new OO.ui.ButtonOptionWidget( { data: 'both', - label: browser.i18n.getMessage("si_popup_settings_choosepanels_both") + label: banana.i18n("si-popup-settings-choosepanels-both") } ); panelsOption2 = new OO.ui.ButtonOptionWidget( { data: 'video', - label: browser.i18n.getMessage("si_popup_settings_choosepanels_video") + label: banana.i18n("si-popup-settings-choosepanels-video") } ); choosepanelsWidget = new OO.ui.ButtonSelectWidget( { items: [ panelsOption0, panelsOption1, panelsOption2 ] } ); // Layout choosepanelsLayout = new OO.ui.FieldLayout( choosepanelsWidget, { - label: browser.i18n.getMessage("si_popup_settings_choosepanels"), + label: banana.i18n("si-popup-settings-choosepanels"), align: 'top', } ); From 93867412ec8fbd3c8a2b24dcbbcbaa0d724134ab Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 21:05:29 +0530 Subject: [PATCH 04/11] refactor : sending message from popup to sw/bg.sj when banana.i18n is invoked --- popup/popup.js | 120 ++++++++++++++++++++++--------------------------- 1 file changed, 53 insertions(+), 67 deletions(-) diff --git a/popup/popup.js b/popup/popup.js index 2e44090..57e6802 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -18,28 +18,6 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } _backgroundPage = await getBackgroundPage(); console.log("Background Page = ", _backgroundPage); - - // Chrome messaging is limited to simple data types. - // So we cant import complex data types like map/sets directly through messages. - // Hence converting them before sending and recreating them after receiving remains the only way. - - const resArr = await chrome.runtime.sendMessage({ command: "getBanana" }); - const sourceMap = new Map(resArr[0]); - - // coudn't restore the functionality of i18n so made it a key which stores a functions - // which fetches the messages from sourceMap and replpace them with whatever the key-value pair - // for that particular message is - - banana = {i18n: (msg,...arg) => { - let string = sourceMap.get(resArr[1])[msg]; - for (let i = 0; i < arg.length; i++) { - let regex = new RegExp(`\\$${i + 1}`); - if (regex.test(string)) { - string = string.replace(regex, arg[i]); - } - } - return string; - }}; console.log("banana received: ",banana); } else if (browserType === 'firefox') { // Use Firefox WebExtensions API @@ -49,29 +27,37 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') /* *********************************************************** */ // Master + var banana ={i18n:async(msg,...placeholderValue)=>{ + return await chrome.runtime.sendMessage({ + command:"bananai18n", + arg:[msg,placeholderValue] + }) + }} var UI = function () { - document.querySelector('#fetchVideosList').innerHTML = banana.i18n('si-addon-preload'); - - // Setup the main tabs - this.viewTab = new OO.ui.TabPanelLayout( 'view', { label: banana.i18n('si-popup-browse-title') } ); - this.historyTab = new OO.ui.TabPanelLayout( 'history', { label: banana.i18n('si-popup-history-title'), classes: [ 'signit-popup-tab-history' ] } ); - this.paramTab = new OO.ui.TabPanelLayout( 'param', { label: banana.i18n('si-popup-settings-title'), classes: [ 'signit-popup-tab-settings' ] } ); - - // Set up the popup page layout - this.indexLayout = new OO.ui.IndexLayout( { autoFocus: false, classes: [ 'signit-popup-tabs' ] } ); - this.indexLayout.addTabPanels( [ this.viewTab, this.historyTab, this.paramTab ] ); - - // Clean up then append - document.querySelector( '#signit-popup-loaded' ).innerHTML = ""; - $( '#signit-popup-loaded' ).append( this.indexLayout.$element ); - - // Build the full tabs inner content - this.initView(); - this.initHistory(); - this.initParam(); - - // Show the UI we have just build - this.switchPanel( 'loaded' ); + (async ()=>{ + document.querySelector('#fetchVideosList').innerHTML = await banana.i18n('si-addon-preload'); + + // Setup the main tabs + this.viewTab = new OO.ui.TabPanelLayout( 'view', { label: await banana.i18n('si-popup-browse-title') } ); + this.historyTab = new OO.ui.TabPanelLayout( 'history', { label: await banana.i18n('si-popup-history-title'), classes: [ 'signit-popup-tab-history' ] } ); + this.paramTab = new OO.ui.TabPanelLayout( 'param', { label: await banana.i18n('si-popup-settings-title'), classes: [ 'signit-popup-tab-settings' ] } ); + + // Set up the popup page layout + this.indexLayout = new OO.ui.IndexLayout( { autoFocus: false, classes: [ 'signit-popup-tabs' ] } ); + this.indexLayout.addTabPanels( [ this.viewTab, this.historyTab, this.paramTab ] ); + + // Clean up then append + document.querySelector( '#signit-popup-loaded' ).innerHTML = ""; + $( '#signit-popup-loaded' ).append( this.indexLayout.$element ); + + // Build the full tabs inner content + this.initView(); + this.initHistory(); + this.initParam(); + + // Show the UI we have just build + this.switchPanel( 'loaded' ); + })(); }; async function sendMessageUp(msg,argument){ @@ -83,19 +69,19 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') // Browse tab UI.prototype.initView = async function () { // Word input 2 : text field - // banana.i18n accepts string value as substitutes for placeholders, hence JSON.stringify - this.searchWidget = new SearchWidget( { placeholder: banana.i18n("si-popup-browse-placeholder", JSON.stringify(Object.keys( _backgroundPage.records ).length) ) } ); + // await banana.i18n accepts string value as substitutes for placeholders, hence JSON.stringify + this.searchWidget = new SearchWidget( { placeholder: await banana.i18n("si-popup-browse-placeholder", JSON.stringify(Object.keys( _backgroundPage.records ).length) ) } ); this.searchWidget.setRecords( _backgroundPage.records ); var searchButton = new OO.ui.ButtonWidget( { icon:"search", - label: banana.i18n("si-popup-browse-label"), + label: await banana.i18n("si-popup-browse-label"), invisibleLabel: true, - title: banana.i18n("si-popup-browse-icon") + title: await banana.i18n("si-popup-browse-icon") } ); var searchLayout = new OO.ui.ActionFieldLayout( this.searchWidget, searchButton, { align: 'top', - label: banana.i18n("si-popup-browse-label"), + label: await banana.i18n("si-popup-browse-label"), invisibleLabel: true, classes: [ 'signit-popup-tab-browse' ] } ); @@ -147,8 +133,8 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') /* *********************************************************** */ // History tab // .initHistory calls .addHistory which calls .cleanHistory - UI.prototype.initHistory = function () { - this.$noHistory = $( `
${banana.i18n("si-popup-history-empty")}
` ); + UI.prototype.initHistory = async function () { + this.$noHistory = $( `
${await banana.i18n("si-popup-history-empty")}
` ); this.history = []; this.$history = []; this.historyTab.$element.append( this.$noHistory ); @@ -213,14 +199,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout signLanguageDropdown = new OO.ui.DropdownWidget( { - label: banana.i18n("si-popup-settings-signlanguage-dropdown"), + label: await banana.i18n("si-popup-settings-signlanguage-dropdown"), menu: { items: items }, $overlay: $( 'body' ) } ); signLanguageLayout = new OO.ui.FieldLayout( signLanguageDropdown, { - label: banana.i18n("si-popup-settings-signlanguage"), + label: await banana.i18n("si-popup-settings-signlanguage"), align: 'top', - help: banana.i18n("si-popup-settings-signlanguage-help"), + help: await banana.i18n("si-popup-settings-signlanguage-help"), //helpInline: true } ); @@ -240,14 +226,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout uiLanguageDropdown = new OO.ui.DropdownWidget({ - label: banana.i18n("si-popup-settings-signlanguage"), + label: await banana.i18n("si-popup-settings-signlanguage"), menu: { items: items }, $overlay: $( 'body' ) } ); uiLanguageLayout = new OO.ui.FieldLayout( uiLanguageDropdown, { - label: banana.i18n("si-popup-settings-uilanguage"), + label: await banana.i18n("si-popup-settings-uilanguage"), align: 'top', - help: banana.i18n("si-popup-settings-uilanguage-help"), + help: await banana.i18n("si-popup-settings-uilanguage-help"), //helpInline: true } ); @@ -257,9 +243,9 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') min: 0 } ); historyLayout = new OO.ui.FieldLayout( historyWidget, { - label: banana.i18n("si-popup-settings-history"), + label: await banana.i18n("si-popup-settings-history"), align: 'top', - help: banana.i18n("si-popup-settings-history-help"), + help: await banana.i18n("si-popup-settings-history-help"), } ); @@ -269,7 +255,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.wpintegration, } ); wpintegrationLayout = new OO.ui.FieldLayout( wpintegrationWidget, { - label: banana.i18n("si-popup-settings-wpintegration"), + label: await banana.i18n("si-popup-settings-wpintegration"), align: 'inline', } ); @@ -278,7 +264,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.twospeed, } ); twospeedLayout = new OO.ui.FieldLayout( twospeedWidget, { - label: banana.i18n("si-popup-settings-twospeed"), + label: await banana.i18n("si-popup-settings-twospeed"), align: 'inline', } ); // Hint icon shortcut @@ -286,7 +272,7 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.hinticon, }); hinticonLayout = new OO.ui.FieldLayout(hinticonWidget, { - label: banana.i18n('si-popup-settings-hint-icon'), + label: await banana.i18n('si-popup-settings-hint-icon'), align: 'inline', }); // Colored text @@ -294,29 +280,29 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') selected: _backgroundPage.params.coloredwords, }); coloredwordsLayout = new OO.ui.FieldLayout(coloredwordsWidget, { - label: banana.i18n('si-popup-settings-enlighten'), + label: await banana.i18n('si-popup-settings-enlighten'), align: 'inline', }); // Choose panels : both, definition, video var panelsOption0 = new OO.ui.ButtonOptionWidget( { data: 'definition', - label: banana.i18n("si-popup-settings-choosepanels-definition") + label: await banana.i18n("si-popup-settings-choosepanels-definition") } ), panelsOption1 = new OO.ui.ButtonOptionWidget( { data: 'both', - label: banana.i18n("si-popup-settings-choosepanels-both") + label: await banana.i18n("si-popup-settings-choosepanels-both") } ); panelsOption2 = new OO.ui.ButtonOptionWidget( { data: 'video', - label: banana.i18n("si-popup-settings-choosepanels-video") + label: await banana.i18n("si-popup-settings-choosepanels-video") } ); choosepanelsWidget = new OO.ui.ButtonSelectWidget( { items: [ panelsOption0, panelsOption1, panelsOption2 ] } ); // Layout choosepanelsLayout = new OO.ui.FieldLayout( choosepanelsWidget, { - label: banana.i18n("si-popup-settings-choosepanels"), + label: await banana.i18n("si-popup-settings-choosepanels"), align: 'top', } ); From d33217a0b37c7fa1ff8c4d543c10bcd159c333b7 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 21:18:44 +0530 Subject: [PATCH 05/11] fix : implemented the same message passing functionality as in popup now upon changing UI language , it will instanlty change. The init prototype being async in nature helps fetch the messages and then appneds them inside the relevant html --- SignItCoreContent.js | 66 +++++++++++++++++++++++++++++--------------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/SignItCoreContent.js b/SignItCoreContent.js index 72c4e38..a9dbe17 100644 --- a/SignItCoreContent.js +++ b/SignItCoreContent.js @@ -1,31 +1,23 @@ -var SignItCoreContent = function (locale,mapi18n) { - const sourceMap = new Map(mapi18n); - banana = { i18n: (msg) => sourceMap.get(locale)[msg] }; - console.log("Passed trough ! :", locale); - console.log("SignItCoreContent.js",banana ); - // let hlwa = browser.i18n.getMessage("si-panel-videos-title"); - // console.log("hlwa = ",hlwa); +var SignItCoreContent = function () { + console.log("SignItCoreContent.js"); this.$container = $(`

-

- ${ browser.i18n.getMessage("si_panel_videos_title") }

- ${ browser.i18n.getMessage("si_panel_videos_empty") }

+

+

-

- ${ browser.i18n.getMessage("si_panel_definitions_title") }

+

- - ${ browser.i18n.getMessage("si_panel_definitions_wikt_pointer") } +
@@ -33,17 +25,14 @@ var SignItCoreContent = function (locale,mapi18n) { "icons/Spinner_font_awesome.svg" )}" width="40" height="40">
-
- ${ browser.i18n.getMessage("si_panel_definitions_empty") }
+
`); - - // Button contribute var optionsContribute = { flags: ["primary", "progressive"], - label: browser.i18n.getMessage("si_panel_videos_contribute_label") , + label: " ", href: "https://lingualibre.org/wiki/Special:RecordWizard", }; this.contributeButton = new OO.ui.ButtonWidget(optionsContribute); @@ -62,9 +51,42 @@ var SignItCoreContent = function (locale,mapi18n) { this.$definitionPanelSpinner = this.$container.find(".signit-loading"); this.$definitionPanelError = this.$container.find(".signit-error"); - // this.contributeButton.on( 'click', function () { - // // TODO: Do something - // }.bind( this ) ); + SignItCoreContent.prototype.init = async function () { + try { + var banana = {i18n: async (msg,...arg) => { + return await chrome.runtime.sendMessage({ + command:'bananai18n',arg : [msg,arg] + }) + } + }; + const translations = await Promise.all([ + banana.i18n("si-panel-videos-title"), + banana.i18n("si-panel-videos-empty"), + banana.i18n("si-panel-definitions-title"), + banana.i18n("si-panel-videos-contribute-label"), + banana.i18n("si-panel-definitions-wikt-iso"), + banana.i18n("si-panel-definitions-wikt-pointer"), + banana.i18n("si-panel-definitions-empty") // May need a different key for error message + ]); + const [videosPanelNoVideoTitle, videosPanelNoVideoEmpty, definitionsPanelTitle, contributeButtonLabel, wiktIso, wiktPointer, definitionsEmpty] = translations; + + this.$container.find(".signit-panel-videos .signit-novideo h2").text(videosPanelNoVideoTitle); + this.$container.find(".signit-panel-videos .signit-novideo p").text(videosPanelNoVideoEmpty); // -- needs additional css + this.$container.find(".signit-panel-definitions .signit-definitions h2").text(definitionsPanelTitle); + this.contributeButton.$label.text(contributeButtonLabel); + + const definitionsSourceLink = `https://${wiktIso}.wiktionary.org`; + this.$container + .find(".signit-definitions-source a") + .attr("href", definitionsSourceLink) + .text(wiktPointer); + + this.$container.find(".signit-panel-definitions .signit-error").text(definitionsEmpty); + + } catch (error) { + console.error("Error fetching translations:", error); + } + }; SignItCoreContent.prototype.refresh = function (title, files) { files = files || []; From 53c6bacad833143170757d9d0cd9c427a05c5244 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 21:22:26 +0530 Subject: [PATCH 06/11] refactor : updated how `SignItCoreContent()` is called --- content_scripts/signit.js | 7 ++----- popup/popup.js | 7 +++---- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/content_scripts/signit.js b/content_scripts/signit.js index 9092219..d1d76ac 100644 --- a/content_scripts/signit.js +++ b/content_scripts/signit.js @@ -152,11 +152,8 @@ // Banana test, search `bananaInStore` in files for more console.log("before") - var BetterBanana = await browser.storage.local.get( 'bananaInStore' ); - var messageStore = await browser.storage.local.get( 'sourceMap' ); - console.log("after: BetterBanana = ", BetterBanana.bananaInStore.locale,messageStore.sourceMap) - - content = new SignItCoreContent(BetterBanana.bananaInStore.locale,messageStore.sourceMap); + content = new SignItCoreContent(); + content.init(); // Setup an absolute-positionned $anchorModal we can programatically move // to be able to point exactly some coords with our popup later diff --git a/popup/popup.js b/popup/popup.js index 57e6802..f01648f 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -87,10 +87,9 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } ); // Add the CoreContent view - // similar to what we did in signit.js since here banana is defined solely as per i18n functionality - var BetterBanana = await browser.storage.local.get( 'bananaInStore' ); - var messageStore = await browser.storage.local.get( 'sourceMap' ); - this.coreContent = new SignItCoreContent(BetterBanana.bananaInStore.locale,messageStore.sourceMap); + + this.coreContent = new SignItCoreContent(); + this.coreContent.init(); this.coreContent.getContainer().hide(); // Put all that in the tab From 2f1813c65220c4b046354dc55a29c8fab73ab285 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 23:08:00 +0530 Subject: [PATCH 07/11] refactored banana.i18n to capture multiple arguments when many placeholders are present --- sw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sw.js b/sw.js index 5537cd8..a6f1a5f 100644 --- a/sw.js +++ b/sw.js @@ -719,7 +719,7 @@ async function setState(value) { // When message 'signit.i18nCode' is heard, returns banada object else if (message.command === 'bananai18n') { let [msg,placeholderValue] = message.arg; - const i18nMessage = banana.i18n(msg,placeholderValue); + const i18nMessage = banana.i18n(msg,...placeholderValue); sendResponse(i18nMessage); } From 4407699ea6feaa2c7e28eac45063428065256944 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Thu, 13 Jun 2024 23:14:52 +0530 Subject: [PATCH 08/11] refactor: implemented the same message passing i18n functionality --- SignItVideosGallery.js | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js index 7042893..2c9a53f 100644 --- a/SignItVideosGallery.js +++ b/SignItVideosGallery.js @@ -17,22 +17,12 @@ var SignItVideosGallery = function ( container ) { }; SignItVideosGallery.prototype.refresh = async function ( files ) { - var BetterBanana = await browser.storage.local.get( 'bananaInStore' ); - var messageStore = await chrome.storage.local.get( 'sourceMap' ); - var sourceMap = new Map(messageStore.sourceMap); - var locale = BetterBanana.bananaInStore.locale; var banana = { - i18n: (msg, url, speaker,index, total) => { - let string = sourceMap.get(locale)[msg]; - let Speaker = `${speaker} `; - let patterns = ["{{link|$1|$2}}", "$3", "$4"]; - let replacements = [Speaker, index, total]; - - patterns.forEach((pattern,index)=>{ - string = string.replace(pattern, replacements[index]); - }) - - return string; + i18n: async (msg, ...arg) => { + return await chrome.runtime.sendMessage({ + command: "bananai18n", + arg: [msg, arg], + }); }, }; console.log("#20 files ",files ) @@ -40,19 +30,19 @@ SignItVideosGallery.prototype.refresh = async function ( files ) { var i; files = files || []; this.$videos = []; - + this.$videoContainer.empty(); this.currentIndex = 0; - for ( i = 0; i < files.length; i++ ) { filename = files[ i ].filename, url = `https://commons.wikimedia.org/wiki/File:${ filename.split( '/' ).pop()}`, speaker = files[ i ].speaker, total = files.length; + console.log(await banana.i18n("si-panel-videos-gallery-attribution",url, speaker, i+1, total)); this.$videos.push( $( `
- ${browser.i18n.getMessage("si_panel_videos_gallery_attribution",[ url, speaker, i+1, total])} + ${await banana.i18n("si-panel-videos-gallery-attribution",url, speaker, i+1, total)}
` ) ); From 9dfaa56cf16e40c2022caeb48b511cc03ac1098f Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Fri, 14 Jun 2024 00:45:14 +0530 Subject: [PATCH 09/11] refactor: used HTML instead of text for `videosPanelNoVideoEmpty` --- SignItCoreContent.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/SignItCoreContent.js b/SignItCoreContent.js index a9dbe17..5e08733 100644 --- a/SignItCoreContent.js +++ b/SignItCoreContent.js @@ -71,10 +71,9 @@ var SignItCoreContent = function () { const [videosPanelNoVideoTitle, videosPanelNoVideoEmpty, definitionsPanelTitle, contributeButtonLabel, wiktIso, wiktPointer, definitionsEmpty] = translations; this.$container.find(".signit-panel-videos .signit-novideo h2").text(videosPanelNoVideoTitle); - this.$container.find(".signit-panel-videos .signit-novideo p").text(videosPanelNoVideoEmpty); // -- needs additional css + this.$container.find(".signit-panel-videos .signit-novideo p").html(videosPanelNoVideoEmpty); // -- needs additional css this.$container.find(".signit-panel-definitions .signit-definitions h2").text(definitionsPanelTitle); this.contributeButton.$label.text(contributeButtonLabel); - const definitionsSourceLink = `https://${wiktIso}.wiktionary.org`; this.$container .find(".signit-definitions-source a") From d3bd590fc42badf0fc7e38edccf4138e2647c0e1 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Fri, 14 Jun 2024 12:35:28 +0530 Subject: [PATCH 10/11] removed unnecessary lines --- popup/popup.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/popup/popup.js b/popup/popup.js index f01648f..f3224e0 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -18,11 +18,9 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } _backgroundPage = await getBackgroundPage(); console.log("Background Page = ", _backgroundPage); - console.log("banana received: ",banana); } else if (browserType === 'firefox') { // Use Firefox WebExtensions API _backgroundPage = await browser.runtime.getBackgroundPage(); - banana = _backgroundPage.banana; } /* *********************************************************** */ @@ -379,13 +377,6 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') return; } ui.switchPanel( 'loading' ); - //banana = _backgroundPage.banana; - - // now in case of the chrome,both popup and modal update, - // but in case of popup you have to off->on again in order to see changes - // and in FF popup UI updates first - // in both browsers for the changes to reflect in modal you have to - // send another signit.hinticon command in order to see changes await sendMessageUp("changeUiLanguage",newLanguage); ui = new UI(); From 5793669e1cf260396872ee69fbe60938fdded2f0 Mon Sep 17 00:00:00 2001 From: kabir-afk Date: Fri, 14 Jun 2024 12:37:55 +0530 Subject: [PATCH 11/11] storing banana and sourceMap no longer needed --- sw.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/sw.js b/sw.js index a6f1a5f..335bc3a 100644 --- a/sw.js +++ b/sw.js @@ -438,9 +438,6 @@ async function setState(value) { // Declare localisation banana.setLocale(locale); // Change to new locale - storeParam("bananaInStore", banana); - storeParam("sourceMap", Array.from(banana.messageStore.sourceMap)); - // state = "ready"; state = await setState("ready");