src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/dom_helpers.js

   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 tvcm.require('tvcm.ui');
   8 tvcm.require('tvcm.settings');
   9
  10 tvcm.exportTo('tvcm.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       tvcm.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 = tvcm.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 = tvcm.Settings.get(settingsKey, defaultValue);
 114     buttonEl.checked = !!initialValue;
 115     if (targetEl)
 116       targetEl[targetElProperty] = initialValue;
 117
 118     function onChange() {
 119       tvcm.Settings.set(settingsKey, buttonEl.checked);
 120       if (targetEl)
 121         targetEl[targetElProperty] = buttonEl.checked;
 122     }
 123
 124     buttonEl.addEventListener('change', onChange);
 125
 126     var id = '#checkbox-' + nextCheckboxId++;
 127
 128     var spanEl = createSpan({className: 'labeled-checkbox'});
 129     buttonEl.setAttribute('id', id);
 130
 131     var labelEl = document.createElement('label');
 132     labelEl.textContent = label;
 133     labelEl.setAttribute('for', id);
 134     spanEl.appendChild(buttonEl);
 135     spanEl.appendChild(labelEl);
 136
 137     spanEl.__defineSetter__('checked', function(opt_bool) {
 138       buttonEl.checked = !!opt_bool;
 139       onChange();
 140     });
 141     spanEl.__defineGetter__('checked', function() {
 142       return buttonEl.checked;
 143     });
 144
 145     return spanEl;
 146   }
 147
 148   return {
 149     createSpan: createSpan,
 150     createDiv: createDiv,
 151     createScopedStyle: createScopedStyle,
 152     createSelector: createSelector,
 153     createCheckBox: createCheckBox
 154   };
 155 });