-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathkeybind.js
More file actions
72 lines (67 loc) · 2.04 KB
/
keybind.js
File metadata and controls
72 lines (67 loc) · 2.04 KB
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
import { translateText } from 'src/utils/translate.js';
import Translation from 'src/structures/constants/translation.ts';
import Text from './text.js';
const baseLabels = {
' ': 'Space',
};
const any = Translation.Setting('key.any');
const bind = Translation.Setting('key.bind');
export default class extends Text {
constructor(name = 'keybind') {
super(name);
}
element(value, update, {
data = {},
key: id,
}) {
const labels = {
...baseLabels,
...data.labels,
};
function getLabel(key) {
return translateText(labels[key] || key);
}
let val = value !== 'Escape' ? value : '';
let temp = getLabel(val);
const ret = $('<div class="keybind-wrapper">');
const input = $(`<input type="text" id="${id}">`)
.val(temp)
.on('focus', () => {
input.val('').prop('placeholder', any);
ret.addClass('editing');
})
.on('keydown', (event) => {
const { key } = event;
if (key !== 'Escape' && key !== val) {
event.preventDefault();
update(key);
temp = getLabel(key);
val = key;
}
input.blur();
})
.on('blur', () => {
input.val(temp).prop('placeholder', bind);
ret.removeClass('editing');
})
.prop('placeholder', bind);
const button = $('<button class="glyphicon glyphicon-remove-sign">')
.on('click', () => {
if (temp === '') return;
temp = '';
input.val(temp);
update(undefined);
});
ret.append(input, button);
return ret;
}
styles() {
return [
'.keybind-wrapper { position: relative; }',
'.keybind-wrapper input { text-align: center; caret-color: transparent; }',
'.keybind-wrapper input:focus { border-color: transparent; outline: red double 1px; }',
'.keybind-wrapper button { position: absolute; top: 4px; right: 0px; color: red; background-color: transparent; border: none; display: none; }',
'.keybind-wrapper:not(.editing):hover button { display: inline-block; }',
];
}
}