Some basic settings for keyboard shortcuts.
This commit is contained in:
Tamius Han
parent
d0373820fe
commit
ec6dfadb41
@ -137,16 +137,14 @@ var _kbd_process = function (event) { // Tukaj ugotovimo, katero tipko
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var _kbd_setup = async function() {
|
||||
|
||||
var _kbd_load = async function() {
|
||||
if(Debug.debug)
|
||||
console.log("[Keybinds::_kbd_setup_init] Setting up keybinds");
|
||||
|
||||
var ret = await StorageManager.getopt_async("keybinds");
|
||||
|
||||
var keybinds = ret.keybinds;
|
||||
|
||||
|
||||
if(Array.isArray(keybinds)){
|
||||
StorageManager.delopt("keybinds");
|
||||
keybinds = DEFAULT_KEYBINDINGS;
|
||||
@ -165,11 +163,24 @@ var _kbd_setup = async function() {
|
||||
}
|
||||
|
||||
_kbd_keybinds = keybinds;
|
||||
}
|
||||
|
||||
var _kbd_setup = async function() {
|
||||
await _kbd_load();
|
||||
|
||||
$(document).keydown(_kbd_process);
|
||||
}
|
||||
|
||||
var _kbd_fetch = async function(){
|
||||
if($.isEmptyObject(_kbd_keybinds)){
|
||||
await _kbd_load();
|
||||
}
|
||||
|
||||
return _kbd_keybinds;
|
||||
}
|
||||
|
||||
var Keybinds = {
|
||||
init: _kbd_setup
|
||||
init: _kbd_setup,
|
||||
fetch: _kbd_fetch,
|
||||
mods: _kbd_ModKeys
|
||||
}
|
||||
|
||||
4
js/uw.js
4
js/uw.js
@ -51,8 +51,8 @@ async function main(){
|
||||
|
||||
|
||||
|
||||
|
||||
ArDetect.arSetup();
|
||||
if(Settings.arDetect.enable == "global")
|
||||
ArDetect.arSetup();
|
||||
|
||||
document.addEventListener("mozfullscreenchange", function( event ) {
|
||||
if(Debug.debug){
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
],
|
||||
|
||||
"options_ui" : {
|
||||
"page": "res/settings.html",
|
||||
"page": "res/settings/settings.html",
|
||||
"open_in_tab": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ var hasVideos = false;
|
||||
|
||||
var _config;
|
||||
|
||||
function check4videos(){
|
||||
async function check4videos(){
|
||||
var command = {};
|
||||
command.cmd = "has-videos";
|
||||
command.sender = "popup";
|
||||
@ -57,7 +57,7 @@ function check4videos(){
|
||||
});
|
||||
}
|
||||
|
||||
function check4conf(){
|
||||
async function check4conf(){
|
||||
var command = {};
|
||||
command.cmd = "get-config";
|
||||
command.sender = "popup";
|
||||
|
||||
@ -80,7 +80,9 @@
|
||||
.suboption {
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 20px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
@ -112,8 +114,12 @@
|
||||
}
|
||||
#no-videos-display {
|
||||
height: 100%;
|
||||
padding-top: 120px;
|
||||
padding-top: 50px;
|
||||
/* text-align: center; */
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -137,7 +143,10 @@
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div id="no-videos-display" class="suboption">
|
||||
No videos have been found on this page.<br/><small>NOTE: iframes are <b>not</b> detected by this popup. You need a keyboard / to enable automatic aspect ratio detection to fix aspect ratio in embedded players.<br/>Embedded players must also be in full screen.</small>
|
||||
<p class="label center">No videos have been found on this page.</p><p>If there <i>is</i> a video on this page, then you're seeing this message for one of these reasons:</p>
|
||||
<ul><li>Page hasn't finished loading<small><br/><span class="smallcaps">Note</span>: webextensions only start working when page is fully loaded.</small></li>
|
||||
<li>The video is embedded / in an iframe.<small><br/>This is a known issue/limitation. Use keyboard shortcuts to correct aspect ratio.</small></li>
|
||||
<li>Hamster Rajko is on strike.<small><br/>(Close this popup and reopen in a few seconds)</small></li></ul>
|
||||
</div>
|
||||
|
||||
<div id="extension-mode" class="suboption hidden">
|
||||
|
||||
@ -224,9 +224,9 @@
|
||||
</div>
|
||||
<div class="tabline center">
|
||||
<div class="content left">
|
||||
<div id="tab_general_settings" class="block tab tab-selected">General settings</div>
|
||||
<div id="tab_sites" class="block tab">Site options</div>
|
||||
<div id="tab_shortcuts" class="block tab">Shortcuts</div>
|
||||
<!-- <div id="tab_general_settings" class="block tab tab-selected">General settings</div> -->
|
||||
<!-- <div id="tab_sites" class="block tab">Site options</div> -->
|
||||
<div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
|
||||
<div id="tab_about" class="block tab">About</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,7 +234,7 @@
|
||||
|
||||
|
||||
|
||||
<div id="general_settings">
|
||||
<div id="general_settings" class="hide">
|
||||
<div class="content left">
|
||||
<div class="uw_options_line">
|
||||
<div class="uw_options_option"><input type="checkbox" id='enable_autoar'> <strike>Enable automatic aspect ratio detection</strike></div>
|
||||
@ -265,101 +265,76 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="uw_shortcuts" class="hide">
|
||||
<h1>Guess which thing doesn't do shit at the moment either?</h1>
|
||||
<h2>If you guessed this page ... well.</h2>
|
||||
<div id="uw_shortcuts">
|
||||
<div class="content left">
|
||||
<h2>Keyboard shortcuts</h2>
|
||||
|
||||
<form>
|
||||
<!-- BEGIN FORM -->
|
||||
|
||||
<!-- try autoar -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Autodetect aspect ratio</div>
|
||||
<input type='checkbox' id="_kbd_autoar_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_autoar_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_autoar_altKey" > Alt +
|
||||
<input type='text' id="_kbd_autoar_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- fit width -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Fit to width</div>
|
||||
<input type='checkbox' id='fitw_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='fitw_shift' > Shift +
|
||||
<input type='checkbox' id='fitw_alt' > Alt +
|
||||
<input type='text' id='fitw_letter' maxlength='1' class='shortcut_input'>
|
||||
<input type='checkbox' id="_kbd_fitw_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_fitw_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_fitw_altKey" > Alt +
|
||||
<input type='text' id="_kbd_fitw_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- fit height -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Fit to height</div>
|
||||
<input type='checkbox' id='fith_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='fith_shift' > Shift +
|
||||
<input type='checkbox' id='fith_alt' > Alt +
|
||||
<input type='text' id='fith_letter' maxlength='1' class='shortcut_input'>
|
||||
<input type='checkbox' id="_kbd_fith_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_fith_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_fith_altKey" > Alt +
|
||||
<input type='text' id="_kbd_fith_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- reset -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Reset</div>
|
||||
<input type='checkbox' id='reset_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='reset_shift' > Shift +
|
||||
<input type='checkbox' id='reset_alt' > Alt +
|
||||
<input type='text' id='reset_letter' maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- zoom -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Zoom</div>
|
||||
<input type='checkbox' id='zoom_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='zoom_shift' > Shift +
|
||||
<input type='checkbox' id='zoom_alt' > Alt +
|
||||
<input type='text' id='zoom_letter' maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- unzoom -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Unzoom</div>
|
||||
<input type='checkbox' id='unzoom_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='unzoom_shift' > Shift +
|
||||
<input type='checkbox' id='unzoom_alt' > Alt +
|
||||
<input type='text' id='unzoom_letter' maxlength='1' class='shortcut_input'>
|
||||
<input type='checkbox' id="_kbd_reset_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_reset_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_reset_altKey" > Alt +
|
||||
<input type='text' id="_kbd_reset_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- force 21:9 -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Force 21:9</div>
|
||||
<input type='checkbox' id='ar219_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='ar219_shift' > Shift +
|
||||
<input type='checkbox' id='ar219_alt' > Alt +
|
||||
<input type='text' id='ar219_letter' maxlength='1' class='shortcut_input'>
|
||||
<input type='checkbox' id="_kbd_char_219_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_char_219_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_char_219_altKey" > Alt +
|
||||
<input type='text' id="_kbd_char_219_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- force 2:1 -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Force 2:1 (18:9)</div>
|
||||
<input type='checkbox' id="_kbd_char_189_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_char_189_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_char_189_altKey" > Alt +
|
||||
<input type='text' id="_kbd_char_189_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- force 16:9 -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Force 16:9</div>
|
||||
<input type='checkbox' id='ar169_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='ar169_shift' > Shift +
|
||||
<input type='checkbox' id='ar169_alt' > Alt +
|
||||
<input type='text' id='ar169_letter' maxlength='1' class='shortcut_input'>
|
||||
<input type='checkbox' id="_kbd_char_169_ctrlKey" > Ctrl +
|
||||
<input type='checkbox' id="_kbd_char_169_shiftKey" > Shift +
|
||||
<input type='checkbox' id="_kbd_char_169_altKey" > Alt +
|
||||
<input type='text' id="_kbd_char_169_lettr" maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- force 16:10 -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Force 16:10</div>
|
||||
<input type='checkbox' id='ar1610_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='ar1610_shift' > Shift +
|
||||
<input type='checkbox' id='ar1610_alt' > Alt +
|
||||
<input type='text' id='ar1610_letter' maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- force 4:3 -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Force 4:3</div>
|
||||
<input type='checkbox' id='ar43_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='ar43_shift' > Shift +
|
||||
<input type='checkbox' id='ar43_alt' > Alt +
|
||||
<input type='text' id='ar43_letter' maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
|
||||
<!-- try autoar -->
|
||||
<div class="uw_shortcuts_line">
|
||||
<div class="uw_shortcuts_label">Autodetect aspect ratio (Netflix only)</div>
|
||||
<input type='checkbox' id='autoar_ctrl' > Ctrl +
|
||||
<input type='checkbox' id='autoar_shift' > Shift +
|
||||
<input type='checkbox' id='autoar_alt' > Alt +
|
||||
<input type='text' id='autoar_letter' maxlength='1' class='shortcut_input'>
|
||||
</div>
|
||||
<!-- END FORM -->
|
||||
</form>
|
||||
<div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
|
||||
@ -382,7 +357,7 @@
|
||||
<p>this is the future lol. (at least as far as autodetection goes, keybinds need to make a comeback)</p>
|
||||
<h2>Acknowledgements</h2>
|
||||
<p>This extension uses font <a href="https://fonts.google.com/specimen/Oxygen">Oxygen</a>.</p>
|
||||
<p>Special thanks to CD Project Red (The Witcher 2), Anet (Guild Wars 2), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>
|
||||
<p>Special thanks to CD Project Red (The Witcher 2), Cyanide Studios (Styx, Of Orcs and Men), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p>
|
||||
<small><p>More or less.</p>
|
||||
<!-- <p>GW2 is also roughly how the avatar was obtained. Noone tell Anet, though.</p> --></small>
|
||||
<p>Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).</p>
|
||||
@ -391,6 +366,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../js/dep/jquery-3.1.1.js" ></script>
|
||||
<script src="../../js/conf/Debug.js"></script>
|
||||
|
||||
<script src="../../js/lib/BrowserDetect.js"></script>
|
||||
<script src="../../js/lib/StorageManager.js"></script>
|
||||
|
||||
<script src="../../js/conf/Keybinds.js"></script>
|
||||
<script src="../../js/conf/Settings.js"></script>
|
||||
|
||||
<script src="./settings.js"></script>
|
||||
</body>
|
||||
134
res/settings/settings.js
Normal file
134
res/settings/settings.js
Normal file
@ -0,0 +1,134 @@
|
||||
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");
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function loadKeybinds(){
|
||||
// load showShortcuts
|
||||
var keybinds = await Keybinds.fetch();
|
||||
|
||||
for(var key in keybinds){
|
||||
if(Debug.debug)
|
||||
console.log("[settings.js::loadKeybinds] we're looking at this key:", key, "it splits like this:", key.toLowerCase().split("_"));
|
||||
|
||||
var keypressArr = key.split("_");
|
||||
var opts = keybinds[key];
|
||||
|
||||
var query = "_kbd_" + opts.action + "_";
|
||||
if(opts.action == "char"){
|
||||
if(opts.targetAr == 2.39)
|
||||
query += ("219_");
|
||||
else if(opts.targetAr == 2.0)
|
||||
query += ("189_");
|
||||
else if(opts.targetAr == 1.78)
|
||||
query += ("169_");
|
||||
}
|
||||
|
||||
var q2;
|
||||
for(var modKey of Keybinds.mods){
|
||||
q2 = "#" + query + modKey;
|
||||
document.querySelector(q2).checked = keypressArr.indexOf(modKey) != -1;
|
||||
}
|
||||
q2 = "#" + query + "lettr";
|
||||
document.querySelector(q2).value = keypressArr[keypressArr.length - 1].toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
async function saveKeybinds(){
|
||||
|
||||
var actions = [ "autoar", "fitw", "fith", "reset", "char_219", "char_189", "char_169" ];
|
||||
|
||||
var savedShortcuts = {};
|
||||
|
||||
for(var action of actions){
|
||||
var queryBase = "#_kbd_" + action;
|
||||
var letter = document.querySelector(queryBase + "_lettr").value.trim();
|
||||
|
||||
if(letter === "" || letter === undefined)
|
||||
continue; // we don't make a shortcut for this action
|
||||
|
||||
var shortcutKeypress = "";
|
||||
|
||||
for(mod of Keybinds.mods)
|
||||
if(document.querySelector(queryBase + "_" + mod).checked)
|
||||
shortcutKeypress += (mod + "_");
|
||||
|
||||
shortcutKeypress += letter;
|
||||
|
||||
savedShortcuts[shortcutKeypress] = {};
|
||||
|
||||
if(action.startsWith("char_")){
|
||||
savedShortcuts[shortcutKeypress].action = "char";
|
||||
|
||||
if(action == "char_219")
|
||||
savedShortcuts[shortcutKeypress].targetAr = 2.39;
|
||||
else if(action == "char_189")
|
||||
savedShortcuts[shortcutKeypress].targetAr = 2.0;
|
||||
else if(action == "char_169")
|
||||
savedShortcuts[shortcutKeypress].targetAr = 1.78;
|
||||
}
|
||||
else{
|
||||
savedShortcuts[shortcutKeypress].action = action;
|
||||
}
|
||||
}
|
||||
|
||||
// out with the old
|
||||
await StorageManager.delopt("keybinds");
|
||||
//in with the new
|
||||
StorageManager.setopt({"keybinds":savedShortcuts});
|
||||
}
|
||||
|
||||
|
||||
// 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();
|
||||
Loading…
Reference in New Issue
Block a user