-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoptions.html
110 lines (104 loc) · 3.1 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
<html>
<head><title>+1 coins Options</title></head>
<script type="text/javascript">
function save_options() {
localStorage["coin_icon"] = getCheckedValue(document.getElementsByName('coin_select'));
localStorage["auto_add"] = document.getElementById('auto_add').checked;
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Options Saved.";
setTimeout(function() {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var favorite = localStorage["coin_icon"];
var auto_add = localStorage["auto_add"];
if(auto_add=="true") {
document.getElementById('auto_add').checked=true;
}
if (!favorite) {
}else{
document.getElementById(favorite).checked=true;
}
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
</script>
<style type="text/css">
div {
float: left;
}
.row {
width: 100%;
}
.coin_icon {
width:16px;
height:16px;
background-image: url(sprite.png);
}
.coin {
background-position: 0 -16px;
}
.android {
background-position: 0 0;
}
.star {
background-position: 0 -64px;
}
.unicorn {
background-position: 0 -32px;
}
.gplus {
background-position: 0 -48px;
}
label {
padding: 5px;
float: left;
}
</style>
<body onload="restore_options()">
<div class="row">Select an Icon:</div>
<div>
<div class="row">
<div><label for="coin"><div class="coin_icon coin"></div></label><input type="radio" name="coin_select" id="coin" value="coin" /></div>
</div>
<div class="row">
<div><label for="star"><div class="coin_icon star"></div></label><input type="radio" name="coin_select" id="star" value="star"/></div>
</div>
<div class="row">
<div><label for="unicorn"><div class="coin_icon unicorn"></div></label><input type="radio" name="coin_select" id="unicorn" value="unicorn" /></div>
</div>
<div class="row">
<div><label for="android"><div class="coin_icon android"></div></label><input type="radio" name="coin_select" id="android" value="android" /></div>
</div>
<div class="row">
<div><label for="gplus"><div class="coin_icon gplus"></div></label><input type="radio" name="coin_select" id="gplus" value="gplus" checked="checked"/></div>
</div>
<div class="row">
<div><label for="auto_add">Trail</label><input style="margin-top:9px" type="checkbox" name="auto_add" id="auto_add"/></div>
</div>
</div>
<div class="row">
<button onclick="save_options()">Save</button>
</div>
<div class="row">
<div id="status" style="float:left"></div>
</div>
</body>
</html>