• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
7base.require('ui');
8base.require('base.settings');
9
10base.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