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       if (opt_dictionary.bold)
  22         spanEl.style.fontWeight = 'bold';
  23     }
  24     return spanEl;
  25   };
  26
  27   function createDiv(opt_dictionary) {
  28     var divEl = document.createElement('div');
  29     if (opt_dictionary) {
  30       if (opt_dictionary.className)
  31         divEl.className = opt_dictionary.className;
  32       if (opt_dictionary.parent)
  33         opt_dictionary.parent.appendChild(divEl);
  34     }
  35     return divEl;
  36   };
  37
  38   function createScopedStyle(styleContent) {
  39     var styleEl = document.createElement('style');
  40     styleEl.scoped = true;
  41     styleEl.innerHTML = styleContent;
  42     return styleEl;
  43   }
  44
  45   function createSelector(
  46       targetEl, targetElProperty,
  47       settingsKey, defaultValue,
  48       items) {
  49     var defaultValueIndex;
  50     for (var i = 0; i < items.length; i++) {
  51       var item = items[i];
  52       if (item.value == defaultValue) {
  53         defaultValueIndex = i;
  54         break;
  55       }
  56     }
  57     if (defaultValueIndex === undefined)
  58       throw new Error('defaultValue must be in the items list');
  59
  60     var selectorEl = document.createElement('select');
  61     selectorEl.addEventListener('change', onChange);
  62     for (var i = 0; i < items.length; i++) {
  63       var item = items[i];
  64       var optionEl = document.createElement('option');
  65       optionEl.textContent = item.label;
  66       optionEl.targetPropertyValue = item.value;
  67       selectorEl.appendChild(optionEl);
  68     }
  69     function onChange(e) {
  70       var value = selectorEl.selectedOptions[0].targetPropertyValue;
  71       tvcm.Settings.set(settingsKey, value);
  72       targetEl[targetElProperty] = value;
  73     }
  74     var oldSetter = targetEl.__lookupSetter__('selectedIndex');
  75     selectorEl.__defineGetter__('selectedValue', function(v) {
  76       return selectorEl.children[selectorEl.selectedIndex].targetPropertyValue;
  77     });
  78     selectorEl.__defineSetter__('selectedValue', function(v) {
  79       for (var i = 0; i < selectorEl.children.length; i++) {
  80         var value = selectorEl.children[i].targetPropertyValue;
  81         if (value == v) {
  82           selectorEl.selectedIndex = i;
  83           onChange();
  84           return;
  85         }
  86       }
  87       throw new Error('Not a valid value');
  88     });
  89
  90     var initialValue = tvcm.Settings.get(settingsKey, defaultValue);
  91     var didSet = false;
  92     for (var i = 0; i < selectorEl.children.length; i++) {
  93       if (selectorEl.children[i].targetPropertyValue == initialValue) {
  94         didSet = true;
  95         targetEl[targetElProperty] = initialValue;
  96         selectorEl.selectedIndex = i;
  97         break;
  98       }
  99     }
 100     if (!didSet) {
 101       selectorEl.selectedIndex = defaultValueIndex;
 102       targetEl[targetElProperty] = defaultValue;
 103     }
 104
 105     return selectorEl;
 106   }
 107
 108   var nextCheckboxId = 1;
 109   function createCheckBox(targetEl, targetElProperty,
 110                           settingsKey, defaultValue,
 111                           label) {
 112     var buttonEl = document.createElement('input');
 113     buttonEl.type = 'checkbox';
 114
 115     var initialValue = tvcm.Settings.get(settingsKey, defaultValue);
 116     buttonEl.checked = !!initialValue;
 117     if (targetEl)
 118       targetEl[targetElProperty] = initialValue;
 119
 120     function onChange() {
 121       tvcm.Settings.set(settingsKey, buttonEl.checked);
 122       if (targetEl)
 123         targetEl[targetElProperty] = buttonEl.checked;
 124     }
 125
 126     buttonEl.addEventListener('change', onChange);
 127
 128     var id = '#checkbox-' + nextCheckboxId++;
 129
 130     var spanEl = createSpan({className: 'labeled-checkbox'});
 131     buttonEl.setAttribute('id', id);
 132
 133     var labelEl = document.createElement('label');
 134     labelEl.textContent = label;
 135     labelEl.setAttribute('for', id);
 136     spanEl.appendChild(buttonEl);
 137     spanEl.appendChild(labelEl);
 138
 139     spanEl.__defineSetter__('checked', function(opt_bool) {
 140       buttonEl.checked = !!opt_bool;
 141       onChange();
 142     });
 143     spanEl.__defineGetter__('checked', function() {
 144       return buttonEl.checked;
 145     });
 146
 147     return spanEl;
 148   }
 149
 150   function isElementAttachedToDocument(el) {
 151     var cur = el;
 152     while (cur.parentNode)
 153       cur = cur.parentNode;
 154     return cur == el.ownerDocument;
 155   }
 156
 157   return {
 158     createSpan: createSpan,
 159     createDiv: createDiv,
 160     createScopedStyle: createScopedStyle,
 161     createSelector: createSelector,
 162     createCheckBox: createCheckBox,
 163     isElementAttachedToDocument: isElementAttachedToDocument
 164   };
 165 });