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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform/checkbox.js +15 -15
  3. data/lib/assets/javascripts/uniform/component.js +23 -12
  4. data/lib/assets/javascripts/uniform/dropdown.js +54 -54
  5. data/lib/assets/javascripts/uniform/dropzone.js +107 -0
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +14 -12
  7. data/lib/assets/javascripts/uniform/modal.js +31 -33
  8. data/lib/assets/javascripts/uniform/popover.js +59 -40
  9. data/lib/assets/javascripts/uniform/resizer.js +21 -21
  10. data/lib/assets/javascripts/uniform/select.js +187 -163
  11. data/lib/assets/javascripts/uniform/sticker.js +26 -0
  12. data/lib/assets/javascripts/uniform/tooltip.js +29 -16
  13. data/lib/assets/javascripts/uniform.js +23 -8
  14. data/lib/assets/stylesheets/uniform/base.scss +24 -9
  15. data/lib/assets/stylesheets/uniform/components/buttons.scss +4 -5
  16. data/lib/assets/stylesheets/uniform/components/checkbox.scss +2 -0
  17. data/lib/assets/stylesheets/uniform/components/container.scss +8 -7
  18. data/lib/assets/stylesheets/uniform/components/dropzone.scss +40 -0
  19. data/lib/assets/stylesheets/uniform/components/input-group.scss +9 -0
  20. data/lib/assets/stylesheets/uniform/components/loaders.scss +0 -3
  21. data/lib/assets/stylesheets/uniform/components/modal.scss +21 -36
  22. data/lib/assets/stylesheets/uniform/components/pointer.scss +4 -4
  23. data/lib/assets/stylesheets/uniform/components/select.scss +7 -2
  24. data/lib/assets/stylesheets/uniform/components/thumb.scss +0 -1
  25. data/lib/assets/stylesheets/uniform/components/z-input.scss +6 -0
  26. data/lib/assets/stylesheets/uniform/config.scss +156 -0
  27. data/lib/assets/stylesheets/uniform/defaults.scss +2 -26
  28. data/lib/assets/stylesheets/uniform/functions/icons.scss +29 -0
  29. data/lib/assets/stylesheets/uniform/functions/map.scss +95 -0
  30. data/lib/assets/stylesheets/uniform/functions/string.scss +15 -0
  31. data/lib/assets/stylesheets/uniform/functions.scss +4 -79
  32. data/lib/assets/stylesheets/uniform/mixins.scss +34 -26
  33. data/lib/assets/stylesheets/uniform/utilities/borders.scss +12 -13
  34. data/lib/assets/stylesheets/uniform/utilities/effects.scss +31 -0
  35. data/lib/assets/stylesheets/uniform/utilities/layout.scss +22 -22
  36. data/lib/assets/stylesheets/uniform/utilities/position.scss +4 -0
  37. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +14 -8
  38. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +20 -14
  39. data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
  40. data/lib/assets/stylesheets/uniform/utilities/text.scss +1 -0
  41. data/lib/assets/stylesheets/uniform/utilities.scss +8 -0
  42. data/lib/uniform/version.rb +1 -1
  43. metadata +11 -4
  44. data/lib/assets/stylesheets/uniform/variables.scss +0 -134
@@ -1,5 +1,5 @@
1
1
  import Component from './component';
2
- import { closest, offset, outerWidth, outerHeight, removeClass, addClass } from 'dolla';
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
- this.resize.bind(this)()
39
+ this.resize.bind(this)()
38
40
  });
39
41
 
40
42
  if(typeof this.options.container == "string"){
41
- this.options.container = closest(this.options.anchor, this.options.container)
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.content instanceof Node)
53
- this.el.appendChild(this.options.content);
54
- else
55
- this.el.innerHTML = this.options.content;
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
- top: 0,
70
- bottom: window.innerHeight,
71
- left: 0,
72
- right: window.innerWidth
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
- var [leftAlign, topAlign] = this.options.align.split(" ");
78
- this.setPosition(`${leftAlign} top`);
79
- bounds = this.el.getBoundingClientRect()
80
- if(bounds.top < 0) {
81
- this.setPosition(`${leftAlign} bottom`);
82
- }
83
- bounds = this.el.getBoundingClientRect()
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
- if(this.el.style.bottom != null) this.el.style.bottom = parseInt(this.el.style.bottom) - difference + "px"
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
- if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
94
- bounds = this.el.getBoundingClientRect()
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
- if(this.el.style.right != null) this.el.style.right = parseInt(this.el.style.right) - difference + "px"
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 - outerWidth(this.el) / 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
- height = window.innerHeight;
143
+ height = window.innerHeight;
134
144
  } else if (container == document.body) {
135
- height = Math.max(height, document.body.clientHeight);
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
- removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
158
- addClass(this.el, 'popover-' + topAlign);
159
- addClass(this.el, 'popover-' + leftAlign);
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
- this.el.style.display = 'none';
198
+ if (!this.showing) return;
199
+
200
+ this.content.classList.add('-out')
190
201
  this.showing = false;
191
- if(options.silent !== true) {
192
- this.trigger('hidden');
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
- this.el.style.display = 'block';
213
+
214
+ this.el.style.zIndex = this.el.zIndexWas
215
+ this.content.classList.remove('-out');
199
216
  this.showing = true;
200
- this.trigger('shown');
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
- this.persisting = true;
228
+ this.persisting = true;
210
229
  }
211
230
 
212
231
  unpersist() {
213
- this.persisting = false;
232
+ this.persisting = false;
214
233
  }
215
234
  }
@@ -1,5 +1,5 @@
1
1
  import Component from './component';
2
- import { trigger, toggleClass } from 'dolla';
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
- const [key, value] = breakpoint.split("/")
11
- this.breakpoints[key.trim()] = value;
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
- 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
- }
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
- if(attribute == "min-width") {
31
- toggleClass(this.el, css_class, width > value)
32
- } else if (attribute == "max-width") {
33
- toggleClass(this.el, css_class, width < value)
34
- } else {
35
- throw "unsupported media feature"
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, toggleClass, removeClass, isEmpty, trigger, hasClass, closest } from 'dolla';
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
- initialize (options = {}) {
27
- this.htmlOptions = options.options.map(option => {
28
- if(typeof option == "string") {
29
- return {
30
- value: option,
31
- text: option
26
+ initialize (options = {}) {
27
+ this.options = {
28
+ multiple: false,
29
+ limit: 8,
30
+ container: false
32
31
  }
33
- } else if (Array.isArray(option)){
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
- this.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
53
- this.el = createElement('button', this.el_options);
54
- this.el.classList.add('uniformSelect');
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
- this.listenTo(this.el, 'click', this.toggleOptions);
57
- this.listenTo(this.el, 'click', '.uniformSelect-remove', this.removeSelection);
58
- this.listenTo(this.el, 'change', 'select', this.renderValue);
59
- this.listenTo(this.el, 'close', 'select', this.removeOptions);
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
- render () {
63
- this.valueEl = createElement('span');
64
- this.valueEl.classList.add('uniformSelect-value')
65
- this.el.append(this.valueEl);
81
+ render () {
82
+ this.valueEl = createElement('span');
83
+ this.valueEl.classList.add('uniformSelect-value')
84
+ this.el.append(this.valueEl);
66
85
 
67
- this.indicatorEl = createElement('span', {children: arrowIcon})
68
- this.indicatorEl.classList.add('uniformSelect-indicator')
69
- this.el.append(this.indicatorEl);
86
+ this.indicatorEl = createElement('span', {children: arrowIcon})
87
+ this.indicatorEl.classList.add('uniformSelect-indicator')
88
+ this.el.append(this.indicatorEl);
70
89
 
71
- this.select = createElement('select', this.el_options);
72
- this.htmlOptions.forEach(option => {
73
- this.select.append(createElement('option', Object.assign({}, {children: option.text}, option)))
74
- });
75
- this.el.append(this.select);
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
- // Append placeholder of longest option, to set width
79
- const longestText = this.htmlOptions.map(x => x.text).sort((a, b) => a.length < b.length)[0]
80
- const placeholder = createElement('span', {class: 'uniformSelect-placeholder', children: longestText})
81
- this.el.append(placeholder);
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
- this.renderValue();
84
- return this;
85
- }
107
+ this.renderValue();
108
+ return this;
109
+ }
86
110
 
87
- renderValue () {
88
- const selectedOptions = filter(this.select.querySelectorAll("option"), el => el.selected);
89
- const html = selectedOptions.map(el => this.options.multiple ? `
90
- <span class="uniformSelect-selection">
91
- <span>${el.textContent}</span><span class="uniformSelect-remove">${xIcon}</span>
92
- </span>
93
- ` : el.textContent).join(" ");
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
- this.valueEl.innerHTML = html;
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
- toggleClass(e.target, 'active', makeActive);
104
- e.target.option.selected = makeActive;
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
- if (!this.options.multiple) {
107
- this.removeOptions();
108
- }
130
+ if (!this.options.multiple) {
131
+ this.removeOptions();
132
+ }
109
133
 
110
- trigger(this.select, 'change');
111
- }
134
+ trigger(this.select, 'change');
135
+ }
112
136
 
113
- removeSelection (e) {
114
- e.preventDefault();
115
- e.stopPropagation();
116
- var option = filter(this.select.querySelectorAll("option"), function(el){
117
- return el.innerText.trim() == closest(e.target, '.uniformSelect-selection').innerText.trim();
118
- })[0];
119
- if(!option) return;
120
- option.selected = false;
121
- option.button.classList.remove('active');
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
- trigger(this.select, 'change');
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
- toggleClass(this.el, 'active')
131
- if(hasClass(this.el, 'active')){
132
- this.renderOptions()
133
- } else {
134
- this.removeOptions()
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
- renderOptions () {
139
- const options = createElement("div", {
140
- class: 'uniformSelect-options'
141
- });
162
+ renderOptions () {
163
+ const options = createElement("div", {
164
+ class: 'uniformSelect-options'
165
+ });
142
166
 
143
- options.style.fontSize = css(this.el, 'font-size')
167
+ options.style.fontSize = css(this.el, 'font-size')
144
168
 
145
- this.select.querySelectorAll('option').forEach(function(option, index){
146
- var button = createElement("button", {
147
- type: 'button',
148
- class: 'uniformSelect-option'
149
- });
150
- button.option = option;
151
- option.button = button;
152
- button.textContent = option.textContent;
153
- button.value = option.value;
154
- if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
155
- toggleClass(button, 'active', option.selected);
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
- console.log(this.options.limit, index);
158
- if (this.options.limit && (index + 1) > this.options.limit) {
159
- button.classList.add('hide')
160
- }
161
- options.append(button);
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
- this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
187
+ this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
165
188
 
166
189
 
167
- const actions = createElement('div', {
168
- class: 'uniformSelect-actions'
169
- });
190
+ const actions = createElement('div', {
191
+ class: 'uniformSelect-actions'
192
+ });
170
193
 
171
- if (this.options.limit && this.htmlOptions.length > this.options.limit) {
172
- const button = createElement('button', {
173
- type: 'button',
174
- class: 'uniformSelect-show-all',
175
- children: 'Show All'
176
- });
177
- this.listenTo(button, 'click', this.showAllOptions.bind(this))
178
- actions.append(button);
179
- }
180
- if (this.options.multiple) {
181
- const button = createElement('button', {
182
- type: 'button',
183
- class: 'uniformSelect-done',
184
- children: ['Done']
185
- });
186
- this.listenTo(button, 'click', this.removeOptions.bind(this));
187
- actions.append(button);
188
- }
189
- if (!isEmpty(actions)) {
190
- options.append(actions);
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
- this.popover = new Popover({
194
- offset: {top: 1},
195
- align: '0px bottom',
196
- anchor: this.el,
197
- content: options,
198
- container: this.options.container
199
- }).render()
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
- this.listenTo(this.popover, 'hidden', this.removeOptions);
202
- }
225
+ this.listenTo(this.popover, 'hidden', this.removeOptions);
226
+ }
203
227
 
204
- removeOptions () {
205
- this.el.classList.remove('active')
206
- if(!this.popover) return;
207
- this.popover.remove()
208
- }
228
+ removeOptions () {
229
+ this.el.classList.remove('active')
230
+ if (!this.popover) return;
231
+ this.popover.remove()
232
+ }
209
233
 
210
- showAllOptions (e) {
211
- e.preventDefault();
212
- e.stopPropagation();
213
- if(!this.popover) return;
214
- removeClass(this.popover.el.querySelectorAll('button.hide'), 'hide');
215
- var button = this.popover.el.querySelector('.uniformSelect-show-all');
216
- button.parentNode.removeChild(button);
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
  }