1/* 2 * Copyright (C) 2014 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31WebInspector.SettingsUI = {} 32 33/** 34 * @param {string} name 35 * @param {!WebInspector.Setting} setting 36 * @param {boolean=} omitParagraphElement 37 * @param {!Element=} inputElement 38 * @param {string=} tooltip 39 * @return {!Element} 40 */ 41WebInspector.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphElement, inputElement, tooltip) 42{ 43 var input = inputElement || document.createElement("input"); 44 input.type = "checkbox"; 45 input.name = name; 46 WebInspector.SettingsUI.bindCheckbox(input, setting); 47 48 var label = document.createElement("label"); 49 label.appendChild(input); 50 label.createTextChild(name); 51 if (tooltip) 52 label.title = tooltip; 53 54 if (omitParagraphElement) 55 return label; 56 57 var p = document.createElement("p"); 58 p.appendChild(label); 59 return p; 60} 61 62/** 63 * @param {!Element} input 64 * @param {!WebInspector.Setting} setting 65 */ 66WebInspector.SettingsUI.bindCheckbox = function(input, setting) 67{ 68 function settingChanged() 69 { 70 if (input.checked !== setting.get()) 71 input.checked = setting.get(); 72 } 73 setting.addChangeListener(settingChanged); 74 settingChanged(); 75 76 function inputChanged() 77 { 78 if (setting.get() !== input.checked) 79 setting.set(input.checked); 80 } 81 input.addEventListener("change", inputChanged, false); 82} 83 84/** 85 * @param {string} label 86 * @param {!WebInspector.Setting} setting 87 * @param {boolean} numeric 88 * @param {number=} maxLength 89 * @param {string=} width 90 * @param {function(string):?string=} validatorCallback 91 * @param {boolean=} instant 92 * @param {boolean=} clearForZero 93 * @param {string=} placeholder 94 * @return {!Element} 95 */ 96WebInspector.SettingsUI.createSettingInputField = function(label, setting, numeric, maxLength, width, validatorCallback, instant, clearForZero, placeholder) 97{ 98 var p = document.createElement("p"); 99 var labelElement = p.createChild("label"); 100 labelElement.textContent = label; 101 var inputElement = p.createChild("input"); 102 inputElement.type = "text"; 103 if (numeric) 104 inputElement.className = "numeric"; 105 if (maxLength) 106 inputElement.maxLength = maxLength; 107 if (width) 108 inputElement.style.width = width; 109 inputElement.placeholder = placeholder || ""; 110 111 if (validatorCallback || instant) { 112 inputElement.addEventListener("change", onInput, false); 113 inputElement.addEventListener("input", onInput, false); 114 } 115 inputElement.addEventListener("keydown", onKeyDown, false); 116 117 var errorMessageLabel; 118 if (validatorCallback) { 119 errorMessageLabel = p.createChild("div"); 120 errorMessageLabel.classList.add("field-error-message"); 121 validate(); 122 } 123 124 function onInput() 125 { 126 if (validatorCallback) 127 validate(); 128 if (instant) 129 apply(); 130 } 131 132 function onKeyDown(event) 133 { 134 if (isEnterKey(event)) 135 apply(); 136 } 137 138 function validate() 139 { 140 var error = validatorCallback(inputElement.value); 141 if (!error) 142 error = ""; 143 inputElement.classList.toggle("error-input", !!error); 144 errorMessageLabel.textContent = error; 145 } 146 147 if (!instant) 148 inputElement.addEventListener("blur", apply, false); 149 150 function apply() 151 { 152 if (validatorCallback && validatorCallback(inputElement.value)) 153 return; 154 setting.removeChangeListener(onSettingChange); 155 setting.set(numeric ? Number(inputElement.value) : inputElement.value); 156 setting.addChangeListener(onSettingChange); 157 } 158 159 setting.addChangeListener(onSettingChange); 160 161 function onSettingChange() 162 { 163 var value = setting.get(); 164 if (clearForZero && !value) 165 value = ""; 166 inputElement.value = value; 167 } 168 onSettingChange(); 169 170 return p; 171} 172 173/** 174 * @param {string} name 175 * @param {!Element} element 176 * @return {!Element} 177 */ 178WebInspector.SettingsUI.createCustomSetting = function(name, element) 179{ 180 var p = document.createElement("p"); 181 var fieldsetElement = document.createElement("fieldset"); 182 fieldsetElement.createChild("label").textContent = name; 183 fieldsetElement.appendChild(element); 184 p.appendChild(fieldsetElement); 185 return p; 186} 187 188/** 189 * @param {!WebInspector.Setting} setting 190 * @return {!Element} 191 */ 192WebInspector.SettingsUI.createSettingFieldset = function(setting) 193{ 194 var fieldset = document.createElement("fieldset"); 195 fieldset.disabled = !setting.get(); 196 setting.addChangeListener(settingChanged); 197 return fieldset; 198 199 function settingChanged() 200 { 201 fieldset.disabled = !setting.get(); 202 } 203} 204 205/** 206 * @param {string} text 207 * @return {?string} 208 */ 209WebInspector.SettingsUI.regexValidator = function(text) 210{ 211 var regex; 212 try { 213 regex = new RegExp(text); 214 } catch (e) { 215 } 216 return regex ? null : WebInspector.UIString("Invalid pattern"); 217} 218 219/** 220 * Creates an input element under the parentElement with the given id and defaultText. 221 * @param {!Element} parentElement 222 * @param {string} id 223 * @param {string} defaultText 224 * @param {function(*)} eventListener 225 * @param {boolean=} numeric 226 * @param {string=} size 227 * @return {!Element} element 228 */ 229WebInspector.SettingsUI.createInput = function(parentElement, id, defaultText, eventListener, numeric, size) 230{ 231 var element = parentElement.createChild("input"); 232 element.id = id; 233 element.type = "text"; 234 element.maxLength = 12; 235 element.style.width = size || "80px"; 236 element.value = defaultText; 237 element.align = "right"; 238 if (numeric) 239 element.className = "numeric"; 240 element.addEventListener("input", eventListener, false); 241 element.addEventListener("keydown", keyDownListener, false); 242 function keyDownListener(event) 243 { 244 if (isEnterKey(event)) 245 eventListener(event); 246 } 247 return element; 248} 249 250/** 251 * @constructor 252 */ 253WebInspector.UISettingDelegate = function() 254{ 255} 256 257WebInspector.UISettingDelegate.prototype = { 258 /** 259 * @return {?Element} 260 */ 261 settingElement: function() 262 { 263 return null; 264 } 265} 266