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

Settings page is more or less finished and works. Might need minor fixes before v1.0rc1 becomes v1.0.

Browse Source
This commit is contained in:
Tamius Han 2016-12-07 23:58:43 +01:00
parent 9daac678a0
commit 5062f7f7bb
7 changed files with 277 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -24,7 +24,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay
### Permanent install ### Permanent install
~~[v0.9.9.5 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change. It hasn't been tested whether autoupdating works, and it probably doesn't.~~ [v1.0-rc1 — Experimental version — download from here](http://tamius.net/ultrawidify) — If 30 minutes old is stable enough for you, this is it. This version is pretty much code from this repo. It's also unlisted so I don't have to go through AMO for every minor change. It hasn't been tested whether autoupdating works, and it probably doesn't.
[v0.9.9 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either. (NOTE: there's a version number hiccup going on with AMO version. Stuff here on Github is the freshest, regardless of what manifest says) [v0.9.9 — Regular version — download from AMO](https://addons.mozilla.org/en/firefox/addon/ultrawidify/) — more stable and with AMO's approval. No experimental features either. (NOTE: there's a version number hiccup going on with AMO version. Stuff here on Github is the freshest, regardless of what manifest says)
@ -32,7 +32,7 @@ This extension also allows you to zoom in or out of video (similar to how SMPlay
## How do I use it? ## How do I use it?
This is the interface (**NOTE: AMO version doesn't have buttons yet!**): This is the interface:
![GUI buttons - ELI5](img-demo/interface-explained.jpg "If you know me and came looking for the obligatory »it's a wyvern, not a dragon« comment ... well, you just found it.") ![GUI buttons - ELI5](img-demo/interface-explained.jpg "If you know me and came looking for the obligatory »it's a wyvern, not a dragon« comment ... well, you just found it.")
@ -54,7 +54,7 @@ If you can read this, you'll probably figure out the rest of the way.
¹These ratios are calculated using the number in the brackets, as 1920/1080 does not strictly equal to 16/9 (same goes for 21:9). ¹These ratios are calculated using the number in the brackets, as 1920/1080 does not strictly equal to 16/9 (same goes for 21:9).
**Please note that these keybindings could change at any time, and some definitely will** (apparently some of them conflict with youtube player)**.** I'll try to get them sorted out by the end of october. ![Jesus Christ.](img-demo/example-jasonbourne.png "This is indeed worse than Snowden.")
## What works ## What works
@ -110,3 +110,7 @@ Keybind `a` just doesn't work at all, so no 16:10.
* All buttons in the player's control bar are now also in the settings popup. * All buttons in the player's control bar are now also in the settings popup.
* Had to scrap settings page in its current form * Had to scrap settings page in its current form
* TODO: sometimes not all buttons can fit in the control bar. Such occurences should be detected. * TODO: sometimes not all buttons can fit in the control bar. Such occurences should be detected.
###v1.0-rc1
* Settings page is added and mostly working.

BIN
img-demo/example-jasonbourne.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 KiB

97
js/uw.js
View File

@ -66,49 +66,49 @@ if(page_url.indexOf("youtu") != -1){
// Yeah hi /r/badcode. // Yeah hi /r/badcode.
// Anyway, because nazi localstorage flat out refuses to store arrays: // Anyway, because nazi localstorage flat out refuses to store arrays:
var DEFAULT_KEYBINDINGS = { var DEFAULT_KEYBINDINGS = {
1:{ action: "fitw", 0:{ action: "fitw",
key: 'w', key: 'w',
modifiers: [] modifiers: []
}, },
2:{ 1:{
action: "fith", action: "fith",
key: 'e', key: 'e',
modifiers: [] modifiers: []
}, },
3: { 2: {
action: "reset", action: "reset",
key: 'r', key: 'r',
modifiers: [] modifiers: []
}, },
4: { 3: {
action: "zoom", action: "zoom",
key: "z", key: "z",
modifiers: [] modifiers: []
}, },
5: { 4: {
action: "unzoom", action: "unzoom",
key: "u", key: "u",
modifiers: [] modifiers: []
}, },
6: { 5: {
action: "char", action: "char",
targetAR: (21/9), targetAR: (21/9),
key: "d", key: "d",
modifiers: [] modifiers: []
}, },
7: { 6: {
action: "char", action: "char",
targetAR: (16/9), targetAR: (16/9),
key: "s", key: "s",
modifiers: [] modifiers: []
}, },
8: { 7: {
action: "char", action: "char",
targetAR: (16/10), targetAR: (16/10),
key: "x", key: "x",
modifiers: [] modifiers: []
}, },
9: { 8: {
action: "char", action: "char",
targetAR: (4/3), targetAR: (4/3),
key: "a", key: "a",
@ -423,7 +423,7 @@ function addCtlButtons(provider_id){
smenu_ar_options[2].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/9 )); }; smenu_ar_options[2].onclick = function(event) {event.stopPropagation(); changeCSS("char", (16/9 )); };
smenu_ar_options[3].onclick = function(event) {event.stopPropagation(); changeCSS("char", (21/9 )); }; smenu_ar_options[3].onclick = function(event) {event.stopPropagation(); changeCSS("char", (21/9 )); };
// smenu_el[0].onclick = function() { showSettings() }; smenu_el[0].onclick = function (event) {event.stopPropagation(); showSettings() };
smenu_el[5].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fitw" ) }; smenu_el[5].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fitw" ) };
smenu_el[4].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fith" ) }; smenu_el[4].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"fith" ) };
@ -431,58 +431,6 @@ function addCtlButtons(provider_id){
smenu_el[1].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"zoom" ) }; smenu_el[1].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"zoom" ) };
smenu_el[2].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"unzoom") }; smenu_el[2].onclick = function (event) {event.stopPropagation(); changeCSS("fit" ,"unzoom") };
//BEGIN SETTINGS WINDOW
// var e_player;
//
// if(inIframe())
// e_player = document.getElementById("player");
// else
// e_player = document.getElementById("movie_player");
//
var menu_panel = document.createElement('div');
menu_panel.id = "uw_settings_panel";
menu_panel.className = "uw-ext-settings-bg uw_element";
var kbs_actions = [
{action:"fitw", label:"Fit width:"},
{action:"fith",label:"Fit height:"},
{action:"reset",label:"Reset:"},
{action:"zoom",label:"Zoom in:"},
{action:"unzoom",label:"Zoom out:"},
{action:"ar219",label:"Force 21:9"},
{action:"ar169",label:"Force 16:9"},
{action:"ar1610",label:"Force 16:10"},
{action:"ar43",label:"Force 4:3"}
];
var form = "";
for( var i = 0; i < kbs_actions.length; i++){
form += "<div class='uw_top uw_settings_kbshortcuts_line'>\
<div class='uw_top uw_settings_kbshortcuts_label'>" + kbs_actions[i].label + "</div>\
<input type='checkbox' value='" + kbs_actions[i].action + "_ctrl'> Ctrl + \
<input type='checkbox' value='" + kbs_actions[i].action + "_shift'> Shift + \
<input type='checkbox' value='" + kbs_actions[i].action + "_alt'> Alt + \
<input type='text' name='" + kbs_actions[i].action + "_letter' maxlength='1' class='uw_settings_kbshortcuts_input'></div>";
}
var settings_content = document.createElement('div');
var savekb = document.createElement('div');
savekb.className = 'uw_kbshortcuts_button';
savekb.onclick = function() { saveKeybinds() };
savekb.innerHTML = "Save";
settings_content.className = "uw-ext-settings-content";
settings_content.innerHTML = "";
e_player.appendChild(menu_panel);
// menu_panel.appendChild(settings_content);
document.getElementById('uw_close_settings_view').onclick = function() { hideSettings() };
//END SETTINGS WINDOW
} }
@ -493,16 +441,25 @@ function addCtlButtons(provider_id){
//END UI //END UI
function showSettings(){ function onOpen(){
document.getElementById("uw_settings_panel").style.display = "block"; if(debugmsg)
console.log("uw | Options page opened");
} }
function hideSettings(){
document.getElementById("uw_settings_panel").style.display = "none";
}
// function saveKeybinds(){
// console.log($('uw_kbshortcuts_form').serializeArray());
// }
function onError(err){
if(debug){
console.log(`Error: ${error}`);
console.log("uw | Error opening the page", err);
}
}
function showSettings(){
var prettypls = browser.runtime.openOptionsPage();
prettypls.then(onOpen, onError);
console.log(prettypls);
}
// Ta funkcija se proži, ko vstopimo ali izstopimo iz celozaslonskega načina // Ta funkcija se proži, ko vstopimo ali izstopimo iz celozaslonskega načina
// This function gets triggered by full screen state change // This function gets triggered by full screen state change

5
manifest.json
View File

@ -2,7 +2,7 @@
"manifest_version": 2, "manifest_version": 2,
"name": "Ultrawidify-git", "name": "Ultrawidify-git",
"version": "0.9.9.6", "version": "1.0rc1",
"icons": { "icons": {
"32":"res/icons/uw-32.png", "32":"res/icons/uw-32.png",
@ -41,6 +41,7 @@
], ],
"options_ui" : { "options_ui" : {
"page": "res/settings.html" "page": "res/settings.html",
"open_in_tab": true
} }
} }

162
res/settings.html
View File

@ -76,50 +76,63 @@
.tab{ .tab{
color: #fa6607; color: #fa6607;
} }
.tab-selected{ .tab:hover{
text-shadow: #aa5 0px 0px 0.02em,#aa5 0px 0px 0.02em;
}
.tab-selected {
color: #ff9 !important; color: #ff9 !important;
} }
#all{ #all{
min-width: 100%; min-width: 100%;
min-height: 100vh; min-height: 100vh;
background-image: url('res/img/settings/about-bg.png'); background-image: url('img/settings/about-bg.png');
background-position: calc(50vw + 20em) 10vh; background-position: calc(50vw + 20em) 10vh;
background-attachment: fixed; background-attachment: fixed;
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.dup_keybinds{
background-color: #720 !important;
}
input[type=text]{
font-size: 1em;
padding-left: 0.6em;
margin-left: 1em;
width: 2em;
background-color: #000;
border: 1px #442 solid;
}
.uw_shortcuts_line{
padding-top: 0.25em;
padding-left: 10em;
}
.uw_shortcuts_label{
display: inline-block;
color: #fff;
width: 7.5em;
}
.buttonbar{
width: 100%;
padding-left: 20em;
margin-bottom: 2em;
}
.button{
display: inline-block;
margin-left: 1em;
margin-right: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.4em;
width: 4em;
text-align: center;
background-color: rgba(0,0,0,0.66);
color: #ffc;
height: 1.7em;
}
</style> </style>
<script>
function showAbout(){
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.remove("hide");
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("tab_about").classList.add("tab-selected");
}
function showShortcuts(){
document.getElementById("uw_shortcuts").classList.remove("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("tab_shortcuts").classList.add("tab-selected");
document.getElementById("tab_about").classList.remove("tab-selected");
}
//TODO TODO TODO correct resourceToUrl so it'll work properly. (uncomment the return statement)
function resourceToUrl(img){
return "../" + img;
// return chrome.extension.getURL(img);
}
function onload(){
//Adding background to 'about' page:
document.getElementById("all").style.backgroundImage = "url('" + resourceToUrl("res/img/settings/about-bg.png") + "')";
}
</script>
</head> </head>
<body onload="onload()"> <body>
<div id="all"> <div id="all">
<header> <header>
<div class="content center"> <div class="content center">
@ -129,98 +142,100 @@
</div> </div>
<div class="tabline center"> <div class="tabline center">
<div class="content left"> <div class="content left">
<div id="tab_shortcuts" onclick="showShortcuts()" class="block tab tab-selected">Shortcuts</div> <div id="tab_shortcuts" class="block tab tab-selected">Shortcuts</div>
<div id="tab_about" onclick="showAbout()" class="block tab">About</div> <div id="tab_about" class="block tab">About</div>
</div> </div>
</div> </div>
</header> </header>
<div id="uw_shortcuts"> <div id="uw_shortcuts">
<div class="content left"> <div class="content left">
<form> <form>
<!-- BEGIN FORM -->
<!-- fit width --> <!-- fit width -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to width</div> <div class="uw_shortcuts_label">Fit to width</div>
<input type='checkbox' value='fitw_ctrl' > Ctrl + <input type='checkbox' id='fitw_ctrl' > Ctrl +
<input type='checkbox' value='fitw_shift' > Shift + <input type='checkbox' id='fitw_shift' > Shift +
<input type='checkbox' value='fitw_alt' > Alt + <input type='checkbox' id='fitw_alt' > Alt +
<input type='text' name='fitw_letter' maxlength='1' class='shortcut_input'> <input type='text' id='fitw_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- fit height --> <!-- fit height -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' value='fith_ctrl' > Ctrl + <input type='checkbox' id='fith_ctrl' > Ctrl +
<input type='checkbox' value='fith_shift' > Shift + <input type='checkbox' id='fith_shift' > Shift +
<input type='checkbox' value='fith_alt' > Alt + <input type='checkbox' id='fith_alt' > Alt +
<input type='text' name='fith_letter' maxlength='1' class='shortcut_input'> <input type='text' id='fith_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- reset --> <!-- reset -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Reset</div> <div class="uw_shortcuts_label">Reset</div>
<input type='checkbox' value='reset_ctrl' > Ctrl + <input type='checkbox' id='reset_ctrl' > Ctrl +
<input type='checkbox' value='reset_shift' > Shift + <input type='checkbox' id='reset_shift' > Shift +
<input type='checkbox' value='reset_alt' > Alt + <input type='checkbox' id='reset_alt' > Alt +
<input type='text' name='reset_letter' maxlength='1' class='shortcut_input'> <input type='text' id='reset_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- zoom --> <!-- zoom -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Zoom</div> <div class="uw_shortcuts_label">Zoom</div>
<input type='checkbox' value='zoom_ctrl' > Ctrl + <input type='checkbox' id='zoom_ctrl' > Ctrl +
<input type='checkbox' value='zoom_shift' > Shift + <input type='checkbox' id='zoom_shift' > Shift +
<input type='checkbox' value='zoom_alt' > Alt + <input type='checkbox' id='zoom_alt' > Alt +
<input type='text' name='zoom_letter' maxlength='1' class='shortcut_input'> <input type='text' id='zoom_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- unzoom --> <!-- unzoom -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Unzoom</div> <div class="uw_shortcuts_label">Unzoom</div>
<input type='checkbox' value='unzoom_ctrl' > Ctrl + <input type='checkbox' id='unzoom_ctrl' > Ctrl +
<input type='checkbox' value='unzoom_shift' > Shift + <input type='checkbox' id='unzoom_shift' > Shift +
<input type='checkbox' value='unzoom_alt' > Alt + <input type='checkbox' id='unzoom_alt' > Alt +
<input type='text' name='unzoom_letter' maxlength='1' class='shortcut_input'> <input type='text' id='unzoom_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 21:9 --> <!-- force 21:9 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' value='ar219_ctrl' > Ctrl + <input type='checkbox' id='ar219_ctrl' > Ctrl +
<input type='checkbox' value='ar219_shift' > Shift + <input type='checkbox' id='ar219_shift' > Shift +
<input type='checkbox' value='ar219_alt' > Alt + <input type='checkbox' id='ar219_alt' > Alt +
<input type='text' name='ar219_letter' maxlength='1' class='shortcut_input'> <input type='text' id='ar219_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 16:9 --> <!-- force 16:9 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' value='ar169_ctrl' > Ctrl + <input type='checkbox' id='ar169_ctrl' > Ctrl +
<input type='checkbox' value='ar169_shift' > Shift + <input type='checkbox' id='ar169_shift' > Shift +
<input type='checkbox' value='ar169_alt' > Alt + <input type='checkbox' id='ar169_alt' > Alt +
<input type='text' name='ar169_letter' maxlength='1' class='shortcut_input'> <input type='text' id='ar169_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 16:10 --> <!-- force 16:10 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' value='ar1610_ctrl' > Ctrl + <input type='checkbox' id='ar1610_ctrl' > Ctrl +
<input type='checkbox' value='ar1610_shift' > Shift + <input type='checkbox' id='ar1610_shift' > Shift +
<input type='checkbox' value='ar1610_alt' > Alt + <input type='checkbox' id='ar1610_alt' > Alt +
<input type='text' name='ar1610_letter' maxlength='1' class='shortcut_input'> <input type='text' id='ar1610_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- force 4:3 --> <!-- force 4:3 -->
<div class="uw_shortcuts_line"> <div class="uw_shortcuts_line">
<div class="uw_shortcuts_label">Fit to height</div> <div class="uw_shortcuts_label">Fit to height</div>
<input type='checkbox' value='ar43_ctrl' > Ctrl + <input type='checkbox' id='ar43_ctrl' > Ctrl +
<input type='checkbox' value='ar43_shift' > Shift + <input type='checkbox' id='ar43_shift' > Shift +
<input type='checkbox' value='ar43_alt' > Alt + <input type='checkbox' id='ar43_alt' > Alt +
<input type='text' name='ar43_letter' maxlength='1' class='shortcut_input'> <input type='text' id='ar43_letter' maxlength='1' class='shortcut_input'>
</div> </div>
<!-- END FORM -->
</form> </form>
<div class="buttonbar">Cancel | Close</div> <div class="buttonbar"><div class="button" id="kb_cancel">Cancel</div><div class="button" id="kb_save">Save</div></div>
<div id="errbox"></div> <div id="errbox"></div>
<div><b>Note:</b> keyboard shortcut conflicts aren't handled by this extension. You must know your shortcuts.<br/><b>Pro tip:</b> If you don't want to have a keybind for a shortcut, just uncheck all boxes for the action and remove the letter</div> <div><small><b>Note:</b> keyboard shortcut conflicts aren't handled by this extension. You must know your shortcuts.<br/><b>Pro tip:</b> If you don't want to have a keybind for a shortcut, just uncheck all boxes for the action and remove the letter</small></div>
</div> </div>
</div> </div>
@ -239,6 +254,9 @@
<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>
</all> </div>
<script src="./settings.js"></script>
</body> </body>
</html> </html>

150
res/settings.js Normal file
View File

@ -0,0 +1,150 @@
function showAbout(){
document.getElementById("uw_shortcuts").classList.add("hide");
document.getElementById("about").classList.remove("hide");
document.getElementById("tab_shortcuts").classList.remove("tab-selected");
document.getElementById("tab_about").classList.add("tab-selected");
}
function showShortcuts(){
document.getElementById("uw_shortcuts").classList.remove("hide");
document.getElementById("about").classList.add("hide");
document.getElementById("tab_shortcuts").classList.add("tab-selected");
document.getElementById("tab_about").classList.remove("tab-selected");
}
function saveopts(){
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
var new_keybinds = {};
// Preberemo naš obrazec in iz njega naredimo nov objekt z bližnjicami.
// Let's read our form and make a new object with keybinds.
for(var i = 0; i < actions.length; i++){
var action = actions[i];
var targetAR = "";
if(action == "ar219"){
action = "char";
targetAR = (21/9);
}
if(action == "ar169"){
action = "char";
targetAR = (16/9);
}
if(action == "ar1610"){
action = "char";
targetAR = (16/10);
}
if(action == "ar43"){
action = "char";
targetAR = (4/3);
}
if(targetAR != ""){
var keybind = {
action: action,
targetAR: targetAR,
key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
modifiers: []
}
}
else{
var keybind = {
action: action,
key: document.querySelector("#" + actions[i] + "_letter").value.toLowerCase().replace(/[^a-z0-9]/,""),
modifiers: []
}
}
if(document.querySelector("#" + actions[i] + "_ctrl").checked)
keybind.modifiers.push("ctrl");
if(document.querySelector("#" + actions[i] + "_alt").checked)
keybind.modifiers.push("alt");
if(document.querySelector("#" + actions[i] + "_shift").checked)
keybind.modifiers.push("shift");
new_keybinds[i] = keybind;
}
// Preveriti moramo, da nismo dvema možnostima dodali isto bližnjico.
// We need to check if all keybinds are unique.
var fail = false;
for(var i = 0; i < actions.length; i++)
document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
for(var i = 0; i < actions.length; i++){
if(new_keybinds[i].key == "")
continue;
for(var j = i + 1; j < actions.length; j++){
if(new_keybinds[i].key == new_keybinds[j].key){
if(compareModifiers(new_keybinds[i].modifiers, new_keybinds[j].modifiers)){
fail = true;
document.querySelector("#" + actions[i] + "_letter").classList.add("dup_keybinds");
document.querySelector("#" + actions[j] + "_letter").classList.add("dup_keybinds");
}
}
}
}
if (!fail){
browser.storage.local.set({ultrawidify_keybinds:new_keybinds});
}
}
function compareModifiers(a,b){
//NOTE: to je precej slab in neprenoslijv način primerjanja dveh tabel, ampak za naš primer deluje dovolj
// dobro, saj 'ctrl' vedno pride pred 'alt' in 'alt' vedno pride pred 'shift' (če se sploh pojavijo).
//NOTE: this is bad and totally unfoolproof practice. In our example comparing arrays the way we do works
// because values ALWAYS appear in the same order: 'ctrl' always appears before 'alt' (or it doesn't
// appear at all). 'alt' always appears before 'shift' (or it doesn't appear at all).
if(a.length != b.length)
return false;
var match = true;
for(var i = 0; i < a.length; i++)
match &= a[i] == b[i]
return match;
}
function printerr(err){
console.log(err);
}
function gotopts(opts){
var KEYBINDS = Object.keys(opts.ultrawidify_keybinds).map(function (key) { return opts.ultrawidify_keybinds[key];});
var actions = ["fitw", "fith", "reset", "zoom", "unzoom", "ar219", "ar169", "ar1610", "ar43"];
for(var i = 0; i < actions.length; i++){
document.querySelector("#" + actions[i] + "_letter").classList.remove("dup_keybinds");
document.querySelector("#" + actions[i] + "_letter").value = KEYBINDS[i].key;
for(var j = 0; j < KEYBINDS[i].modifiers.length; j++){
if(KEYBINDS[i].modifiers[j] == "ctrl")
document.querySelector("#" + actions[i] + "_ctrl").checked = true;
if(KEYBINDS[i].modifiers[j] == "alt")
document.querySelector("#" + actions[i] + "_alt").checked = true;
if(KEYBINDS[i].modifiers[j] == "shift")
document.querySelector("#" + actions[i] + "_shift").checked = true;
}
}
}
function loadopts(){
var ask4keybinds = browser.storage.local.get("ultrawidify_keybinds");
ask4keybinds.then(gotopts, printerr);
}
document.addEventListener("DOMContentLoaded", loadopts);
document.querySelector("#tab_shortcuts").addEventListener("click", showShortcuts);
document.querySelector("#tab_about").addEventListener("click", showAbout);
document.querySelector("#kb_save").addEventListener("click", saveopts);
document.querySelector("#kb_cancel").addEventListener("click",loadopts);

BIN
ultrawidify.zip Normal file
View File

Binary file not shown.