tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Selecting popup buttons in 'site settings' and 'extension settings'

Browse Source
This commit is contained in:
Tamius Han 2018-11-26 22:41:44 +01:00
parent 1d7362c27f
commit 6b9c0274b7
4 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/conf/ExtensionConf.js
View File

@ -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,

2
js/lib/Comms.js
View File

@ -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);

98
res/popup/js/popup.js
View File

@ -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) {

16
res/popup/js/popupvars.js
View File

@ -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 = {};