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

Settings page: Ui accessible via settingsvars.js

Browse Source
This commit is contained in:
Tamius Han 2018-11-30 22:18:58 +01:00
parent 2404cd7757
commit fa0181815b
3 changed files with 128 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
res/settings/js/settings.js
View File

@ -1,60 +0,0 @@
function showAbout(){
clearPage();
document.getElementById("about").classList.remove("hide");
document.getElementById("tab_about").classList.add("tab-selected");
}
function showShortcuts(){
clearPage();
document.getElementById("uw_shortcuts").classList.remove("hide");
document.getElementById("tab_shortcuts").classList.add("tab-selected");
}
function showGeneralSettings(){
clearPage();
document.getElementById("general_settings").classList.remove("hide");
document.getElementById("tab_general_settings").classList.add("tab-selected");
}
function showSites(){
clearPage();
document.getElementById("uw_sites").classList.remove("hide");
document.getElementById("tab_sites").classList.add("tab-selected");
}
function clearPage(){
// Hide you sections
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("general_settings").classList.add("hide");
document.getElementById("uw_sites").classList.add("hide");
// Hide you tabs
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("tab_about").classList.remove("tab-selected");
document.getElementById("tab_general_settings").classList.remove("tab-selected");
document.getElementById("tab_sites").classList.remove("tab-selected");
}
// page init
// document.addEventListener("DOMContentLoaded", loadopts);
document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
document.querySelector("#tab_about").addEventListener("click", showAbout);
// document.querySelector("#tab_general_settings").addEventListener("click",showGeneralSettings);
// document.querySelector("#tab_sites").addEventListener("click", showSites);
document.querySelector("#kb_save").addEventListener("click", saveKeybinds);
document.querySelector("#kb_cancel").addEventListener("click", loadKeybinds);
// document.querySelector("#enable_autoar").addEventListener("click",saveAutoar);
// document.querySelector("#enable_ui").addEventListener("click", saveUI);
// document.querySelector("#enable_ui_compact").addEventListener("click", saveUI);
loadKeybinds();

46
res/settings/js/settingsvars.js Normal file
View File

@ -0,0 +1,46 @@
var ui = {
general: {
extensionSettings: {
buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_settings')),
buttons: [],
whitelistTextbox: document.getElementById('_general_extension_whitelist'),
blacklistTextbox: document.getElementById('_general_extension_blacklist')
},
autoarSettings: {
buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global')),
buttons: []
},
alignmentSettings: {
buttonsContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_alignment')),
buttons: []
},
stretchSettings: {
buttonContainer: BaseElement.fromExisting(document.getElementById('_general_extension_global_stretch')),
buttons: [],
thinBordersTresholdInput: document.getElementById('_general_extension_global_stretch_thin_borders_treshold_input')
}
},
// Automatic detection settings:
autoar: {
autoarSettings: {
buttonContainer: BaseElement.fromExisting(document.getElementById('_autoar_global_settings')),
buttons: [],
whitelistTextbox: document.getElementById('_autoar_whitelist'),
blacklistTextbox: document.getElementById('_autoar_blacklist')
},
checkFrequency: {
playingCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_playing'),
pausedCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_paused'),
errorCheckFrequencyInput: document.getElementById('_autoar_checkFrequency_error')
}
},
// Customization settings
customization: {
actionList: BaseElement.fromExisting(document.getElementById('_customization_actions')),
actionItems: [],
}
}

171
res/settings/settings.html
View File

@ -81,7 +81,7 @@
<div class="row"> <div class="row">
<div class="label">Default stretch mode</div> <div class="label">Default stretch mode</div>
<div class="button-row" id="_general_extension_global_alignment"> <div class="button-row" id="_general_extension_global_stretch">
</div> </div>
<span class="description"> <span class="description">
<b>None:</b> do not stretch the video at all. This is the default option, for men of culture.<br/> <b>None:</b> do not stretch the video at all. This is the default option, for men of culture.<br/>
@ -96,7 +96,7 @@
Thin border treshold (%): Thin border treshold (%):
</div> </div>
<div class="flex flex-input"> <div class="flex flex-input">
<input type="number"> <input id="_general_extension_global_stretch_thin_borders_input" type="number">
</div> </div>
</div> </div>
</div> </div>
@ -106,108 +106,101 @@
<!-- AUTOMATIC DETECTION SETTINGS --> <!-- AUTOMATIC DETECTION SETTINGS -->
<div id="autoar_settings"> <div id="autoar_settings">
<div class="content">
<div class="row"> <div class="row">
<span class="label">Enable autodetection:</span> <span class="label">Enable autodetection:</span>
<!-- Buttons go here --> <!-- Buttons go here -->
<div class="button-row" id="_general_autoar_global_settings"> <div class="button-row" id="_autoar_global_settings">
</div>
<span class="description">
<b>Always</b> enables autodetection on every site you visit that you didn't blacklist.<br/>
<b>On whitelisted sites</b> enables autodetection only on sites you explicitly whitelisted.<br/>
<b>Never</b> disables autodetection on all sites, even on those you whitelisted.
</span>
</div>
<div class="flex flex-row">
<div class="flex flex-column flex-auto">
<div class="label">Whitelisted sites</div>
<div class="description">List of whitelisted sites. One per line.</div>
<textarea id="_general_autoar_whitelist"></textarea>
</div>
<div class="flex flex-column flex-auto">
<div class="label">Blacklisted sites</div>
<div class="description">List of blacklisted sites. One per line.</div>
<textarea id="_general_autoar_blacklist"></textarea>
</div>
</div>
<h2>Advanced automatic detection options</h2>
<div class="row">
<div class="label">Aspect ratio check frequency</div>
<div class="description">
<p>Options here decide how often the extension will check for changes in aspect ratio of a given video.</p>
<p>Values are given in milliseconds. Longer intervals increase delay between aspect ratio changing and extension re-correcting for the change. Using shorter intervals than the default ones can cause lage and <i>immense</i> RAM usage.</p>
</div>
<div class="flex flex-column">
<div class="flex flex-row">
<div class="flex flex-input-label">
Check frequency when video is playing (ms):
</div>
<div class="flex flex-input">
<input type="number">
</div>
</div> </div>
<div class="flex flex-row"> <span class="description">
<div class="flex flex-input-label"> <b>Always</b> enables autodetection on every site you visit that you didn't blacklist.<br/>
Check frequency when video is paused (ms): <b>On whitelisted sites</b> enables autodetection only on sites you explicitly whitelisted.<br/>
</div> <b>Never</b> disables autodetection on all sites, even on those you whitelisted.
<div class="flex flex-input"> </span>
<input type="number"> </div>
</div>
<div class="flex flex-row">
<div class="flex flex-column flex-auto">
<div class="label">Whitelisted sites</div>
<div class="description">List of whitelisted sites. One per line.</div>
<textarea id="_autoar_whitelist"></textarea>
</div> </div>
<div class="flex flex-row"> <div class="flex flex-column flex-auto">
<div class="flex flex-input-label"> <div class="label">Blacklisted sites</div>
Recheck delay on error (ms): <div class="description">List of blacklisted sites. One per line.</div>
<textarea id="_autoar_blacklist"></textarea>
</div>
</div>
<h2>Advanced automatic detection options</h2>
<div class="row">
<div class="label">Aspect ratio check frequency</div>
<div class="description">
<p>Options here decide how often the extension will check for changes in aspect ratio of a given video.</p>
<p>Values are given in milliseconds. Longer intervals increase delay between aspect ratio changing and extension re-correcting for the change. Using shorter intervals than the default ones can cause lage and <i>immense</i> RAM usage.</p>
</div>
<div class="flex flex-column">
<div class="flex flex-row">
<div class="flex flex-input-label">
Check frequency when video is playing (ms):
</div>
<div class="flex flex-input">
<input id="_autoar_checkFrequency_playing" type="number">
</div>
</div> </div>
<div class="flex flex-input"> <div class="flex flex-row">
<input type="number"> <div class="flex flex-input-label">
Check frequency when video is paused (ms):
</div>
<div class="flex flex-input">
<input id="_autoar_checkFrequency_paused" type="number">
</div>
</div>
<div class="flex flex-row">
<div class="flex flex-input-label">
Recheck delay on error (ms):
</div>
<div class="flex flex-input">
<input id="_autoar_checkFrequency_error" type="number">
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div>
When video is playing: <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms
<div>
<div>
When video is paused: <input id="_input_autoAr_timer_pause" class="_autoAr _autoAr_timer_pause" type="number" min="5" max="10000"> ms
<div>
<div>
On error: <input id="_input_autoAr_timer_error" class="_autoAr _autoAr_timer_error" type="number" min="5" max="10000"> ms
<div> -->
</div>
<div id="_autoar_fallback_mode_top" class="row"> <div id="_autoar_fallback_mode_top" class="row">
<div class="label">Fallback mode</div> <div class="label">Fallback mode</div>
<div class="description"> <div class="description">
<p>In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it. <p>In order for autodetection to work, the extension grabs a frame of the video you're watching and takes a look at it.
Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video. Some websites use DRM, which prevents you from using the HTML5-blessed way of getting a frame from a video.
Some browsers offer some features that can be used to circumvent DRM protection. Some browsers offer some features that can be used to circumvent DRM protection.
With this option enabled, the extension will use said features to basically do that. With this option enabled, the extension will use said features to basically do that.
</p> </p>
<p>At the moment, Firefox is the only browser to support this.</p> <p>At the moment, Firefox is the only browser to support this.</p>
<div> <div>
This browser doesn't support fallback mode. This browser doesn't support fallback mode.
</div>
</div> </div>
<div class="">Enable fallback mode</div>
</div> </div>
<div class="">Enable fallback mode</div>
</div>
</div>
</div> </div>
<!-- CUSTOMIZATION (INTERFACE AND SHORTCUTS) --> <!-- CUSTOMIZATION (INTERFACE AND SHORTCUTS) -->
<div id="interface_shortcut_settings"> <div id="interface_shortcut_settings">
<div class="label">Actions</div> <div class="content">
<div class="description"> <div class="label">Actions</div>
<p>In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.</p> <div class="description">
</div> <p>In this sections, you can define custom actions, add or change keyboard shortcut or hide buttons from the popup.</p>
<div class="flex flex-column" id="_customization_action_list"> </div>
<div class="flex flex-column" id="_customization_action_list">
</div> </div>
</div> </div>
</div>
<!-- ABOUT --> <!-- ABOUT -->
@ -229,7 +222,6 @@
<p>Special thanks to me for making this extension. You're welcome.</p> <p>Special thanks to me for making this extension. You're welcome.</p>
</div> </div>
</div> </div>
</div>
<script src="../../js/conf/Debug.js"></script> <script src="../../js/conf/Debug.js"></script>
@ -240,6 +232,7 @@
<!-- ui libs --> <!-- ui libs -->
<script src="../../js/lib/libghettoui/BaseElement.js"></script> <script src="../../js/lib/libghettoui/BaseElement.js"></script>
<script src="./js/settingsvars.js"></script>
<script src="./js/settings.js"></script> <script src="./js/settings.js"></script>
</body> </body>
</html> </html>