Home | History | Annotate | Download | only in ui 
      1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 'use strict';
      6 
      7 base.require('ui');
      8 base.require('base.settings');
      9 
     10 base.exportTo('ui', function() {
     11 
     12   function createSpan(opt_dictionary) {
     13     var spanEl = document.createElement('span');
     14     if (opt_dictionary) {
     15       if (opt_dictionary.className)
     16         spanEl.className = opt_dictionary.className;
     17       if (opt_dictionary.textContent)
     18         spanEl.textContent = opt_dictionary.textContent;
     19       if (opt_dictionary.parent)
     20         opt_dictionary.parent.appendChild(spanEl);
     21     }
     22     return spanEl;
     23   };
     24 
     25   function createDiv(opt_dictionary) {
     26     var divEl = document.createElement('div');
     27     if (opt_dictionary) {
     28       if (opt_dictionary.className)
     29         divEl.className = opt_dictionary.className;
     30       if (opt_dictionary.parent)
     31         opt_dictionary.parent.appendChild(divEl);
     32     }
     33     return divEl;
     34   };
     35 
     36   function createScopedStyle(styleContent) {
     37     var styleEl = document.createElement('style');
     38     styleEl.scoped = true;
     39     styleEl.innerHTML = styleContent;
     40     return styleEl;
     41   }
     42 
     43   function createSelector(
     44       targetEl, targetElProperty,
     45       settingsKey, defaultValue,
     46       items) {
     47     var defaultValueIndex;
     48     for (var i = 0; i < items.length; i++) {
     49       var item = items[i];
     50       if (item.value == defaultValue) {
     51         defaultValueIndex = i;
     52         break;
     53       }
     54     }
     55     if (defaultValueIndex === undefined)
     56       throw new Error('defaultValue must be in the items list');
     57 
     58     var selectorEl = document.createElement('select');
     59     selectorEl.addEventListener('change', onChange);
     60     for (var i = 0; i < items.length; i++) {
     61       var item = items[i];
     62       var optionEl = document.createElement('option');
     63       optionEl.textContent = item.label;
     64       optionEl.targetPropertyValue = item.value;
     65       selectorEl.appendChild(optionEl);
     66     }
     67     function onChange(e) {
     68       var value = selectorEl.selectedOptions[0].targetPropertyValue;
     69       base.Settings.set(settingsKey, value);
     70       targetEl[targetElProperty] = value;
     71     }
     72     var oldSetter = targetEl.__lookupSetter__('selectedIndex');
     73     selectorEl.__defineGetter__('selectedValue', function(v) {
     74       return selectorEl.children[selectorEl.selectedIndex].targetPropertyValue;
     75     });
     76     selectorEl.__defineSetter__('selectedValue', function(v) {
     77       for (var i = 0; i < selectorEl.children.length; i++) {
     78         var value = selectorEl.children[i].targetPropertyValue;
     79         if (value == v) {
     80           selectorEl.selectedIndex = i;
     81           onChange();
     82           return;
     83         }
     84       }
     85       throw new Error('Not a valid value');
     86     });
     87 
     88     var initialValue = base.Settings.get(settingsKey, defaultValue);
     89     var didSet = false;
     90     for (var i = 0; i < selectorEl.children.length; i++) {
     91       if (selectorEl.children[i].targetPropertyValue == initialValue) {
     92         didSet = true;
     93         targetEl[targetElProperty] = initialValue;
     94         selectorEl.selectedIndex = i;
     95         break;
     96       }
     97     }
     98     if (!didSet) {
     99       selectorEl.selectedIndex = defaultValueIndex;
    100       targetEl[targetElProperty] = defaultValue;
    101     }
    102 
    103     return selectorEl;
    104   }
    105 
    106   var nextCheckboxId = 1;
    107   function createCheckBox(targetEl, targetElProperty,
    108                           settingsKey, defaultValue,
    109                           label) {
    110     var buttonEl = document.createElement('input');
    111     buttonEl.type = 'checkbox';
    112 
    113     var initialValue = base.Settings.get(settingsKey, defaultValue);
    114     buttonEl.checked = !!initialValue;
    115     targetEl[targetElProperty] = initialValue;
    116 
    117     function onChange() {
    118       base.Settings.set(settingsKey, buttonEl.checked);
    119       targetEl[targetElProperty] = buttonEl.checked;
    120     }
    121 
    122     buttonEl.addEventListener('change', onChange);
    123 
    124     var id = '#checkbox-' + nextCheckboxId++;
    125 
    126     var spanEl = createSpan({className: 'labeled-checkbox'});
    127     buttonEl.setAttribute('id', id);
    128 
    129     var labelEl = document.createElement('label');
    130     labelEl.textContent = label;
    131     labelEl.setAttribute('for', id);
    132     spanEl.appendChild(buttonEl);
    133     spanEl.appendChild(labelEl);
    134 
    135     spanEl.__defineSetter__('checked', function(opt_bool) {
    136       buttonEl.checked = !!opt_bool;
    137       onChange();
    138     });
    139     spanEl.__defineGetter__('checked', function() {
    140       return buttonEl.checked;
    141     });
    142 
    143     return spanEl;
    144   }
    145 
    146   return {
    147     createSpan: createSpan,
    148     createDiv: createDiv,
    149     createScopedStyle: createScopedStyle,
    150     createSelector: createSelector,
    151     createCheckBox: createCheckBox
    152   };
    153 });
    154