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 |