Fixes for minor popup bugs

This commit is contained in:
Tamius Han 2018-09-19 23:34:47 +02:00
parent c713977bb6
commit 06cfb9a04e
3 changed files with 72 additions and 42 deletions

View File

@ -131,7 +131,9 @@ strike {
}
.disabled {
color: #666;
pointer-events: none;
/* color: #666; */
filter: contrast(50%) brightness(40%) grayscale(100%);
}
.disabled-button {

View File

@ -178,6 +178,10 @@ function configurePopupTabs(site) {
if (! extensionEnabledForSite) {
MenuTab.videoSettings.classList.add('disabled');
// also disable extra settings for site
document.getElementById("_site_only_when_site_enabled").classList.add("disabled");
if (! extensionEnabled) {
MenuTab.siteSettings.classList.add('disabled');
if (!selectedMenu) {
@ -192,6 +196,7 @@ function configurePopupTabs(site) {
} else {
MenuTab.videoSettings.classList.remove('disabled');
MenuTab.siteSettings.classList.remove('disabled');
document.getElementById("_site_only_when_site_enabled").classList.remove("disabled");
// if popup isn't being opened for the first time, there's no reason to switch
// we're already in this tab
@ -235,11 +240,11 @@ function configureSitesTab(site) {
if (Debug.debug) {
console.log("[popup.js] Configuring sites tab (SitePanel).",
"\nsite: ", site,
"\nextension mode: ", settings.active.sites[site].status,
"\narDetect mode: ", settings.active.sites[site].arStatus,
"\nvideo float mode:", settings.active.sites[site].videoFloat,
"\ndefault ar: ", settings.active.sites[site].ar,
"\nstretch mode: ", settings.active.sites[site].stretch,
"\nextension mode: ", settings.active.sites[site] ? settings.active.sites[site].status : 'no site-special settings for this site',
"\narDetect mode: ", settings.active.sites[site] ? settings.active.sites[site].arStatus : 'no site-special settings for this site',
"\nvideo float mode:", settings.active.sites[site] ? settings.active.sites[site].videoFloat : 'no site-special settings for this site',
"\ndefault ar: ", settings.active.sites[site] ? settings.active.sites[site].ar : 'no site-special settings for this site',
"\nstretch mode: ", settings.active.sites[site] ? settings.active.sites[site].stretch : 'no site-special settings for this site',
"\n...")
}
@ -256,17 +261,23 @@ function configureSitesTab(site) {
SitePanel.stretch[button].classList.remove("selected");
}
SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
if (settings.active.sites[site] && settings.active.sites[site]) {
console.log("settings for", site, "exist!")
SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
} else {
SitePanel.extOptions.default.classList.add("selected");
SitePanel.arOptions.default.classList.add("selected");
}
// optional settings:
if (settings.active.sites[site].videoAlignment) {
if (settings.active.sites[site] && settings.active.sites[site].videoAlignment) {
SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected");
} else {
SitePanel.alignment.default.classList.add('selected');
}
if(settings.active.sites[site].stretch !== undefined) { // can be 0
if(settings.active.sites[site] && settings.active.sites[site].stretch !== undefined) { // can be 0
SitePanel.stretch[settings.active.sites[site].stretch].classList.add("selected");
} else {
SitePanel.stretch['-1'].classList.add("selected");
@ -350,16 +361,21 @@ function configureVideoTab() {
async function loadConfig(site){
if(Debug.debug)
if (Debug.debug) {
console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active);
}
document.getElementById("_menu_tab_settings_site_site_label").textContent = site;
configurePopupTabs(site);
configureGlobalTab();
configureSitesTab(site);
configureVideoTab();
if(Debug.debug)
if (Debug.debug) {
console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n");
}
}
async function getSite(){
@ -749,7 +765,11 @@ document.addEventListener("click", (e) => {
async function sleep(t) {
return new Promise( (resolve,reject) => {
setTimeout(t, () => resolve());
});
}
async function popup_init() {
// let's init settings and check if they're loaded
@ -778,7 +798,10 @@ async function popup_init() {
// });
hideWarning("script-not-running-warning");
getSite();
while (!this.site) {
getSite();
await sleep(5000);
}
}
popup_init();

View File

@ -23,6 +23,7 @@
</div>
<div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_site">
Site settings
<span class="menu-item-inline-desc"><br/>Settings for <span id="_menu_tab_settings_site_site_label"></span></span>
</div>
<div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_video">
Video settings
@ -93,37 +94,41 @@
<a id="_ext_site_options_blacklist" class="button _ext _ext_site_options _blacklist">Blacklist</a>
</div>
</div>
<div class="row">
<span class="label">Options for this site:</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>
<!-- things that are disabled if site is disabled -->
<div id="_site_only_when_site_enabled">
<div class="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>
<!-- TODO: default aspect ratio, default settings -->
<!-- TODO: default aspect ratio, default settings -->
<!-- STRETCH MODE -->
<div class="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>
<!-- STRETCH MODE -->
<div class="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>
<!-- VIDEO ALIGNMENT -->
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_site_left" class="button _align_site _align_site_left">Left</a>
<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>
<!-- VIDEO ALIGNMENT -->
<div class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_site_left" class="button _align_site _align_site_left">Left</a>
<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>