Added the localStorage management feature. Please check the option page.
[open-pinnedtab-link:open-pinnedtab-link.git] / options.html
1 <?xml version="1.0" encoding="UTF-8" ?><!-- -*- coding: utf-8 ; mode: xml -*- -->
2 <html>
3 <head>
4 <style type="text/css">
5 /* blueprint css */
6 table {border-collapse:separate;border-spacing:0;}
7 caption, th, td {text-align:left;font-weight:normal;}
8 table, td, th {vertical-align:middle;}
9
10 /* originals */
11 body
12 {
13   width:480px;
14   overflow-x:auto;
15
16   font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
17   font-wight: normal;
18   font-size:  80%;
19
20   background-color: #ffffff;
21   color: #000000;
22   margin: 10px 15px;
23   padding: 10px;
24 }
25
26 .medium { font-size:.9em; }
27 .small { font-size:.8em; }
28 .smallx { font-size:.7em; }
29
30 div.contents 
31 {
32   width: 480px;
33   margin: 0px;
34   /* white-space: nowrap;*/
35 }
36 div.buttons
37 {
38   text-align: right;
39 }
40 h1
41 {
42   font-size: 1.6em;
43 }
44 h2
45 {
46   font-size: 1.2em;
47   background-color: #0fafaf;
48   margin-top: 1em;
49   margin-bottom: 0;
50 }
51 table
52 {
53   padding: 0;
54   margin-top: 0.5em;
55   margin-bottom: 0.5em;
56   width: 100%;
57 }
58 table th
59 {
60   text-align: center;
61   background: #9fdada;
62 }
63 table td, table th
64 {
65   border: 1px solid #696969;
66 }
67 table th#opts_header_true , table th#opts_header_false {
68   width: 10%;
69 }
70
71 p#opts_note , p#localdata_opts
72 {
73   margin-top: 0.5em;
74   margin-bottom: 0em;
75 }
76
77
78 </style>
79 <script type="text/javascript">
80   function localdata_removeall() {
81     localStorage.clear();
82   }
83
84   function localdata_showtable() {
85     var e = document.getElementById("localdata_table");
86     for(var i=0; i < localStorage.length; i++) {
87       var k = localStorage.key(i);
88       var v = localStorage.getItem(k);
89
90       var tr = document.createElement("tr");
91       var td1 = document.createElement("td");
92       var text1 = document.createTextNode(k);
93       td1.appendChild(text1);
94
95       var td2 = document.createElement("td");
96       var text2 = document.createTextNode(v);
97       td2.appendChild(text2);
98
99       tr.appendChild(td1);
100       tr.appendChild(td2);
101       e.appendChild(tr);
102     }
103   }
104
105   function restore_options() {
106     var opts_1 = localStorage.getItem("opts_enabled_default");
107     if(opts_1 == undefined || opts_1 == "undefined") {
108       localStorage["opts_enabled_default"] = true;
109     }
110     var opts_2 = localStorage.getItem("opts_external_link_only_default");
111     if(opts_2 == undefined || opts_2 == "undefined") {
112       localStorage["opts_external_link_only_default"] = false;
113     }
114     
115     var input_enabled = document.getElementsByName("enabled");
116     for(var i in input_enabled) {
117       var c = input_enabled[i];
118       if(c.value == (""+localStorage["opts_enabled_default"])) {
119         c.checked = true;
120       }
121     }
122   
123     var input_exclude_same_hostname = document.getElementsByName("exclude_same_hostname");
124     for(var i in input_exclude_same_hostname) {
125       var c = input_exclude_same_hostname[i];
126       if(c.value == (""+localStorage["opts_external_link_only_default"])) {
127         c.checked = true;
128       }
129     }
130   }
131   
132   function save_options() {
133   
134     var input_enabled = document.getElementsByName("enabled");
135     for(var i in input_enabled) {
136       var c = input_enabled[i];
137       if(c.checked == true) {
138         localStorage["opts_enabled_default"] = JSON.parse(c.value);
139       }
140     }
141
142     var input_exclude_same_hostname = document.getElementsByName("exclude_same_hostname");
143     for(var i in input_exclude_same_hostname) {
144       var c = input_exclude_same_hostname[i];
145       if(c.checked == true) {
146         localStorage["opts_external_link_only_default"] = JSON.parse(c.value);
147       }
148     }    
149   }
150
151   function set_text() {
152     var list = new Array("top_title", "opts_title","opts_title_enabled","opts_title_exclude","opts_button_reset","opts_button_save","localdata_table_title", "localdata_button_removeall", "localdata_table_label_keys", "localdata_table_label_values", "opts_header_title", "opts_header_true", "opts_header_false", "opts_note","localdata_note");
153     for(var i=0; i < list.length; i++) {
154       var e = document.getElementById(list[i]);
155       var t = document.createTextNode(chrome.i18n.getMessage(list[i]));
156       e.appendChild(t);
157     }
158   }
159
160 </script>
161 </head>
162 <body onload="restore_options(); set_text(); localdata_showtable()">
163   <h1 id="top_title"></h1>
164   <div class="contents">
165     <h2 id="opts_title"></h2>
166     <p id="opts_note"></p>
167     <table class="medium">
168       <tr>
169         <th id="opts_header_title"></th>
170         <th id="opts_header_true"></th>
171         <th id="opts_header_false"></th>
172       </tr>
173       
174       <tr>
175         <td id="opts_title_enabled"></td>
176         <td><input type="radio" name="enabled" value="true"/></td>
177         <td><input type="radio" name="enabled" value="false" /></td>
178       </tr>
179
180       <tr>
181         <td id="opts_title_exclude"></td>
182         <td><input type="radio" name="exclude_same_hostname" value="true" /></td>
183         <td><input type="radio" name="exclude_same_hostname" value="false" /></td>
184       </tr>
185     </table>
186     
187     <div class="buttons">
188       <button onclick="restore_options()" id="opts_button_reset"></button>
189       <button onclick="save_options()" id="opts_button_save"></button>
190     </div>
191   
192     <h2 id="localdata_table_title"></h2>
193     <p id="localdata_note"></p>
194     <table id="localdata_table" class="medium">
195       <tr>
196         <th id="localdata_table_label_keys"></th>
197         <th id="localdata_table_label_values"></th>
198       </tr>
199     </table>
200     <div class="buttons">
201       <button onclick="localdata_removeall()" id="localdata_button_removeall"></buttons>
202     </div>
203   </div>
204 </body>
205 </html>