1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
'use strict';
const tempArray = [];
let keyArray = [];
document.querySelectorAll('input').forEach((b) => {
b.addEventListener('keydown', e => handleKeyDown(e));
b.addEventListener('keyup', e => handleKeyUp(e));
});
const saveButtons = document.querySelectorAll('.btn-primary');
for (const b of saveButtons) {
b.addEventListener('click', (e) => {
updateShortcut(b.parentElement.children[1].getAttribute('id'));
});
}
const resetButtons = document.querySelectorAll('.btn-danger');
for (const b of resetButtons) {
b.addEventListener('click', (e) => {
resetShortcut(b.parentElement.children[1].getAttribute('id'));
});
}
async function handleKeyDown(e) {
if (!e.repeat) {
e.currentTarget.value = '';
// Transform single keys to upper case for comparison
const key = e.key.length === 1 ? e.key.toUpperCase() : e.key;
tempArray.push(key);
keyArray.push(key);
}
}
async function handleKeyUp(e) {
if (!e.repeat) {
e.currentTarget.value = '';
const index = tempArray.indexOf(e.key.length === 1 ? e.key.toUpperCase() : e.key);
if (index !== -1) {
tempArray.splice(index, 1);
}
if (tempArray.length === 0) {
let text = '';
for (let i = 0; i < keyArray.length; ++i) {
const currentText = keyArray[i] === 'Control' ? handleControl() : keyArray[i];
text += currentText;
if (i !== keyArray.length - 1) {
text += '+';
}
}
keyArray = [];
e.currentTarget.value = text;
}
}
}
async function updateKeys() {
const commands = await browser.commands.getAll();
for (const c of commands) {
const elem = document.getElementById(c.name);
if (elem) {
elem.value = c.shortcut;
}
}
}
async function updateShortcut(shortcut) {
try {
await browser.commands.update({
name: shortcut,
shortcut: document.querySelector('#' + shortcut).value
});
createBanner('success', shortcut);
} catch (err) {
console.log('Cannot change shortcut: ' + err);
createBanner('danger', shortcut);
}
}
async function resetShortcut(shortcut) {
await browser.commands.reset(shortcut);
createBanner('info', shortcut);
updateKeys();
}
// Ctrl behaves differently on different OS's. macOS needs to return MacCtrl instead of Ctrl (which will be handled as Command)
function handleControl() {
return (navigator.platform === 'MacIntel') ? 'MacCtrl' : 'Ctrl';
}
// Possible types: success, info, danger
function createBanner(type, shortcut) {
const banner = document.createElement('div');
banner.classList.add('alert', 'alert-dismissible', 'alert-' + type);
if (type === 'success') {
banner.textContent = tr('optionsShortcutsSuccess', shortcut);
} else if (type === 'info') {
banner.textContent = tr('optionsShortcutsInfo', shortcut);
} else if (type === 'danger') {
banner.textContent = tr('optionsShortcutsDanger', shortcut);
} else {
return;
}
document.body.appendChild(banner);
// Destroy the banner after five seconds
setTimeout(() => {
document.body.removeChild(banner);
}, 5000);
}
document.addEventListener('DOMContentLoaded', updateKeys);
|
