uniform-ui 2.3.4 → 2.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/assets/javascripts/uniform.es5.js +1 -1
- data/lib/assets/javascripts/uniform.js +8 -8
- data/lib/assets/javascripts/uniform/floating-label.js +2 -2
- data/lib/assets/javascripts/uniform/modal.js +2 -1
- data/lib/assets/javascripts/uniform/popover.js +22 -8
- data/lib/assets/javascripts/uniform/select.js +147 -157
- data/lib/assets/stylesheets/uniform/components/modal.scss +11 -2
- data/lib/assets/stylesheets/uniform/components/select.scss +13 -25
- data/lib/uniform/version.rb +1 -1
- metadata +5 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9566ad08a43ed0204e254e42b65c8a76a4dd1058236afce3a93b1f884eacde6a
|
4
|
+
data.tar.gz: 0257d025d1e28a83a3bacbabde35026f1157673b0dc68d4c9da4cbfba81a6791
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 361a95d852b66e3cf378b5273f9a077a3277de187027b9d36f11148f0b3d1e58b45e5058054819c4d036385352ba73b7165768a0a6cfb26ba3cf320da7d74523
|
7
|
+
data.tar.gz: 073ffe49aa8b44bb2fa6eba2605b7bc0ba2673239098cab22db37e1d9827a72003170577a344a0f3ba03863c2fee74274bb87b6ad5549b7838221107402fef21
|
@@ -1 +1 @@
|
|
1
|
-
!function(){"use strict";function t(t,e){return t(e={exports:{}},e.exports),e.exports}var y=t(function(t){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)}),v=t(function(t){var e=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=e)}),m=(v.version,function(i,o,t){if(function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!")}(i),void 0===o)return i;switch(t){case 1:return function(t){return i.call(o,t)};case 2:return function(t,e){return i.call(o,t,e)};case 3:return function(t,e,n){return i.call(o,t,e,n)}}return function(){return i.apply(o,arguments)}}),c=function(t){return"object"==typeof t?null!==t:"function"==typeof t},r=function(t){if(!c(t))throw TypeError(t+" is not an object!");return t},a=function(t){try{return!!t()}catch(t){return!0}},i=!a(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}),e=y.document,n=c(e)&&c(e.createElement),o=function(t){return n?e.createElement(t):{}},s=!i&&!a(function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}),l=function(t,e){if(!c(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!c(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!c(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!c(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")},u=Object.defineProperty,h={f:i?Object.defineProperty:function(t,e,n){if(r(t),e=l(e,!0),r(n),s)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},x=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},S=i?function(t,e,n){return h.f(t,e,x(1,n))}:function(t,e,n){return t[e]=n,t},f={}.hasOwnProperty,g=function(t,e){return f.call(t,e)},b="prototype",w=function(t,e,n){var i,o,s,r=t&w.F,l=t&w.G,c=t&w.S,a=t&w.P,u=t&w.B,h=t&w.W,f=l?v:v[e]||(v[e]={}),p=f[b],d=l?y:c?y[e]:(y[e]||{})[b];for(i in l&&(n=e),n)(o=!r&&d&&void 0!==d[i])&&g(f,i)||(s=o?d[i]:n[i],f[i]=l&&"function"!=typeof d[i]?n[i]:u&&o?m(s,y):h&&d[i]==s?function(i){var t=function(t,e,n){if(this instanceof i){switch(arguments.length){case 0:return new i;case 1:return new i(t);case 2:return new i(t,e)}return new i(t,e,n)}return i.apply(this,arguments)};return t[b]=i[b],t}(s):a&&"function"==typeof s?m(Function.call,s):s,a&&((f.virtual||(f.virtual={}))[i]=s,t&w.R&&p&&!p[i]&&S(p,i,s)))};w.F=1,w.G=2,w.S=4,w.P=8,w.B=16,w.W=32,w.U=64,w.R=128;var p,_=w,d={}.toString,k=function(t){return d.call(t).slice(8,-1)},O=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==k(t)?t.split(""):Object(t)},T=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t},E=function(t){return O(T(t))},P=Math.ceil,j=Math.floor,C=function(t){return isNaN(t=+t)?0:(0
\n \n ".concat(this.message,"\n "),anchor:this.el,align:"top"==this.options.align?"center top":"center 100%",offset:{top:-7},container:this.options.container||document.body}).render())}},{key:"hide",value:function(){var t=this;this.hide_timeout=setTimeout(function(){t.popup.remove(),delete t.popup},300)}},{key:"disable",value:function(){this.enabled=!1}},{key:"enabled",value:function(){this.enabled=!0}}]),e}(),Sn,"Tooltip"),An=Object.freeze({Dropdown:_n,Checkbox:On,Modal:Tn,Select:jn,FloatingLabel:Cn,Resizer:Ln,Tooltip:Mn,Popover:zn});window.Uniform=An,$&&($.fn.uniformDropdown=function(){return this.each(function(){var n=$(this),t={el:this};void 0!==n.data("dropdown-align")&&(t.align=n.data("dropdown-align")),void 0!==n.data("dropdown-trigger")&&(t.trigger=n.data("dropdown-trigger")),void 0!==n.data("dropdown-show_arrow")&&(t.show_arrow=n.data("dropdown-show_arrow")),void 0!==n.data("dropdown-square")&&(t.square=n.data("dropdown-square")),void 0!==n.data("dropdown-hide_sm")&&(t.hide_sm=n.data("dropdown-hide_sm")),void 0!==n.data("dropdown-content")&&(t.content="".concat(n.data("dropdown-content")," ")),void 0!==n.data("dropdown-target")&&(t.content=$(n.data("dropdown-target"))[0]);var e=new _n(t);e.on("*",function(t,e){n.trigger("dropdown-"+t,e)}),e.render()})},$.fn.uniformCheckbox=function(){return this.each(function(){$(this);new On({el:this}).render()})},$.fn.uniformRadio=$.fn.uniformCheckbox,$.fn.uniformFloatingLabel=function(){return this.each(function(){new Cn({el:this}).render()})},$.fn.uniformModal=function(){return this.click(function(){var n=$(this),t={klass:n.data("modal-klass"),content:n.data("modal-content")};if(n.data("modal-target")){var e=$(n.data("modal-target")).clone();e.removeClass("hidden"),t.content=e[0]}new Tn(t).render().on("*",function(t,e){n.trigger("modal-"+t,e)})})},$.fn.uniformResizer=function(){return this.each(function(){new Ln({el:this})})},$.fn.uniformSelect=function(){return this.each(function(){var t={el:this};X(t,$(this).data()),new jn(t).render()})},$.fn.uniformTooltip=function(){return this.each(function(){var n=$(this),t=new Mn({message:n.data("tooltip-message"),container:n.data("tooltip-container"),el:this});t.on("*",function(t,e){n.trigger("tooltip-"+t,e)}),t.render()})},$.fn.uniformTristate=function(){return this.each(function(){var i=$(this);function e(t){if(0==t.length)i.addClass("-null"),$(i.find("input")[1]).prop("checked",!0);else{var e=t.index(),n=0==e?"-true":1==e?"-null":"-false";i.removeClass("-true -null -false"),i.addClass(n)}}i.on("change","input",function(t){e($(t.currentTarget))}),e(i.find("input:checked")),i.on("blur","input",function(t){i.removeClass("-focus")}),i.on("focus","input",function(t){i.addClass("-focus")})})})}();
|
1
|
+
!function(){"use strict";function t(t,e){return t(e={exports:{}},e.exports),e.exports}var v=t(function(t){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)}),y=t(function(t){var e=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=e)}),m=(y.version,function(i,o,t){if(function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!")}(i),void 0===o)return i;switch(t){case 1:return function(t){return i.call(o,t)};case 2:return function(t,e){return i.call(o,t,e)};case 3:return function(t,e,n){return i.call(o,t,e,n)}}return function(){return i.apply(o,arguments)}}),u=function(t){return"object"==typeof t?null!==t:"function"==typeof t},s=function(t){if(!u(t))throw TypeError(t+" is not an object!");return t},c=function(t){try{return!!t()}catch(t){return!0}},i=!c(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}),e=v.document,n=u(e)&&u(e.createElement),o=function(t){return n?e.createElement(t):{}},r=!i&&!c(function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}),l=function(t,e){if(!u(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!u(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!u(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!u(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")},a=Object.defineProperty,h={f:i?Object.defineProperty:function(t,e,n){if(s(t),e=l(e,!0),s(n),r)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},_=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},x=i?function(t,e,n){return h.f(t,e,_(1,n))}:function(t,e,n){return t[e]=n,t},f={}.hasOwnProperty,b=function(t,e){return f.call(t,e)},g="prototype",w=function(t,e,n){var i,o,r,s=t&w.F,l=t&w.G,u=t&w.S,c=t&w.P,a=t&w.B,h=t&w.W,f=l?y:y[e]||(y[e]={}),p=f[g],d=l?v:u?v[e]:(v[e]||{})[g];for(i in l&&(n=e),n)(o=!s&&d&&void 0!==d[i])&&b(f,i)||(r=o?d[i]:n[i],f[i]=l&&"function"!=typeof d[i]?n[i]:a&&o?m(r,v):h&&d[i]==r?function(i){var t=function(t,e,n){if(this instanceof i){switch(arguments.length){case 0:return new i;case 1:return new i(t);case 2:return new i(t,e)}return new i(t,e,n)}return i.apply(this,arguments)};return t[g]=i[g],t}(r):c&&"function"==typeof r?m(Function.call,r):r,c&&((f.virtual||(f.virtual={}))[i]=r,t&w.R&&p&&!p[i]&&x(p,i,r)))};w.F=1,w.G=2,w.S=4,w.P=8,w.B=16,w.W=32,w.U=64,w.R=128;var p,S=w,d={}.toString,k=function(t){return d.call(t).slice(8,-1)},O=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==k(t)?t.split(""):Object(t)},T=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t},j=function(t){return O(T(t))},E=Math.ceil,C=Math.floor,L=function(t){return isNaN(t=+t)?0:(0 |
@@ -1,11 +1,11 @@
|
|
1
|
-
import Dropdown from 'uniform/dropdown';
|
2
|
-
import Checkbox from 'uniform/checkbox';
|
3
|
-
import Modal from 'uniform/modal';
|
4
|
-
import Select from 'uniform/select';
|
5
|
-
import FloatingLabel from 'uniform/floating-label';
|
6
|
-
import Resizer from 'uniform/resizer';
|
7
|
-
import Tooltip from 'uniform/tooltip';
|
8
|
-
import Popover from 'uniform/popover';
|
1
|
+
import Dropdown from './uniform/dropdown';
|
2
|
+
import Checkbox from './uniform/checkbox';
|
3
|
+
import Modal from './uniform/modal';
|
4
|
+
import Select from './uniform/select';
|
5
|
+
import FloatingLabel from './uniform/floating-label';
|
6
|
+
import Resizer from './uniform/resizer';
|
7
|
+
import Tooltip from './uniform/tooltip';
|
8
|
+
import Popover from './uniform/popover';
|
9
9
|
|
10
10
|
export {
|
11
11
|
Dropdown,
|
@@ -14,7 +14,7 @@ export default class FloatingLabel extends Component {
|
|
14
14
|
}
|
15
15
|
|
16
16
|
render () {
|
17
|
-
if(!Helpers.is_visible(this.input)) return;
|
17
|
+
// if(!Helpers.is_visible(this.input)) return;
|
18
18
|
if(Helpers.hasClass(this.el, 'enabled')) return;
|
19
19
|
|
20
20
|
var padding = parseInt(Helpers.css(this.input, 'paddingBottom'));
|
@@ -31,7 +31,7 @@ export default class FloatingLabel extends Component {
|
|
31
31
|
this.label.style.paddingLeft = Helpers.css(this.input, 'paddingLeft');
|
32
32
|
this.label.style.height = this.startingHeight;
|
33
33
|
this.label.style.lineHeight = this.startingHeight + "px";
|
34
|
-
|
34
|
+
|
35
35
|
if (Helpers.is_focus(this.input)) this.activate();
|
36
36
|
if (typeof this.input.value !== "undefined" && this.input.value != "") this.activate();
|
37
37
|
}
|
@@ -71,7 +71,7 @@ export default class Modal extends Component {
|
|
71
71
|
|
72
72
|
var closeButton = document.createElement('div');
|
73
73
|
Helpers.addClass(closeButton, 'uniformModal-close');
|
74
|
-
|
74
|
+
this.el.appendChild(closeButton);
|
75
75
|
|
76
76
|
this.el.style.top = window.scrollY;
|
77
77
|
this.listenTo(this.overlay, 'click', this.close);
|
@@ -90,6 +90,7 @@ export default class Modal extends Component {
|
|
90
90
|
}
|
91
91
|
|
92
92
|
close () {
|
93
|
+
console.log('close');
|
93
94
|
Helpers.removeClass(document.querySelectorAll('uniformModal-active'), 'uniformModal-active');
|
94
95
|
var elements = this.blur.children;
|
95
96
|
var elementCount = elements.length
|
@@ -18,7 +18,7 @@ export default class Popover extends Component {
|
|
18
18
|
this.showing = false;
|
19
19
|
options = options || {};
|
20
20
|
this.options = {
|
21
|
-
zIndex:
|
21
|
+
zIndex: 3,
|
22
22
|
container: document.body,
|
23
23
|
align: 'center bottom',
|
24
24
|
anchor: document.body,
|
@@ -61,13 +61,17 @@ export default class Popover extends Component {
|
|
61
61
|
this.setPosition();
|
62
62
|
const bounds = this.el.getBoundingClientRect();
|
63
63
|
const body_bounds = document.body.getBoundingClientRect();
|
64
|
+
const window_bounds = {
|
65
|
+
top: 0,
|
66
|
+
bottom: window.innerHeight,
|
67
|
+
left: 0,
|
68
|
+
right: window.innerWidth
|
69
|
+
};
|
64
70
|
|
65
|
-
var align = this.options.align.split(" ");
|
66
71
|
var reposition = false;
|
67
|
-
if (bounds.bottom > body_bounds.bottom) {
|
68
|
-
|
69
|
-
|
70
|
-
if(this.el.style.bottom != null) this.el.style.bottom = parseInt(this.el.style.bottom) + difference + "px"
|
72
|
+
if (bounds.bottom > Math.max(body_bounds.bottom, window_bounds.bottom)) {
|
73
|
+
var [leftAlign, topAlign] = this.options.align.split(" ");
|
74
|
+
this.setPosition(`${leftAlign} top`);
|
71
75
|
}
|
72
76
|
if (bounds.top < body_bounds.top) {
|
73
77
|
const difference = body_bounds.top - bounds.top
|
@@ -110,7 +114,7 @@ export default class Popover extends Component {
|
|
110
114
|
} else if (leftAlign == 'right'){
|
111
115
|
position.left = offset.left + Helpers.outerWidth(this.options.anchor);
|
112
116
|
} else if (leftAlign.includes("px")){
|
113
|
-
position.left = offset.left +
|
117
|
+
position.left = offset.left + parseInt(leftAlign);
|
114
118
|
}
|
115
119
|
|
116
120
|
if(topAlign == 'top'){
|
@@ -127,7 +131,7 @@ export default class Popover extends Component {
|
|
127
131
|
} else if (topAlign == 'bottom'){
|
128
132
|
position.top = offset.top + Helpers.outerHeight(this.options.anchor);
|
129
133
|
} else if (topAlign.includes("px")){
|
130
|
-
position.top = offset.top +
|
134
|
+
position.top = offset.top + parseInt(topAlign);
|
131
135
|
}
|
132
136
|
|
133
137
|
if(this.options.offset.left) position.left += parseInt(this.options.offset.left);
|
@@ -155,11 +159,13 @@ export default class Popover extends Component {
|
|
155
159
|
if (e.target == this.options.anchor) return;
|
156
160
|
if (this.el.contains(e.target)) return;
|
157
161
|
if (this.options.anchor.contains(e.target)) return;
|
162
|
+
if (this.persisting) return;
|
158
163
|
this.hide();
|
159
164
|
}
|
160
165
|
|
161
166
|
checkEscape (e) {
|
162
167
|
if(e.which != 27) return;
|
168
|
+
if (this.persisting) return;
|
163
169
|
this.hide();
|
164
170
|
}
|
165
171
|
|
@@ -188,4 +194,12 @@ export default class Popover extends Component {
|
|
188
194
|
flag = flag || this.showing;
|
189
195
|
if(flag) this.hide(); else this.show();
|
190
196
|
}
|
197
|
+
|
198
|
+
persist() {
|
199
|
+
this.persisting = true;
|
200
|
+
}
|
201
|
+
|
202
|
+
unpersist() {
|
203
|
+
this.persisting = false;
|
204
|
+
}
|
191
205
|
}
|
@@ -1,4 +1,6 @@
|
|
1
1
|
import Component from './component';
|
2
|
+
import Popover from './popover';
|
3
|
+
import Modal from './modal';
|
2
4
|
import { check as checkIcon, arrow_down as arrowIcon } from './icons';
|
3
5
|
import * as Helpers from './dom-helpers';
|
4
6
|
|
@@ -6,7 +8,7 @@ import * as Helpers from './dom-helpers';
|
|
6
8
|
options
|
7
9
|
class: String, appended to uniformSelect-edit button as class
|
8
10
|
limit: int | false - number of options to limit to, or false to not limit
|
9
|
-
showAll: function(
|
11
|
+
showAll: function(button_options) to run if/when "Show All" is clicked
|
10
12
|
label: string, used for mobile menu
|
11
13
|
container: selector for where to render dropdown
|
12
14
|
*/
|
@@ -16,105 +18,89 @@ export default class Select extends Component {
|
|
16
18
|
this.options = {
|
17
19
|
label: false,
|
18
20
|
class: "",
|
19
|
-
showAll: function (
|
20
|
-
Helpers.removeClass(
|
21
|
-
var button =
|
21
|
+
showAll: function (button_options){
|
22
|
+
Helpers.removeClass(button_options.querySelectorAll('button.hide'), 'hide');
|
23
|
+
var button = button_options.querySelector('.uniformSelect-show-all');
|
22
24
|
button.parentNode.removeChild(button);
|
23
25
|
|
24
26
|
return false;
|
25
27
|
},
|
26
28
|
limit: 8,
|
27
|
-
container:
|
29
|
+
container: false
|
28
30
|
}
|
29
31
|
|
30
32
|
Object.assign(this.options, this.pick(options, Object.keys(this.options)));
|
31
33
|
|
32
|
-
|
33
|
-
|
34
|
-
this.listenTo(this.el, 'change', this.updateSelect);
|
34
|
+
this.listenTo(this.el, 'change', this.renderSelected);
|
35
35
|
this.listenTo(this.el, 'close', this.hideOptions);
|
36
|
-
this.listenTo(this.el, 'revealed', this.resize);
|
37
36
|
this.el.uniformSelect = this;
|
38
37
|
|
39
|
-
this.listenTo(window, 'resize', this.resize);
|
40
|
-
this.listenTo(window, 'scroll', this.updatePosition);
|
41
|
-
this.listenTo(document, 'click', this.outsideClick);
|
42
|
-
this.listenTo(document, 'keyup', this.keyup);
|
43
|
-
|
44
38
|
this.activeIcon = document.createElement('span');
|
45
|
-
Helpers.addClass(this.activeIcon, 'uniformSelect-option-icon');
|
46
39
|
this.activeIcon.innerHTML = checkIcon;
|
40
|
+
Helpers.addClass(this.activeIcon, 'uniformSelect-option-icon');
|
47
41
|
}
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
this.
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
if(
|
42
|
+
|
43
|
+
remove () {
|
44
|
+
Component.prototype.remove.apply(this, arguments);
|
45
|
+
this.edit_button.parentNode.removeChild(this.edit_button);
|
46
|
+
delete this.this.edit_button;
|
47
|
+
|
48
|
+
this.activeIcon.parentNode.removeChild(this.activeIcon);
|
49
|
+
delete this.activeIcon;
|
50
|
+
|
51
|
+
if(this.button_options_popover) this.button_options_popover.remove();
|
52
|
+
if(this.button_options_modal) this.button_options_modal.remove();
|
53
|
+
|
54
|
+
if(this.button_options) {
|
55
|
+
this.button_options.parentNode.removeChild(this.button_options);
|
56
|
+
delete this.button_options;
|
57
|
+
}
|
59
58
|
}
|
60
59
|
|
61
60
|
render () {
|
62
|
-
this.
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
61
|
+
this.edit_button = Helpers.createElement(`
|
62
|
+
<button type='button' class='uniformSelect-edit uniformInput outline block ${this.options.class}'>
|
63
|
+
<span class="text-js"></span>
|
64
|
+
<span class="uniformSelect-edit-icon">${arrowIcon}</span>
|
65
|
+
</button>
|
66
|
+
`);
|
67
67
|
|
68
68
|
if (this.el.name) {
|
69
|
-
Helpers.addClass(this.
|
69
|
+
Helpers.addClass(this.edit_button, this.el.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
|
70
70
|
}
|
71
71
|
this.el.style.display = "none";
|
72
|
-
this.el.insertAdjacentElement('beforebegin', this.
|
73
|
-
this.updateSelect();
|
74
|
-
this.resize();
|
72
|
+
this.el.insertAdjacentElement('beforebegin', this.edit_button);
|
75
73
|
|
76
|
-
|
77
|
-
|
78
|
-
}
|
79
|
-
|
80
|
-
resize () {
|
81
|
-
// to keep button from extending beyond available width
|
82
|
-
var children = [];
|
83
|
-
var childrenCount = this.edit_button.children.length;
|
84
|
-
for(var i = 0; i < childrenCount; i++){
|
85
|
-
children.push(this.edit_button.children[0]);
|
86
|
-
this.edit_button.children[0].parentNode.removeChild(this.edit_button.children[0]);
|
74
|
+
if(!this.options.container) {
|
75
|
+
this.options.container = this.edit_button.parentElement
|
87
76
|
}
|
88
77
|
|
89
|
-
|
90
|
-
this.edit_button.style.width = "auto";
|
91
|
-
this.edit_button.style.maxWidth = "100%";
|
92
|
-
this.edit_button.style.minWidth = this.container.offsetWidth + "px";
|
78
|
+
// Set Min-Width for when empty
|
93
79
|
|
94
|
-
|
95
|
-
|
96
|
-
}.
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
this.
|
102
|
-
this.
|
103
|
-
|
104
|
-
this.
|
80
|
+
const option = [...this.el.querySelectorAll("option")].sort((a, b) => {
|
81
|
+
return a.textContent.length > b.textContent.length
|
82
|
+
}).reverse()[0];
|
83
|
+
this.edit_button.querySelector('.text-js').style.opacity = 0;
|
84
|
+
this.edit_button.querySelector('.text-js').innerHTML = option.textContent;
|
85
|
+
const min_width = this.edit_button.querySelector('.text-js').offsetWidth;
|
86
|
+
this.edit_button.style.minWidth = min_width + "px";
|
87
|
+
this.edit_button.querySelector('.text-js').innerHTML = "";
|
88
|
+
this.edit_button.querySelector('.text-js').style.opacity = null;
|
89
|
+
|
90
|
+
this.renderSelected();
|
91
|
+
|
92
|
+
this.listenTo(this.edit_button, 'click', this.showOptions);
|
93
|
+
this.listenTo(this.edit_button, 'click', '.uniformSelect-remove', this.removeSelection);
|
94
|
+
|
95
|
+
return this;
|
105
96
|
}
|
106
97
|
|
107
98
|
renderOptions () {
|
108
|
-
this.
|
109
|
-
if (this.options.label) {
|
110
|
-
this.select_options.append(`<div class="uniformSelect-label hide show-sm margin-bottom text-bold">${this.options.label}</div>`)
|
111
|
-
}
|
99
|
+
this.button_options = Helpers.createElement("<div class='uniformSelect-options'>");
|
112
100
|
if (this.el.name) {
|
113
|
-
Helpers.addClass(this.
|
101
|
+
Helpers.addClass(this.button_options, this.el.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
|
114
102
|
}
|
115
|
-
this.
|
116
|
-
this.select_options.style.display = 'none';
|
117
|
-
this.options.container.appendChild(this.select_options);
|
103
|
+
this.button_options.style.fontSize = Helpers.css(this.el, 'font-size');
|
118
104
|
|
119
105
|
Helpers.each(this.el.querySelectorAll('option'), function(el, index){
|
120
106
|
var button = Helpers.createElement("<button type='button' class='uniformSelect-option block outline text-left'>");
|
@@ -128,16 +114,17 @@ export default class Select extends Component {
|
|
128
114
|
} else if (this.options.limit && index > this.options.limit) {
|
129
115
|
Helpers.addClass(button, 'hide');
|
130
116
|
}
|
131
|
-
this.
|
132
|
-
this.listenTo(button, 'click', this.selectOption);
|
117
|
+
this.button_options.append(button);
|
133
118
|
}.bind(this));
|
134
119
|
|
135
|
-
|
120
|
+
this.listenTo(this.button_options, 'click', '.uniformSelect-option', this.selectOption);
|
121
|
+
|
122
|
+
const actions_el = Helpers.createElement('<div class="uniformSelect-options-actions"></div>');
|
136
123
|
if (this.options.limit && this.el.querySelectorAll('option').length > this.options.limit) {
|
137
|
-
|
124
|
+
const show_all_button = Helpers.createElement("<button type='button' class='uniformSelect-show-all outline blue' style='display: block; border: none'>Show All</button>");
|
138
125
|
this.listenTo(show_all_button, 'click', function(e){
|
139
126
|
Helpers.trigger(this.el, 'show_all');
|
140
|
-
if (this.options.showAll) this.options.showAll(this.
|
127
|
+
if (this.options.showAll) this.options.showAll(this.button_options);
|
141
128
|
e.preventDefault();
|
142
129
|
e.stopPropagation();
|
143
130
|
})
|
@@ -149,104 +136,108 @@ export default class Select extends Component {
|
|
149
136
|
actions_el.appendChild(done_button);
|
150
137
|
}
|
151
138
|
if (!Helpers.is_empty(actions_el)) {
|
152
|
-
this.
|
139
|
+
this.button_options.appendChild(actions_el);
|
153
140
|
}
|
141
|
+
}
|
154
142
|
|
155
|
-
|
143
|
+
renderSelected () {
|
144
|
+
const selected_options = Helpers.filter(this.el.querySelectorAll("option"), function(el){
|
145
|
+
return el.selected;
|
146
|
+
});
|
147
|
+
const html = Helpers.map(selected_options, function(el){
|
148
|
+
return this.el.multiple ? `<span class="uniformSelect-selection">${el.textContent}<span class="uniformSelect-remove"></span></span>` : el.textContent;
|
149
|
+
}.bind(this)).join(" ");
|
150
|
+
|
151
|
+
if (html == "") {
|
152
|
+
this.edit_button.querySelector('.text-js').innerHTML = " "
|
153
|
+
} else {
|
154
|
+
this.edit_button.querySelector('.text-js').innerHTML = html;
|
155
|
+
}
|
156
|
+
|
157
|
+
if(this.button_options) {
|
158
|
+
Helpers.each(this.button_options.querySelectorAll('.uniformSelect-option'), function(el) {
|
159
|
+
if(el.option.selected){
|
160
|
+
Helpers.addClass(el, 'active');
|
161
|
+
el.append(this.activeIcon.cloneNode(true));
|
162
|
+
} else {
|
163
|
+
Helpers.removeClass(el, 'active');
|
164
|
+
Helpers.each(el.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
|
165
|
+
}
|
166
|
+
}.bind(this))
|
167
|
+
}
|
156
168
|
}
|
157
169
|
|
158
170
|
hideOptions () {
|
159
|
-
if(
|
160
|
-
this.
|
161
|
-
this.
|
162
|
-
|
171
|
+
if(!this.button_options) return;
|
172
|
+
if(this.button_options_modal) this.button_options_modal.close();
|
173
|
+
if(this.button_options_popover) {
|
174
|
+
this.button_options_popover.remove();
|
175
|
+
delete this.button_options_popover;
|
176
|
+
}
|
163
177
|
Helpers.removeClass(this.edit_button, 'active');
|
164
|
-
Helpers.removeClass(document.body, 'uniformModal-hideBody');
|
165
|
-
|
166
|
-
if(this.lastScrollPosition && window.innerWidth < 720) window.scrollTo(0, this.lastScrollPosition);
|
167
|
-
Helpers.trigger(this.el, 'hidden:options');
|
168
178
|
}
|
169
179
|
|
170
|
-
showOptions() {
|
171
|
-
if
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
this.showing = true;
|
176
|
-
if(!this.select_options) this.renderOptions();
|
177
|
-
this.resize();
|
178
|
-
this.select_options.style.display = "block";
|
180
|
+
showOptions(e) {
|
181
|
+
if(Helpers.hasClass(e.target, 'uniformSelect-remove')) return;
|
182
|
+
if(this.button_options_modal) return this.hideOptions();
|
183
|
+
if(this.button_options_popover) return this.hideOptions();
|
184
|
+
if(!this.button_options) this.renderOptions();
|
179
185
|
Helpers.addClass(this.edit_button, 'active');
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
186
|
+
// For Mobile: Render Full Screen
|
187
|
+
if(window.innerWidth < 720) {
|
188
|
+
const content = Helpers.createElement('<div class="uniformSelect-modal">');
|
189
|
+
content.append(this.button_options);
|
190
|
+
if (this.options.label) {
|
191
|
+
content.append(`<div class="uniformSelect-label margin-bottom text-bold">${this.options.label}</div>`);
|
192
|
+
}
|
193
|
+
this.button_options_modal = new Modal({
|
194
|
+
content: content,
|
195
|
+
klass: '-reset'
|
196
|
+
}).render();
|
197
|
+
this.button_options_modal.on('closed', () => {
|
198
|
+
Helpers.removeClass(this.edit_button, 'active');
|
199
|
+
delete this.button_options_modal;
|
200
|
+
});
|
201
|
+
this.listenTo(content, 'click', function(e){
|
202
|
+
if(e.target == content) {
|
203
|
+
this.button_options_modal.close()
|
204
|
+
}
|
205
|
+
});
|
206
|
+
// For Larger: Render Popover
|
207
|
+
} else {
|
208
|
+
this.button_options.style.minWidth = this.edit_button.offsetWidth + "px";
|
209
|
+
this.button_options_popover = new Popover({
|
210
|
+
offset: {top: 1},
|
211
|
+
anchor: this.edit_button,
|
212
|
+
align: '0px bottom',
|
213
|
+
content: this.button_options,
|
214
|
+
container: this.options.container
|
215
|
+
}).render()
|
216
|
+
this.button_options_popover.on('hidden', () => {
|
217
|
+
Helpers.removeClass(this.edit_button, 'active');
|
218
|
+
this.button_options_popover.remove();
|
219
|
+
delete this.button_options_popover;
|
220
|
+
})
|
185
221
|
}
|
186
222
|
}
|
187
223
|
|
188
224
|
selectOption(e) {
|
225
|
+
const button = e.target;
|
189
226
|
if (!this.el.multiple) {
|
190
|
-
Helpers.each(
|
191
|
-
|
192
|
-
}), function (child) {
|
193
|
-
child.selected = false;
|
194
|
-
});
|
195
|
-
Helpers.each(this.select_options.querySelectorAll('.uniformSelect-option.active .uniformSelect-option-icon'), Helpers.remove);
|
196
|
-
Helpers.removeClass(this.select_options.querySelectorAll('.uniformSelect-option.active'), 'active');
|
227
|
+
Helpers.each(this.button_options.querySelectorAll('.uniformSelect-option.active .uniformSelect-option-icon'), Helpers.remove);
|
228
|
+
Helpers.removeClass(this.button_options.querySelectorAll('.uniformSelect-option.active'), 'active');
|
197
229
|
}
|
198
|
-
Helpers.toggleClass(e.
|
199
|
-
e.
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
updateSelect () {
|
205
|
-
if (!this.el.multiple) this.hideOptions();
|
206
|
-
var value = Helpers.map(Helpers.filter(this.el.querySelectorAll("option"), function(el){
|
207
|
-
return el.selected;
|
208
|
-
}), function(el){
|
209
|
-
return this.el.multiple ? `<span class="uniformSelect-selection">${el.textContent}<span class="uniformSelect-remove"></span></span>` : el.textContent;
|
210
|
-
}.bind(this)).join(" ");
|
211
|
-
|
212
|
-
if (value == "") value = " ";
|
213
|
-
this.edit_button.querySelector('.text-js').innerHTML = value;
|
214
|
-
}
|
215
|
-
|
216
|
-
updateOptions () {
|
217
|
-
Helpers.each(this.select_options.querySelectorAll("button"), function(button) {
|
218
|
-
if(!button.option) return;
|
219
|
-
Helpers.toggleClass(button, 'active', button.option.selected);
|
220
|
-
if (Helpers.hasClass(button, 'active')) {
|
221
|
-
button.append(this.activeIcon.cloneNode(true));
|
222
|
-
} else {
|
223
|
-
Helpers.each(button.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
|
224
|
-
}
|
225
|
-
}.bind(this))
|
226
|
-
}
|
227
|
-
|
228
|
-
updatePosition () {
|
229
|
-
if(!this.select_options) return;
|
230
|
-
|
231
|
-
var fixedParents = Helpers.filter(Helpers.ancestors(this.container), function (el){
|
232
|
-
return Helpers.css(el, 'position') == 'fixed';
|
233
|
-
});
|
234
|
-
|
235
|
-
if (Helpers.hasClass(this.select_options, 'fixed')) {
|
236
|
-
if (fixedParents.length == 0) {
|
237
|
-
this.select_options.style.position = 'absolute';
|
238
|
-
this.select_options.style.top = Helpers.offset(this.container).top + this.container.offsetHeight + "px";
|
239
|
-
Helpers.removeClass(this.select_options, 'fixed');
|
240
|
-
}
|
241
|
-
} else if(fixedParents.length > 0) {
|
242
|
-
if (window.innerWidth > 720) {
|
243
|
-
this.lastScrollPosition = false;
|
244
|
-
}
|
245
|
-
this.select_options.style.position = 'fixed';
|
246
|
-
this.select_options.style.top = Helpers.offset(this.container).top + this.container.offsetHeight + "px";
|
247
|
-
this.select_options.style.left = Helpers.offset(this.container).left + "px";
|
248
|
-
Helpers.addClass(this.select_options, 'fixed');
|
230
|
+
Helpers.toggleClass(e.target, 'active');
|
231
|
+
e.target.option.selected = Helpers.hasClass(e.target, 'active');
|
232
|
+
if (Helpers.hasClass(e.target, 'active')) {
|
233
|
+
e.target.append(this.activeIcon.cloneNode(true));
|
234
|
+
} else {
|
235
|
+
Helpers.each(e.target.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
|
249
236
|
}
|
237
|
+
if (!this.el.multiple) {
|
238
|
+
this.hideOptions();
|
239
|
+
}
|
240
|
+
Helpers.trigger(this.el, 'change');
|
250
241
|
}
|
251
242
|
|
252
243
|
removeSelection(e) {
|
@@ -256,7 +247,6 @@ export default class Select extends Component {
|
|
256
247
|
})[0];
|
257
248
|
if(!target) return;
|
258
249
|
target.selected = false;
|
259
|
-
this.updatePosition();
|
260
250
|
Helpers.trigger(this.el, 'change');
|
261
251
|
}
|
262
252
|
}
|
@@ -29,13 +29,22 @@
|
|
29
29
|
&.-fill{
|
30
30
|
width: 90%;
|
31
31
|
}
|
32
|
+
&.-reset{
|
33
|
+
margin: -2em;
|
34
|
+
max-width: none;
|
35
|
+
border-radius: 0;
|
36
|
+
&.-fill{
|
37
|
+
width: 100%;
|
38
|
+
}
|
39
|
+
}
|
32
40
|
}
|
33
41
|
|
34
42
|
.uniformModal-close{
|
43
|
+
z-index: 2;
|
35
44
|
position: absolute;
|
36
45
|
padding: 0.3em;
|
37
|
-
top:
|
38
|
-
right:
|
46
|
+
top: 0;
|
47
|
+
right: 0;
|
39
48
|
font-size:1.5em;
|
40
49
|
color: white;
|
41
50
|
opacity: 0.5;
|
@@ -8,7 +8,6 @@ select.uniformSelect{
|
|
8
8
|
text-align: left;
|
9
9
|
padding-right: 1.8em;
|
10
10
|
&.active{
|
11
|
-
z-index: 10000;
|
12
11
|
.uniformSelect-edit-icon{
|
13
12
|
svg{
|
14
13
|
transform: rotate(180deg);
|
@@ -76,11 +75,9 @@ select.uniformSelect{
|
|
76
75
|
}
|
77
76
|
|
78
77
|
.uniformSelect-options{
|
79
|
-
|
80
|
-
position: absolute;
|
81
|
-
background: white;
|
82
|
-
z-index: 9999;
|
78
|
+
|
83
79
|
box-shadow: 0 0 15px 1px rgba(black, 0.2), 0 0 2px 1px rgba(black, 0.1) ;
|
80
|
+
background: white;
|
84
81
|
button{
|
85
82
|
appearance: none;
|
86
83
|
outline: none;
|
@@ -133,27 +130,18 @@ select.uniformSelect{
|
|
133
130
|
}
|
134
131
|
}
|
135
132
|
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
margin-bottom: 0
|
145
|
-
border: 1px solid color('gray');
|
146
|
-
&.uniformSelect-done{
|
147
|
-
margin-bottom: 0;
|
148
|
-
}
|
149
|
-
}
|
150
|
-
.uniformSelect-options-actions{
|
151
|
-
margin: 0 -1em;
|
133
|
+
.uniformSelect-modal{
|
134
|
+
width: 100vw;
|
135
|
+
min-height: 100vh;
|
136
|
+
padding: 1em;
|
137
|
+
button{
|
138
|
+
margin-bottom: 0.5em;
|
139
|
+
border: 1px solid color('gray');
|
140
|
+
&.uniformSelect-done{
|
141
|
+
margin-bottom: 0;
|
152
142
|
}
|
153
143
|
}
|
154
|
-
|
155
|
-
|
156
|
-
position: fixed;
|
157
|
-
}
|
144
|
+
.uniformSelect-options-actions{
|
145
|
+
margin: 0 -1em;
|
158
146
|
}
|
159
147
|
}
|
data/lib/uniform/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: uniform-ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.
|
4
|
+
version: 2.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ben Ehmke
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-
|
11
|
+
date: 2020-06-22 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -118,7 +118,7 @@ homepage: http://bemky.github.io/uniform/
|
|
118
118
|
licenses:
|
119
119
|
- MIT
|
120
120
|
metadata: {}
|
121
|
-
post_install_message:
|
121
|
+
post_install_message:
|
122
122
|
rdoc_options: []
|
123
123
|
require_paths:
|
124
124
|
- lib
|
@@ -134,7 +134,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
134
134
|
version: '0'
|
135
135
|
requirements: []
|
136
136
|
rubygems_version: 3.1.2
|
137
|
-
signing_key:
|
137
|
+
signing_key:
|
138
138
|
specification_version: 4
|
139
139
|
summary: Sass UI
|
140
140
|
test_files: []
|