Fixed switching menus
This commit is contained in:
parent
354b987cb4
commit
76b5f6eca1
@ -201,6 +201,15 @@ var ExtensionConf = {
|
||||
// status: <option> // should extension work on this site?
|
||||
// arStatus: <option> // should we do autodetection on this site?
|
||||
// statusEmbedded: <option> // reserved for future... maybe
|
||||
//
|
||||
// ar?: <ratio> // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
|
||||
// stretch? <stretch mode> // automatically stretch video on this site in this manner
|
||||
// videoAlignment? <left|center|right>
|
||||
//
|
||||
// type: <official|community|user> // 'official' — blessed by Tam.
|
||||
// // 'community' — blessed by reddit.
|
||||
// // 'user' — user-defined (not here)
|
||||
// override: <true|false> // override user settings for this site on update
|
||||
// }
|
||||
//
|
||||
// Veljavne vrednosti za možnosti
|
||||
|
||||
@ -215,6 +215,13 @@ class Settings {
|
||||
}
|
||||
}
|
||||
|
||||
extensionEnabled(){
|
||||
return this.active.extensionMode !== 'disabled'
|
||||
}
|
||||
|
||||
extensionEnabledForSite(site) {
|
||||
return this.canStartExtension(site);
|
||||
}
|
||||
|
||||
canStartAutoAr(site) {
|
||||
if (!site) {
|
||||
|
||||
@ -17,38 +17,66 @@ MenuTab.videoSettings = document.getElementById('_menu_tab_settings_video');
|
||||
MenuTab.about = document.getElementById('_menu_tab_about')
|
||||
|
||||
var ExtPanel = {};
|
||||
ExtPanel.globalOptions = {};
|
||||
ExtPanel.globalOptions.blacklist = document.getElementById("_ext_global_options_blacklist");
|
||||
ExtPanel.globalOptions.whitelist = document.getElementById("_ext_global_options_whitelist");
|
||||
ExtPanel.globalOptions.disabled = document.getElementById("_ext_global_options_disabled");
|
||||
ExtPanel.siteOptions = {};
|
||||
ExtPanel.siteOptions.disabled = document.getElementById("_ext_site_options_blacklist");
|
||||
ExtPanel.siteOptions.enabled = document.getElementById("_ext_site_options_whitelist");
|
||||
ExtPanel.siteOptions.default = document.getElementById("_ext_site_options_default");
|
||||
ExtPanel.extOptions = {};
|
||||
ExtPanel.extOptions.blacklist = document.getElementById("_ext_global_options_blacklist");
|
||||
ExtPanel.extOptions.whitelist = document.getElementById("_ext_global_options_whitelist");
|
||||
ExtPanel.extOptions.disabled = document.getElementById("_ext_global_options_disabled");
|
||||
ExtPanel.arOptions = {};
|
||||
ExtPanel.arOptions.disabled = document.getElementById("_ar_global_options_blacklist");
|
||||
ExtPanel.arOptions.enabled = document.getElementById("_ar_global_options_whitelist");
|
||||
ExtPanel.arOptions.default = document.getElementById("_ar_global_options_default");
|
||||
ExtPanel.alignment = {};
|
||||
ExtPanel.alignment.left = document.getElementById("_align_ext_left");
|
||||
ExtPanel.alignment.center = document.getElementById("_align_ext_center");
|
||||
ExtPanel.alignment.right = document.getElementById("_align_ext_right");
|
||||
|
||||
var AutoArPanel = {};
|
||||
AutoArPanel.globalOptions = {};
|
||||
AutoArPanel.globalOptions.blacklist = document.getElementById("_ar_global_options_blacklist");
|
||||
AutoArPanel.globalOptions.whitelist = document.getElementById("_ar_global_options_whitelist");
|
||||
AutoArPanel.globalOptions.disabled = document.getElementById("_ar_global_options_disabled");
|
||||
AutoArPanel.siteOptions = {};
|
||||
AutoArPanel.siteOptions.disabled = document.getElementById("_ar_site_options_disabled");
|
||||
AutoArPanel.siteOptions.enabled = document.getElementById("_ar_site_options_enabled");
|
||||
AutoArPanel.siteOptions.default = document.getElementById("_ar_site_options_default");
|
||||
var SitePanel = {};
|
||||
SitePanel.extOptions = {};
|
||||
SitePanel.extOptions.blacklist = document.getElementById("_ext_site_options_blacklist");
|
||||
SitePanel.extOptions.whitelist = document.getElementById("_ext_site_options_whitelist");
|
||||
SitePanel.extOptions.disabled = document.getElementById("_ext_site_options_disabled");
|
||||
SitePanel.arOptions = {};
|
||||
SitePanel.arOptions.disabled = document.getElementById("_ar_site_options_disabled");
|
||||
SitePanel.arOptions.enabled = document.getElementById("_ar_site_options_enabled");
|
||||
SitePanel.arOptions.default = document.getElementById("_ar_site_options_default");
|
||||
SitePanel.alignment = {};
|
||||
SitePanel.alignment.left = document.getElementById("_align_ext_left");
|
||||
SitePanel.alignment.center = document.getElementById("_align_ext_center");
|
||||
SitePanel.alignment.right = document.getElementById("_align_ext_right");
|
||||
|
||||
var ArPanel = {};
|
||||
ArPanel.alignment = {};
|
||||
ArPanel.alignment.left = document.getElementById("_align_left");
|
||||
ArPanel.alignment.center = document.getElementById("_align_center");
|
||||
ArPanel.alignment.right = document.getElementById("_align_right");
|
||||
ArPanel.autoar = {};
|
||||
|
||||
var StretchPanel = {};
|
||||
StretchPanel.global = {};
|
||||
StretchPanel.global.none = document.getElementById("_stretch_global_none");
|
||||
StretchPanel.global.basic = document.getElementById("_stretch_global_basic");
|
||||
StretchPanel.global.hybrid = document.getElementById("_stretch_global_hybrid");
|
||||
StretchPanel.global.conditional = document.getElementById("_stretch_global_conditional");
|
||||
var VideoPanel = {};
|
||||
VideoPanel.alignment = {};
|
||||
VideoPanel.alignment.left = document.getElementById("_align_left");
|
||||
VideoPanel.alignment.center = document.getElementById("_align_center");
|
||||
VideoPanel.alignment.right = document.getElementById("_align_right");
|
||||
|
||||
// labels on buttons
|
||||
VideoPanel.buttonLabels = {};
|
||||
VideoPanel.buttonLabels.crop = {};
|
||||
VideoPanel.buttonLabels.crop['auto-ar'] = document.getElementById("_b_changeAr_auto-ar_key");
|
||||
VideoPanel.buttonLabels.crop.reset = document.getElementById("_b_changeAr_reset_key");
|
||||
VideoPanel.buttonLabels.crop['219'] = document.getElementById("_b_changeAr_219_key");
|
||||
VideoPanel.buttonLabels.crop['189'] = document.getElementById("_b_changeAr_189_key");
|
||||
VideoPanel.buttonLabels.crop['169'] = document.getElementById("_b_changeAr_169_key");
|
||||
VideoPanel.buttonLabels.crop.custom = document.getElementById("_b_changeAr_custom_key");
|
||||
VideoPanel.buttonLabels.zoom = {};
|
||||
|
||||
// buttons: for toggle, select
|
||||
VideoPanel.buttons = {};
|
||||
VideoPanel.buttons.zoom = {};
|
||||
VideoPanel.buttons.zoom.showShortcuts = document.getElementById("_zoom_b_show_shortcuts")
|
||||
VideoPanel.buttons.zoom.hideShortcuts = document.getElementById("_zoom_b_hide_shortcuts")
|
||||
|
||||
// inputs (getting values)
|
||||
VideoPanel.inputs = {};
|
||||
VideoPanel.inputs.customCrop = document.getElementById("_input_custom_ar");
|
||||
VideoPanel.inputs.zoomSlider = document.getElementById("_input_zoom_slider");
|
||||
VideoPanel.inputs.allowPan = document.getElementById("_input_zoom_site_allow_pan");
|
||||
|
||||
// various labels
|
||||
VideoPanel.labels = {};
|
||||
VideoPanel.labels.zoomLevel = document.getElementById("_label_zoom_level");
|
||||
|
||||
|
||||
var selectedMenu = "";
|
||||
@ -101,121 +129,93 @@ function stringToKeyCombo(key_in){
|
||||
return keys_out;
|
||||
}
|
||||
|
||||
async function loadConfig(site){
|
||||
function configurePopupTabs(site) {
|
||||
// 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(Debug.debug)
|
||||
console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------");
|
||||
MenuTab.siteSettings.classList.add('disabled');
|
||||
|
||||
// -----------------------
|
||||
//#region tab-disabled
|
||||
//
|
||||
// if extension is disabled on current site, we can't do shit. Therefore, the following tabs will be disabled:
|
||||
// * AutoAR options
|
||||
// * Crop settings
|
||||
// * Stretch settings
|
||||
var canStartExtension = settings.canStartExtension(site);
|
||||
if (extensionEnabledForSite) {
|
||||
MenuTab.videoSettings.classList.remove('disabled');
|
||||
}
|
||||
if (extensionEnabled) {
|
||||
MenuTab.videoSettings.classList.remove('disabled');
|
||||
}
|
||||
|
||||
if (canStartExtension) {
|
||||
MenuTab.arSettings.classList.remove('disabled');
|
||||
MenuTab.autoAr.classList.remove('disabled');
|
||||
MenuTab.stretchSettings.classList.remove('disabled');
|
||||
|
||||
// only switch when popup is being opened for the first time
|
||||
if (! extensionEnabledForSite) {
|
||||
MenuTab.videoSettings.classList.add('disabled');
|
||||
if (! extensionEnabled) {
|
||||
MenuTab.siteSettings.classList.add('disabled');
|
||||
if (!selectedMenu) {
|
||||
openMenu('arSettings');
|
||||
openMenu('extensionSettings');
|
||||
}
|
||||
} else {
|
||||
MenuTab.arSettings.classList.add('disabled');
|
||||
MenuTab.autoAr.classList.add('disabled');
|
||||
MenuTab.stretchSettings.classList.add('disabled');
|
||||
MenuTab.siteSettings.classList.remove('disabled');
|
||||
if (!selectedMenu) {
|
||||
openMenu('siteSettings');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
MenuTab.videoSettings.classList.remove('disabled');
|
||||
MenuTab.siteSettings.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
|
||||
if (!selectedMenu) {
|
||||
openMenu('thisSite');
|
||||
openMenu('videoSettings');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//#endregion
|
||||
//
|
||||
// ----------------------
|
||||
//#region extension-basics - SET BASIC EXTENSION OPTIONS
|
||||
if(Debug.debug)
|
||||
console.log("EXT: site is:", site, "|settings for this site: ", (site && settings.active.sites[site]) ? settings.active.sites[site] : "default site")
|
||||
|
||||
|
||||
for(var button in ExtPanel.globalOptions) {
|
||||
ExtPanel.globalOptions[button].classList.remove("selected");
|
||||
function configureGlobalTab() {
|
||||
for(var button in ExtPanel.extOptions) {
|
||||
ExtPanel.extOptions[button].classList.remove("selected");
|
||||
}
|
||||
for(var button in ExtPanel.siteOptions) {
|
||||
ExtPanel.siteOptions[button].classList.remove("selected");
|
||||
try{
|
||||
for(var button in ExtPanel.arOptions) {
|
||||
ExtPanel.arOptions[button].classList.remove("selected");
|
||||
}
|
||||
} catch (e) {};
|
||||
for(var button in ExtPanel.alignment) {
|
||||
ExtPanel.alignment[button].classList.remove("selected");
|
||||
}
|
||||
|
||||
ExtPanel.globalOptions[settings.active.extensionMode].classList.add("selected");
|
||||
if(site && settings.active.sites[site]) {
|
||||
ExtPanel.siteOptions[settings.active.sites[site].status].classList.add("selected");
|
||||
} else {
|
||||
ExtPanel.siteOptions.default.classList.add("selected");
|
||||
ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
|
||||
console.log("ExtPanel", ExtPanel, "spaghett:", settings.active.arDetect.mode);
|
||||
try {
|
||||
ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
|
||||
}catch(e) {}
|
||||
ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
|
||||
}
|
||||
|
||||
//#endregion extension-basics
|
||||
//
|
||||
// ------------
|
||||
//#region autoar - SET AUTOAR OPTIONS
|
||||
// if(Debug.debug)
|
||||
// console.log("Autodetect mode?", settings.active.arDetect.mode, "| site & site options:", site, ",", (site && settings.active.sites[site]) ? settings.active.sites[site].arStatus : "fucky wucky?" );
|
||||
// document.getElementById("_autoAr_disabled_reason").textContent = settings.active.arDetect.DisabledReason;
|
||||
document.getElementById("_input_autoAr_timer").value = settings.active.arDetect.timer_playing;
|
||||
|
||||
|
||||
for(var button in AutoArPanel.globalOptions) {
|
||||
AutoArPanel.globalOptions[button].classList.remove("selected");
|
||||
function configureSitesTab(site) {
|
||||
function configureGlobalTab() {
|
||||
for(const button in SitePanel.extOptions) {
|
||||
SitePanel.extOptions[button].classList.remove("selected");
|
||||
}
|
||||
for(var button in AutoArPanel.siteOptions) {
|
||||
AutoArPanel.siteOptions[button].classList.remove("selected");
|
||||
for(const button in SitePanel.arOptions) {
|
||||
SitePanel.arOptions[button].classList.remove("selected");
|
||||
}
|
||||
for(const button in SitePanel.alignment) {
|
||||
SitePanel.alignment[button].classList.remove("selected");
|
||||
}
|
||||
|
||||
|
||||
AutoArPanel.globalOptions[settings.active.arDetect.mode].classList.add("selected");
|
||||
if(site && settings.active.sites[site]) {
|
||||
AutoArPanel.siteOptions[settings.active.sites[site].arStatus].classList.add("selected");
|
||||
} else {
|
||||
AutoArPanel.siteOptions.default.classList.add("selected");
|
||||
SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
|
||||
SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
|
||||
// SitePanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
|
||||
}
|
||||
//#endregion
|
||||
|
||||
// process video alignment:
|
||||
if(settings.active.miscFullscreenSettings.videoFloat){
|
||||
for(var button in ArPanel.alignment)
|
||||
ArPanel.alignment[button].classList.remove("selected");
|
||||
|
||||
ArPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
|
||||
}
|
||||
|
||||
//#region - SET STRETCH
|
||||
|
||||
// set stretching
|
||||
for (var button in StretchPanel.global) {
|
||||
StretchPanel.global[button].classList.remove("selected");
|
||||
}
|
||||
if (settings.active.stretch.initialMode === 0) {
|
||||
StretchPanel.global.none.classList.add("selected");
|
||||
} else if (settings.active.stretch.initialMode === 1) {
|
||||
StretchPanel.global.basic.classList.add("selected");
|
||||
} else if (settings.active.stretch.initialMode === 2) {
|
||||
StretchPanel.global.hybrid.classList.add("selected");
|
||||
} else if (settings.active.stretch.initialMode === 3) {
|
||||
StretchPanel.global.conditional.classList.add("selected");
|
||||
}
|
||||
//#endregion
|
||||
|
||||
// process keyboard shortcuts:
|
||||
function configureVideoTab() {
|
||||
// process keyboard shortcuts for crop settings
|
||||
if(settings.active.keyboard.shortcuts){
|
||||
for(var key in settings.active.keyboard.shortcuts){
|
||||
var shortcut = settings.active.keyboard.shortcuts[key];
|
||||
var keypress = stringToKeyCombo(key);
|
||||
|
||||
|
||||
try{
|
||||
if(shortcut.action == "crop"){
|
||||
if (key == 'q') {
|
||||
@ -247,12 +247,13 @@ async function loadConfig(site){
|
||||
catch(Ex){
|
||||
//do nothing if key doesn't exist
|
||||
}
|
||||
}
|
||||
|
||||
// fill in custom aspect ratio
|
||||
if (settings.active.keyboard.shortcuts.q) {
|
||||
document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg;
|
||||
}
|
||||
}
|
||||
|
||||
for(var key in _changeAr_button_shortcuts){
|
||||
try{
|
||||
document.getElementById(`_b_changeAr_${key}_key`).textContent = `(${_changeAr_button_shortcuts[key]})`;
|
||||
@ -264,6 +265,47 @@ async function loadConfig(site){
|
||||
}
|
||||
|
||||
|
||||
// todo: get min, max from settings
|
||||
VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
|
||||
VideoPanel.inputs.zoomSlider.max = Math.log2(8);
|
||||
VideoPanel.inputs.zoomSlider.value = 0;
|
||||
VideoPanel.inputs.zoomSlider.addEventListener('input', (event) => {
|
||||
var newZoom = Math.pow(2, VideoPanel.inputs.zoomSlider.value);
|
||||
// TODO: send new zoom value to current tab
|
||||
VideoPanel.labels.zoomLevel.textContent = (newZoom * 100).toFixed();
|
||||
});
|
||||
}
|
||||
|
||||
async function loadConfig(site){
|
||||
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------");
|
||||
|
||||
configurePopupTabs(site);
|
||||
configureGlobalTab();
|
||||
configureSitesTab(site);
|
||||
configureVideoTab();
|
||||
|
||||
//#region - SET STRETCH
|
||||
//
|
||||
// // set stretching
|
||||
// for (var button in StretchPanel.global) {
|
||||
// StretchPanel.global[button].classList.remove("selected");
|
||||
// }
|
||||
// if (settings.active.stretch.initialMode === 0) {
|
||||
// StretchPanel.global.none.classList.add("selected");
|
||||
// } else if (settings.active.stretch.initialMode === 1) {
|
||||
// StretchPanel.global.basic.classList.add("selected");
|
||||
// } else if (settings.active.stretch.initialMode === 2) {
|
||||
// StretchPanel.global.hybrid.classList.add("selected");
|
||||
// } else if (settings.active.stretch.initialMode === 3) {
|
||||
// StretchPanel.global.conditional.classList.add("selected");
|
||||
// }
|
||||
//#endregion
|
||||
|
||||
|
||||
|
||||
|
||||
if(Debug.debug)
|
||||
console.log("[popup.js::loadConfig] config loaded");
|
||||
}
|
||||
@ -274,13 +316,11 @@ async function getSite(){
|
||||
|
||||
function openMenu(menu){
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] trying to open menu", menu, "| element: ", Menu[menu]);
|
||||
console.log("[popup.js::openMenu] trying to open menu", menu, "\n element: ", Menu[menu]);
|
||||
}
|
||||
|
||||
for(var m in Menu){
|
||||
if(Menu[m] === null)
|
||||
continue; //todo: remove menus that are no longer there
|
||||
|
||||
if(Menu[m])
|
||||
Menu[m].classList.add("hidden");
|
||||
}
|
||||
for(var m in MenuTab){
|
||||
@ -288,25 +328,11 @@ function openMenu(menu){
|
||||
MenuTab[m].classList.remove("selected");
|
||||
}
|
||||
|
||||
if(menu == "arSettings" || menu == "cssHacks" ){
|
||||
// if(!hasVideos)
|
||||
// Menu.noVideo.classList.remove("hidden");
|
||||
// else{
|
||||
Menu[menu].classList.remove("hidden");
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
|
||||
}
|
||||
// }
|
||||
}
|
||||
else{
|
||||
Menu[menu].classList.remove("hidden");
|
||||
if(Debug.debug){
|
||||
console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
|
||||
}
|
||||
}
|
||||
MenuTab[menu].classList.add("selected");
|
||||
|
||||
selectedMenu = menu;
|
||||
MenuTab[menu].classList.add("selected");
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -376,24 +402,20 @@ document.addEventListener("click", (e) => {
|
||||
return;
|
||||
|
||||
if(e.target.classList.contains("menu-item")){
|
||||
if(e.target.classList.contains("_menu_this_site")){
|
||||
openMenu("thisSite");
|
||||
|
||||
if(Debug.debug) {
|
||||
console.log("[popup.js::eventListener] clicked on a tab. Class list:", e.target.classList);
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_aspectratio")){
|
||||
openMenu("arSettings");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_stretch")){
|
||||
openMenu("stretchSettings");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_hacks")){
|
||||
openMenu("cssHacks");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_about")){
|
||||
|
||||
if(e.target.classList.contains("_menu_tab_settings_ext")){
|
||||
openMenu("extensionSettings");
|
||||
} else if(e.target.classList.contains("_menu_tab_settings_site")){
|
||||
openMenu("siteSettings");
|
||||
} else if(e.target.classList.contains("_menu_tab_settings_video")){
|
||||
openMenu("videoSettings");
|
||||
} else if(e.target.classList.contains("_menu_tab_about")){
|
||||
openMenu("about");
|
||||
}
|
||||
else if(e.target.classList.contains("_menu_autoar")){
|
||||
openMenu("autoAr");
|
||||
}
|
||||
|
||||
// don't send commands
|
||||
return;
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
<div id="_menu_tab_settings_ext" class="menu-item _menu_tab_settings_ext">
|
||||
Extension settings
|
||||
</div>
|
||||
<div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_ext">
|
||||
<div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_site">
|
||||
Site settings
|
||||
</div>
|
||||
<div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_ext">
|
||||
<div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_video">
|
||||
Video settings
|
||||
<span class="menu-item-inline-desc"><br/>Crop & stretch options for current video</span>
|
||||
</div>
|
||||
@ -72,6 +72,16 @@
|
||||
<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 _align_ext_left">left</a>
|
||||
<a id="_align_ext_center" class="button _align _align_ext_center">center</a>
|
||||
<a id="_align_ext_right" class="button _align _align_ext_right">right</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -94,6 +104,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: default aspect ratio, default settings -->
|
||||
|
||||
<!-- VIDEO ALIGNMENT -->
|
||||
<div class="row">
|
||||
<span class="label">Video alignment:</span>
|
||||
<div class="button-row">
|
||||
<a id="_align_site_left" class="button _align _align_site_left">left</a>
|
||||
<a id="_align_site_center" class="button _align _align_site_center">center</a>
|
||||
<a id="_align_site_right" class="button _align _align_site_right">right</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -134,19 +154,21 @@
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
-->
|
||||
<input id="_zoom_slider" class="w100"
|
||||
<input id="_input_zoom_slider" class="w100"
|
||||
type="range"
|
||||
step="any"
|
||||
/>
|
||||
<div style="overflow: auto">
|
||||
<div class="inline-block float-left medium-small x-pad-1em">
|
||||
Zoom: <span id="zoom_level">100</span>%
|
||||
Zoom: <span id="_label_zoom_level">100</span>%
|
||||
</div>
|
||||
<div class="inline-block float-right medium-small">
|
||||
<a class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a><a class="_zoom_hide_shortcuts hidden x-pad-1em">show shortcuts</a><a class="_zoom_reset x-pad-1em">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-t-0-33em w100 display-block">
|
||||
<input type="checkbox"
|
||||
<input id="_input_zoom_site_allow_pan"
|
||||
type="checkbox"
|
||||
/>
|
||||
Pan with mouse
|
||||
</div>
|
||||
@ -159,7 +181,7 @@
|
||||
</p>
|
||||
<span class="label">Stretching mode</span>
|
||||
<div class="button-row">
|
||||
<a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
|
||||
<a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
|
||||
@ -169,23 +191,16 @@
|
||||
<div class="row">
|
||||
<span class="label">Video alignment:</span>
|
||||
<div class="button-row">
|
||||
<a id="_align_left" class="button _align _align_left">left</a>
|
||||
<a id="_align_center" class="button _align _align_center">center</a>
|
||||
<a id="_align_right" class="button _align _align_right">right</a>
|
||||
<a id="_align_video_left" class="button _align _align_video_left">left</a>
|
||||
<a id="_align_video_center" class="button _align _align_video_center">center</a>
|
||||
<a id="_align_video_right" class="button _align _align_video_right">right</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="autoar-basic-settings" class="suboption hidden">
|
||||
<!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
|
||||
<p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span id="_b_autoar_save_autoar_timer" class="button _save_autoAr_timer _autoAr">Save</span></p>
|
||||
</div>
|
||||
|
||||
<div id="css-hacks-settings" class="suboption hidden">
|
||||
<p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
|
||||
</div>
|
||||
|
||||
<div id="panel-about" class="suboption hidden">
|
||||
<!-- ABOUT -->
|
||||
<div id="_menu_about" class="suboption hidden">
|
||||
<div class="row">
|
||||
<span class="label">Ultrawidify version:</span><br/> <span id="uw-version"></span>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user