-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathoptions.html
107 lines (90 loc) · 2.82 KB
/
options.html
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
<!DOCTYPE html>
<!--
* Copyright (c) 2011 The Chromium Authors. All rights reserved. Use of this
* source code is governed by a BSD-style license that can be found in the
* LICENSE file.
-->
<html>
<head>
<title>Media Keys Options</title>
<style>
form {width: 300px;}
input {display: block;}
</style>
</head>
<script src="jquery.js"></script>
<script type="text/javascript">
var keyIds = ['previous', 'playpause', 'next'];
// Saves form options to localStorage.
function save_options() {
$.each(keyIds, function(index, item) {
var element = $('#' + item);
localStorage[item] = JSON.stringify({
keyCode: element.data('keyCode'),
altKey: element.data('altKey'),
ctrlKey: element.data('ctrlKey'),
shiftKey: element.data('shiftKey'),
val: element.val()
});
});
localStorage['notify'] = $('#notify').attr('checked') === true ? true : '';
localStorage['autoload'] = $('#autoload').attr('checked') === true ? true : '';
$('#status').text("Options Saved. Please reopen existing tabs to use the functionality.");
setTimeout(function() {
$('#status').empty();
}, 1250);
}
// Restores form state to saved value from localStorage.
function restore_options() {
$.each(keyIds, function(index, item) {
var element = $('#' + item);
var savedItem = JSON.parse(localStorage[item]);
element.data('keyCode', savedItem['keyCode'])
.data('altKey', savedItem['altKey'])
.data('ctrlKey', savedItem['ctrlKey'])
.data('shiftKey', savedItem['shiftKey'])
.val(savedItem['val']);
});
$('#notify').attr('checked', localStorage['notify']);
$('#autoload').attr('checked', localStorage['autoload']);
}
function init() {
$('#previous, #playpause, #next').keydown(function(event) {
// Get modifiers on the keyboard event
$(this).data('keyCode', event.keyCode)
.data('altKey', event.altKey)
.data('ctrlKey', event.ctrlKey)
.data('shiftKey', event.shiftKey);
var mods = (event.altKey ? 'M - ' : '')
+ (event.ctrlKey ? 'C - ' : '')
+ (event.shiftKey ? 'S - ' : '');
$(this).val(mods + event.keyCode);
event.preventDefault();
});
restore_options();
}
</script>
<body onload="init()">
<form>
<fieldset id="keys">
<legend>Keyboard Shortcuts</legend>
<label for="previous">Previous</label>
<input id="previous"/>
<label for="playpause">Play/Pause</label>
<input id="playpause"/>
<label for="next">Next</label>
<input id="next"/>
</fieldset>
<fieldset id="options">
<legend>Other Options</legend>
<label for="autoload">Auto load player if not loaded</label>
<input type="checkbox" id="autoload"/>
<label for="notify">Notify on song change</label>
<input type="checkbox" id="notify" disabled="true"/>
</fieldset>
</form>
<button onclick="save_options()">Save</button>
<section id="status">
</section>
</body>
</html>