-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
111 lines (107 loc) · 3.45 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
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>options</title>
<script type="text/javascript" src="js/mootools-core-1.3.2-full-nocompat.js"></script>
<script type="text/javascript">
var OptionPage = {
initialize: function() {
if (localStorage.left)
$$('table input[name="left"]')[0].value = localStorage.left;
if (localStorage.up)
$$('table input[name="up"]')[0].value = localStorage.up;
if (localStorage.right)
$$('table input[name="right"]')[0].value = localStorage.right;
if (localStorage.down)
$$('table input[name="down"]')[0].value = localStorage.down;
OptionPage.refleshChannels();
},
save: function() {
localStorage.left = $$('table input[name="left"]')[0].value;
localStorage.up = $$('table input[name="up"]')[0].value;
localStorage.right = $$('table input[name="right"]')[0].value;
localStorage.down = $$('table input[name="down"]')[0].value;
},
addChannel: function(channelName) {
if (!localStorage.channelList)
localStorage.channelList = JSON.encode([]);
var channelList = JSON.decode(localStorage.channelList);
if (channelList.contains(channelName)) return;
channelList.push(channelName);
localStorage.channelList = JSON.encode(channelList);
OptionPage.refleshChannels();
},
refleshChannels: function() {
if (!localStorage.channelList)
localStorage.channelList = JSON.encode([]);
$('channelList').empty();
var channelList = JSON.decode(localStorage.channelList);
channelList.each(function(item, index) {
new Element('li', {
html: '<a class="hoge" href="javascript:deleteChannel('+index+')">x</a> ' + item
}).inject($('channelList'));
});
}
}
window.addEvent('domready', function(e) {
OptionPage.initialize();
$$('button[name="save"]')[0].addEvent('click', function() {
OptionPage.save();
});
$$('button[name="add"]')[0].addEvent('click', function() {
OptionPage.addChannel($$('input[name="addChannel"]')[0].value);
$$('input[name="addChannel"]')[0].value = '';
});
$$('input[name="addChannel"]')[0].addEvent('keydown', function(e) {
if (e.key == 'enter') {
OptionPage.addChannel($$('input[name="addChannel"]')[0].value);
$$('input[name="addChannel"]')[0].value = '';
}
});
});
function deleteChannel(channelIndex) {
var channelList = JSON.decode(localStorage.channelList);
var newChannelList = [];
channelList.each(function(item, index) {
if (channelIndex == index) return;
newChannelList.push(item);
});
localStorage.channelList = JSON.encode(newChannelList);
OptionPage.refleshChannels();
}
</script>
</head>
<body>
<h1>Send channel setting</h1>
<table>
<tr>
<th>Double tap Shift + ←</th>
<td><input type="text" name="left" size="20" value=""></td>
</tr>
<tr>
<th>Double tap Shift + ↑</th>
<td><input type="text" name="up" size="20" value=""></td>
</tr>
<tr>
<th>Double tap Shift + →</th>
<td><input type="text" name="right" size="20" value=""></td>
</tr>
<tr>
<th>Double tap Shift + ↓</th>
<td><input type="text" name="down" size="20" value=""></td>
</tr>
</table>
<hr>
<h1>Receive channel setting</h1>
<ul id="channelList">
</ul>
<h2>Add</h2>
<p>
<input type="text" name="addChannel" size="20" value="">
<button name="add">Add</button>
</p>
<hr>
<button name="save">Save</button>
</body>
</html>