/
index.js
111 lines (94 loc) · 2.7 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/**
* Module dependencies
*/
var feature = require('feature');
var each = require('each');
var Draggy;
try {
Draggy = require('draggy');
} catch (e) {}
/**
* Start the feature-ui
*
* Options
* - query: defaults to 'features'
*
* @param {Object} options
*/
exports = module.exports = function(options) {
options = options || {};
var query = options.query || 'features';
if (~(window.location.search || '').indexOf('?' + query)) return exports.open();
};
exports.open = function() {
var ui = document.createElement('div');
var ul = document.createElement('ul');
function createAnchor(className, text, click) {
var el = document.createElement('a');
el.className = className;
el.innerText = text;
el.href = 'javascript:;';
el.onclick = click;
ui.appendChild(el);
}
createAnchor('reset', 'reset', function() {
feature.reset();
return false;
});
createAnchor('action close', '×', function() {
document.body.removeChild(ui);
return false;
});
createAnchor('action minimize', '_', function() {
ui.className = ui.className === 'minimized' ? '' : 'minimized';
return false;
});
ui.id = 'feature-ui';
ui.appendChild(ul);
document.body.appendChild(ui);
if (Draggy) new Draggy(ui);
var unsub = feature.watchList(function(features) {
while (ul.hasChildNodes()) {
ul.removeChild(ul.lastChild);
}
each(features, createItem);
});
function createItem(item) {
var li = document.createElement('li');
var label = document.createElement('label');
var span = document.createElement('span');
span.innerText = item;
var checkbox = document.createElement('input');
var val = feature(item);
var opts = feature.options(item);
if (typeof opts[0] === 'boolean') label.appendChild(createCheckbox(item, val));
else label.appendChild(createSelect(item, val, opts));
label.appendChild(span);
li.appendChild(label);
ul.appendChild(li);
}
function createCheckbox (item, value) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = value;
checkbox.onchange = function() {
checkbox.checked ? feature.enable(item) : feature.disable(item);
};
return checkbox;
}
function createSelect (item, value, opts) {
var select = document.createElement('select');
select.onchange = function() {
feature.set(item, select.value);
};
for (var i = 0; i < opts.length; i++) {
var opt = document.createElement('option');
opt.value = opts[i];
opt.innerHTML = opts[i];
if (opts[i] == value) opt.selected = 'selected';
select.appendChild(opt);
}
return select;
}
};
exports.feature = feature;