From 2bc6cae64c8e0aa89d189f63e0c225471cab7341 Mon Sep 17 00:00:00 2001 From: Hugo Lopez Date: Sun, 10 Dec 2023 21:24:11 +0100 Subject: [PATCH] add settings : choosepanels --- background-script.js | 15 ++++++----- content_scripts/signit.js | 22 +++++++-------- popup/popup.js | 56 +++++++++++++++++++++++++++++---------- 3 files changed, 62 insertions(+), 31 deletions(-) diff --git a/background-script.js b/background-script.js index 64cf2cb..fce8085 100644 --- a/background-script.js +++ b/background-script.js @@ -71,6 +71,7 @@ var state = 'up', // up, loading, ready, error // Preparation for issues/36 showvideo: true, showdefinition: true, + choosepanels: 'both', }; /* *************************************************************** */ @@ -129,7 +130,6 @@ banana.registerParserPlugin('link', (nodes) => { return '' + nodes[1] + ''; }); -storeParam('bananaInStore',banana) /* ************************************************ async function fetchJS(filepath) { @@ -167,6 +167,7 @@ async function loadI18nLocalization( uiLanguageQid ) { // Declare localisation banana.setLocale(locale); // Change to new locale + storeParam('bananaInStore',banana) state = 'ready'; @@ -177,24 +178,25 @@ async function loadI18nLocalization( uiLanguageQid ) { /* Settings management : memory, updates ************************* */ // Save parameter and value in localStorage async function storeParam( name, value ) { - // If the value is an array, we make a copy of it to avoid dead references issues + // If value of type array, we make a copy of it to avoid dead references issues if ( Array.isArray( value ) ) { value = Array.from( value ); // copy } - // create object { name: value } + // else, create object { name: value } + console.log('HERE ! Selected option: { ', name+': '+value+' }' ); var tmp = {}; tmp[ name ] = value; // reset params params[ name ] = value; return await browser.storage.local.set( tmp ); } -// Check if localStorage has parameter value, else use and save default value +// Get stored values from init hard coded `params` or from prefered local storage +// Also synchronize both. async function getStoredParam( name ) { var tmp = await browser.storage.local.get( name ); params[ name ] = tmp[ name ] || params[ name ] || null; - // Missing from local storage, save default values there + // If missing from local storage, then save init values in local storage if(tmp.length == undefined ) { await storeParam(name, params[name]); } - var tmp = await browser.storage.local.get( name ); return params[ name ]; } @@ -409,6 +411,7 @@ async function main() { await getStoredParam( 'hinticon' ); await getStoredParam( 'coloredwords' ); await getStoredParam( 'showvideo' ); + await getStoredParam( 'choosepanels' ); signLanguage = await getStoredParam( 'signLanguage' ); signLanguages = await getSignLanguagesWithVideos(); diff --git a/content_scripts/signit.js b/content_scripts/signit.js index cb6761f..1819c32 100644 --- a/content_scripts/signit.js +++ b/content_scripts/signit.js @@ -139,15 +139,13 @@ /* *************************************************************** */ /* Toggle video panel ******************************************** */ async function toggleVideoPanel() { - // @hugolpz's toggle video solution : - console.log("before") - var showvideoStatus = await browser.storage.local.get( 'showvideo' ); - showvideo = Object.values( showvideoStatus )[0] - console.log("after: showvideoStatus = ", showvideo) - if(!showvideo) { - $(".signit-panel-videos").toggle(showvideo); - $(".signit-panel-separator").toggle(showvideo); - } + var activePanels = await browser.storage.local.get( 'choosepanels' ); + activepanels = Object.values( activePanels)[0]; + console.log('toggle: ', activePanels, activepanels ) + + $(".signit-popup-content > .signit-panel-videos").toggle(activepanels == 'definition'?false:true); + $(".signit-popup-content > .signit-panel-separator").toggle(activepanels == 'both'?true:false); + $(".signit-popup-content > .signit-panel-definition").toggle(activepanels == 'video'? false:true); } /* *************************************************************** */ @@ -197,8 +195,10 @@ } // SignIt modal width depends on number of active panels var signItModalWidth = async function(){ - var showvideo = Object.values( await browser.storage.local.get( 'showvideo' ) )[0]; - numberOfPanels = (showvideo?1:0)+1; + // var showvideo = Object.values( await browser.storage.local.get( 'showvideo' ) )[0]; + // numberOfPanels = (showvideo?1:0)+1; + var activepanels = Object.values( await browser.storage.local.get( 'choosepanels' ) )[0]; + var numberOfPanels = activepanels == 'both' ? 2:1; return numberOfPanels==2? 850:450; } diff --git a/popup/popup.js b/popup/popup.js index 89f86b5..acf4956 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -249,10 +249,31 @@ var browser = browser || chrome; label: banana.i18n("si-popup-settings-showvideo"), align: 'top', } ); - // Show definitions + // Choose panels : both, definition, video + var panelsOption0 = new OO.ui.ButtonOptionWidget( { + data: 'definition', + label: 'Wiktionary text only' + } ), + panelsOption1 = new OO.ui.ButtonOptionWidget( { + data: 'both', + label: 'Both' + } ); + panelsOption2 = new OO.ui.ButtonOptionWidget( { + data: 'video', + label: 'Signed video only' + } ); + choosepanelsWidget = new OO.ui.ButtonSelectWidget( { + items: [ panelsOption0, panelsOption1, panelsOption2 ] + } ); + // Layout + choosepanelsLayout = new OO.ui.FieldLayout( choosepanelsWidget, { + label: "Panels to display:", + align: 'top', + } ); - // Populate UI with correct values + + // Populate UI with correct up to date user's selected values // Select menus signLanguageDropdown.getMenu().selectItemByData( _backgroundPage.params.signLanguage ); uiLanguageDropdown.getMenu().selectItemByData( _backgroundPage.params.uiLanguage ); @@ -263,25 +284,31 @@ var browser = browser || chrome; hinticonWidget.setValue( _backgroundPage.params.hinticon ); coloredwordsWidget.setValue( _backgroundPage.params.coloredwords ); showvideoWidget.setValue( _backgroundPage.params.showvideo ); + // TEST Tri-buttons : selectItemByData or setData + choosepanelsWidget.setData( _backgroundPage.params.showvideo ); + choosepanelsWidget.selectItemByData( _backgroundPage.params.showvideo ); // Changes events signLanguageDropdown.getMenu().on( 'choose', changeSignLanguage ); uiLanguageDropdown.getMenu().on( 'choose', changeUiLanguage ); // _backgroundPage.storeParam( 'uiLanguage', _backgroundPage.params.uiLanguage ); // uiLanguage in localStorage before first usage-change - historyWidget.on( 'change', function( newLimit ) { - // newLimit = parseInt( newLimit ) >-1 ? parseInt( newLimit ) : 0; // works ? - newLimit = parseInt( newLimit ) || 0; - if ( newLimit < 0 ) { newLimit = 0; } - _backgroundPage.storeParam( 'historylimit', newLimit ); + historyWidget.on( 'change', function( val ) { + val = parseInt( val ) >=0 ? parseInt( val ) : 0; + _backgroundPage.storeParam( 'historylimit', val ); this.cleanHistory(); }.bind( this ) ); - wpintegrationWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'wpintegration' ) ) - twospeedWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'twospeed' ) ) + wpintegrationWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'wpintegration' ) ); + twospeedWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'twospeed' ) ); // _backgroundPage.storeParam( 'twospeed', _backgroundPage.params.twospeed ); // twospeed in localStorage before first usage-change - hinticonWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'hinticon' ) ) - coloredwordsWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'coloredwords' ) ) - showvideoWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'showvideo' ) ) - + hinticonWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'hinticon' ) ); + coloredwordsWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'coloredwords' ) ); + // TEST: Choose panels to display + showvideoWidget.on( 'change', _backgroundPage.storeParam.bind( _backgroundPage, 'showvideo' ) ); + // Listen for item selection events + choosepanelsWidget.on('choose', (d)=>{ + _backgroundPage.storeParam('showvideo', d.getData()); + + }); // Build Settings UI this.paramTab.$element @@ -292,7 +319,8 @@ var browser = browser || chrome; .append( twospeedLayout.$element ) .append( hinticonLayout.$element ) .append( coloredwordsLayout.$element ) - .append( showvideoLayout.$element ); + .append( showvideoLayout.$element ) + .append( choosepanelsLayout.$element ); }; /* *********************************************************** */