OLD | NEW |
1 <!-- | 1 <!-- |
2 An option page for configuring notifications. | 2 An option page for configuring notifications. |
3 | 3 |
4 Copyright 2010 the Chromium Authors | 4 Copyright 2010 the Chromium Authors |
5 | 5 |
6 Use of this source code is governed by a BSD-style license that can be found | 6 Use of this source code is governed by a BSD-style license that can be found |
7 in the "LICENSE" file. | 7 in the "LICENSE" file. |
8 | 8 |
9 Brian Kennish <bkennish@chromium.org> | 9 Brian Kennish <bkennish@chromium.org> |
10 --> | 10 --> |
11 <title>Notification Demo</title> | 11 <!doctype html> |
12 <style> | 12 <html> |
13 /* Clone the look and feel of "chrome://" pages. */ | 13 <head> |
14 body { | 14 <title>Notification Demo</title> |
15 margin: 10px; | 15 <link href="style.css" rel="stylesheet" type="text/css"> |
16 font: 84% Arial, sans-serif | 16 <script src="options.js"></script> |
17 } | 17 </head> |
18 | 18 <body> |
19 h1 { font-size: 156% } | 19 <h1> |
20 | 20 <img src="64.png" alt="Toast"> |
21 h1 img { | 21 Notification Demo |
22 margin: 1px 5px 0 1px; | 22 </h1> |
23 vertical-align: middle | 23 <h2>Options</h2> |
24 } | 24 <form id="options"> |
25 | 25 <input type="checkbox" name="isActivated" checked> |
26 h2 { | 26 Display a notification every |
27 border-top: 1px solid #9cc2ef; | 27 <select name="frequency"> |
28 background-color: #ebeff9; | 28 <option>1</option> |
29 padding: 3px 5px; | 29 <option>2</option> |
30 font-size: 100% | 30 <option>3</option> |
31 } | 31 <option>4</option> |
32 </style> | 32 <option>5</option> |
33 <script> | 33 <option>10</option> |
34 /* | 34 <option>15</option> |
35 Grays out or [whatever the opposite of graying out is called] the option | 35 <option>20</option> |
36 field. | 36 <option>25</option> |
37 */ | 37 <option>30</option> |
38 function ghost(isDeactivated) { | 38 </select> |
39 options.style.color = isDeactivated ? 'graytext' : 'black'; | 39 minute(s). |
40 // The label color. | 40 </form> |
41 options.frequency.disabled = isDeactivated; // The control manipulability. | 41 </body> |
42 } | 42 </html> |
43 | |
44 onload = function() { | |
45 // Initialize the option controls. | |
46 options.isActivated.checked = JSON.parse(localStorage.isActivated); | |
47 // The display activation. | |
48 options.frequency.value = localStorage.frequency; | |
49 // The display frequency, in minutes. | |
50 | |
51 if (!options.isActivated.checked) { ghost(true); } | |
52 | |
53 // Set the display activation and frequency. | |
54 options.isActivated.onchange = function() { | |
55 localStorage.isActivated = options.isActivated.checked; | |
56 ghost(!options.isActivated.checked); | |
57 }; | |
58 | |
59 options.frequency.onchange = function() { | |
60 localStorage.frequency = options.frequency.value; | |
61 }; | |
62 }; | |
63 </script> | |
64 <h1> | |
65 <img src="64.png" alt="Toast"> | |
66 Notification Demo | |
67 </h1> | |
68 <h2>Options</h2> | |
69 <form id="options"> | |
70 <input type="checkbox" name="isActivated" checked> | |
71 Display a notification every | |
72 <select name="frequency"> | |
73 <option>1</option> | |
74 <option>2</option> | |
75 <option>3</option> | |
76 <option>4</option> | |
77 <option>5</option> | |
78 <option>10</option> | |
79 <option>15</option> | |
80 <option>20</option> | |
81 <option>25</option> | |
82 <option>30</option> | |
83 </select> | |
84 minute(s). | |
85 </form> | |
OLD | NEW |