| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html i18n-values="dir:textdirection;" id="t"> | 2 <html i18n-values="dir:textdirection;" id="t"> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <title i18n-content="title"></title> | 5 <title i18n-content="title"></title> |
| 6 |
| 7 <!-- TODO(zelidrag) need a better icon here --> |
| 6 <link rel="icon" href="../../app/theme/history_favicon.png"> | 8 <link rel="icon" href="../../app/theme/history_favicon.png"> |
| 7 <script src="shared/js/local_strings.js"></script> | 9 |
| 10 <script src="chrome://resources/js/class_list.js"></script> |
| 11 <script src="chrome://resources/js/cr.js"></script> |
| 12 <script src="chrome://resources/js/cr/event_target.js"></script> |
| 13 <script src="chrome://resources/js/cr/ui.js"></script> |
| 14 <script src="chrome://resources/js/local_strings.js"></script> |
| 15 <script src="chrome://resources/js/util.js"></script> |
| 16 <script src="options/preferences.js"></script> |
| 17 <script src="options/pref_ui.js"></script> |
| 18 <script src="options/options_page.js"></script> |
| 19 <script src="options/chromeos_system_options.js"></script> |
| 8 <script> | 20 <script> |
| 21 |
| 9 /////////////////////////////////////////////////////////////////////////////// | 22 /////////////////////////////////////////////////////////////////////////////// |
| 10 // Globals: | 23 // DummyOptions Functions: |
| 24 // TODO(zelidrag): Remove DummyOptions once we put the second page in. |
| 11 | 25 |
| 12 function $(o) {return document.getElementById(o);} | 26 function DummyOptions(model) { |
| 13 | 27 OptionsPage.call(this, 'dummy', 'Dummy Options Page', 'dummyPage'); |
| 14 // Extracts preference value out of reponse callback of fetchPrefs call. | |
| 15 function getPref(dict, name) { | |
| 16 return eval('dict.'+name); | |
| 17 } | 28 } |
| 18 | 29 |
| 19 // Sets new value for preference. | 30 DummyOptions.instance = null; |
| 20 function setBooleanPref(name, value) { | 31 |
| 21 chrome.send('setBooleanPref', [name, String(value)]); | 32 DummyOptions.getInstance = function() { |
| 33 if (DummyOptions.instance) |
| 34 return DummyOptions.instance; |
| 35 // TODO(zelidrag): hook model in. |
| 36 DummyOptions.instance = new DummyOptions(null); |
| 37 return DummyOptions.instance; |
| 22 } | 38 } |
| 23 | 39 |
| 24 function setIntegerPref(name, value) { | 40 // Inherit SystemOptions from OptionsPage. |
| 25 chrome.send('setIntegerPref', [name, String(value)]); | 41 DummyOptions.prototype = { |
| 26 } | 42 __proto__: OptionsPage.prototype, |
| 43 }; |
| 27 | 44 |
| 28 function setStringPref(name, value) { | |
| 29 chrome.send('setStringPref', [name, value]); | |
| 30 } | |
| 31 /////////////////////////////////////////////////////////////////////////////// | 45 /////////////////////////////////////////////////////////////////////////////// |
| 32 // Document Functions: | 46 // Document Functions: |
| 33 /** | 47 /** |
| 34 * Window onload handler, sets up the page. | 48 * Window onload handler, sets up the page. |
| 35 */ | 49 */ |
| 36 function load() { | 50 function load() { |
| 37 localStrings = new LocalStrings(); | 51 localStrings = new LocalStrings(); |
| 38 loadSystemPrefs(); | 52 OptionsPage.register(SystemOptions.getInstance()); |
| 39 | 53 OptionsPage.register(DummyOptions.getInstance()); |
| 40 selectPage('system'); | 54 |
| 41 // TODO(zelidrag): preserve first that needs to be shown. | 55 Preferences.getInstance().initialize(); |
| 56 OptionsPage.showPageByName(SystemOptions.getInstance().name); |
| 42 } | 57 } |
| 43 | 58 |
| 44 function selectPage(name) { | |
| 45 var page = $(name+'Page'); | |
| 46 var nav = $(name+'PageNav'); | |
| 47 page.style.visibility = 'visible'; | |
| 48 nav.class = 'navbar_item navbar_item_selected'; | |
| 49 } | |
| 50 | 59 |
| 51 /////////////////////////////////////////////////////////////////////////////// | 60 window.onpopstate = function(e) { |
| 52 // System (ChromeOS) Functions: | 61 OptionsPage.setState(e.state); |
| 53 | 62 }; |
| 54 var kTimeZone = 'settings.datetime.timezone'; | |
| 55 var kTapToClickEnabled = 'settings.touchpad.enable_tap_to_click'; | |
| 56 var kVertEdgeScrollEnabled = 'settings.touchpad.enable_vert_edge_scroll'; | |
| 57 var kTouchpadSpeedFactor = 'settings.touchpad.speed_factor'; | |
| 58 var kTouchpadSensitivity = 'settings.touchpad.sensitivity'; | |
| 59 var kAccessibilityEnabled = 'settings.accessibility'; | |
| 60 | |
| 61 /** | |
| 62 * Loads ChromeOS System preferences. | |
| 63 */ | |
| 64 function loadSystemPrefs() { | |
| 65 chrome.send("fetchPrefs", ['systemPrefsFetched', '', | |
| 66 kTimeZone, | |
| 67 kTapToClickEnabled, | |
| 68 kVertEdgeScrollEnabled, | |
| 69 kTouchpadSpeedFactor, | |
| 70 kTouchpadSensitivity, | |
| 71 kAccessibilityEnabled]); | |
| 72 } | |
| 73 | |
| 74 function setupTimezones(selectedValue) { | |
| 75 timezoneSel = $('timezoneSel'); | |
| 76 for (key in templateData.timezoneMap) { | |
| 77 var selected = key == selectedValue; | |
| 78 timezoneSel.options[timezoneSel.options.length] = | |
| 79 new Option(templateData.timezoneMap[key], key, false, selected); | |
| 80 } | |
| 81 } | |
| 82 | |
| 83 function systemPrefsFetched(context, dict) { | |
| 84 $('tapToClickChk').checked = getPref(dict, kTapToClickEnabled); | |
| 85 $('vertScrollChk').checked = getPref(dict, kVertEdgeScrollEnabled); | |
| 86 $('sensitivityRng').value = getPref(dict, kTouchpadSensitivity); | |
| 87 $('speedRng').value = getPref(dict, kTouchpadSpeedFactor); | |
| 88 $('accesibilityChk').checked = getPref(dict, kAccessibilityEnabled); | |
| 89 setupTimezones(getPref(dict, kTimeZone)); | |
| 90 } | |
| 91 | |
| 92 function selectChanged(control) { | |
| 93 if (control.id == 'timezoneSel') { | |
| 94 setStringPref(kTimeZone, control.options[control.selectedIndex].value); | |
| 95 } | |
| 96 } | |
| 97 | |
| 98 function checkboxChanged(control) { | |
| 99 if (control.id == 'tapToClickChk') { | |
| 100 setBooleanPref(kTapToClickEnabled, control.checked); | |
| 101 } else if (control.id == 'vertScrollChk') { | |
| 102 setBooleanPref(kVertEdgeScrollEnabled, control.checked); | |
| 103 } else if (control.id == 'vertScrollChk') { | |
| 104 setBooleanPref(kTapToClickEnabled, control.checked); | |
| 105 } else if (control.id == 'accesibilityChk') { | |
| 106 setBooleanPref(kAccessibilityEnabled, control.checked); | |
| 107 } | |
| 108 } | |
| 109 | |
| 110 function rangeChanged(control) { | |
| 111 if (control.id == 'sensitivityRng') { | |
| 112 setIntegerPref(kTouchpadSensitivity, control.value); | |
| 113 } else if (control.id == 'speedRng') { | |
| 114 setIntegerPref(kTouchpadSpeedFactor, control.value); | |
| 115 } | |
| 116 } | |
| 117 | |
| 118 function buttonClicked(control) { | |
| 119 if (conrol.id == 'languageBtn') { | |
| 120 // TODO: Open ChromeOS language settings page. | |
| 121 } | |
| 122 } | |
| 123 | |
| 124 | 63 |
| 125 </script> | 64 </script> |
| 126 <link rel="stylesheet" href="dom_ui.css"> | 65 <link rel="stylesheet" href="dom_ui.css"> |
| 127 <!-- TODO(zelidrag) just a temp style placeholder until redesign --> | 66 <!-- TODO(zelidrag) just a temp style placeholder until redesign --> |
| 128 <style> | 67 <style> |
| 129 .navbar_container { | 68 #main-content { |
| 69 display: -webkit-box; |
| 70 } |
| 71 |
| 72 #navbar-container { |
| 130 border: 1px solid black; | 73 border: 1px solid black; |
| 131 background-color: #dfdfdf; | 74 background-color: #dfdfdf; |
| 132 cursor:pointer; | 75 cursor: pointer; |
| 133 font-weight: bold; | 76 font-weight: bold; |
| 134 float:left; | |
| 135 height: 400px; | 77 height: 400px; |
| 136 padding: 10px; | 78 padding: 10px; |
| 137 position:relative; | 79 position: relative; |
| 138 width: 200px; | 80 width: 200px; |
| 139 } | 81 } |
| 140 .navbar_item, .navbar_item2 { | 82 |
| 83 .navbar-item, .navbar-item2 { |
| 141 margin: 5px; | 84 margin: 5px; |
| 142 padding: 5px; | 85 padding: 5px; |
| 143 } | 86 } |
| 144 .navbar_item_selected { | 87 |
| 145 background-color: #000000; | 88 .navbar-item-selected { |
| 89 background-color: #FFFFFF; |
| 146 } | 90 } |
| 147 .navbar_item_normal { | 91 |
| 148 background-color: #dfdfdf; | 92 .navbar-item-normal { |
| 93 background-color: #dfdfdf; |
| 149 } | 94 } |
| 95 |
| 150 #mainview { | 96 #mainview { |
| 97 -webkit-box-align: stretch; |
| 151 border: 1px solid black; | 98 border: 1px solid black; |
| 152 float:left; | |
| 153 height: 400px; | 99 height: 400px; |
| 154 width: 600px; | 100 width: 600px; |
| 155 padding: 10px; | 101 padding: 10px; |
| 156 position:relative; | 102 position: relative; |
| 157 } | 103 } |
| 104 |
| 158 .section { | 105 .section { |
| 159 margin-top: 10px; | 106 margin-top: 10px; |
| 160 } | 107 } |
| 108 |
| 161 .option { | 109 .option { |
| 162 margin-top: 5px; | 110 margin-top: 5px; |
| 163 } | 111 } |
| 164 .section_title { | 112 |
| 113 .section-title { |
| 165 font-weight: bold; | 114 font-weight: bold; |
| 166 } | 115 } |
| 167 .option_control_table { | 116 |
| 168 padding-left:10px; | 117 .option-control-table { |
| 118 margin-top: 5px; |
| 119 -webkit-padding-start: 10px; |
| 169 } | 120 } |
| 170 .navbar2 { | 121 |
| 122 .hidden { |
| 171 visibility: hidden; | 123 visibility: hidden; |
| 172 } | 124 } |
| 173 .page { | 125 |
| 174 visibility: hidden; | 126 .touch-slider { |
| 127 -webkit-appearance: slider-horizontal; |
| 175 } | 128 } |
| 129 |
| 176 </style> | 130 </style> |
| 177 </head> | 131 </head> |
| 178 <body onload="load();" i18n-values=".style.fontFamily:fontfamily;.style.fontSize
:fontsize"> | 132 <body onload="load();" |
| 133 i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| 179 <div class="header"> | 134 <div class="header"> |
| 180 </div> | 135 </div> |
| 181 <div class="main"> | 136 <div id="main-content"> |
| 182 <div class="navbar_container"> | 137 <div id="navbar-container"> |
| 183 <ul class="navbar"> | 138 <ul id="navbar"> |
| 184 <li class="navbar_item navbar_item_normal" id="systemPageNav" i18n-values
=".innerText:systemPage"></li> | |
| 185 <li class="navbar_item navbar_item_normal" id="internetPageNav" i18n-valu
es=".innerText:internetPage"></li> | |
| 186 <li class="navbar_item navbar_item_normal" id="basicsPageNav" i18n-values
=".innerText:basicsPage"></li> | |
| 187 <li class="navbar_item navbar_item_normal" id="personalStuffPageNav" i18n
-values=".innerText:personalStuffPage"></li> | |
| 188 <li class="navbar_item navbar_item_normal" id="underHoodPageNav" i18n-val
ues=".innerText:underHoodPage"></li> | |
| 189 </ul> | 139 </ul> |
| 190 <hr/> | 140 <hr/> |
| 191 <ul class="navbar2"> | 141 <ul class="hidden"> |
| 192 </ul> | 142 </ul> |
| 193 </div> | 143 </div> |
| 194 <div id="mainview"> | 144 <div id="mainview"> |
| 195 <div class="page" id="systemPage"> | 145 <!-- include file="options/chromeos_system_options.html" --> |
| 196 <div class="section"> | 146 <div class="page hidden" id="dummyPage"> |
| 197 <div class="section_title" i18n-values=".innerText:datetime_title"></d
iv> | 147 <!-- TODO(zelidrag): remove this one once we get another page here --> |
| 198 <div class="option"> | 148 Dummy page |
| 199 <table class="option_control_table"> | |
| 200 <tr> | |
| 201 <td class="option_name" i18n-values=".innerText:timezone"></td> | |
| 202 <td class="option_value"> | |
| 203 <select id="timezoneSel" class="control timezone_dropdown" onch
ange="selectChanged(this)"></select> | |
| 204 </td> | |
| 205 </tr> | |
| 206 </table> | |
| 207 </div> | |
| 208 </div> | |
| 209 <div class="section"> | |
| 210 <div class="section_title" i18n-values=".innerText:touchpad"></div> | |
| 211 <div class="option"> | |
| 212 <table class="option_control_table"> | |
| 213 <tr> | |
| 214 <td class="option_name" i18n-values=".innerText:sensitivity"></td
> | |
| 215 <td class="option_value"> | |
| 216 <input id="sensitivityRng" type="range" min="1" max="10" class=
"touchSlider" style="-webkit-appearance:slider-horizontal;" onchange="rangeChang
ed(this)"> | |
| 217 </td> | |
| 218 </tr> | |
| 219 <tr> | |
| 220 <td class="option_name" i18n-values=".innerText:speed_factor"></t
d> | |
| 221 <td class="option_value"> | |
| 222 <input id="speedRng" type="range" min="1" max="10" class="touch
Slider" style="-webkit-appearance:slider-horizontal;" onchange="rangeChanged(thi
s)"> | |
| 223 </td> | |
| 224 </tr> | |
| 225 <tr> | |
| 226 <td class="option_name" colspan="2"><input id="tapToClickChk" typ
e="checkbox" onchange="checkboxChanged(this)"/><span i18n-values=".innerText:en
able_tap_to_click"></span></td> | |
| 227 </tr> | |
| 228 <tr> | |
| 229 <td class="option_name" colspan="2"><input id="vertScrollChk" typ
e="checkbox" onchange="checkboxChanged(this)"/><span i18n-values=".innerText:en
able_vert_edge_scroll"></span></td> | |
| 230 </tr> | |
| 231 </table> | |
| 232 </div> | |
| 233 </div> | |
| 234 <div class="section"> | |
| 235 <div class="section_title" i18n-values=".innerText:language"></div> | |
| 236 <div class="option"> | |
| 237 <table class="option_control_table"> | |
| 238 <tr> | |
| 239 <td class="option_name"><button id="languageBtn" onclick="buttonC
licked" i18n-values=".innerText:language_customize"></button></td> | |
| 240 </tr> | |
| 241 </table> | |
| 242 </div> | |
| 243 </div> | |
| 244 <div class="section"> | |
| 245 <div class="section_title" i18n-values=".innerText:accessibility_title
"></div> | |
| 246 <div class="option"> | |
| 247 <table class="option_control_table"> | |
| 248 <tr> | |
| 249 <td class="option_name"><input id="accesibilityChk" onchange="che
ckboxChanged(this)" type="checkbox"/><span i18n-values=".innerText:accessibilit
y"></span></td> | |
| 250 </tr> | |
| 251 </table> | |
| 252 </div> | |
| 253 </div> | |
| 254 </div> | 149 </div> |
| 255 </div> | 150 </div> |
| 256 </div> | 151 </div> |
| 152 <script> |
| 153 // Decorate the existing elements in the document. |
| 154 cr.ui.decorate('input[pref][type=checkbox]', PrefCheckbox); |
| 155 cr.ui.decorate('input[pref][type=range]', PrefRange); |
| 156 cr.ui.decorate('select[pref]', PrefSelect); |
| 157 <!-- TODO(zelidrag) add other elements here when we implement them --> |
| 158 </script> |
| 257 </body> | 159 </body> |
| 258 </html> | 160 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2835009:
Split options page code/html into its own set of files (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/