vhx-quartz 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/vhx/quartz/version.rb +1 -1
- data/vendor/assets/javascripts/vhx-quartz.autosuggest.js +74 -87
- data/vendor/assets/javascripts/vhx-quartz.checkbox.js +12 -30
- data/vendor/assets/javascripts/vhx-quartz.filter.js +86 -124
- data/vendor/assets/javascripts/vhx-quartz.header.js +4 -16
- data/vendor/assets/javascripts/vhx-quartz.radio.js +15 -30
- data/vendor/assets/javascripts/vhx-quartz.scope.js +33 -0
- data/vendor/assets/javascripts/vhx-quartz.search_input.js +12 -10
- data/vendor/assets/javascripts/vhx-quartz.select.js +81 -99
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4729c13cf94273713a4b9ec98546eea4d7aea7ed
|
|
4
|
+
data.tar.gz: 66e9f96e3ed4e02852f6311d7e51891aa6130758
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: aa3bc96695bd1a315706fcc3bbc1203fee00d9bb7f8b2654737ea7038e3f1ce58c8853dd831058788e5f80a3c708d5c0096aeeb6844980375d9c64a0786011ee
|
|
7
|
+
data.tar.gz: 45afc182331564f52074cc7daa7e761445a7b02e72104cf17decb8fe6aa1098913f76f7c3bbee5b9e352a5e0a04528ee8ea810d946bc4144bcac1c6a07171a9a
|
data/lib/vhx/quartz/version.rb
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
vhxm.components.shared.autosuggest.controller = function (opts) {
|
|
2
4
|
var self = this;
|
|
3
5
|
|
|
4
6
|
self.timeout = null;
|
|
5
7
|
|
|
6
|
-
self.init = function() {
|
|
8
|
+
self.init = function () {
|
|
7
9
|
self.state = new vhxm.components.shared.autosuggest.state();
|
|
8
10
|
self.model = new vhxm.components.shared.autosuggest.model();
|
|
9
11
|
|
|
@@ -18,7 +20,7 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
18
20
|
self.fetchResults('');
|
|
19
21
|
}
|
|
20
22
|
|
|
21
|
-
$(document).on('click', function(event) {
|
|
23
|
+
$(document).on('click', function (event) {
|
|
22
24
|
var is_list = $(event.target).closest('.c-autosuggest--container').length;
|
|
23
25
|
|
|
24
26
|
if (!is_list && self.state.hasFocus()) {
|
|
@@ -30,17 +32,17 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
30
32
|
});
|
|
31
33
|
};
|
|
32
34
|
|
|
33
|
-
self.isListOpen = function() {
|
|
35
|
+
self.isListOpen = function () {
|
|
34
36
|
return self.model.items() && self.state.hasFocus();
|
|
35
37
|
};
|
|
36
38
|
|
|
37
|
-
self.fetchResults = function(query) {
|
|
39
|
+
self.fetchResults = function (query) {
|
|
38
40
|
self.state.highlightIndex(0);
|
|
39
41
|
|
|
40
42
|
m.startComputation();
|
|
41
43
|
if (opts.data()) {
|
|
42
44
|
var result = [];
|
|
43
|
-
opts.data().map(function(item) {
|
|
45
|
+
opts.data().map(function (item) {
|
|
44
46
|
var query_clean = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
|
45
47
|
if (item.toLowerCase().match(query_clean.toLowerCase())) {
|
|
46
48
|
result.push(item);
|
|
@@ -52,14 +54,14 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
if (opts.search) {
|
|
55
|
-
opts.search(query, function(data) {
|
|
57
|
+
opts.search(query, function (data) {
|
|
56
58
|
self.model.items(data.length ? data : null);
|
|
57
59
|
m.endComputation();
|
|
58
60
|
});
|
|
59
61
|
}
|
|
60
62
|
};
|
|
61
63
|
|
|
62
|
-
self.handleKeydown = function(e) {
|
|
64
|
+
self.handleKeydown = function (e) {
|
|
63
65
|
var container = $(e.target).closest('.c-select--container').find('.c-select--options');
|
|
64
66
|
|
|
65
67
|
// Down Arrow
|
|
@@ -70,29 +72,29 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
70
72
|
}
|
|
71
73
|
// Up Arrow
|
|
72
74
|
else if (e.keyCode === 38) {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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);
|
|
75
|
+
self.state.hasFocus(true);
|
|
76
|
+
self.setHighlightedState('up', container);
|
|
77
|
+
e.preventDefault();
|
|
82
78
|
}
|
|
83
|
-
|
|
84
|
-
self.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
79
|
+
// Enter/Return
|
|
80
|
+
else if (e.keyCode === 13 && self.isListOpen()) {
|
|
81
|
+
if (self.model.items()) {
|
|
82
|
+
self.state.selected(self.model.items()[self.state.highlightIndex()]);
|
|
83
|
+
opts.onselect(self.state.selected(), true);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
self.state.hasFocus(false);
|
|
87
|
+
self.model.items(null);
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
}
|
|
88
90
|
};
|
|
89
91
|
|
|
90
|
-
self.handleClick = function(event) {
|
|
92
|
+
self.handleClick = function (event) {
|
|
91
93
|
event.preventDefault();
|
|
92
94
|
self.state.hasFocus(true);
|
|
93
95
|
};
|
|
94
96
|
|
|
95
|
-
self.handleInput = function(event) {
|
|
97
|
+
self.handleInput = function (event) {
|
|
96
98
|
event.preventDefault();
|
|
97
99
|
self.state.hasFocus(true);
|
|
98
100
|
self.state.selected(event.target.value);
|
|
@@ -100,23 +102,20 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
100
102
|
self.debounceSearch(event);
|
|
101
103
|
};
|
|
102
104
|
|
|
103
|
-
self.setHighlightedState = function(direction, container) {
|
|
105
|
+
self.setHighlightedState = function (direction, container) {
|
|
104
106
|
if (self.model.items()) {
|
|
105
107
|
if (direction === 'down') {
|
|
106
108
|
self.state.highlightIndex(self.state.highlightIndex() + 1);
|
|
107
109
|
if (self.state.highlightIndex() < self.model.items().length) {
|
|
108
110
|
self.state.scrollIndex(self.state.scrollIndex() + 1);
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
+
} else {
|
|
111
112
|
self.state.highlightIndex(self.model.items().length - 1);
|
|
112
113
|
}
|
|
113
|
-
}
|
|
114
|
-
else if (direction === 'up') {
|
|
114
|
+
} else if (direction === 'up') {
|
|
115
115
|
self.state.highlightIndex(self.state.highlightIndex() - 1);
|
|
116
116
|
if (self.state.highlightIndex() > 0) {
|
|
117
117
|
self.state.scrollIndex(self.state.scrollIndex() - 1);
|
|
118
|
-
}
|
|
119
|
-
else {
|
|
118
|
+
} else {
|
|
120
119
|
self.state.highlightIndex(0);
|
|
121
120
|
}
|
|
122
121
|
}
|
|
@@ -124,18 +123,18 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
124
123
|
}
|
|
125
124
|
};
|
|
126
125
|
|
|
127
|
-
self.scrollOptionsList = function(container) {
|
|
126
|
+
self.scrollOptionsList = function (container) {
|
|
128
127
|
if (container.length) {
|
|
129
128
|
container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
|
|
130
129
|
}
|
|
131
130
|
};
|
|
132
131
|
|
|
133
|
-
self.debounceSearch = function(event) {
|
|
132
|
+
self.debounceSearch = function (event) {
|
|
134
133
|
if (self.timeout) {
|
|
135
134
|
clearTimeout(self.timeout);
|
|
136
135
|
}
|
|
137
136
|
|
|
138
|
-
self.timeout = setTimeout(function() {
|
|
137
|
+
self.timeout = setTimeout(function () {
|
|
139
138
|
self.fetchResults(event.target.value);
|
|
140
139
|
self.timeout = null;
|
|
141
140
|
}, 300);
|
|
@@ -146,11 +145,11 @@ vhxm.components.shared.autosuggest.controller = function(opts) {
|
|
|
146
145
|
}
|
|
147
146
|
};
|
|
148
147
|
|
|
149
|
-
vhxm.components.shared.autosuggest.model = function() {
|
|
148
|
+
vhxm.components.shared.autosuggest.model = function () {
|
|
150
149
|
this.items = m.prop([]);
|
|
151
150
|
};
|
|
152
151
|
|
|
153
|
-
vhxm.components.shared.autosuggest.state = function() {
|
|
152
|
+
vhxm.components.shared.autosuggest.state = function () {
|
|
154
153
|
this.selected = m.prop({});
|
|
155
154
|
this.highlighted = m.prop({});
|
|
156
155
|
this.highlightIndex = m.prop(null);
|
|
@@ -161,55 +160,48 @@ vhxm.components.shared.autosuggest.state = function() {
|
|
|
161
160
|
};
|
|
162
161
|
|
|
163
162
|
vhxm.components.shared.autosuggest.ui.container = {
|
|
164
|
-
controller: function(opts) {
|
|
163
|
+
controller: function controller(opts) {
|
|
165
164
|
opts.init = true;
|
|
166
165
|
return new vhxm.components.shared.autosuggest.controller(opts);
|
|
167
166
|
},
|
|
168
|
-
view: function(ctrl, opts) {
|
|
167
|
+
view: function view(ctrl, opts) {
|
|
169
168
|
if (opts.reset()) {
|
|
170
169
|
ctrl.state.selected(null);
|
|
171
170
|
opts.reset(false);
|
|
172
171
|
}
|
|
173
172
|
return m('.c-autosuggest--container.form', {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
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
|
-
]);
|
|
173
|
+
onkeydown: ctrl.handleKeydown,
|
|
174
|
+
onclick: ctrl.handleClick
|
|
175
|
+
}, [m('.c-autosuggest--input-container', [m('input.c-autosuggest--search', {
|
|
176
|
+
config: function config(el) {
|
|
177
|
+
if (ctrl.state.hasFocus()) {
|
|
178
|
+
setTimeout(function () {
|
|
179
|
+
el.focus();
|
|
180
|
+
}, 10);
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
autocomplete: 'off',
|
|
184
|
+
name: opts.name ? opts.name : null,
|
|
185
|
+
type: 'text',
|
|
186
|
+
value: ctrl.state.selected(),
|
|
187
|
+
placeholder: opts.placeholder ? opts.placeholder : '',
|
|
188
|
+
oninput: ctrl.handleInput
|
|
189
|
+
})]), m('.c-autosuggest--list' + (ctrl.isListOpen() ? '.is-open' : ''), [m.component(vhxm.components.shared.autosuggest.ui.list.container, opts, ctrl)])]);
|
|
198
190
|
}
|
|
199
191
|
};
|
|
200
192
|
|
|
201
|
-
vhxm.components.shared.autosuggest.ui.list.controller = function(opts, parent) {
|
|
202
|
-
|
|
193
|
+
vhxm.components.shared.autosuggest.ui.list.controller = function (opts, parent) {
|
|
194
|
+
var self = this;
|
|
203
195
|
|
|
204
196
|
self.parent = new vhxm.components.shared.autosuggest.controller(opts);
|
|
205
197
|
self.state = parent.state;
|
|
206
198
|
self.model = parent.model;
|
|
207
199
|
|
|
208
|
-
self.hasItems = function() {
|
|
200
|
+
self.hasItems = function () {
|
|
209
201
|
return self.model.items() && self.model.items().length > 1;
|
|
210
202
|
};
|
|
211
203
|
|
|
212
|
-
self.handleItemClick = function(event, item) {
|
|
204
|
+
self.handleItemClick = function (event, item) {
|
|
213
205
|
self.state.selected(item);
|
|
214
206
|
self.state.highlightIndex(-1);
|
|
215
207
|
|
|
@@ -220,37 +212,32 @@ vhxm.components.shared.autosuggest.ui.list.controller = function(opts, parent) {
|
|
|
220
212
|
self.model.items(null);
|
|
221
213
|
self.parent.scrollOptionsList(0);
|
|
222
214
|
};
|
|
223
|
-
|
|
224
215
|
};
|
|
225
216
|
|
|
226
217
|
/* ................................................
|
|
227
218
|
Select List Component
|
|
228
219
|
.................................................*/
|
|
229
220
|
vhxm.components.shared.autosuggest.ui.list.container = {
|
|
230
|
-
controller: function(opts, parent) {
|
|
221
|
+
controller: function controller(opts, parent) {
|
|
231
222
|
return new vhxm.components.shared.autosuggest.ui.list.controller(opts, parent);
|
|
232
223
|
},
|
|
233
|
-
view: function(ctrl) {
|
|
224
|
+
view: function view(ctrl) {
|
|
234
225
|
return m('ul.c-autosuggest--options.margin-left-reset', {
|
|
235
|
-
config: function(el) {
|
|
226
|
+
config: function config(el) {
|
|
236
227
|
ctrl.state.optionsHeight($(el).outerHeight());
|
|
237
228
|
}
|
|
238
|
-
}, [
|
|
239
|
-
ctrl.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
}, item);
|
|
252
|
-
})
|
|
253
|
-
: ''
|
|
254
|
-
]);
|
|
229
|
+
}, [ctrl.model.items() ? ctrl.model.items().map(function (item, index) {
|
|
230
|
+
return m('li.c-autosuggest--option.padding-horizontal-medium.padding-horz-medium.padding-vert-small.padding-vertical-small' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
|
|
231
|
+
config: function config(el) {
|
|
232
|
+
ctrl.state.optionHeight($(el).outerHeight());
|
|
233
|
+
},
|
|
234
|
+
onmouseover: function onmouseover() {
|
|
235
|
+
ctrl.state.highlightIndex(index);
|
|
236
|
+
},
|
|
237
|
+
onclick: function onclick(event) {
|
|
238
|
+
ctrl.handleItemClick(event, item);
|
|
239
|
+
}
|
|
240
|
+
}, item);
|
|
241
|
+
}) : '']);
|
|
255
242
|
}
|
|
256
243
|
};
|
|
@@ -1,32 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
]);
|
|
4
|
+
view: function view(ctrl, opts) {
|
|
5
|
+
return m('fieldset.checkbox.' + (opts.size ? opts.size : 'medium') + (opts.type === 'toggle' ? '.alt' : ''), [m('input[type=checkbox]', {
|
|
6
|
+
checked: opts.checked,
|
|
7
|
+
name: opts.name,
|
|
8
|
+
onchange: opts.onchange,
|
|
9
|
+
id: opts.name
|
|
10
|
+
}), m('label', {
|
|
11
|
+
for: opts.name
|
|
12
|
+
}, [opts.type === 'toggle' ? m('span.checkbox--contain', [m('span.checkbox--icon'), m('span.checkbox--circle', [m('i.circle-top', m.trust('<span></span>')), m('i.circle-bottom', m.trust('<span></span>'))]), m('span.checkbox--label')]) : m('span.checkbox--contain', [m('span.checkbox--icon', [m('span.checkbox-animate')]), opts.label ? m('span.checkbox--label', opts.label) : ''])])]);
|
|
31
13
|
}
|
|
32
|
-
};
|
|
14
|
+
};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
|
4
|
+
|
|
1
5
|
vhxm.components.shared.filter.constants = Object.freeze({
|
|
2
6
|
date: {
|
|
3
7
|
title: 'Date'
|
|
@@ -6,10 +10,10 @@ vhxm.components.shared.filter.constants = Object.freeze({
|
|
|
6
10
|
title: 'Location'
|
|
7
11
|
}
|
|
8
12
|
});
|
|
9
|
-
vhxm.components.shared.filter.controller = function(opts) {
|
|
10
|
-
|
|
13
|
+
vhxm.components.shared.filter.controller = function (opts) {
|
|
14
|
+
var self = this;
|
|
11
15
|
|
|
12
|
-
self.init = function() {
|
|
16
|
+
self.init = function () {
|
|
13
17
|
self.state = new vhxm.components.shared.filter.state();
|
|
14
18
|
self.model = new vhxm.components.shared.filter.model();
|
|
15
19
|
|
|
@@ -18,28 +22,27 @@ vhxm.components.shared.filter.controller = function(opts) {
|
|
|
18
22
|
state: self.state,
|
|
19
23
|
model: self.model,
|
|
20
24
|
removeFilter: self.removeFilter,
|
|
21
|
-
addFilter: self.addFilter
|
|
25
|
+
addFilter: self.addFilter
|
|
22
26
|
});
|
|
23
27
|
}
|
|
24
28
|
};
|
|
25
29
|
|
|
26
|
-
self.handleFilterClick = function(event, name) {
|
|
30
|
+
self.handleFilterClick = function (event, name) {
|
|
27
31
|
event.preventDefault();
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
var state = self.state.dropdown.filtersOpen().indexOf(name);
|
|
30
34
|
|
|
31
35
|
if (state === -1) {
|
|
32
36
|
self.state.dropdown.filtersOpen().push(name);
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
37
|
+
} else {
|
|
35
38
|
self.state.dropdown.filtersOpen().splice(state, 1);
|
|
36
39
|
}
|
|
37
40
|
};
|
|
38
41
|
|
|
39
|
-
self.handleApplyClick = function(event) {
|
|
42
|
+
self.handleApplyClick = function (event) {
|
|
40
43
|
event.preventDefault();
|
|
41
44
|
|
|
42
|
-
|
|
45
|
+
var state = self.state.dropdown.isOpen() ? false : true;
|
|
43
46
|
|
|
44
47
|
if (!state && self.state.selected().length) {
|
|
45
48
|
self.applyFilter();
|
|
@@ -48,21 +51,21 @@ vhxm.components.shared.filter.controller = function(opts) {
|
|
|
48
51
|
self.state.dropdown.isOpen(state);
|
|
49
52
|
};
|
|
50
53
|
|
|
51
|
-
self.handleFilterRemoveClick = function(filter) {
|
|
52
|
-
self.removeFilter(filter, function() {
|
|
54
|
+
self.handleFilterRemoveClick = function (filter) {
|
|
55
|
+
self.removeFilter(filter, function () {
|
|
53
56
|
self.applyFilter();
|
|
54
57
|
});
|
|
55
58
|
};
|
|
56
59
|
|
|
57
|
-
self.applyFilter = function() {
|
|
60
|
+
self.applyFilter = function () {
|
|
58
61
|
self.state.applied(true);
|
|
59
62
|
if (opts.filterHandler) {
|
|
60
|
-
opts.filterHandler(self.state.selected(), function() {});
|
|
63
|
+
opts.filterHandler(self.state.selected(), function () {});
|
|
61
64
|
}
|
|
62
65
|
};
|
|
63
66
|
|
|
64
|
-
self.removeFilter = function(filter, callback) {
|
|
65
|
-
self.state.selected().filter(function(item, index) {
|
|
67
|
+
self.removeFilter = function (filter, callback) {
|
|
68
|
+
self.state.selected().filter(function (item, index) {
|
|
66
69
|
if (item.value === filter.value) {
|
|
67
70
|
self.state.selected().splice(item, 1);
|
|
68
71
|
}
|
|
@@ -73,7 +76,7 @@ vhxm.components.shared.filter.controller = function(opts) {
|
|
|
73
76
|
}
|
|
74
77
|
};
|
|
75
78
|
|
|
76
|
-
self.addFilter = function(filter, type) {
|
|
79
|
+
self.addFilter = function (filter, type) {
|
|
77
80
|
self.state.selected().push({
|
|
78
81
|
type: type,
|
|
79
82
|
label: filter.label,
|
|
@@ -85,10 +88,9 @@ vhxm.components.shared.filter.controller = function(opts) {
|
|
|
85
88
|
self.init();
|
|
86
89
|
}
|
|
87
90
|
};
|
|
88
|
-
vhxm.components.shared.filter.model = function() {
|
|
89
|
-
};
|
|
91
|
+
vhxm.components.shared.filter.model = function () {};
|
|
90
92
|
|
|
91
|
-
vhxm.components.shared.filter.state = function() {
|
|
93
|
+
vhxm.components.shared.filter.state = function () {
|
|
92
94
|
this.selected = m.prop([]);
|
|
93
95
|
this.applied = m.prop(false);
|
|
94
96
|
this.available = m.prop(null);
|
|
@@ -99,137 +101,97 @@ vhxm.components.shared.filter.state = function() {
|
|
|
99
101
|
};
|
|
100
102
|
|
|
101
103
|
vhxm.components.shared.filter.ui.container = {
|
|
102
|
-
controller: function(opts) {
|
|
104
|
+
controller: function controller(opts) {
|
|
103
105
|
opts.init = true;
|
|
104
106
|
return new vhxm.components.shared.filter.controller(opts);
|
|
105
107
|
},
|
|
106
|
-
view: function(ctrl, opts) {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
return m('.c-filter--container.dropdown.dropdown--large' + (ctrl.state.dropdown.isOpen() ? '.is-open' : ''), [
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
m('a.c-filter--trigger.block.radius.head-5.text--gray' +
|
|
113
|
-
(ready_to_apply ? '.text-center' : ('.icon--right.icon-' + (ctrl.state.dropdown.isOpen() ? 'x-navy' : 'chevron-down-gray') + '.icon--xxsmall.margin-right-medium.fill-width')), {
|
|
114
|
-
onclick: ctrl.handleApplyClick
|
|
115
|
-
}, ready_to_apply ? 'Apply' : 'Filters'),
|
|
116
|
-
m.component(vhxm.components.shared.filter.ui.dropdown, opts, ctrl)
|
|
117
|
-
]),
|
|
118
|
-
m('.column.small-13.padding-reset', [
|
|
119
|
-
m('.margin-left-small.padding-left-medium.border-left', [
|
|
120
|
-
ctrl.state.applied() && ctrl.state.selected().length ?
|
|
121
|
-
m.component(vhxm.components.shared.filter.ui.applied, opts, ctrl) : m('span.c-filter--label', opts.label ? opts.label : '')
|
|
122
|
-
])
|
|
123
|
-
])
|
|
124
|
-
])
|
|
125
|
-
]);
|
|
108
|
+
view: function view(ctrl, opts) {
|
|
109
|
+
var ready_to_apply = ctrl.state.dropdown.isOpen() && ctrl.state.selected() && ctrl.state.selected().length;
|
|
110
|
+
|
|
111
|
+
return m('.c-filter--container.dropdown.dropdown--large' + (ctrl.state.dropdown.isOpen() ? '.is-open' : ''), [m('div.row', [m('.column.small-3.padding-reset', [m('a.c-filter--trigger.block.radius.head-5.text--gray' + (ready_to_apply ? '.text-center' : '.icon--right.icon-' + (ctrl.state.dropdown.isOpen() ? 'x-navy' : 'chevron-down-gray') + '.icon--xxsmall.margin-right-medium.fill-width'), {
|
|
112
|
+
onclick: ctrl.handleApplyClick
|
|
113
|
+
}, ready_to_apply ? 'Apply' : 'Filters'), m.component(vhxm.components.shared.filter.ui.dropdown, opts, ctrl)]), m('.column.small-13.padding-reset', [m('.margin-left-small.padding-left-medium.border-left', [ctrl.state.applied() && ctrl.state.selected().length ? m.component(vhxm.components.shared.filter.ui.applied, opts, ctrl) : m('span.c-filter--label', opts.label ? opts.label : '')])])])]);
|
|
126
114
|
}
|
|
127
115
|
};
|
|
128
116
|
|
|
129
117
|
vhxm.components.shared.filter.ui.applied = {
|
|
130
|
-
controller: function(opts, parent_ctrl) {
|
|
118
|
+
controller: function controller(opts, parent_ctrl) {
|
|
131
119
|
return parent_ctrl;
|
|
132
120
|
},
|
|
133
|
-
view: function(ctrl) {
|
|
134
|
-
return m('div', [
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
})
|
|
144
|
-
]);
|
|
121
|
+
view: function view(ctrl) {
|
|
122
|
+
return m('div', [ctrl.state.selected().map(function (item) {
|
|
123
|
+
return m('a.c-filter--applied.icon--right.icon-x-navy.icon--xxsmall', {
|
|
124
|
+
href: '#',
|
|
125
|
+
onclick: function onclick(event) {
|
|
126
|
+
event.preventDefault();
|
|
127
|
+
ctrl.handleFilterRemoveClick(item);
|
|
128
|
+
}
|
|
129
|
+
}, item.label);
|
|
130
|
+
})]);
|
|
145
131
|
}
|
|
146
132
|
};
|
|
147
133
|
|
|
148
134
|
vhxm.components.shared.filter.ui.dropdown = {
|
|
149
|
-
controller: function(opts, parent_ctrl) {
|
|
135
|
+
controller: function controller(opts, parent_ctrl) {
|
|
150
136
|
return parent_ctrl;
|
|
151
137
|
},
|
|
152
|
-
view: function(ctrl, opts) {
|
|
153
|
-
return m('.c-filter--dropdown.dropdown-list', [
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
href: '#',
|
|
160
|
-
onclick: function(event) {
|
|
161
|
-
ctrl.handleFilterClick(event, item);
|
|
162
|
-
}
|
|
163
|
-
}, vhxm.components.shared.filter.constants[item].title),
|
|
164
|
-
m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? '.is-active' : ''), [
|
|
165
|
-
m.component(vhxm.components.shared.filter.ui[item])
|
|
166
|
-
])
|
|
167
|
-
]);
|
|
168
|
-
}
|
|
169
|
-
if (typeof(item) === 'object') {
|
|
170
|
-
if (item.template) {
|
|
171
|
-
return m.component(vhxm.components.shared.filter.ui.template, item, ctrl);
|
|
172
|
-
}
|
|
173
|
-
else if (item.data) {
|
|
174
|
-
return m.component(vhxm.components.shared.filter.ui.data, item, ctrl);
|
|
175
|
-
}
|
|
138
|
+
view: function view(ctrl, opts) {
|
|
139
|
+
return m('.c-filter--dropdown.dropdown-list', [m('ul.padding-reset', [opts.filters.map(function (item) {
|
|
140
|
+
if (typeof item === 'string' && vhxm.components.shared.filter.ui[item]) {
|
|
141
|
+
return m('li.border-bottom', [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', {
|
|
142
|
+
href: '#',
|
|
143
|
+
onclick: function onclick(event) {
|
|
144
|
+
ctrl.handleFilterClick(event, item);
|
|
176
145
|
}
|
|
177
|
-
})
|
|
178
|
-
|
|
179
|
-
|
|
146
|
+
}, vhxm.components.shared.filter.constants[item].title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item) >= 0 ? '.is-active' : ''), [m.component(vhxm.components.shared.filter.ui[item])])]);
|
|
147
|
+
}
|
|
148
|
+
if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object') {
|
|
149
|
+
if (item.template) {
|
|
150
|
+
return m.component(vhxm.components.shared.filter.ui.template, item, ctrl);
|
|
151
|
+
} else if (item.data) {
|
|
152
|
+
return m.component(vhxm.components.shared.filter.ui.data, item, ctrl);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
})])]);
|
|
180
156
|
}
|
|
181
157
|
};
|
|
182
158
|
|
|
183
159
|
vhxm.components.shared.filter.ui.template = {
|
|
184
|
-
controller: function(item, parent_ctrl) {
|
|
160
|
+
controller: function controller(item, parent_ctrl) {
|
|
185
161
|
return parent_ctrl;
|
|
186
162
|
},
|
|
187
|
-
view: function(ctrl, item) {
|
|
188
|
-
return m('li.border-bottom', [
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
}, item.title),
|
|
195
|
-
m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [
|
|
196
|
-
m.component(item.template)
|
|
197
|
-
])
|
|
198
|
-
]);
|
|
163
|
+
view: function view(ctrl, item) {
|
|
164
|
+
return m('li.border-bottom', [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', {
|
|
165
|
+
href: '#',
|
|
166
|
+
onclick: function onclick(event) {
|
|
167
|
+
ctrl.handleFilterClick(event, item.type);
|
|
168
|
+
}
|
|
169
|
+
}, item.title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [m.component(item.template)])]);
|
|
199
170
|
}
|
|
200
171
|
};
|
|
201
172
|
|
|
202
173
|
vhxm.components.shared.filter.ui.data = {
|
|
203
|
-
controller: function(opts, parent_ctrl) {
|
|
174
|
+
controller: function controller(opts, parent_ctrl) {
|
|
204
175
|
return parent_ctrl;
|
|
205
176
|
},
|
|
206
|
-
view: function(ctrl, item) {
|
|
207
|
-
return m('li.border-bottom', [
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
177
|
+
view: function view(ctrl, item) {
|
|
178
|
+
return m('li.border-bottom', [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', {
|
|
179
|
+
href: '#',
|
|
180
|
+
onclick: function onclick(event) {
|
|
181
|
+
ctrl.handleFilterClick(event, item.type);
|
|
182
|
+
}
|
|
183
|
+
}, item.title), m('div.c-filter--item-container' + (ctrl.state.dropdown.filtersOpen().indexOf(item.type) >= 0 ? '.is-active' : ''), [m('ul.form', [item.data().map(function (child, index) {
|
|
184
|
+
return m('li', [m.component(vhxm.components.shared.checkbox.ui.container, {
|
|
185
|
+
name: item.type + '-' + index,
|
|
186
|
+
checked: child.checked,
|
|
187
|
+
label: child.label,
|
|
188
|
+
onchange: function onchange(event) {
|
|
189
|
+
ctrl.removeFilter(child);
|
|
190
|
+
if (event.target.checked) {
|
|
191
|
+
ctrl.addFilter(child, item);
|
|
192
|
+
}
|
|
212
193
|
}
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
m('ul.form', [
|
|
216
|
-
item.data().map(function(child, index) {
|
|
217
|
-
return m('li', [
|
|
218
|
-
m.component(vhxm.components.shared.checkbox.ui.container, {
|
|
219
|
-
name: item.type + '-' + index,
|
|
220
|
-
checked: child.checked,
|
|
221
|
-
label: child.label,
|
|
222
|
-
onchange: function(event) {
|
|
223
|
-
ctrl.removeFilter(child);
|
|
224
|
-
if (event.target.checked) {
|
|
225
|
-
ctrl.addFilter(child, item);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
})
|
|
229
|
-
]);
|
|
230
|
-
})
|
|
231
|
-
])
|
|
232
|
-
])
|
|
233
|
-
]);
|
|
194
|
+
})]);
|
|
195
|
+
})])])]);
|
|
234
196
|
}
|
|
235
|
-
};
|
|
197
|
+
};
|
|
@@ -1,19 +1,7 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
vhxm.components.shared.header.ui.container = {
|
|
2
|
-
view: function(ctrl, data) {
|
|
3
|
-
return m('header.row.padding-bottom-medium.border-bottom', [
|
|
4
|
-
m('.column.small-16.medium-8.large-10', [
|
|
5
|
-
m('.media', [
|
|
6
|
-
m('.media-unit.text-top', [
|
|
7
|
-
m('i.icon.icon--large.icon-' + data.icon)
|
|
8
|
-
]),
|
|
9
|
-
m('.media-unit.media-fill.padding-left-medium', [
|
|
10
|
-
m('h2.head-3', data.title),
|
|
11
|
-
m('p.text.primary.small-margin-bottom-small', (data.description ? data.description : ''))
|
|
12
|
-
])
|
|
13
|
-
])
|
|
14
|
-
]),
|
|
15
|
-
m('.column.small-16.medium-8.large-6.text-right', (data.buttons ? data.buttons : ''))
|
|
16
|
-
]);
|
|
4
|
+
view: function view(ctrl, data) {
|
|
5
|
+
return m('header.row.padding-bottom-medium.border-bottom', [m('.column.small-16.medium-8.large-10', [m('.media', [m('.media-unit.text-top', [m('i.icon.icon--large.icon-' + data.icon)]), m('.media-unit.media-fill.padding-left-medium', [m('h2.head-3', data.title), m('p.text.primary.small-margin-bottom-small', data.description ? data.description : '')])])]), m('.column.small-16.medium-8.large-6.text-right', data.buttons ? data.buttons : '')]);
|
|
17
6
|
}
|
|
18
7
|
};
|
|
19
|
-
|
|
@@ -1,32 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
vhxm.components.shared.radio.ui.container = {
|
|
2
|
-
view: function(ctrl, opts) {
|
|
3
|
-
return m('form.form', [
|
|
4
|
-
m('
|
|
5
|
-
opts.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
m('label', {
|
|
15
|
-
for: opts.name + '-' + index,
|
|
16
|
-
}, [
|
|
17
|
-
m('span.radio--icon', [
|
|
18
|
-
m('i.circle-top', [
|
|
19
|
-
m('span')
|
|
20
|
-
]),
|
|
21
|
-
m('i.circle-bottom', [
|
|
22
|
-
m('span')
|
|
23
|
-
])
|
|
24
|
-
]),
|
|
25
|
-
m('span.radio--label', item.label)
|
|
26
|
-
])
|
|
27
|
-
]);
|
|
28
|
-
})
|
|
29
|
-
])
|
|
30
|
-
]);
|
|
4
|
+
view: function view(ctrl, opts) {
|
|
5
|
+
return m('form.form', [m('ul.radio-' + (opts.color ? opts.color : 'teal') + (opts.stacked ? '.radio--stacked' : ''), [opts.items.map(function (item, index) {
|
|
6
|
+
return m('li', [m('input', {
|
|
7
|
+
id: opts.name + '-' + index,
|
|
8
|
+
type: 'radio',
|
|
9
|
+
name: opts.name,
|
|
10
|
+
value: item.value,
|
|
11
|
+
checked: item.checked ? item.checked : null
|
|
12
|
+
}), m('label', {
|
|
13
|
+
for: opts.name + '-' + index
|
|
14
|
+
}, [m('span.radio--icon', [m('i.circle-top', [m('span')]), m('i.circle-bottom', [m('span')])]), m('span.radio--label', item.label)])]);
|
|
15
|
+
})])]);
|
|
31
16
|
}
|
|
32
|
-
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
if (typeof vhxm !== 'undefined') {
|
|
4
|
+
vhxm.components.shared = {
|
|
5
|
+
radio: {
|
|
6
|
+
ui: {}
|
|
7
|
+
},
|
|
8
|
+
checkbox: {
|
|
9
|
+
ui: {}
|
|
10
|
+
},
|
|
11
|
+
filter: {
|
|
12
|
+
location: {},
|
|
13
|
+
date: {},
|
|
14
|
+
ui: {}
|
|
15
|
+
},
|
|
16
|
+
select: {
|
|
17
|
+
ui: {
|
|
18
|
+
list: {}
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
autosuggest: {
|
|
22
|
+
ui: {
|
|
23
|
+
list: {}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
search_input: {
|
|
27
|
+
ui: {}
|
|
28
|
+
},
|
|
29
|
+
header: {
|
|
30
|
+
ui: {}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
@@ -1,40 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
vhxm.components.shared.search_input.controller = function (opts) {
|
|
4
|
+
var self = this;
|
|
3
5
|
|
|
4
6
|
self.timeout = null;
|
|
5
7
|
|
|
6
|
-
self.debounceSearch = function(event) {
|
|
8
|
+
self.debounceSearch = function (event) {
|
|
7
9
|
if (self.timeout) {
|
|
8
10
|
clearTimeout(self.timeout);
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
self.timeout = setTimeout(function() {
|
|
13
|
+
self.timeout = setTimeout(function () {
|
|
12
14
|
self.fetchResults(event.target.value);
|
|
13
15
|
self.timeout = null;
|
|
14
16
|
}, 300);
|
|
15
17
|
};
|
|
16
18
|
|
|
17
|
-
self.handleInput = function(event) {
|
|
19
|
+
self.handleInput = function (event) {
|
|
18
20
|
self.debounceSearch(event);
|
|
19
21
|
};
|
|
20
22
|
|
|
21
|
-
self.fetchResults = function(query) {
|
|
22
|
-
opts.search(query, function(data) {
|
|
23
|
+
self.fetchResults = function (query) {
|
|
24
|
+
opts.search(query, function (data) {
|
|
23
25
|
opts.callback(data);
|
|
24
26
|
});
|
|
25
27
|
};
|
|
26
28
|
};
|
|
27
29
|
|
|
28
30
|
vhxm.components.shared.search_input.ui.container = {
|
|
29
|
-
controller: function(opts) {
|
|
31
|
+
controller: function controller(opts) {
|
|
30
32
|
return new vhxm.components.shared.search_input.controller(opts);
|
|
31
33
|
},
|
|
32
|
-
view: function(ctrl, opts) {
|
|
34
|
+
view: function view(ctrl, opts) {
|
|
33
35
|
return m('input.c-select--search.padding-right-large', {
|
|
34
36
|
config: opts.config ? opts.config : '',
|
|
35
37
|
type: 'text',
|
|
36
38
|
placeholder: opts.placeholder ? opts.placeholder : 'Search',
|
|
37
|
-
oninput: function(event) {
|
|
39
|
+
oninput: function oninput(event) {
|
|
38
40
|
if (opts.oninput) {
|
|
39
41
|
opts.oninput(event);
|
|
40
42
|
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
1
2
|
|
|
2
|
-
vhxm.components.shared.select.controller = function(opts) {
|
|
3
|
-
|
|
3
|
+
vhxm.components.shared.select.controller = function (opts) {
|
|
4
|
+
var self = this;
|
|
4
5
|
|
|
5
|
-
self.init = function() {
|
|
6
|
+
self.init = function () {
|
|
6
7
|
self.state = new vhxm.components.shared.select.state();
|
|
7
8
|
self.model = new vhxm.components.shared.select.model();
|
|
8
9
|
|
|
9
10
|
self.model.items = opts.items;
|
|
10
11
|
self.state.selected(opts.selected);
|
|
11
12
|
|
|
12
|
-
$(document).on('click', function(event) {
|
|
13
|
-
|
|
13
|
+
$(document).on('click', function (event) {
|
|
14
|
+
var is_dropdown = $(event.target).closest('.c-select--container').length;
|
|
14
15
|
|
|
15
16
|
if (!is_dropdown && self.state.isDropdownOpen()) {
|
|
16
17
|
m.startComputation();
|
|
@@ -20,10 +21,10 @@ vhxm.components.shared.select.controller = function(opts) {
|
|
|
20
21
|
});
|
|
21
22
|
};
|
|
22
23
|
|
|
23
|
-
self.selectedLabel = function() {
|
|
24
|
-
|
|
24
|
+
self.selectedLabel = function () {
|
|
25
|
+
var is_default = true;
|
|
25
26
|
|
|
26
|
-
self.model.items().map(function(item) {
|
|
27
|
+
self.model.items().map(function (item) {
|
|
27
28
|
if (self.state.selected().value === item[opts.value_prop]) {
|
|
28
29
|
self.state.selected({
|
|
29
30
|
value: item[opts.value_prop],
|
|
@@ -40,9 +41,8 @@ vhxm.components.shared.select.controller = function(opts) {
|
|
|
40
41
|
return self.state.selected().label;
|
|
41
42
|
};
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
let container = $(e.target).closest('.c-select--container').find('.c-select--options');
|
|
44
|
+
self.handleKeydown = function (e) {
|
|
45
|
+
var container = $(e.target).closest('.c-select--container').find('.c-select--options');
|
|
46
46
|
|
|
47
47
|
// Down Arrow
|
|
48
48
|
if (e.keyCode === 40) {
|
|
@@ -51,24 +51,24 @@ vhxm.components.shared.select.controller = function(opts) {
|
|
|
51
51
|
}
|
|
52
52
|
// Up Arrow
|
|
53
53
|
else if (e.keyCode === 38) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
self.setHighlightedState('up', container);
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
}
|
|
57
|
+
// Enter/Return
|
|
58
|
+
else if (e.keyCode === 13 && self.state.isDropdownOpen()) {
|
|
59
|
+
self.state.selected({
|
|
60
|
+
value: self.model.items()[self.state.highlightIndex()][opts.value_prop],
|
|
61
|
+
label: self.model.items()[self.state.highlightIndex()][opts.label_prop]
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
self.state.isDropdownOpen(false);
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
}
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
-
self.handleClick = function(event) {
|
|
69
|
+
self.handleClick = function (event) {
|
|
70
70
|
event.preventDefault();
|
|
71
|
-
|
|
71
|
+
var container = $(event.target).closest('.c-select--container').find('.c-select--options');
|
|
72
72
|
|
|
73
73
|
self.state.isDropdownOpen(!self.state.isDropdownOpen());
|
|
74
74
|
self.state.highlightIndex(-1);
|
|
@@ -76,39 +76,36 @@ vhxm.components.shared.select.controller = function(opts) {
|
|
|
76
76
|
self.scrollOptionsList(container);
|
|
77
77
|
};
|
|
78
78
|
|
|
79
|
-
self.handleInput = function() {
|
|
79
|
+
self.handleInput = function () {
|
|
80
80
|
self.state.isLoadingResults(true);
|
|
81
81
|
self.state.highlightIndex(0);
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
-
self.searchCallback = function(data) {
|
|
84
|
+
self.searchCallback = function (data) {
|
|
85
85
|
self.model.items(data);
|
|
86
86
|
self.state.isLoadingResults(false);
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
-
self.setHighlightedState = function(direction, container) {
|
|
89
|
+
self.setHighlightedState = function (direction, container) {
|
|
90
90
|
if (direction === 'down') {
|
|
91
91
|
self.state.highlightIndex(self.state.highlightIndex() + 1);
|
|
92
92
|
if (self.state.highlightIndex() < self.model.items().length) {
|
|
93
93
|
self.state.scrollIndex(self.state.scrollIndex() + 1);
|
|
94
|
-
}
|
|
95
|
-
else {
|
|
94
|
+
} else {
|
|
96
95
|
self.state.highlightIndex(self.model.items().length - 1);
|
|
97
96
|
}
|
|
98
|
-
}
|
|
99
|
-
else if (direction === 'up') {
|
|
97
|
+
} else if (direction === 'up') {
|
|
100
98
|
self.state.highlightIndex(self.state.highlightIndex() - 1);
|
|
101
99
|
if (self.state.highlightIndex() > 0) {
|
|
102
100
|
self.state.scrollIndex(self.state.scrollIndex() - 1);
|
|
103
|
-
}
|
|
104
|
-
else {
|
|
101
|
+
} else {
|
|
105
102
|
self.state.highlightIndex(0);
|
|
106
103
|
}
|
|
107
104
|
}
|
|
108
105
|
self.scrollOptionsList(container);
|
|
109
106
|
};
|
|
110
107
|
|
|
111
|
-
self.scrollOptionsList = function(container) {
|
|
108
|
+
self.scrollOptionsList = function (container) {
|
|
112
109
|
if (container.length) {
|
|
113
110
|
container.eq(0).scrollTop(self.state.optionHeight() * self.state.highlightIndex());
|
|
114
111
|
}
|
|
@@ -119,11 +116,11 @@ vhxm.components.shared.select.controller = function(opts) {
|
|
|
119
116
|
}
|
|
120
117
|
};
|
|
121
118
|
|
|
122
|
-
vhxm.components.shared.select.model = function() {
|
|
119
|
+
vhxm.components.shared.select.model = function () {
|
|
123
120
|
this.items = m.prop(null);
|
|
124
121
|
};
|
|
125
122
|
|
|
126
|
-
vhxm.components.shared.select.state = function() {
|
|
123
|
+
vhxm.components.shared.select.state = function () {
|
|
127
124
|
this.selected = m.prop({});
|
|
128
125
|
this.highlighted = m.prop({});
|
|
129
126
|
this.isDropdownOpen = m.prop(false);
|
|
@@ -135,59 +132,50 @@ vhxm.components.shared.select.state = function() {
|
|
|
135
132
|
};
|
|
136
133
|
|
|
137
134
|
vhxm.components.shared.select.ui.container = {
|
|
138
|
-
controller: function(opts) {
|
|
135
|
+
controller: function controller(opts) {
|
|
139
136
|
opts.init = true;
|
|
140
137
|
return new vhxm.components.shared.select.controller(opts);
|
|
141
138
|
},
|
|
142
|
-
view: function(ctrl, opts) {
|
|
139
|
+
view: function view(ctrl, opts) {
|
|
143
140
|
return m('.c-select--container.form' + (opts.search ? '.has-search' : '') + (opts.inline ? '.inline' : ''), {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
]) : '',
|
|
168
|
-
m.component(vhxm.components.shared.select.ui.list.container, opts, ctrl),
|
|
169
|
-
m('input', {
|
|
170
|
-
type: 'hidden',
|
|
171
|
-
name: opts.name,
|
|
172
|
-
value: ctrl.state.selected().value
|
|
173
|
-
})
|
|
174
|
-
])
|
|
175
|
-
]);
|
|
141
|
+
onkeydown: ctrl.handleKeydown
|
|
142
|
+
}, [m('a.c-select--trigger.btn-dropdown-' + (opts.color ? opts.color : 'gray') + '.btn--fill' + (ctrl.state.isDropdownOpen() ? '.is-active' : ''), {
|
|
143
|
+
href: '#',
|
|
144
|
+
onclick: ctrl.handleClick
|
|
145
|
+
}, ctrl.selectedLabel()), m('.c-select--dropdown' + (ctrl.state.isDropdownOpen() ? '.is-open' : ''), [opts.search ?
|
|
146
|
+
// if search is enabled
|
|
147
|
+
m('.c-select--input-container.padding-medium', [m.component(vhxm.components.shared.search_input.ui.container, {
|
|
148
|
+
config: function config(el) {
|
|
149
|
+
if (ctrl.state.isDropdownOpen()) {
|
|
150
|
+
setTimeout(function () {
|
|
151
|
+
el.focus();
|
|
152
|
+
}, 10);
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
callback: ctrl.searchCallback,
|
|
156
|
+
search: opts.search,
|
|
157
|
+
placeholder: 'Search',
|
|
158
|
+
oninput: ctrl.handleInput
|
|
159
|
+
})]) : '', m.component(vhxm.components.shared.select.ui.list.container, opts, ctrl), m('input', {
|
|
160
|
+
type: 'hidden',
|
|
161
|
+
name: opts.name,
|
|
162
|
+
value: ctrl.state.selected().value
|
|
163
|
+
})])]);
|
|
176
164
|
}
|
|
177
165
|
};
|
|
178
166
|
|
|
179
|
-
vhxm.components.shared.select.ui.list.controller = function(opts, parent) {
|
|
180
|
-
|
|
167
|
+
vhxm.components.shared.select.ui.list.controller = function (opts, parent) {
|
|
168
|
+
var self = this;
|
|
181
169
|
|
|
182
170
|
self.parent = new vhxm.components.shared.select.controller(opts);
|
|
183
171
|
self.state = parent.state;
|
|
184
172
|
self.model = parent.model;
|
|
185
173
|
|
|
186
|
-
self.hasItems = function() {
|
|
174
|
+
self.hasItems = function () {
|
|
187
175
|
return self.model.items() && self.model.items().length > 1;
|
|
188
176
|
};
|
|
189
177
|
|
|
190
|
-
self.handleItemClick = function(event, item) {
|
|
178
|
+
self.handleItemClick = function (event, item) {
|
|
191
179
|
self.state.selected({
|
|
192
180
|
value: item[opts.value_prop],
|
|
193
181
|
label: item[opts.label_prop]
|
|
@@ -199,46 +187,40 @@ vhxm.components.shared.select.ui.list.controller = function(opts, parent) {
|
|
|
199
187
|
}
|
|
200
188
|
self.parent.scrollOptionsList(0);
|
|
201
189
|
};
|
|
202
|
-
|
|
203
190
|
};
|
|
204
191
|
|
|
205
192
|
/* ................................................
|
|
206
193
|
Select List Component
|
|
207
194
|
.................................................*/
|
|
208
195
|
vhxm.components.shared.select.ui.list.container = {
|
|
209
|
-
controller: function(opts, parent) {
|
|
196
|
+
controller: function controller(opts, parent) {
|
|
210
197
|
return new vhxm.components.shared.select.ui.list.controller(opts, parent);
|
|
211
198
|
},
|
|
212
|
-
view: function(ctrl, opts) {
|
|
199
|
+
view: function view(ctrl, opts) {
|
|
213
200
|
return m('ul.c-select--options.margin-left-reset' + (ctrl.state.isLoadingResults() ? '.is-loading.padding-bottom-medium' : ''), {
|
|
214
|
-
config: function(el) {
|
|
201
|
+
config: function config(el) {
|
|
215
202
|
ctrl.state.optionsHeight($(el).outerHeight());
|
|
216
203
|
}
|
|
217
|
-
}, [
|
|
218
|
-
ctrl.
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}, [
|
|
231
|
-
m('span.c-select--item-label', item[opts.label_prop]), item[opts.descriptor_prop] ? m('span.right.text.primary', item[opts.descriptor_prop]) : '' ]);
|
|
232
|
-
})
|
|
233
|
-
: m.component(vhxm.components.shared.select.ui.list.empty, opts)
|
|
234
|
-
]);
|
|
204
|
+
}, [ctrl.hasItems() ? ctrl.model.items().map(function (item, index) {
|
|
205
|
+
return m('li.c-select--option.padding-horizontal-large.padding-vertical-small' + (index === ctrl.state.highlightIndex() ? '.is-selected' : ''), {
|
|
206
|
+
config: function config(el) {
|
|
207
|
+
ctrl.state.optionHeight($(el).outerHeight());
|
|
208
|
+
},
|
|
209
|
+
onmouseover: function onmouseover() {
|
|
210
|
+
ctrl.state.highlightIndex(index);
|
|
211
|
+
},
|
|
212
|
+
onclick: function onclick(event) {
|
|
213
|
+
ctrl.handleItemClick(event, item);
|
|
214
|
+
}
|
|
215
|
+
}, [m('span.c-select--item-label', item[opts.label_prop]), item[opts.descriptor_prop] ? m('span.right.text.primary', item[opts.descriptor_prop]) : '']);
|
|
216
|
+
}) : m.component(vhxm.components.shared.select.ui.list.empty, opts)]);
|
|
235
217
|
}
|
|
236
218
|
};
|
|
237
219
|
|
|
238
220
|
/* List Empty
|
|
239
221
|
.................................................*/
|
|
240
222
|
vhxm.components.shared.select.ui.list.empty = {
|
|
241
|
-
view: function() {
|
|
223
|
+
view: function view() {
|
|
242
224
|
return m('li.c-select--option.padding-horizontal-large.padding-top-small.padding-bottom-medium.text.primary', 'No results');
|
|
243
225
|
}
|
|
244
226
|
};
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: vhx-quartz
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.8.
|
|
4
|
+
version: 0.8.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Scott Robertson, Courtney Burton, Steven Bone, David Gonzalez
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-07-
|
|
11
|
+
date: 2016-07-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|