uniform-ui 3.0.0.beta2 → 3.0.0.beta10
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/assets/javascripts/uniform/checkbox.js +15 -15
- data/lib/assets/javascripts/uniform/component.js +23 -12
- data/lib/assets/javascripts/uniform/dropdown.js +54 -54
- data/lib/assets/javascripts/uniform/dropzone.js +107 -0
- data/lib/assets/javascripts/uniform/floating-label-input.js +14 -12
- data/lib/assets/javascripts/uniform/modal.js +31 -33
- data/lib/assets/javascripts/uniform/popover.js +59 -40
- data/lib/assets/javascripts/uniform/resizer.js +21 -21
- data/lib/assets/javascripts/uniform/select.js +187 -163
- data/lib/assets/javascripts/uniform/sticker.js +26 -0
- data/lib/assets/javascripts/uniform/tooltip.js +29 -16
- data/lib/assets/javascripts/uniform.js +23 -8
- data/lib/assets/stylesheets/uniform/base.scss +24 -9
- data/lib/assets/stylesheets/uniform/components/buttons.scss +4 -5
- data/lib/assets/stylesheets/uniform/components/checkbox.scss +2 -0
- data/lib/assets/stylesheets/uniform/components/container.scss +8 -7
- data/lib/assets/stylesheets/uniform/components/dropzone.scss +40 -0
- data/lib/assets/stylesheets/uniform/components/input-group.scss +9 -0
- data/lib/assets/stylesheets/uniform/components/loaders.scss +0 -3
- data/lib/assets/stylesheets/uniform/components/modal.scss +21 -36
- data/lib/assets/stylesheets/uniform/components/pointer.scss +4 -4
- data/lib/assets/stylesheets/uniform/components/select.scss +7 -2
- data/lib/assets/stylesheets/uniform/components/thumb.scss +0 -1
- data/lib/assets/stylesheets/uniform/components/z-input.scss +6 -0
- data/lib/assets/stylesheets/uniform/config.scss +156 -0
- data/lib/assets/stylesheets/uniform/defaults.scss +2 -26
- data/lib/assets/stylesheets/uniform/functions/icons.scss +29 -0
- data/lib/assets/stylesheets/uniform/functions/map.scss +95 -0
- data/lib/assets/stylesheets/uniform/functions/string.scss +15 -0
- data/lib/assets/stylesheets/uniform/functions.scss +4 -79
- data/lib/assets/stylesheets/uniform/mixins.scss +34 -26
- data/lib/assets/stylesheets/uniform/utilities/borders.scss +12 -13
- data/lib/assets/stylesheets/uniform/utilities/effects.scss +31 -0
- data/lib/assets/stylesheets/uniform/utilities/layout.scss +22 -22
- data/lib/assets/stylesheets/uniform/utilities/position.scss +4 -0
- data/lib/assets/stylesheets/uniform/utilities/sizing.scss +14 -8
- data/lib/assets/stylesheets/uniform/utilities/spacing.scss +20 -14
- data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
- data/lib/assets/stylesheets/uniform/utilities/text.scss +1 -0
- data/lib/assets/stylesheets/uniform/utilities.scss +8 -0
- data/lib/uniform/version.rb +1 -1
- metadata +11 -4
- data/lib/assets/stylesheets/uniform/variables.scss +0 -134
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import {
|
2
|
+
import { offset, outerWidth, outerHeight, append, css } from 'dolla';
|
3
3
|
|
4
4
|
/*
|
5
5
|
Requirements
|
@@ -13,6 +13,7 @@ import { closest, offset, outerWidth, outerHeight, removeClass, addClass } from
|
|
13
13
|
zIndex: # | default: unset
|
14
14
|
offset: {left: 0, top: 0}
|
15
15
|
container: element to append popover to. default: document
|
16
|
+
transition: string (reference transition classes in utilities)
|
16
17
|
*/
|
17
18
|
export default class Popover extends Component {
|
18
19
|
initialize (options) {
|
@@ -24,7 +25,8 @@ export default class Popover extends Component {
|
|
24
25
|
align: 'center bottom',
|
25
26
|
anchor: document.body,
|
26
27
|
content: 'needs content',
|
27
|
-
offset: {left: 0, top: 0}
|
28
|
+
offset: {left: 0, top: 0},
|
29
|
+
transition: false
|
28
30
|
};
|
29
31
|
Object.assign(this.options, this.pick(options, Object.keys(this.options)));
|
30
32
|
this.el.removeAttribute('content');
|
@@ -34,11 +36,11 @@ export default class Popover extends Component {
|
|
34
36
|
this.listenTo(document, 'focusin', this.checkFocus);
|
35
37
|
this.listenTo(document, 'keyup', this.checkEscape);
|
36
38
|
this.listenTo(window, 'resize', () => {
|
37
|
-
|
39
|
+
this.resize.bind(this)()
|
38
40
|
});
|
39
41
|
|
40
42
|
if(typeof this.options.container == "string"){
|
41
|
-
|
43
|
+
this.options.container = this.options.anchor.closest(this.options.container)
|
42
44
|
}
|
43
45
|
this.options.container = this.options.container || document.body
|
44
46
|
|
@@ -48,14 +50,21 @@ export default class Popover extends Component {
|
|
48
50
|
this.showing = true;
|
49
51
|
this.el.style.position = 'absolute';
|
50
52
|
this.el.style.zIndex = this.options.zIndex;
|
51
|
-
|
52
|
-
if(this.options.
|
53
|
-
this.
|
54
|
-
|
55
|
-
|
53
|
+
this.content = document.createElement('div')
|
54
|
+
if (this.options.transition) {
|
55
|
+
this.content.classList.add(this.options.transition, '-out')
|
56
|
+
}
|
57
|
+
append(this.el, this.content)
|
58
|
+
append(this.content, this.options.content);
|
56
59
|
|
57
60
|
this.options.container.appendChild(this.el);
|
58
61
|
this.resize();
|
62
|
+
|
63
|
+
if (this.options.transition) {
|
64
|
+
this.content.classList.remove('-out')
|
65
|
+
this.transitionDuration = Math.max(...css(this.content, 'transition-duration').split(", ").map(x => parseFloat(x))) * 1000
|
66
|
+
}
|
67
|
+
|
59
68
|
this.trigger('shown');
|
60
69
|
|
61
70
|
return this;
|
@@ -66,37 +75,37 @@ export default class Popover extends Component {
|
|
66
75
|
let bounds = this.el.getBoundingClientRect();
|
67
76
|
const body_bounds = document.body.getBoundingClientRect();
|
68
77
|
const window_bounds = {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
78
|
+
top: 0,
|
79
|
+
bottom: window.innerHeight,
|
80
|
+
left: 0,
|
81
|
+
right: window.innerWidth
|
73
82
|
};
|
74
83
|
|
75
84
|
var reposition = false;
|
76
85
|
if (bounds.bottom > Math.max(body_bounds.bottom, window_bounds.bottom)) {
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
86
|
+
var [leftAlign, topAlign] = this.options.align.split(" ");
|
87
|
+
this.setPosition(`${leftAlign} top`);
|
88
|
+
bounds = this.el.getBoundingClientRect()
|
89
|
+
if(bounds.top < 0) {
|
90
|
+
this.setPosition(`${leftAlign} bottom`);
|
91
|
+
}
|
92
|
+
bounds = this.el.getBoundingClientRect()
|
84
93
|
}
|
85
94
|
if (bounds.top < body_bounds.top) {
|
86
95
|
const difference = body_bounds.top - bounds.top
|
87
96
|
if(this.el.style.top != null) this.el.style.top = parseInt(this.el.style.top) + difference + "px"
|
88
|
-
|
97
|
+
if(this.el.style.bottom != null) this.el.style.bottom = parseInt(this.el.style.bottom) - difference + "px"
|
89
98
|
}
|
90
99
|
if (bounds.left < body_bounds.left) {
|
91
100
|
const difference = body_bounds.left - bounds.left
|
92
101
|
if(this.el.style.left != null) this.el.style.left = parseInt(this.el.style.left) + difference + "px"
|
93
|
-
|
94
|
-
|
102
|
+
if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
|
103
|
+
bounds = this.el.getBoundingClientRect()
|
95
104
|
}
|
96
105
|
if (bounds.right > body_bounds.right) {
|
97
106
|
const difference = body_bounds.right - bounds.right
|
98
107
|
if(this.el.style.left != null) this.el.style.left = parseInt(this.el.style.left) + difference + "px"
|
99
|
-
|
108
|
+
if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
|
100
109
|
}
|
101
110
|
}
|
102
111
|
|
@@ -120,7 +129,8 @@ export default class Popover extends Component {
|
|
120
129
|
if(leftAlign == 'left'){
|
121
130
|
position.right = outerWidth(container) - anchorOffset.left;
|
122
131
|
} else if(leftAlign == 'center'){
|
123
|
-
position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2
|
132
|
+
position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2;
|
133
|
+
position.transform = "translateX(-50%)";
|
124
134
|
} else if (leftAlign == 'right'){
|
125
135
|
position.left = anchorOffset.left + outerWidth(this.options.anchor);
|
126
136
|
} else if (leftAlign.includes("px")){
|
@@ -130,9 +140,9 @@ export default class Popover extends Component {
|
|
130
140
|
if(topAlign == 'top'){
|
131
141
|
let height = outerHeight(container);
|
132
142
|
if(container == document.body && getComputedStyle(container)['position'] == "static"){
|
133
|
-
|
143
|
+
height = window.innerHeight;
|
134
144
|
} else if (container == document.body) {
|
135
|
-
|
145
|
+
height = Math.max(height, document.body.clientHeight);
|
136
146
|
}
|
137
147
|
position.bottom = height - anchorOffset.top;
|
138
148
|
} else if(topAlign == 'center'){
|
@@ -154,9 +164,9 @@ export default class Popover extends Component {
|
|
154
164
|
this.el.style.top = null;
|
155
165
|
this.el.style.bottom = null;
|
156
166
|
this.el.style.transform = null;
|
157
|
-
|
158
|
-
|
159
|
-
|
167
|
+
this.el.classList.remove('popover-left', 'popover-right', 'popover-center', 'popover-top', 'popover-bottom');
|
168
|
+
this.el.classList.add('popover-' + topAlign);
|
169
|
+
this.el.classList.add('popover-' + leftAlign);
|
160
170
|
Object.keys(position).forEach(function(key){
|
161
171
|
this.el.style[key] = position[key] + (key != "transform" ? "px" : "");
|
162
172
|
}, this);
|
@@ -185,31 +195,40 @@ export default class Popover extends Component {
|
|
185
195
|
|
186
196
|
hide (options) {
|
187
197
|
options = options || {};
|
188
|
-
if(!this.showing) return;
|
189
|
-
|
198
|
+
if (!this.showing) return;
|
199
|
+
|
200
|
+
this.content.classList.add('-out')
|
190
201
|
this.showing = false;
|
191
|
-
|
192
|
-
|
193
|
-
|
202
|
+
setTimeout(() => {
|
203
|
+
this.el.zIndexWas = this.el.style.zIndex
|
204
|
+
this.el.style.zIndex = '-99';
|
205
|
+
if (options.silent !== true) {
|
206
|
+
this.trigger('hidden');
|
207
|
+
}
|
208
|
+
}, this.transitionDuration || 0)
|
194
209
|
}
|
195
210
|
|
196
211
|
show () {
|
197
212
|
if(this.showing) return;
|
198
|
-
|
213
|
+
|
214
|
+
this.el.style.zIndex = this.el.zIndexWas
|
215
|
+
this.content.classList.remove('-out');
|
199
216
|
this.showing = true;
|
200
|
-
|
217
|
+
setTimeout(() => {
|
218
|
+
this.trigger('shown');
|
219
|
+
}, this.transitionDuration || 0)
|
201
220
|
}
|
202
221
|
|
203
222
|
toggle(flag) {
|
204
223
|
flag = flag || this.showing;
|
205
|
-
if(flag) this.hide(); else this.show();
|
224
|
+
if (flag) this.hide(); else this.show();
|
206
225
|
}
|
207
226
|
|
208
227
|
persist() {
|
209
|
-
|
228
|
+
this.persisting = true;
|
210
229
|
}
|
211
230
|
|
212
231
|
unpersist() {
|
213
|
-
|
232
|
+
this.persisting = false;
|
214
233
|
}
|
215
234
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import Component from './component';
|
2
|
-
import { trigger
|
2
|
+
import { trigger } from 'dolla';
|
3
3
|
|
4
4
|
export default class Resizer extends Component {
|
5
5
|
|
@@ -7,8 +7,8 @@ export default class Resizer extends Component {
|
|
7
7
|
const breakpoints = getComputedStyle(window.document.body).getPropertyValue('--breakpoints')
|
8
8
|
this.breakpoints = {}
|
9
9
|
breakpoints.split(",").forEach(breakpoint => {
|
10
|
-
|
11
|
-
|
10
|
+
const [key, value] = breakpoint.split("/")
|
11
|
+
this.breakpoints[key.trim()] = value;
|
12
12
|
})
|
13
13
|
|
14
14
|
this.listenTo(window, 'resize', this.resize);
|
@@ -16,24 +16,24 @@ export default class Resizer extends Component {
|
|
16
16
|
}
|
17
17
|
|
18
18
|
resize () {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
19
|
+
const width = this.el.offsetWidth;
|
20
|
+
Object.keys(this.breakpoints).forEach(size => {
|
21
|
+
const query = this.breakpoints[size]
|
22
|
+
const css_class = size + '-container'
|
23
|
+
let [attribute, value] = query.split(":")
|
24
|
+
if(value.match("px")){
|
25
|
+
value = parseInt(value)
|
26
|
+
} else {
|
27
|
+
throw "unsupported media units"
|
28
|
+
}
|
29
29
|
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
30
|
+
if(attribute == "min-width") {
|
31
|
+
this.el.classList.toggle(css_class, width > value)
|
32
|
+
} else if (attribute == "max-width") {
|
33
|
+
this.el.classList.toggle(css_class, width < value)
|
34
|
+
} else {
|
35
|
+
throw "unsupported media feature"
|
36
|
+
}
|
37
|
+
});
|
38
38
|
}
|
39
39
|
}
|
@@ -2,7 +2,7 @@ import Component from './component';
|
|
2
2
|
import Popover from './popover';
|
3
3
|
import Modal from './modal';
|
4
4
|
import { check as checkIcon, arrow_down as arrowIcon, x as xIcon } from './icons';
|
5
|
-
import { createElement, HTML_ATTRIBUTES, filter, css,
|
5
|
+
import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'dolla';
|
6
6
|
|
7
7
|
/*
|
8
8
|
options: array of html options, each item can be string | array | object
|
@@ -23,196 +23,220 @@ import { createElement, HTML_ATTRIBUTES, filter, css, toggleClass, removeClass,
|
|
23
23
|
*/
|
24
24
|
export default class Select extends Component {
|
25
25
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
text: option
|
26
|
+
initialize (options = {}) {
|
27
|
+
this.options = {
|
28
|
+
multiple: false,
|
29
|
+
limit: 8,
|
30
|
+
container: false
|
32
31
|
}
|
33
|
-
|
34
|
-
return {
|
35
|
-
value: option[1],
|
36
|
-
text: option[0],
|
37
|
-
selected: option[2]
|
38
|
-
}
|
39
|
-
} else if (typeof option == "object") {
|
40
|
-
return option
|
41
|
-
} else {
|
42
|
-
throw "option of unexpected type"
|
43
|
-
}
|
44
|
-
});
|
45
|
-
this.options = {
|
46
|
-
multiple: false,
|
47
|
-
limit: 8,
|
48
|
-
container: false
|
49
|
-
}
|
50
|
-
Object.assign(this.options, this.pick(options, Object.keys(this.options)));
|
32
|
+
Object.assign(this.options, this.pick(options, Object.keys(this.options)));
|
51
33
|
|
52
|
-
|
53
|
-
|
54
|
-
|
34
|
+
this.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
|
35
|
+
this.el = createElement('button', this.el_options);
|
36
|
+
this.el.type = "button";
|
37
|
+
this.el.classList.add('uniformSelect');
|
55
38
|
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
39
|
+
this.listenTo(this.el, 'click', this.toggleOptions);
|
40
|
+
this.listenTo(this.el, 'click', '.uniformSelect-remove', this.removeSelection);
|
41
|
+
this.listenTo(this.el, 'change', 'select', this.renderValue);
|
42
|
+
this.listenTo(this.el, 'close', 'select', this.removeOptions);
|
43
|
+
|
44
|
+
if (options.options) {
|
45
|
+
this.htmlOptions = options.options.map(option => {
|
46
|
+
if(typeof option == "string") {
|
47
|
+
return {
|
48
|
+
value: option,
|
49
|
+
text: option
|
50
|
+
}
|
51
|
+
} else if (Array.isArray(option)){
|
52
|
+
return {
|
53
|
+
value: option[1],
|
54
|
+
text: option[0],
|
55
|
+
selected: option[2]
|
56
|
+
}
|
57
|
+
} else if (typeof option == "object") {
|
58
|
+
return option
|
59
|
+
} else {
|
60
|
+
throw "option of unexpected type"
|
61
|
+
}
|
62
|
+
});
|
63
|
+
}
|
64
|
+
|
65
|
+
if (options.el) {
|
66
|
+
this.select = options.el;
|
67
|
+
this.el.setAttribute('class', this.select.getAttribute('class'))
|
68
|
+
this.el.classList.add('uniformSelect')
|
69
|
+
if (!this.htmlOptions) {
|
70
|
+
this.htmlOptions = Array.from(this.select.querySelectorAll('option')).map(option => {
|
71
|
+
return {
|
72
|
+
value: option.value,
|
73
|
+
text: option.innerHTML,
|
74
|
+
selected: option.selected
|
75
|
+
}
|
76
|
+
})
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
61
80
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
81
|
+
render () {
|
82
|
+
this.valueEl = createElement('span');
|
83
|
+
this.valueEl.classList.add('uniformSelect-value')
|
84
|
+
this.el.append(this.valueEl);
|
66
85
|
|
67
|
-
|
68
|
-
|
69
|
-
|
86
|
+
this.indicatorEl = createElement('span', {children: arrowIcon})
|
87
|
+
this.indicatorEl.classList.add('uniformSelect-indicator')
|
88
|
+
this.el.append(this.indicatorEl);
|
70
89
|
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
90
|
+
if (this.select) {
|
91
|
+
this.select.replaceWith(this.el);
|
92
|
+
this.select.innerHTML = '';
|
93
|
+
} else {
|
94
|
+
this.select = createElement('select', this.el_options);
|
95
|
+
}
|
96
|
+
this.htmlOptions.forEach(option => {
|
97
|
+
this.select.append(createElement('option', Object.assign({}, {children: option.text}, option)))
|
98
|
+
});
|
99
|
+
this.el.append(this.select);
|
76
100
|
|
77
101
|
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
102
|
+
// Append placeholder of longest option, to set width
|
103
|
+
const longestText = this.htmlOptions.map(x => x.text).sort((a, b) => a.length < b.length)[0]
|
104
|
+
const placeholder = createElement('span', {class: 'uniformSelect-placeholder', children: longestText})
|
105
|
+
this.el.append(placeholder);
|
82
106
|
|
83
|
-
|
84
|
-
|
85
|
-
|
107
|
+
this.renderValue();
|
108
|
+
return this;
|
109
|
+
}
|
86
110
|
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
111
|
+
renderValue () {
|
112
|
+
const selectedOptions = filter(this.select.querySelectorAll("option"), el => el.selected);
|
113
|
+
const html = selectedOptions.map(el => this.options.multiple ? `
|
114
|
+
<span class="uniformSelect-selection">
|
115
|
+
<span>${el.textContent}</span><span class="uniformSelect-remove">${xIcon}</span>
|
116
|
+
</span>
|
117
|
+
` : el.textContent).join(" ");
|
94
118
|
|
95
|
-
|
96
|
-
}
|
97
|
-
|
98
|
-
selectOption (e) {
|
99
|
-
const makeActive = !e.target.option.selected;
|
100
|
-
if (!this.options.multiple && makeActive) {
|
101
|
-
removeClass(e.target.offsetParent.querySelectorAll('.active'), 'active');
|
119
|
+
this.valueEl.innerHTML = html;
|
102
120
|
}
|
103
|
-
|
104
|
-
e
|
121
|
+
|
122
|
+
selectOption (e) {
|
123
|
+
const makeActive = !e.target.option.selected;
|
124
|
+
if (!this.options.multiple && makeActive) {
|
125
|
+
e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
|
126
|
+
}
|
127
|
+
e.target.classList.toggle('active', makeActive);
|
128
|
+
e.target.option.selected = makeActive;
|
105
129
|
|
106
|
-
|
107
|
-
|
108
|
-
|
130
|
+
if (!this.options.multiple) {
|
131
|
+
this.removeOptions();
|
132
|
+
}
|
109
133
|
|
110
|
-
|
111
|
-
|
134
|
+
trigger(this.select, 'change');
|
135
|
+
}
|
112
136
|
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
137
|
+
removeSelection (e) {
|
138
|
+
e.preventDefault();
|
139
|
+
e.stopPropagation();
|
140
|
+
var option = filter(this.select.querySelectorAll("option"), function(el){
|
141
|
+
return el.innerText.trim() == e.target.closest('.uniformSelect-selection').innerText.trim();
|
142
|
+
})[0];
|
143
|
+
if(!option) return;
|
144
|
+
option.selected = false;
|
145
|
+
option.button.classList.remove('active');
|
122
146
|
|
123
|
-
|
124
|
-
}
|
125
|
-
|
126
|
-
toggleOptions (e) {
|
127
|
-
if(e && (e.target.matches('.uniformSelect-remove') || closest(e.target, '.uniformSelect-remove'))){
|
128
|
-
return;
|
147
|
+
trigger(this.select, 'change');
|
129
148
|
}
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
149
|
+
|
150
|
+
toggleOptions (e) {
|
151
|
+
if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
|
152
|
+
return;
|
153
|
+
}
|
154
|
+
this.el.classList.toggle('active')
|
155
|
+
if(this.el.classList.contains('active')){
|
156
|
+
this.renderOptions()
|
157
|
+
} else {
|
158
|
+
this.popover.toggle(false)
|
159
|
+
}
|
135
160
|
}
|
136
|
-
}
|
137
161
|
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
162
|
+
renderOptions () {
|
163
|
+
const options = createElement("div", {
|
164
|
+
class: 'uniformSelect-options'
|
165
|
+
});
|
142
166
|
|
143
|
-
|
167
|
+
options.style.fontSize = css(this.el, 'font-size')
|
144
168
|
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
169
|
+
this.select.querySelectorAll('option').forEach(function(option, index){
|
170
|
+
var button = createElement("button", {
|
171
|
+
type: 'button',
|
172
|
+
class: 'uniformSelect-option'
|
173
|
+
});
|
174
|
+
button.option = option;
|
175
|
+
option.button = button;
|
176
|
+
button.textContent = option.textContent;
|
177
|
+
button.value = option.value;
|
178
|
+
if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
|
179
|
+
button.classList.toggle('active', option.selected);
|
156
180
|
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
}, this);
|
181
|
+
if (this.options.limit && (index + 1) > this.options.limit) {
|
182
|
+
button.classList.add('hide')
|
183
|
+
}
|
184
|
+
options.append(button);
|
185
|
+
}, this);
|
163
186
|
|
164
|
-
|
187
|
+
this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
|
165
188
|
|
166
189
|
|
167
|
-
|
168
|
-
|
169
|
-
|
190
|
+
const actions = createElement('div', {
|
191
|
+
class: 'uniformSelect-actions'
|
192
|
+
});
|
170
193
|
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
194
|
+
if (this.options.limit && this.htmlOptions.length > this.options.limit) {
|
195
|
+
const button = createElement('button', {
|
196
|
+
type: 'button',
|
197
|
+
class: 'uniformSelect-show-all',
|
198
|
+
children: 'Show All'
|
199
|
+
});
|
200
|
+
this.listenTo(button, 'click', this.showAllOptions.bind(this))
|
201
|
+
actions.append(button);
|
202
|
+
}
|
203
|
+
if (this.options.multiple) {
|
204
|
+
const button = createElement('button', {
|
205
|
+
type: 'button',
|
206
|
+
class: 'uniformSelect-done',
|
207
|
+
children: ['Done']
|
208
|
+
});
|
209
|
+
this.listenTo(button, 'click', this.removeOptions.bind(this));
|
210
|
+
actions.append(button);
|
211
|
+
}
|
212
|
+
if (!isEmpty(actions)) {
|
213
|
+
options.append(actions);
|
214
|
+
}
|
192
215
|
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
216
|
+
this.popover = new Popover({
|
217
|
+
offset: {top: 1},
|
218
|
+
align: '0px bottom',
|
219
|
+
anchor: this.el,
|
220
|
+
content: options,
|
221
|
+
container: this.options.container,
|
222
|
+
transition: 'transition-fade-up'
|
223
|
+
}).render()
|
200
224
|
|
201
|
-
|
202
|
-
|
225
|
+
this.listenTo(this.popover, 'hidden', this.removeOptions);
|
226
|
+
}
|
203
227
|
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
228
|
+
removeOptions () {
|
229
|
+
this.el.classList.remove('active')
|
230
|
+
if (!this.popover) return;
|
231
|
+
this.popover.remove()
|
232
|
+
}
|
209
233
|
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
234
|
+
showAllOptions (e) {
|
235
|
+
e.preventDefault();
|
236
|
+
e.stopPropagation();
|
237
|
+
if(!this.popover) return;
|
238
|
+
this.popover.el.querySelectorAll('button.hide').forEach(el => el.classList.remove('hide'));
|
239
|
+
var button = this.popover.el.querySelector('.uniformSelect-show-all');
|
240
|
+
button.parentNode.removeChild(button);
|
241
|
+
}
|
218
242
|
}
|