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