Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 /* | 1 /* |
| 2 * Copyright (C) 2014 Google Inc. All rights reserved. | 2 * Copyright (C) 2014 Google Inc. All rights reserved. |
| 3 * | 3 * |
| 4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
| 5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
| 6 * met: | 6 * met: |
| 7 * | 7 * |
| 8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
| 9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
| 10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 81 input.addEventListener("change", inputChanged, false); | 81 input.addEventListener("change", inputChanged, false); |
| 82 } | 82 } |
| 83 | 83 |
| 84 /** | 84 /** |
| 85 * @param {string} label | 85 * @param {string} label |
| 86 * @param {!WebInspector.Setting} setting | 86 * @param {!WebInspector.Setting} setting |
| 87 * @param {boolean} numeric | 87 * @param {boolean} numeric |
| 88 * @param {number=} maxLength | 88 * @param {number=} maxLength |
| 89 * @param {string=} width | 89 * @param {string=} width |
| 90 * @param {function(string):?string=} validatorCallback | 90 * @param {function(string):?string=} validatorCallback |
| 91 * @param {boolean=} instant | |
| 91 */ | 92 */ |
| 92 WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer ic, maxLength, width, validatorCallback) | 93 WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer ic, maxLength, width, validatorCallback, instant) |
| 93 { | 94 { |
| 94 var p = document.createElement("p"); | 95 var p = document.createElement("p"); |
| 95 var labelElement = p.createChild("label"); | 96 var labelElement = p.createChild("label"); |
| 96 labelElement.textContent = label; | 97 labelElement.textContent = label; |
| 97 var inputElement = p.createChild("input"); | 98 var inputElement = p.createChild("input"); |
| 98 inputElement.value = setting.get(); | 99 inputElement.value = setting.get(); |
| 99 inputElement.type = "text"; | 100 inputElement.type = "text"; |
| 100 if (numeric) | 101 if (numeric) |
| 101 inputElement.className = "numeric"; | 102 inputElement.className = "numeric"; |
| 102 if (maxLength) | 103 if (maxLength) |
| 103 inputElement.maxLength = maxLength; | 104 inputElement.maxLength = maxLength; |
| 104 if (width) | 105 if (width) |
| 105 inputElement.style.width = width; | 106 inputElement.style.width = width; |
| 106 | 107 |
| 108 if (validatorCallback || instant) { | |
| 109 inputElement.addEventListener("change", onInput, false); | |
| 110 inputElement.addEventListener("input", onInput, false); | |
| 111 } | |
| 112 | |
| 107 var errorMessageLabel; | 113 var errorMessageLabel; |
| 108 if (validatorCallback) { | 114 if (validatorCallback) { |
| 109 errorMessageLabel = p.createChild("div"); | 115 errorMessageLabel = p.createChild("div"); |
| 110 errorMessageLabel.classList.add("field-error-message"); | 116 errorMessageLabel.classList.add("field-error-message"); |
| 111 inputElement.oninput = onInput; | 117 validate(); |
| 112 onInput(); | |
| 113 } | 118 } |
| 114 | 119 |
| 115 function onInput() | 120 function onInput() |
| 116 { | 121 { |
| 122 if (validatorCallback) | |
| 123 validate(); | |
| 124 if (instant) | |
| 125 apply(); | |
|
dgozman
2014/05/28 09:39:10
Why apply if validation failed?
pfeldman
2014/05/28 15:07:45
Done.
| |
| 126 } | |
| 127 | |
| 128 function validate() | |
| 129 { | |
| 117 var error = validatorCallback(inputElement.value); | 130 var error = validatorCallback(inputElement.value); |
| 118 if (!error) | 131 if (!error) |
| 119 error = ""; | 132 error = ""; |
| 120 errorMessageLabel.textContent = error; | 133 errorMessageLabel.textContent = error; |
| 121 } | 134 } |
| 122 | 135 |
| 123 function onBlur() | 136 if (!instant) |
| 137 inputElement.addEventListener("blur", apply, false); | |
| 138 | |
| 139 function apply() | |
| 124 { | 140 { |
| 141 setting.removeChangeListener(onSettingChange); | |
| 125 setting.set(numeric ? Number(inputElement.value) : inputElement.value); | 142 setting.set(numeric ? Number(inputElement.value) : inputElement.value); |
| 143 setting.addChangeListener(onSettingChange); | |
| 126 } | 144 } |
| 127 inputElement.addEventListener("blur", onBlur, false); | 145 |
| 146 setting.addChangeListener(onSettingChange); | |
| 147 | |
| 148 function onSettingChange() | |
| 149 { | |
| 150 inputElement.value = setting.get(); | |
| 151 } | |
| 128 | 152 |
| 129 return p; | 153 return p; |
| 130 } | 154 } |
| 131 | 155 |
| 132 WebInspector.SettingsUI.createCustomSetting = function(name, element) | 156 WebInspector.SettingsUI.createCustomSetting = function(name, element) |
| 133 { | 157 { |
| 134 var p = document.createElement("p"); | 158 var p = document.createElement("p"); |
| 135 var fieldsetElement = document.createElement("fieldset"); | 159 var fieldsetElement = document.createElement("fieldset"); |
| 136 fieldsetElement.createChild("label").textContent = name; | 160 fieldsetElement.createChild("label").textContent = name; |
| 137 fieldsetElement.appendChild(element); | 161 fieldsetElement.appendChild(element); |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 195 element.addEventListener("keydown", keyDownListener, false); | 219 element.addEventListener("keydown", keyDownListener, false); |
| 196 function keyDownListener(event) | 220 function keyDownListener(event) |
| 197 { | 221 { |
| 198 if (isEnterKey(event)) | 222 if (isEnterKey(event)) |
| 199 eventListener(event); | 223 eventListener(event); |
| 200 } | 224 } |
| 201 return element; | 225 return element; |
| 202 } | 226 } |
| 203 | 227 |
| 204 /** | 228 /** |
| 205 * @param {string} title | |
| 206 * @param {function(boolean)} callback | |
| 207 */ | |
| 208 WebInspector.SettingsUI.createNonPersistedCheckbox = function(title, callback) | |
| 209 { | |
| 210 var labelElement = document.createElement("label"); | |
| 211 var checkboxElement = labelElement.createChild("input"); | |
| 212 checkboxElement.type = "checkbox"; | |
| 213 checkboxElement.checked = false; | |
| 214 checkboxElement.addEventListener("click", onclick, false); | |
| 215 labelElement.appendChild(document.createTextNode(title)); | |
| 216 return labelElement; | |
| 217 | |
| 218 function onclick() | |
| 219 { | |
| 220 callback(checkboxElement.checked); | |
| 221 } | |
| 222 } | |
| 223 | |
| 224 /** | |
| 225 * @constructor | 229 * @constructor |
| 226 */ | 230 */ |
| 227 WebInspector.UISettingDelegate = function() | 231 WebInspector.UISettingDelegate = function() |
| 228 { | 232 { |
| 229 } | 233 } |
| 230 | 234 |
| 231 WebInspector.UISettingDelegate.prototype = { | 235 WebInspector.UISettingDelegate.prototype = { |
| 232 /** | 236 /** |
| 233 * @return {?Element} | 237 * @return {?Element} |
| 234 */ | 238 */ |
| 235 settingElement: function() | 239 settingElement: function() |
| 236 { | 240 { |
| 237 return null; | 241 return null; |
| 238 } | 242 } |
| 239 } | 243 } |
| OLD | NEW |