vhx-quartz 0.7.7 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/vhx/quartz/version.rb +1 -1
- data/vendor/assets/javascripts/vhx-quartz.autosuggest.js +266 -0
- data/vendor/assets/javascripts/vhx-quartz.checkbox.js +46 -0
- data/vendor/assets/javascripts/vhx-quartz.filter.js +254 -0
- data/vendor/assets/javascripts/vhx-quartz.header.js +27 -0
- data/vendor/assets/javascripts/vhx-quartz.radio.js +66 -0
- data/vendor/assets/javascripts/vhx-quartz.search_input.js +66 -0
- data/vendor/assets/javascripts/vhx-quartz.select.js +263 -0
- data/vendor/assets/stylesheets/vhx-quartz.autosuggest.css +67 -0
- data/vendor/assets/stylesheets/vhx-quartz.checkbox.css +328 -0
- data/vendor/assets/stylesheets/vhx-quartz.css +9 -616
- data/vendor/assets/stylesheets/vhx-quartz.filter.css +66 -0
- data/vendor/assets/stylesheets/vhx-quartz.min.css +1 -1
- data/vendor/assets/stylesheets/vhx-quartz.radio.css +150 -0
- data/vendor/assets/stylesheets/vhx-quartz.select.css +128 -0
- metadata +14 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2b4bb1572cbf11cb2eb356800c80868f88c8bd07
|
4
|
+
data.tar.gz: 72bde5df5ebf2b1e7bacb69ce3f86ab905fc9308
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: baa502bb4c136ab3468f094f249c2f856655f1a4f0b6509f732a0f542ab93bd7f277def0ec136acd05fa1f6c7fc1c9e390d3aa5cd3af45ade99118e870ef47a4
|
7
|
+
data.tar.gz: 1b5a6a51e42760b95eb0f0ea86432a0876b4708f4d71c4af153dbf33c13874eafb78c31025adae3f10027b5ac2b9c89a9520f41f966f529e9cf3f130a7aeadae
|
data/lib/vhx/quartz/version.rb
CHANGED
@@ -0,0 +1,266 @@
|
|
1
|
+
vhxm.components.shared.autosuggest.controller = function(opts) {
|
2
|
+
var self = this;
|
3
|
+
|
4
|
+
self.timeout = null;
|
5
|
+
|
6
|
+
self.init = function() {
|
7
|
+
self.state = new vhxm.components.shared.autosuggest.state();
|
8
|
+
self.model = new vhxm.components.shared.autosuggest.model();
|
9
|
+
|
10
|
+
self.model.items(null);
|
11
|
+
self.state.selected(null);
|
12
|
+
|
13
|
+
if (opts.focusonready) {
|
14
|
+
self.state.hasFocus(true);
|
15
|
+
}
|
16
|
+
|
17
|
+
if (opts.suggestonready) {
|
18
|
+
self.fetchResults('');
|
19
|
+
}
|
20
|
+
|
21
|
+
$(document).on('click', function(event) {
|
22
|
+
var is_list = $(event.target).closest('.c-autosuggest--container').length;
|
23
|
+
|
24
|
+
if (!is_list && self.state.hasFocus()) {
|
25
|
+
m.startComputation();
|
26
|
+
self.state.hasFocus(false);
|
27
|
+
self.model.items(null);
|
28
|
+
m.endComputation();
|
29
|
+
}
|
30
|
+
});
|
31
|
+
};
|
32
|
+
|
33
|
+
self.isListOpen = function() {
|
34
|
+
return self.model.items() && self.state.hasFocus();
|
35
|
+
};
|
36
|
+
|
37
|
+
self.fetchResults = function(query) {
|
38
|
+
self.state.highlightIndex(0);
|
39
|
+
|
40
|
+
m.startComputation();
|
41
|
+
if (opts.data()) {
|
42
|
+
var result = [];
|
43
|
+
opts.data().map(function(item) {
|
44
|
+
var query_clean = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
45
|
+
if (item.toLowerCase().match(query_clean.toLowerCase())) {
|
46
|
+
result.push(item);
|
47
|
+
}
|
48
|
+
});
|
49
|
+
self.model.items(result.length ? result : null);
|
50
|
+
m.endComputation();
|
51
|
+
return;
|
52
|
+
}
|
53
|
+
|
54
|
+
if (opts.search) {
|
55
|
+
opts.search(query, function(data) {
|
56
|
+
self.model.items(data.length ? data : null);
|
57
|
+
m.endComputation();
|
58
|
+
});
|
59
|
+
}
|
60
|
+
};
|
61
|
+
|
62
|
+
self.handleKeydown = function(e) {
|
63
|
+
var container = $(e.target).closest('.c-select--container').find('.c-select--options');
|
64
|
+
|
65
|
+
// Down Arrow
|
66
|
+
if (e.keyCode === 40) {
|
67
|
+
self.state.hasFocus(true);
|
68
|
+
self.setHighlightedState('down', container);
|
69
|
+
e.preventDefault();
|
70
|
+
}
|
71
|
+
// Up Arrow
|
72
|
+
else if (e.keyCode === 38) {
|
73
|
+
self.state.hasFocus(true);
|
74
|
+
self.setHighlightedState('up', container);
|
75
|
+
e.preventDefault();
|
76
|
+
}
|
77
|
+
// Enter/Return
|
78
|
+
else if (e.keyCode === 13 && self.isListOpen()) {
|
79
|
+
if (self.model.items()) {
|
80
|
+
self.state.selected(self.model.items()[self.state.highlightIndex()]);
|
81
|
+
opts.onselect(self.state.selected(), true);
|
82
|
+
}
|
83
|
+
|
84
|
+
self.state.hasFocus(false);
|
85
|
+
self.model.items(null);
|
86
|
+
e.preventDefault();
|
87
|
+
}
|
88
|
+
};
|
89
|
+
|
90
|
+
self.handleClick = function(event) {
|
91
|
+
event.preventDefault();
|
92
|
+
self.state.hasFocus(true);
|
93
|
+
};
|
94
|
+
|
95
|
+
self.handleInput = function(event) {
|
96
|
+
event.preventDefault();
|
97
|
+
self.state.hasFocus(true);
|
98
|
+
self.state.selected(event.target.value);
|
99
|
+
opts.onselect(self.state.selected(), false);
|
100
|
+
self.debounceSearch(event);
|
101
|
+
};
|
102
|
+
|
103
|
+
self.setHighlightedState = function(direction, container) {
|
104
|
+
if (self.model.items()) {
|
105
|
+
if (direction === 'down') {
|
106
|
+
self.state.highlightIndex(self.state.highlightIndex() + 1);
|
107
|
+
if (self.state.highlightIndex() < self.model.items().length) {
|
108
|
+
self.state.scrollIndex(self.state.scrollIndex() + 1);
|
109
|
+
}
|
110
|
+
else {
|
111
|
+
self.state.highlightIndex(self.model.items().length - 1);
|
112
|
+
}
|
113
|
+
}
|
114
|
+
else if (direction === 'up') {
|
115
|
+
self.state.highlightIndex(self.state.highlightIndex() - 1);
|
116
|
+
if (self.state.highlightIndex() > 0) {
|
117
|
+
self.state.scrollIndex(self.state.scrollIndex() - 1);
|
118
|
+
}
|
119
|
+
else {
|
120
|
+
self.state.highlightIndex(0);
|
121
|
+
}
|
122
|
+
}
|
123
|
+
self.scrollOptionsList(container);
|
124
|
+
}
|
125
|
+
};
|
126
|
+
|
127
|
+
self.scrollOptionsList = function(container) {
|
128
|
+
if (container.length) {
|
129
|
+
container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
|
130
|
+
}
|
131
|
+
};
|
132
|
+
|
133
|
+
self.debounceSearch = function(event) {
|
134
|
+
if (self.timeout) {
|
135
|
+
clearTimeout(self.timeout);
|
136
|
+
}
|
137
|
+
|
138
|
+
self.timeout = setTimeout(function() {
|
139
|
+
self.fetchResults(event.target.value);
|
140
|
+
self.timeout = null;
|
141
|
+
}, 300);
|
142
|
+
};
|
143
|
+
|
144
|
+
if (opts.init) {
|
145
|
+
self.init();
|
146
|
+
}
|
147
|
+
};
|
148
|
+
|
149
|
+
vhxm.components.shared.autosuggest.model = function() {
|
150
|
+
this.items = m.prop([]);
|
151
|
+
};
|
152
|
+
|
153
|
+
vhxm.components.shared.autosuggest.state = function() {
|
154
|
+
this.selected = m.prop({});
|
155
|
+
this.highlighted = m.prop({});
|
156
|
+
this.highlightIndex = m.prop(null);
|
157
|
+
this.scrollIndex = m.prop(0);
|
158
|
+
this.optionHeight = m.prop(0);
|
159
|
+
this.optionsHeight = m.prop(0);
|
160
|
+
this.hasFocus = m.prop(false);
|
161
|
+
};
|
162
|
+
|
163
|
+
vhxm.components.shared.autosuggest.ui.container = {
|
164
|
+
controller: function(opts) {
|
165
|
+
opts.init = true;
|
166
|
+
return new vhxm.components.shared.autosuggest.controller(opts);
|
167
|
+
},
|
168
|
+
view: function(ctrl, opts) {
|
169
|
+
if (opts.reset()) {
|
170
|
+
ctrl.state.selected(null);
|
171
|
+
opts.reset(false);
|
172
|
+
}
|
173
|
+
return m('.c-autosuggest--container.form', {
|
174
|
+
onkeydown: ctrl.handleKeydown,
|
175
|
+
onclick: ctrl.handleClick,
|
176
|
+
}, [
|
177
|
+
m('.c-autosuggest--input-container', [
|
178
|
+
m('input.c-autosuggest--search', {
|
179
|
+
config: function(el) {
|
180
|
+
if (ctrl.state.hasFocus()) {
|
181
|
+
setTimeout(function() {
|
182
|
+
el.focus();
|
183
|
+
}, 10);
|
184
|
+
}
|
185
|
+
},
|
186
|
+
autocomplete: 'off',
|
187
|
+
name: opts.name ? opts.name : null,
|
188
|
+
type: 'text',
|
189
|
+
value: ctrl.state.selected(),
|
190
|
+
placeholder: opts.placeholder ? opts.placeholder : '',
|
191
|
+
oninput: ctrl.handleInput
|
192
|
+
})
|
193
|
+
]),
|
194
|
+
m('.c-autosuggest--list' + (ctrl.isListOpen() ? '.is-open' : ''), [
|
195
|
+
m.component(vhxm.components.shared.autosuggest.ui.list.container, opts, ctrl),
|
196
|
+
])
|
197
|
+
]);
|
198
|
+
}
|
199
|
+
};
|
200
|
+
|
201
|
+
m.component(vhxm.components.shared.autosuggest.ui.container, {
|
202
|
+
name: 'auto_suggest',
|
203
|
+
placeholder: 'Enter name',
|
204
|
+
data: m.prop(['This', 'That', 'Those', 'Some', 'More', 'Left', 'Right']),
|
205
|
+
focusonready: true,
|
206
|
+
reset: m.prop(false),
|
207
|
+
onselect: function(selected) {
|
208
|
+
// handle event
|
209
|
+
}
|
210
|
+
});
|
211
|
+
vhxm.components.shared.autosuggest.ui.list.controller = function(opts, parent) {
|
212
|
+
let self = this;
|
213
|
+
|
214
|
+
self.parent = new vhxm.components.shared.autosuggest.controller(opts);
|
215
|
+
self.state = parent.state;
|
216
|
+
self.model = parent.model;
|
217
|
+
|
218
|
+
self.hasItems = function() {
|
219
|
+
return self.model.items() && self.model.items().length > 1;
|
220
|
+
};
|
221
|
+
|
222
|
+
self.handleItemClick = function(event, item) {
|
223
|
+
self.state.selected(item);
|
224
|
+
self.state.highlightIndex(-1);
|
225
|
+
|
226
|
+
if (opts.onselect) {
|
227
|
+
opts.onselect(self.state.selected(), true);
|
228
|
+
}
|
229
|
+
self.state.hasFocus(false);
|
230
|
+
self.model.items(null);
|
231
|
+
self.parent.scrollOptionsList(0);
|
232
|
+
};
|
233
|
+
|
234
|
+
};
|
235
|
+
|
236
|
+
/* ................................................
|
237
|
+
Select List Component
|
238
|
+
.................................................*/
|
239
|
+
vhxm.components.shared.autosuggest.ui.list.container = {
|
240
|
+
controller: function(opts, parent) {
|
241
|
+
return new vhxm.components.shared.autosuggest.ui.list.controller(opts, parent);
|
242
|
+
},
|
243
|
+
view: function(ctrl) {
|
244
|
+
return m('ul.c-autosuggest--options.margin-left-reset', {
|
245
|
+
config: function(el) {
|
246
|
+
ctrl.state.optionsHeight($(el).outerHeight());
|
247
|
+
}
|
248
|
+
}, [
|
249
|
+
ctrl.model.items() ?
|
250
|
+
ctrl.model.items().map(function(item, index) {
|
251
|
+
return m('li.c-autosuggest--option.padding-horizontal-medium.padding-horz-medium.padding-vert-small.padding-vertical-small' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
|
252
|
+
config: function(el) {
|
253
|
+
ctrl.state.optionHeight($(el).outerHeight());
|
254
|
+
},
|
255
|
+
onmouseover: function() {
|
256
|
+
ctrl.state.highlightIndex(index);
|
257
|
+
},
|
258
|
+
onclick: function(event) {
|
259
|
+
ctrl.handleItemClick(event, item);
|
260
|
+
}
|
261
|
+
}, item);
|
262
|
+
})
|
263
|
+
: ''
|
264
|
+
]);
|
265
|
+
}
|
266
|
+
};
|
@@ -0,0 +1,46 @@
|
|
1
|
+
vhxm.components.shared.checkbox.ui.container = {
|
2
|
+
view: function(ctrl, opts) {
|
3
|
+
return m('fieldset.checkbox.' + (opts.size ? opts.size : 'medium') + (opts.type === 'toggle' ? '.alt' : ''), [
|
4
|
+
m('input[type=checkbox]', {
|
5
|
+
checked: opts.checked,
|
6
|
+
name: opts.name,
|
7
|
+
onchange: opts.onchange,
|
8
|
+
id: opts.name
|
9
|
+
}),
|
10
|
+
m('label', {
|
11
|
+
for: opts.name
|
12
|
+
}, [
|
13
|
+
opts.type === 'toggle' ?
|
14
|
+
m('span.checkbox--contain', [
|
15
|
+
m('span.checkbox--icon'),
|
16
|
+
m('span.checkbox--circle', [
|
17
|
+
m('i.circle-top', m.trust('<span></span>')),
|
18
|
+
m('i.circle-bottom', m.trust('<span></span>'))
|
19
|
+
]),
|
20
|
+
m('span.checkbox--label')
|
21
|
+
]) :
|
22
|
+
m('span.checkbox--contain', [
|
23
|
+
m('span.checkbox--icon', [
|
24
|
+
m('span.checkbox-animate')
|
25
|
+
]),
|
26
|
+
opts.label ?
|
27
|
+
m('span.checkbox--label', opts.label) : ''
|
28
|
+
])
|
29
|
+
])
|
30
|
+
]);
|
31
|
+
}
|
32
|
+
};
|
33
|
+
// standard checkbox
|
34
|
+
m.component(vhxm.components.shared.checkbox.ui.container, {
|
35
|
+
name: 'standard',
|
36
|
+
checked: true,
|
37
|
+
size: 'medium'
|
38
|
+
});
|
39
|
+
|
40
|
+
// toggle checkbox
|
41
|
+
m.component(vhxm.components.shared.checkbox.ui.container, {
|
42
|
+
name: 'toggle',
|
43
|
+
type: 'toggle',
|
44
|
+
checked: true,
|
45
|
+
size: 'medium'
|
46
|
+
});
|
@@ -0,0 +1,254 @@
|
|
1
|
+
// Example Filter Component
|
2
|
+
|
3
|
+
m.component(vhxm.components.shared.filter.container, {
|
4
|
+
label: 'Customize this table',
|
5
|
+
api: vhxm.component.name.state.filterApi,
|
6
|
+
filters: [
|
7
|
+
'date',
|
8
|
+
'location',
|
9
|
+
{
|
10
|
+
type: 'test',
|
11
|
+
title: 'Test',
|
12
|
+
template: {
|
13
|
+
view: function() {
|
14
|
+
// custom filter template
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
]
|
19
|
+
});
|
20
|
+
vhxm.components.shared.filter.constants = Object.freeze({
|
21
|
+
date: {
|
22
|
+
title: 'Date'
|
23
|
+
},
|
24
|
+
location: {
|
25
|
+
title: 'Location'
|
26
|
+
}
|
27
|
+
});
|
28
|
+
vhxm.components.shared.filter.controller = function(opts) {
|
29
|
+
let self = this;
|
30
|
+
|
31
|
+
self.init = function() {
|
32
|
+
self.state = new vhxm.components.shared.filter.state();
|
33
|
+
self.model = new vhxm.components.shared.filter.model();
|
34
|
+
|
35
|
+
if (opts.api) {
|
36
|
+
opts.api({
|
37
|
+
state: self.state,
|
38
|
+
model: self.model,
|
39
|
+
removeFilter: self.removeFilter,
|
40
|
+
addFilter: self.addFilter,
|
41
|
+
});
|
42
|
+
}
|
43
|
+
};
|
44
|
+
|
45
|
+
self.handleFilterClick = function(event, name) {
|
46
|
+
event.preventDefault();
|
47
|
+
|
48
|
+
let state = self.state.dropdown.filtersOpen().indexOf(name);
|
49
|
+
|
50
|
+
if (state === -1) {
|
51
|
+
self.state.dropdown.filtersOpen().push(name);
|
52
|
+
}
|
53
|
+
else {
|
54
|
+
self.state.dropdown.filtersOpen().splice(state, 1);
|
55
|
+
}
|
56
|
+
};
|
57
|
+
|
58
|
+
self.handleApplyClick = function(event) {
|
59
|
+
event.preventDefault();
|
60
|
+
|
61
|
+
let state = self.state.dropdown.isOpen() ? false : true;
|
62
|
+
|
63
|
+
if (!state && self.state.selected().length) {
|
64
|
+
self.applyFilter();
|
65
|
+
}
|
66
|
+
|
67
|
+
self.state.dropdown.isOpen(state);
|
68
|
+
};
|
69
|
+
|
70
|
+
self.handleFilterRemoveClick = function(filter) {
|
71
|
+
self.removeFilter(filter, function() {
|
72
|
+
self.applyFilter();
|
73
|
+
});
|
74
|
+
};
|
75
|
+
|
76
|
+
self.applyFilter = function() {
|
77
|
+
self.state.applied(true);
|
78
|
+
if (opts.filterHandler) {
|
79
|
+
opts.filterHandler(self.state.selected(), function() {});
|
80
|
+
}
|
81
|
+
};
|
82
|
+
|
83
|
+
self.removeFilter = function(filter, callback) {
|
84
|
+
self.state.selected().filter(function(item, index) {
|
85
|
+
if (item.value === filter.value) {
|
86
|
+
self.state.selected().splice(item, 1);
|
87
|
+
}
|
88
|
+
});
|
89
|
+
|
90
|
+
if (callback) {
|
91
|
+
callback();
|
92
|
+
}
|
93
|
+
};
|
94
|
+
|
95
|
+
self.addFilter = function(filter, type) {
|
96
|
+
self.state.selected().push({
|
97
|
+
type: type,
|
98
|
+
label: filter.label,
|
99
|
+
value: filter.value
|
100
|
+
});
|
101
|
+
};
|
102
|
+
|
103
|
+
if (opts && opts.init) {
|
104
|
+
self.init();
|
105
|
+
}
|
106
|
+
};
|
107
|
+
vhxm.components.shared.filter.model = function() {
|
108
|
+
};
|
109
|
+
|
110
|
+
vhxm.components.shared.filter.state = function() {
|
111
|
+
this.selected = m.prop([]);
|
112
|
+
this.applied = m.prop(false);
|
113
|
+
this.available = m.prop(null);
|
114
|
+
this.dropdown = {
|
115
|
+
isOpen: m.prop(false),
|
116
|
+
filtersOpen: m.prop([])
|
117
|
+
};
|
118
|
+
};
|
119
|
+
|
120
|
+
vhxm.components.shared.filter.ui.container = {
|
121
|
+
controller: function(opts) {
|
122
|
+
opts.init = true;
|
123
|
+
return new vhxm.components.shared.filter.controller(opts);
|
124
|
+
},
|
125
|
+
view: function(ctrl, opts) {
|
126
|
+
let ready_to_apply = ctrl.state.dropdown.isOpen() && ctrl.state.selected() && ctrl.state.selected().length;
|
127
|
+
|
128
|
+
return m('.c-filter--container.dropdown.dropdown--large' + (ctrl.state.dropdown.isOpen() ? '.is-open' : ''), [
|
129
|
+
m('div.row', [
|
130
|
+
m('.column.small-3.padding-reset', [
|
131
|
+
m('a.c-filter--trigger.block.radius.head-5.text--gray' +
|
132
|
+
(ready_to_apply ? '.text-center' : ('.icon--right.icon-' + (ctrl.state.dropdown.isOpen() ? 'x-navy' : 'chevron-down-gray') + '.icon--xxsmall.margin-right-medium.fill-width')), {
|
133
|
+
onclick: ctrl.handleApplyClick
|
134
|
+
}, ready_to_apply ? 'Apply' : 'Filters'),
|
135
|
+
m.component(vhxm.components.shared.filter.ui.dropdown, opts, ctrl)
|
136
|
+
]),
|
137
|
+
m('.column.small-13.padding-reset', [
|
138
|
+
m('.margin-left-small.padding-left-medium.border-left', [
|
139
|
+
ctrl.state.applied() && ctrl.state.selected().length ?
|
140
|
+
m.component(vhxm.components.shared.filter.ui.applied, opts, ctrl) : m('span.c-filter--label', opts.label ? opts.label : '')
|
141
|
+
])
|
142
|
+
])
|
143
|
+
])
|
144
|
+
]);
|
145
|
+
}
|
146
|
+
};
|
147
|
+
|
148
|
+
vhxm.components.shared.filter.ui.applied = {
|
149
|
+
controller: function(opts, parent_ctrl) {
|
150
|
+
return parent_ctrl;
|
151
|
+
},
|
152
|
+
view: function(ctrl) {
|
153
|
+
return m('div', [
|
154
|
+
ctrl.state.selected().map(function(item) {
|
155
|
+
return m('a.c-filter--applied.icon--right.icon-x-navy.icon--xxsmall', {
|
156
|
+
href: '#',
|
157
|
+
onclick: function(event) {
|
158
|
+
event.preventDefault();
|
159
|
+
ctrl.handleFilterRemoveClick(item);
|
160
|
+
}
|
161
|
+
}, item.label);
|
162
|
+
})
|
163
|
+
]);
|
164
|
+
}
|
165
|
+
};
|
166
|
+
|
167
|
+
vhxm.components.shared.filter.ui.dropdown = {
|
168
|
+
controller: function(opts, parent_ctrl) {
|
169
|
+
return parent_ctrl;
|
170
|
+
},
|
171
|
+
view: function(ctrl, opts) {
|
172
|
+
return m('.c-filter--dropdown.dropdown-list', [
|
173
|
+
m('ul.padding-reset', [
|
174
|
+
opts.filters.map(function(item) {
|
175
|
+
if (typeof(item) === 'string' && vhxm.components.shared.filter.ui[item]) {
|
176
|
+
return m('li.border-bottom', [
|
177
|
+
m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
|
178
|
+
href: '#',
|
179
|
+
onclick: function(event) {
|
180
|
+
ctrl.handleFilterClick(event, item);
|
181
|
+
}
|
182
|
+
}, vhxm.components.shared.filter.constants[item].title),
|
183
|
+
m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? '.is-active' : ''), [
|
184
|
+
m.component(vhxm.components.shared.filter.ui[item])
|
185
|
+
])
|
186
|
+
]);
|
187
|
+
}
|
188
|
+
if (typeof(item) === 'object') {
|
189
|
+
if (item.template) {
|
190
|
+
return m.component(vhxm.components.shared.filter.ui.template, item, ctrl);
|
191
|
+
}
|
192
|
+
else if (item.data) {
|
193
|
+
return m.component(vhxm.components.shared.filter.ui.data, item, ctrl);
|
194
|
+
}
|
195
|
+
}
|
196
|
+
})
|
197
|
+
])
|
198
|
+
]);
|
199
|
+
}
|
200
|
+
};
|
201
|
+
|
202
|
+
vhxm.components.shared.filter.ui.template = {
|
203
|
+
controller: function(item, parent_ctrl) {
|
204
|
+
return parent_ctrl;
|
205
|
+
},
|
206
|
+
view: function(ctrl, item) {
|
207
|
+
return m('li.border-bottom', [
|
208
|
+
m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
|
209
|
+
href: '#',
|
210
|
+
onclick: function(event) {
|
211
|
+
ctrl.handleFilterClick(event, item.type);
|
212
|
+
}
|
213
|
+
}, item.title),
|
214
|
+
m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [
|
215
|
+
m.component(item.template)
|
216
|
+
])
|
217
|
+
]);
|
218
|
+
}
|
219
|
+
};
|
220
|
+
|
221
|
+
vhxm.components.shared.filter.ui.data = {
|
222
|
+
controller: function(opts, parent_ctrl) {
|
223
|
+
return parent_ctrl;
|
224
|
+
},
|
225
|
+
view: function(ctrl, item) {
|
226
|
+
return m('li.border-bottom', [
|
227
|
+
m('a.c-filter--item.head-5.fill-width.icon--right.icon-chevron-' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? 'up' : 'down') + '-navy.icon--xxsmall', {
|
228
|
+
href: '#',
|
229
|
+
onclick: function(event) {
|
230
|
+
ctrl.handleFilterClick(event, item.type);
|
231
|
+
}
|
232
|
+
}, item.title),
|
233
|
+
m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [
|
234
|
+
m('ul.form', [
|
235
|
+
item.data().map(function(child, index) {
|
236
|
+
return m('li', [
|
237
|
+
m.component(vhxm.components.shared.checkbox.ui.container, {
|
238
|
+
name: item.type + '-' + index,
|
239
|
+
checked: child.checked,
|
240
|
+
label: child.label,
|
241
|
+
onchange: function(event) {
|
242
|
+
ctrl.removeFilter(child);
|
243
|
+
if (event.target.checked) {
|
244
|
+
ctrl.addFilter(child, item);
|
245
|
+
}
|
246
|
+
}
|
247
|
+
})
|
248
|
+
]);
|
249
|
+
})
|
250
|
+
])
|
251
|
+
])
|
252
|
+
]);
|
253
|
+
}
|
254
|
+
};
|
@@ -0,0 +1,27 @@
|
|
1
|
+
m.component(vhxm.components.shared.header.ui.container, {
|
2
|
+
title: 'Section Title',
|
3
|
+
icon: 'product',
|
4
|
+
description: 'This should be a concise summary of what this section does',
|
5
|
+
buttons: m('a.btn-teal', {
|
6
|
+
href: '#'
|
7
|
+
}, 'Action')
|
8
|
+
});
|
9
|
+
vhxm.components.shared.header.ui.container = {
|
10
|
+
view: function(ctrl, data) {
|
11
|
+
return m('header.row.padding-bottom-medium.border-bottom', [
|
12
|
+
m('.column.small-16.medium-8.large-10', [
|
13
|
+
m('.media', [
|
14
|
+
m('.media-unit.text-top', [
|
15
|
+
m('i.icon.icon--large.icon-' + data.icon)
|
16
|
+
]),
|
17
|
+
m('.media-unit.media-fill.padding-left-medium', [
|
18
|
+
m('h2.head-3', data.title),
|
19
|
+
m('p.text.primary.small-margin-bottom-small', (data.description ? data.description : ''))
|
20
|
+
])
|
21
|
+
])
|
22
|
+
]),
|
23
|
+
m('.column.small-16.medium-8.large-6.text-right', (data.buttons ? data.buttons : ''))
|
24
|
+
]);
|
25
|
+
}
|
26
|
+
};
|
27
|
+
|
@@ -0,0 +1,66 @@
|
|
1
|
+
// horizontal gray radio
|
2
|
+
m.component(vhxm.components.shared.radio.ui.container, {
|
3
|
+
color: 'gray',
|
4
|
+
name: 'horz-gray',
|
5
|
+
items: [
|
6
|
+
{
|
7
|
+
label: 'This',
|
8
|
+
value: 'this',
|
9
|
+
checked: true
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: 'That',
|
13
|
+
value: 'that'
|
14
|
+
}
|
15
|
+
]
|
16
|
+
});
|
17
|
+
|
18
|
+
// stacked teal radio
|
19
|
+
m.component(vhxm.components.shared.radio.ui.container, {
|
20
|
+
color: 'teal',
|
21
|
+
stacked: true,
|
22
|
+
name: 'horz-teal',
|
23
|
+
items: [
|
24
|
+
{
|
25
|
+
label: 'Here',
|
26
|
+
value: 'here',
|
27
|
+
checked: true
|
28
|
+
},
|
29
|
+
{
|
30
|
+
label: 'There',
|
31
|
+
value: 'there'
|
32
|
+
}
|
33
|
+
]
|
34
|
+
});
|
35
|
+
vhxm.components.shared.radio.ui.container = {
|
36
|
+
view: function(ctrl, opts) {
|
37
|
+
return m('form.form', [
|
38
|
+
m('ul.radio-' + (opts.color ? opts.color : 'teal') + (opts.stacked ? '.radio--stacked' : ''), [
|
39
|
+
opts.items.map(function(item, index) {
|
40
|
+
return m('li', [
|
41
|
+
m('input', {
|
42
|
+
id: opts.name + '-' + index,
|
43
|
+
type: 'radio',
|
44
|
+
name: opts.name,
|
45
|
+
value: item.value,
|
46
|
+
checked: item.checked ? item.checked : null
|
47
|
+
}),
|
48
|
+
m('label', {
|
49
|
+
for: opts.name + '-' + index,
|
50
|
+
}, [
|
51
|
+
m('span.radio--icon', [
|
52
|
+
m('i.circle-top', [
|
53
|
+
m('span')
|
54
|
+
]),
|
55
|
+
m('i.circle-bottom', [
|
56
|
+
m('span')
|
57
|
+
])
|
58
|
+
]),
|
59
|
+
m('span.radio--label', item.label)
|
60
|
+
])
|
61
|
+
]);
|
62
|
+
})
|
63
|
+
])
|
64
|
+
]);
|
65
|
+
}
|
66
|
+
};
|