diff --git a/SignItCoreContent.js b/SignItCoreContent.js index 72c4e38..5e08733 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,41 @@ 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").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") + .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 || []; 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)}
` ) ); diff --git a/background-script.js b/background-script.js index add5293..e74bad2 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); @@ -417,11 +422,10 @@ browser.runtime.onMessage.addListener( async function ( message ) { 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 @@ -429,10 +433,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/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 3b4102a..f3224e0 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -18,60 +18,44 @@ 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 _backgroundPage = await browser.runtime.getBackgroundPage(); - banana = _backgroundPage.banana; } /* *********************************************************** */ // Master + var banana ={i18n:async(msg,...placeholderValue)=>{ + return await chrome.runtime.sendMessage({ + command:"bananai18n", + arg:[msg,placeholderValue] + }) + }} var UI = function () { - document.querySelector('#fetchVideosList').innerHTML = browser.i18n.getMessage('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' ] } ); - - // 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,28 +67,27 @@ 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) ) } ); + // 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: browser.i18n.getMessage("si_popup_browse_label"), + label: await banana.i18n("si-popup-browse-label"), invisibleLabel: true, - title: browser.i18n.getMessage("si_popup_browse_icon") + title: await 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: await banana.i18n("si-popup-browse-label"), invisibleLabel: true, classes: [ 'signit-popup-tab-browse' ] } ); // 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 @@ -116,7 +99,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 +118,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); @@ -147,8 +130,8 @@ 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")}
` ); + 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 +196,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout signLanguageDropdown = new OO.ui.DropdownWidget( { - label: browser.i18n.getMessage("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: browser.i18n.getMessage("si_popup_settings_signlanguage"), + label: await banana.i18n("si-popup-settings-signlanguage"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_signlanguage-help"), + help: await banana.i18n("si-popup-settings-signlanguage-help"), //helpInline: true } ); @@ -240,14 +223,14 @@ var browser = (browserType === 'firefox') ? browser : (browserType === 'chrome') } // Layout uiLanguageDropdown = new OO.ui.DropdownWidget({ - label: browser.i18n.getMessage("si_popup-settings_signlanguage"), + label: await 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: await banana.i18n("si-popup-settings-uilanguage"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_uilanguage-help"), + help: await banana.i18n("si-popup-settings-uilanguage-help"), //helpInline: true } ); @@ -257,9 +240,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: await banana.i18n("si-popup-settings-history"), align: 'top', - help: browser.i18n.getMessage("si_popup_settings_history_help"), + help: await banana.i18n("si-popup-settings-history-help"), } ); @@ -269,7 +252,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: await banana.i18n("si-popup-settings-wpintegration"), align: 'inline', } ); @@ -278,7 +261,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: await banana.i18n("si-popup-settings-twospeed"), align: 'inline', } ); // Hint icon shortcut @@ -286,7 +269,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: await banana.i18n('si-popup-settings-hint-icon'), align: 'inline', }); // Colored text @@ -294,29 +277,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: await 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: await banana.i18n("si-popup-settings-choosepanels-definition") } ), panelsOption1 = new OO.ui.ButtonOptionWidget( { data: 'both', - label: browser.i18n.getMessage("si_popup_settings_choosepanels_both") + label: await banana.i18n("si-popup-settings-choosepanels-both") } ); panelsOption2 = new OO.ui.ButtonOptionWidget( { data: 'video', - label: browser.i18n.getMessage("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: browser.i18n.getMessage("si_popup_settings_choosepanels"), + label: await banana.i18n("si-popup-settings-choosepanels"), align: 'top', } ); @@ -394,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(); diff --git a/sw.js b/sw.js index 48f2d6f..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"); @@ -717,14 +714,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 @@ -736,7 +729,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);