Home | History | Annotate | Download | only in ui 
      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 }
    266