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

Extension settings and site settings prepared for adding buttons programmatically

Browse Source
This commit is contained in:
Tamius Han 2018-11-25 23:53:30 +01:00
parent e9cc0d8eeb
commit 8bdb7b9e94
3 changed files with 93 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
res/popup/js/popup.js
View File

@ -185,26 +185,6 @@ function configurePopupTabs(site) {
showMenu(selectedMenu); showMenu(selectedMenu);
} }
return; return;
// todo: this can potentially be removed
// Determine which tabs can we touch.
// If extension is disabled, we can't touch 'site settings' and 'video settings'
// If extension is enabled, but site is disabled, we can't touch 'video settings'
var extensionEnabled = settings.extensionEnabled();
var extensionEnabledForSite = settings.extensionEnabledForSite(site);
if (extensionEnabledForSite || extensionEnabled) {
tablist['videoSettings'].enable();
} else {
tablist['videoSettings'].disable();
}
// if popup isn't being opened for the first time, there's no reason to switch
// we're already in this tab
if (!selectedMenu) {
showMenu('videoSettings');
}
} }
@ -298,6 +278,14 @@ function configureGlobalTab() {
} }
function configureSitesTab(site) { function configureSitesTab(site) {
const popupButtons = settings.getActionsForSite(site).filter(action => action.popup === 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);
return; // todo: revisit return; // todo: revisit
if (Debug.debug) { if (Debug.debug) {
console.log("[popup.js] Configuring sites tab (SitePanel).", console.log("[popup.js] Configuring sites tab (SitePanel).",

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

@ -58,6 +58,49 @@ SitePanel.stretch['2'] = document.getElementById("_stretch_site_hybrid")
SitePanel.stretch['3'] = document.getElementById("_stretch_site_conditional") SitePanel.stretch['3'] = document.getElementById("_stretch_site_conditional")
//#endregion //#endregion
//#region GlobalPanel
var GlobalPanel = {};
GlobalPanel.elements = {};
GlobalPanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status_buttons'))
}
GlobalPanel.elements.autoarSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_autoar_buttons'))
}
GlobalPanel.elements.stretchSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_stretch_buttons'))
}
GlobalPanel.elements.alignmentSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_global_alignment_buttons'))
}
//#endregion
//#region SitePanel
var SitePanel = {};
GlobalPanel.elements = {};
GlobalPanel.elements.extensionSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons'))
}
GlobalPanel.elements.autoarSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons'))
}
GlobalPanel.elements.stretchSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons'))
};
GlobalPanel.elements.alignmentSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment_buttons'))
};
//#endregion
//#region VideoPanel //#region VideoPanel
var VideoPanel = {}; var VideoPanel = {};

116
res/popup/popup.html
View File

@ -27,52 +27,31 @@
<div id="_menu_settings_ext" class="suboption hidden"> <div id="_menu_settings_ext" class="suboption hidden">
<p>These settings can be overriden on per-site basis.</p> <p>These settings can be overriden on per-site basis.</p>
<div class="row"> <div class="row">
<span class="label">Enable this extension:<br/>
<small>By default, extension will only work on fullscreen videos.</small></span> <div id="_menu_settings_site_status" class="row">
<div class="button-row"> <span class="label experimental">Extension status</span>
<a id="_ext_global_options_blacklist" class="button _ext _ext_global_options_basic _blacklist">Always</a> <div id="_menu_settings_global_status_buttons" class="button-row">
<a id="_ext_global_options_whitelist" class="button _ext _ext_global_options_basic _whitelist">On whitelisted sites</a> </div>
<a id="_ext_global_options_disabled" class="button _ext _ext_global_options_basic _disabled" >Never</a> </div>
<div id="_menu_settings_site_autoar" class="row">
<span class="label experimental">Automatic detection</span>
<div id="_menu_settings_global_autoar_buttons" class="button-row">
</div>
</div> </div>
<span class="label">Enable advanced mode:<br/>
<small>In advanced mode, extension will also try to correct video aspect ratio when not in full screen. Useful for e.g. theater mode on youtube.</small></span> <!-- STRETCH STUFF -->
<div class="button-row"> <div id="_menu_settings_global_stretch" class="row">
<a id="_ext_global_options_blacklist" class="button _ext _ext_global_options _blacklist">Always</a> <span class="label experimental">Stretching mode</span>
<a id="_ext_global_options_whitelist" class="button _ext _ext_global_options _whitelist">On whitelisted sites</a> <div id="_menu_settings_global_stretch_buttons" class="button-row">
<a id="_ext_global_options_disabled" class="button _ext _ext_global_options _disabled" >Never</a> </div>
</div> </div>
<div id="_ext_only_when_ext_enabled"> <!-- VIDEO ALIGNMENT -->
<div class="row"> <div id="_menu_settings_global_alignment" class="row">
<span class="label">Enable autodetection:</span> <span class="label">Video alignment:</span>
<div class="button-row"> <div id="_menu_settings_global_alignment_buttons" class="button-row">
<a id="_ar_global_options_blacklist" class="button _autoAr _ar_global_options _blacklist">Always</a>
<a id="_ar_global_options_whitelist" class="button _autoAr _ar_global_options _whitelist">On whitelisted sites</a>
<a id="_ar_global_options_disabled" class="button _autoAr _ar_global_options _disabled" >Never</a>
</div>
</div>
<!-- TODO: default aspect ratio settings -->
<div class="row">
<span class="label experimental">Default stretching mode</span>
<div class="button-row">
<a id="_stretch_global_none" class="button _stretch _ar_stretch_global _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_basic" class="button _stretch _ar_stretch_global _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_hybrid" class="button _stretch _ar_stretch_global _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
<a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
</div>
</div>
<!-- VIDEO ALIGNMENT -->
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_ext_left" class="button _align_ext _align_ext_left">Left</a>
<a id="_align_ext_center" class="button _align_ext _align_ext_center">Center</a>
<a id="_align_ext_right" class="button _align_ext _align_ext_right">Right</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -89,40 +68,29 @@
</div> </div>
</div> </div>
<!-- things that are disabled if site is disabled --> <div id="_menu_settings_site_status" class="row">
<div id="_site_only_when_site_enabled"> <span class="label experimental">Extension status for this site</span>
<div class="row"> <div id="_menu_settings_site_status_buttons" class="button-row">
<span class="label">Automatic detection:</span>
<div class="button-row">
<a id="_ar_site_options_enabled" class="button _autoAr _ar_site_options _enabled" >Whitelist</a>
<a id="_ar_site_options_default" class="button _autoAr _ar_site_options _default" >Default</a>
<a id="_ar_site_options_disabled" class="button _autoAr _ar_site_options _disabled">Blacklist</a>
</div>
</div> </div>
</div>
<div id="_menu_settings_site_autoar" class="row">
<span class="label experimental">Automatic detection</span>
<div id="_menu_settings_site_autoar_buttons" class="button-row">
</div>
</div>
<!-- TODO: default aspect ratio, default settings --> <!-- STRETCH STUFF -->
<div id="_menu_settings_site_stretch" class="row">
<!-- STRETCH MODE --> <span class="label experimental">Stretching mode</span>
<div class="row"> <div id="_menu_settings_site_stretch_buttons" class="button-row">
<span class="label experimental">Default stretching mode</span>
<div class="button-row">
<a id="_stretch_site_none" class="button _stretch _ar_stretch_site _none w24">Never<br/><span id="_b_stretch_default_none_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_basic" class="button _stretch _ar_stretch_site _basic w24">Basic<br/><span id="_b_stretch_default_basic_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_hybrid" class="button _stretch _ar_stretch_site _hybrid w24">Hybrid<br/><span id="_b_stretch_default_hybrid_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_conditional" class="button _stretch _ar_stretch_site _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
<a id="_stretch_site_default" class="button _stretch _ar_stretch_site _default w24">Default<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
</div>
</div> </div>
</div>
<!-- VIDEO ALIGNMENT -->
<div class="row"> <!-- VIDEO ALIGNMENT -->
<span class="label">Video alignment:</span> <div id="_menu_settings_site_alignment" class="row">
<div class="button-row"> <span class="label">Video alignment:</span>
<a id="_align_site_left" class="button _align_site _align_site_left">Left</a> <div id="_menu_settings_site_alignment_buttons" class="button-row">
<a id="_align_site_center" class="button _align_site _align_site_center">Center</a>
<a id="_align_site_right" class="button _align_site _align_site_right">Right</a>
<a id="_align_site_default"class="button _align_site _align_site_default">Default</a>
</div>
</div> </div>
</div> </div>
</div> </div>