From 6b9c0274b7656ce2c1adbc2061d760330e556955 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 26 Nov 2018 22:41:44 +0100 Subject: [PATCH] Selecting popup buttons in 'site settings' and 'extension settings' --- js/conf/ExtensionConf.js | 8 ++-- js/lib/Comms.js | 2 +- res/popup/js/popup.js | 98 ++++++++++++++++++--------------------- res/popup/js/popupvars.js | 16 ++++++- 4 files changed, 63 insertions(+), 61 deletions(-) diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index 9e6fded..bc9d0f6 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -401,7 +401,7 @@ var ExtensionConf = { { cmd: [{ action: 'set-stretch', - arg: 'NO_STRETCH', + arg: 0, }], popup: true, popup_site: true, @@ -411,7 +411,7 @@ var ExtensionConf = { },{ cmd: [{ action: 'set-stretch', - arg: 'BASIC', + arg: 1, }], popup: true, popup_site: true, @@ -421,7 +421,7 @@ var ExtensionConf = { },{ cmd: [{ action: 'set-stretch', - arg: 'HYBRID', + arg: 2, }], popup: true, popup_site: true, @@ -431,7 +431,7 @@ var ExtensionConf = { },{ cmd: [{ action: 'set-stretch', - arg: 'CONDITIONAL', + arg: 3, }], popup: true, popup_site: true, diff --git a/js/lib/Comms.js b/js/lib/Comms.js index bfe0644..094404f 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -71,7 +71,7 @@ class CommsClient { this.pageInfo.setVideoFloat(message.arg, message.playing); this.pageInfo.restoreAr(); } else if (message.cmd === "set-stretch") { - this.pageInfo.setStretchMode(StretchMode[message.arg], message.playing); + this.pageInfo.setStretchMode(message.arg, message.playing); } else if (message.cmd === "autoar-start") { if (message.enabled !== false) { this.pageInfo.initArDetection(message.playing); diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 8523b15..8a2ce39 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -195,12 +195,13 @@ function configurePopupTabs(site) { -function basicCommandHandler(cmdArray) { +function basicCommandHandler(cmdArray, scope) { for (cmd of cmdArray) { port.postMessage({ cmd: cmd.action, arg: cmd.arg, - targetFrame: selectedSubitem[selectedMenu] + targetFrame: selectedSubitem[selectedMenu], + scope: scope }); } } @@ -225,10 +226,11 @@ function buildKeyboardShortcutString(keypress) { return shortcutCombo; } -function processButtonsForPopupCategory(category, buttons) { +function processButtonsForPopupCategory(category, buttons, scope) { if (buttons.length === 0) { category.container.hide(); } else { + category.buttons = {}; category.buttonContainer.removeChildren(); category.container.show(); category.buttonContainer.show(); @@ -244,51 +246,47 @@ function processButtonsForPopupCategory(category, buttons) { '', button.label, shortcutCombo, - () => basicCommandHandler(cmd), + () => basicCommandHandler(cmd, scope), ['w24'] ) nb.appendTo(category.buttonContainer); + + var buttonId = ''; + for (var c in cmd) { + buttonId += `${c > 0 ? ';' : ''}${cmd[c].action}:${cmd[c].arg}`; + } + category.buttons[buttonId] = nb; } } } +function selectButton(action, arg, buttons) { + for (var b in buttons) { + buttons[b].unselect(); + } + const cmd=`${action}:${arg}` + + if (buttons[cmd]) { + buttons[cmd].select(); + } + console.log("SSSSSSSSSSSSSSSSSSS\nselecting button:", cmd, "\nbuttons", buttons) +} + function configureGlobalTab() { const popupButtons = settings.getActionsForSite(site).filter(action => action.popup_global === true); const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'); const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'); - processButtonsForPopupCategory(VideoPanel.elements.stretchSettings, stretchButtons); - processButtonsForPopupCategory(VideoPanel.elements.alignmentSettings, alignButtons); + processButtonsForPopupCategory(GlobalPanel.elements.stretchSettings, stretchButtons); + processButtonsForPopupCategory(GlobalPanel.elements.alignmentSettings, alignButtons); + + selectButton('set-stretch', settings.active.stretch.initialMode, GlobalPanel.elements.stretchSettings.buttons); + selectButton('set-alignment', settings.active.miscFullscreenSettings.videoFloat, GlobalPanel.elements.alignmentSettings.buttons); return; // todo: revisit - if (Debug.debug) { - console.log("[popup.js] Configuring global tab (ExtPanel).", - "\nextension mode: ", settings.active.extensionMode, - "\narDetect mode: ", settings.active.arDetect.mode, - "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat, - "\nstretch mode: ", settings.active.stretch.initialMode, - "\n..") - } - - - for(var button in ExtPanel.extOptions) { - ExtPanel.extOptions[button].classList.remove("selected"); - } - for(var button in ExtPanel.arOptions) { - ExtPanel.arOptions[button].classList.remove("selected"); - } - for(var button in ExtPanel.alignment) { - ExtPanel.alignment[button].classList.remove("selected"); - } - for(var button in ExtPanel.stretch) { - ExtPanel.stretch[button].classList.remove("selected"); - } - ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected"); ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected"); - ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected"); - ExtPanel.stretch[settings.active.stretch.initialMode].classList.add("selected"); } function configureSitesTab(site) { @@ -297,20 +295,23 @@ function configureSitesTab(site) { const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'); const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'); - processButtonsForPopupCategory(VideoPanel.elements.stretchSettings, stretchButtons); - processButtonsForPopupCategory(VideoPanel.elements.alignmentSettings, alignButtons); + processButtonsForPopupCategory(SitePanel.elements.stretchSettings, stretchButtons, 'site'); + processButtonsForPopupCategory(SitePanel.elements.alignmentSettings, alignButtons, 'site'); + + // optional settings: + if(settings.active.sites[site.host] && settings.active.sites[site.host].stretch !== undefined) { // can be 0 + selectButton('set-stretch', settings.active.sites[site.host].stretch, SitePanel.elements.stretchSettings.buttons) + } else { + selectButton('set-stretch', -1, SitePanel.elements.stretchSettings.buttons) + } + + if (settings.active.sites[site.host] && settings.active.sites[site.host].videoAlignment) { + selectButton('set-alignment', settings.active.sites[site.host].videoAlignment, SitePanel.elements.alignmentSettings.buttons); + } else { + selectButton('set-alignment', 'default', SitePanel.elements.alignmentSettings.buttons); + } return; // todo: revisit - if (Debug.debug) { - console.log("[popup.js] Configuring sites tab (SitePanel).", - "\nsite: ", site, - "\nextension mode: ", settings.active.sites[site.host] ? settings.active.sites[site.host].status : 'no site-special settings for this site', - "\narDetect mode: ", settings.active.sites[site.host] ? settings.active.sites[site.host].arStatus : 'no site-special settings for this site', - "\nvideo float mode:", settings.active.sites[site.host] ? settings.active.sites[site.host].videoFloat : 'no site-special settings for this site', - "\ndefault ar: ", settings.active.sites[site.host] ? settings.active.sites[site.host].ar : 'no site-special settings for this site', - "\nstretch mode: ", settings.active.sites[site.host] ? settings.active.sites[site.host].stretch : 'no site-special settings for this site', - "\n...") - } for(const button in SitePanel.extOptions) { SitePanel.extOptions[button].classList.remove("selected"); @@ -334,18 +335,7 @@ function configureSitesTab(site) { SitePanel.arOptions.default.classList.add("selected"); } - // optional settings: - if (settings.active.sites[site.host] && settings.active.sites[site.host].videoAlignment) { - SitePanel.alignment[settings.active.sites[site.host].videoAlignment].classList.add("selected"); - } else { - SitePanel.alignment.default.classList.add('selected'); - } - if(settings.active.sites[site.host] && settings.active.sites[site.host].stretch !== undefined) { // can be 0 - SitePanel.stretch[settings.active.sites[site.host].stretch].classList.add("selected"); - } else { - SitePanel.stretch['-1'].classList.add("selected"); - } } function configureVideoTab(site) { diff --git a/res/popup/js/popupvars.js b/res/popup/js/popupvars.js index f24e703..5fc2a05 100644 --- a/res/popup/js/popupvars.js +++ b/res/popup/js/popupvars.js @@ -3,18 +3,22 @@ var GlobalPanel = {}; GlobalPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_global')) GlobalPanel.elements = {}; GlobalPanel.elements.extensionSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status_buttons')) } GlobalPanel.elements.autoarSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar_buttons')) } GlobalPanel.elements.stretchSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_crop')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_stretch_buttons')) } GlobalPanel.elements.alignmentSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment_buttons')) } @@ -25,16 +29,19 @@ var SitePanel = {}; SitePanel.elements = {}; SitePanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_site')) SitePanel.elements.extensionSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons')) } SitePanel.elements.autoarSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons')) } SitePanel.elements.stretchSettings = { - container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')), - buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons')) + buttons: {}, + container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_stretch')), + buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_stretch_buttons')) }; SitePanel.elements.alignmentSettings = { container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')), @@ -49,18 +56,23 @@ var VideoPanel = {}; VideoPanel.elements = {}; VideoPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_video')) VideoPanel.elements.cropSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons')) } VideoPanel.elements.stretchSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch_buttons')) } VideoPanel.elements.alignmentSettings = { + buttons: {}, container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment')), buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment_buttons')) } +// THE FOLLOWING BUTTONS ARE STILL HANDLED THE OLD-FASHIONED WAY +// DO NOT REMOVE // buttons: for toggle, select VideoPanel.buttons = {}; VideoPanel.buttons.zoom = {};