src/third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js

   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
  31 WebInspector.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  */
  41 WebInspector.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  */
  66 WebInspector.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  */
  96 WebInspector.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  */
 178 WebInspector.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  */
 192 WebInspector.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  */
 209 WebInspector.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  */
 229 WebInspector.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  */
 253 WebInspector.UISettingDelegate = function()
 254 {
 255 }
 256
 257 WebInspector.UISettingDelegate.prototype = {
 258     /**
 259      * @return {?Element}
 260      */
 261     settingElement: function()
 262     {
 263         return null;
 264     }
 265 }