uniform-ui 2.3.4 → 2.4.0
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.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: []
|