uniform-ui 2.4.1 → 3.0.0.beta2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.js +8 -21
  3. data/lib/assets/javascripts/uniform/checkbox.js +59 -16
  4. data/lib/assets/javascripts/uniform/component.js +20 -4
  5. data/lib/assets/javascripts/uniform/dropdown.js +78 -209
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +63 -0
  7. data/lib/assets/javascripts/uniform/icons.js +12 -3
  8. data/lib/assets/javascripts/uniform/modal.js +13 -12
  9. data/lib/assets/javascripts/uniform/popover.js +24 -20
  10. data/lib/assets/javascripts/uniform/resizer.js +26 -30
  11. data/lib/assets/javascripts/uniform/select.js +188 -222
  12. data/lib/assets/javascripts/uniform/tooltip.js +11 -11
  13. data/lib/assets/stylesheets/uniform.scss +3 -7
  14. data/lib/assets/stylesheets/uniform/base.scss +20 -1
  15. data/lib/assets/stylesheets/uniform/components/buttons.scss +171 -184
  16. data/lib/assets/stylesheets/uniform/components/checkbox.scss +104 -0
  17. data/lib/assets/stylesheets/uniform/components/container.scss +3 -2
  18. data/lib/assets/stylesheets/uniform/components/dropdown.scss +8 -5
  19. data/lib/assets/stylesheets/uniform/components/floating-label-input.scss +29 -0
  20. data/lib/assets/stylesheets/uniform/components/input-group.scss +30 -0
  21. data/lib/assets/stylesheets/uniform/components/label.scss +21 -16
  22. data/lib/assets/stylesheets/uniform/components/loaders.scss +28 -51
  23. data/lib/assets/stylesheets/uniform/components/nav.scss +50 -87
  24. data/lib/assets/stylesheets/uniform/components/pointer.scss +83 -0
  25. data/lib/assets/stylesheets/uniform/components/select.scss +97 -107
  26. data/lib/assets/stylesheets/uniform/components/table.scss +31 -138
  27. data/lib/assets/stylesheets/uniform/components/thumb.scss +40 -25
  28. data/lib/assets/stylesheets/uniform/components/z-input.scss +20 -0
  29. data/lib/assets/stylesheets/uniform/defaults.scss +31 -7
  30. data/lib/assets/stylesheets/uniform/functions.scss +32 -7
  31. data/lib/assets/stylesheets/uniform/mixins.scss +110 -57
  32. data/lib/assets/stylesheets/uniform/utilities.scss +53 -0
  33. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  34. data/lib/assets/stylesheets/uniform/utilities/borders.scss +85 -0
  35. data/lib/assets/stylesheets/uniform/utilities/effects.scss +172 -0
  36. data/lib/assets/stylesheets/uniform/utilities/layout.scss +174 -0
  37. data/lib/assets/stylesheets/uniform/utilities/position.scss +42 -0
  38. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +54 -0
  39. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +62 -0
  40. data/lib/assets/stylesheets/uniform/utilities/text.scss +158 -0
  41. data/lib/assets/stylesheets/uniform/variables.scss +104 -44
  42. data/lib/uniform/version.rb +1 -1
  43. metadata +21 -45
  44. data/lib/assets/javascripts/uniform.jquery.js +0 -152
  45. data/lib/assets/javascripts/uniform/dom-helpers.js +0 -158
  46. data/lib/assets/javascripts/uniform/floating-label.js +0 -54
  47. data/lib/assets/stylesheets/uniform-print.scss +0 -1
  48. data/lib/assets/stylesheets/uniform/components.scss +0 -11
  49. data/lib/assets/stylesheets/uniform/components/alert.scss +0 -72
  50. data/lib/assets/stylesheets/uniform/components/card.scss +0 -93
  51. data/lib/assets/stylesheets/uniform/components/form.scss +0 -149
  52. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +0 -103
  53. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +0 -58
  54. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +0 -65
  55. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +0 -56
  56. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +0 -88
  57. data/lib/assets/stylesheets/uniform/components/grid.scss +0 -179
  58. data/lib/assets/stylesheets/uniform/components/row.scss +0 -67
  59. data/lib/assets/stylesheets/uniform/components/tooltip.scss +0 -41
  60. data/lib/assets/stylesheets/uniform/helpers.scss +0 -133
  61. data/lib/assets/stylesheets/uniform/helpers/border.scss +0 -28
  62. data/lib/assets/stylesheets/uniform/helpers/colors.scss +0 -24
  63. data/lib/assets/stylesheets/uniform/helpers/margin.scss +0 -27
  64. data/lib/assets/stylesheets/uniform/helpers/padding.scss +0 -9
  65. data/lib/assets/stylesheets/uniform/helpers/position.scss +0 -20
  66. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +0 -38
  67. data/lib/assets/stylesheets/uniform/helpers/text.scss +0 -152
  68. data/lib/assets/stylesheets/uniform/print/grid.scss +0 -50
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1a70cfa3c98bab49b50c2c5866fcfdb2f1dde00ced660c7c2c3cc9009a21f819
4
- data.tar.gz: 5c64c92d6d8e636ded0928b2fd8e1a878f1b1deaf3998a6a4fcf6dadc160e7af
3
+ metadata.gz: bbdcb9dbd05373a00cbd0d38122c4022daefafb4b11cbd25977e57f7367ab38c
4
+ data.tar.gz: 074e042a4176f0e1f7e61107b67dcfdbf54c24a3cc937925fa0e8f2b17f1735b
5
5
  SHA512:
6
- metadata.gz: e2c963331db17062cf77bd459435d6ec92e75783434304b5e35b6180ec34c9eec020996f4f4caad831243e3075c9b42bd3558ec4320d500bba8c08351fd609c7
7
- data.tar.gz: 30c019f85d3b028382c89ccd5ef4611b88e3b9b83aeb69b528775909d7c0407cf7f8a691ba072c523c1db10f1dd0b4c5899ffb56666b5959e085428f4a20003e
6
+ metadata.gz: daa319ca0955e68bf4f3180066b12a8a0dc58208e26b3176b86a4c9449a645c74c396b967bd9b76c732758637623c9b2e9ede3979522e649687be7106ba396cd
7
+ data.tar.gz: 4d200fdbe66802694345f57d44c5b82cd0a94e149cf7c4c9cac7726f7423116cdb509bbd24adc946a2c8c834012f70153fddb89dc7f4f0e1d45fa1b37263bfa9
@@ -1,21 +1,8 @@
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
-
10
- export {
11
- Dropdown,
12
- Checkbox,
13
- Modal,
14
- Select,
15
- FloatingLabel,
16
- Resizer,
17
- Tooltip,
18
- Popover
19
- };
20
-
21
-
1
+ export Dropdown from './uniform/dropdown';
2
+ export Modal from './uniform/modal';
3
+ export Select from './uniform/select';
4
+ export FloatingLabelInput from './uniform/floating-label-input';
5
+ export Resizer from './uniform/resizer';
6
+ export Tooltip from './uniform/tooltip';
7
+ export Popover from './uniform/popover';
8
+ export {Checkbox, Radio, Toggle} from './uniform/checkbox';
@@ -1,31 +1,74 @@
1
1
  import Component from './component';
2
- import * as Helpers from './dom-helpers';
2
+ import {addClass, toggleClass, trigger, createElement} from 'dolla';
3
3
 
4
- export default class Checkbox extends Component {
4
+ export class Checkbox extends Component {
5
+ static CSSClass = "uniformCheckbox";
6
+ static type = 'checkbox';
7
+
5
8
  initialize (options) {
6
- this.listenTo(this.el, 'change', this.change);
9
+ if(options.input instanceof Element) {
10
+ this.input = options.input
11
+ } else {
12
+ this.input = createElement('input', Object.assign({}, {
13
+ type: this.constructor.type
14
+ }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
15
+ }
16
+
17
+ if(!options.tabindex) this.el.tabIndex = 0;
18
+ addClass(this.el, this.constructor.CSSClass);
19
+
20
+ this.listenTo(this.el, 'click', this.click);
21
+ this.listenTo(this.input, 'change', this.change);
22
+ this.listenTo(document, 'keyup', this.keyup);
23
+ this.listenTo(document, 'keydown', this.keydown);
7
24
  }
8
25
 
9
26
  render () {
10
- var type = Helpers.hasClass(this.el, 'uniformRadio') ? 'uniformRadio' : 'uniformCheckbox';
11
- this.checkbox = document.createElement('div');
12
- Helpers.addClass(this.checkbox, `${type}-indicator`);
27
+ this.input.style.display = "none";
28
+
29
+ if(this.input.parentNode){
30
+ this.input.parentNode.insertBefore(this.el, this.input.nextSibling);
31
+ } else {
32
+ this.el.append(this.input);
33
+ }
13
34
 
14
- if (this.el.className && this.el.className.replace(type, '') != '')
15
- Helpers.addClass(this.checkbox, this.el.className.replace(type, ''));
16
- Helpers.toggleClass(this.checkbox, 'checked', this.el.checked);
17
- this.el.parentNode.insertBefore(this.checkbox, this.el.nextSibling);
18
- this.listenTo(this.checkbox, 'click', this.click);
35
+ this.change()
36
+
19
37
  return this;
20
38
  }
21
39
 
40
+ change () {
41
+ toggleClass(this.el, 'checked', this.input.checked);
42
+ }
43
+
22
44
  click (e) {
23
- if (this.el.disabled) return;
24
- this.el.checked = !this.el.checked
25
- Helpers.trigger(this.el, 'change');
45
+ if (this.input.disabled) return;
46
+
47
+ this.input.checked = !this.input.checked
48
+ trigger(this.input, 'change');
26
49
  e.preventDefault();
27
50
  }
28
- change () {
29
- Helpers.toggleClass(this.checkbox, 'checked', this.el.checked);
51
+
52
+ keyup (e) {
53
+ if(document.activeElement != this.el) return;
54
+ if(e.keyCode != 32) return;
55
+
56
+ e.preventDefault();
57
+ this.click(e);
30
58
  }
59
+
60
+ keydown(e) {
61
+ if(e.keyCode == 32 && document.activeElement == this.el) {
62
+ // Prevent Page Scroll
63
+ e.preventDefault();
64
+ }
65
+ }
66
+ }
67
+
68
+ export class Radio extends Checkbox {
69
+ static CSSClass = "uniformRadio";
70
+ }
71
+
72
+ export class Toggle extends Checkbox {
73
+ static CSSClass = "uniformToggle";
31
74
  }
@@ -1,11 +1,18 @@
1
- import {uniqueId, hasClass} from './dom-helpers';
1
+ import {hasClass, HTML_ATTRIBUTES, createElement, closest} from 'dolla';
2
+
3
+ function uniqueId(prefix){
4
+ window.idCounter || (window.idCounter = 0);
5
+ var id = ++window.idCounter + '';
6
+ return prefix ? prefix + id : id;
7
+ }
2
8
 
3
9
  export default class Component {
10
+
4
11
  constructor(options){
5
12
  options = options || {};
6
13
  this.eventListens = new Array();
7
14
  this.eventListeners = new Array();
8
- this.el = options.el || document.createElement('div');
15
+ this.el = options.el || createElement('div', options); //TODO filter options to HTML_ATTRIBUTES
9
16
  this.cid = uniqueId('c');
10
17
 
11
18
  this.on = function (type, handler) {
@@ -34,6 +41,14 @@ export default class Component {
34
41
  this.initialize(options);
35
42
  }
36
43
 
44
+ addEventListener () {
45
+ this.on.apply(this, arguments);
46
+ }
47
+
48
+ removeEventListener () {
49
+ this.off.apply(this, arguments);
50
+ }
51
+
37
52
  pick (object, keys) {
38
53
  var newObject = {}
39
54
  keys.forEach(function(key){
@@ -59,8 +74,9 @@ export default class Component {
59
74
  node,
60
75
  event,
61
76
  function(e){
62
- if(scope && !hasClass(e.target, scope.replace('.', ''))) return;
63
- return callback.bind(context)(...arguments);
77
+ if(!scope || (e.target.matches(scope) || closest(e.target, scope))) {
78
+ return callback.bind(context)(...arguments);
79
+ }
64
80
  }.bind(context)
65
81
  ]
66
82
  this.eventListens.push(listen);
@@ -1,217 +1,86 @@
1
1
  import Component from './component';
2
- import * as Helpers from './dom-helpers';
2
+ import Popover from './popover';
3
+ import {createElement} from 'dolla';
3
4
 
4
- /*. Dropdown.initialize
5
- content: string|el - content rendered in dropdown
6
- align: 'center'|'left'|'right| - how dropdown aligns to trigger el
7
- trigger: 'click'|'focus'|'mouseover' - what triggers showDropdown
8
- show_arrow: true\false - show dropdown arrow
9
- hide_sm: true|false - don't show dropdown on mobile browsers
10
- square: true|false - round corners on dropdown
11
- container: node - append dropdown to
5
+ /*.
6
+ anchor: element
7
+ content: html
8
+ align: top|bottom (default: top)
9
+ container: document.body
10
+
11
+ methods
12
+ ------
13
+ enable
14
+ disable
15
+ hide
16
+ show
17
+ toggle
12
18
  */
13
19
  export default class Dropdown extends Component {
20
+
21
+ initialize (options) {
22
+ this.el = options.anchor;
23
+ options = options || {}
24
+ this.options = {
25
+ align: 'center bottom',
26
+ container: document.body
27
+ };
28
+ Object.assign(this.options, this.pick(options, Object.keys(this.options)));
29
+
30
+ this.enabled = true;
31
+ this.active = false;
32
+ this.content = options.content;
33
+ this.el.dropdown = this;
34
+
35
+ this.listenTo(this.el, 'click', this.toggle);
36
+ }
14
37
 
15
- initialize(options){
16
- options = options || {}
17
- this.options = {
18
- align: 'center bottom',
19
- trigger: 'click',
20
- show_arrow: true,
21
- hide_sm: false,
22
- square: false,
23
- container: document.body,
24
- offset: {}
25
- };
26
- this.options.container = this.options.container || document.body;
27
-
28
- Object.assign(this.options, this.pick(options, Object.keys(this.options)));
29
- this.content = options.content;
30
- this.dropdown = document.createElement('div');
31
- this.el.dropdown = this;
32
-
33
- this.listenTo(this.el, this.options.trigger, this.toggle);
34
-
35
- this.listenTo(this.el, 'mousedown', function (){
36
- this.mousedown = true;
37
- });
38
-
39
- this.listenTo(this.el, 'mouseup', function (){
40
- this.mousedown = false;
41
- });
42
-
43
- this.listenTo(this.el, 'focus', function (){
44
- if(this.mousedown) return;
45
- this.show();
46
- });
47
-
48
- this.listenTo(document, 'focus', this.outsideClick);
49
- this.listenTo(document, this.options.trigger, this.outsideClick);
50
- this.listenTo(document, 'keyup', this.keyup);
51
- this.listenTo(window, 'resize', this.resize);
52
- }
53
-
54
- render () {
55
- Helpers.addClass(this.dropdown, 'uniformDropdown-dropdown');
56
- Helpers.addClass(this.dropdown, 'absolute');
57
- this.dropdown.style.minWidth = Helpers.outerWidth(this.el);
58
- this.dropdown.innerHTML = this.content.innerHTML ? this.content.innerHTML : this.content;
59
- if (this.options.show_arrow) {
60
- Helpers.addClass(this.dropdown, 'has-pointer');
61
- var pointer = document.createElement('div');
62
- Helpers.addClass(pointer, 'uniformDropdown-pointer')
63
- this.dropdown.appendChild(pointer);
64
- }
65
- Helpers.toggleClass(this.dropdown, 'square', this.options.square);
66
- this.dropdown.style.display = 'none';
67
- this.options.container.appendChild(this.dropdown);
68
- Helpers.removeClass(this.dropdown.querySelectorAll('.hidden'), 'hidden');
69
- return this;
70
- }
71
-
72
- resize () {
73
- this.setPosition();
74
-
75
- var align = this.options.align.split(" ");
76
- var reposition = false;
77
- if (Helpers.offset(this.dropdown).top + Helpers.outerHeight(this.dropdown) > Math.max(document.body.offsetHeight, window.innerHeight)) {
78
- align[1] = "top";
79
- reposition = true;
80
- }
81
- if (Helpers.offset(this.dropdown).top < 0) {
82
- align[1] = "bottom";
83
- reposition = true;
84
- }
85
- if (Helpers.offset(this.dropdown).left < 0) {
86
- align[0] = "right";
87
- reposition = true;
88
- }
89
- if (Helpers.offset(this.dropdown).left + Helpers.outerWidth(this.dropdown) > document.body.offsetWidth) {
90
- align[0] = "left";
91
- reposition = true;
92
- }
93
- if(reposition) this.setPosition(align.join(" "))
94
- }
95
-
96
-
97
- setPosition(align){
98
- align = align || this.options.align;
99
- var [leftAlign, topAlign] = align.split(" ");
100
- leftAlign = leftAlign || "bottom";
101
- topAlign = topAlign || "bottom";
102
-
103
- var offset = Helpers.offset(this.el);
104
- var container = this.options.container;
105
- if(getComputedStyle(container)['position'] == "static") container = container.offsetParent;
106
- if(!container) container = document.body;
107
-
108
- var containerOffset = Helpers.offset(container);
109
- offset = {
110
- top: offset.top - containerOffset.top,
111
- left: offset.left - containerOffset.left
112
- }
113
-
114
- var position = {};
115
- if(leftAlign == 'left'){
116
- position.right = Helpers.outerWidth(container) - offset.left;
117
- } else if(leftAlign == 'center'){
118
- position.left = offset.left + Helpers.outerWidth(this.el) / 2 - Helpers.outerWidth(this.dropdown) / 2;
119
- } else if (leftAlign == 'right'){
120
- position.left = offset.left + Helpers.outerWidth(this.el);
121
- } else if (leftAlign.includes("%")){
122
- position.left = offset.left + Helpers.outerWidth(this.el) * parseInt(leftAlign) / 100;
123
- } else if (leftAlign.includes("px")){
124
- position.left = offset.left + Helpers.outerWidth(this.el) + parseInt(leftAlign);
125
- }
126
-
127
- if(topAlign == 'top'){
128
- position.top = offset.top - Helpers.outerHeight(this.dropdown);
129
- } else if(topAlign == 'center'){
130
- position.top = offset.top + Helpers.outerHeight(this.el) / 2 - Helpers.outerHeight(this.dropdown) / 2;
131
- } else if (topAlign == 'bottom'){
132
- position.top = offset.top + Helpers.outerHeight(this.el);
133
- } else if (topAlign.includes("%")){
134
- position.top = offset.top + Helpers.outerHeight(this.el) * parseInt(topAlign) / 100;
135
- } else if (topAlign.includes("px")){
136
- position.top = offset.top + Helpers.outerHeight(this.el) + parseInt(topAlign);
137
- }
138
-
139
- if(this.options.offset.left) position.left += parseInt(this.options.offset.left);
140
- if(this.options.offset.top) position.top += parseInt(this.options.offset.top);
141
- if(this.options.offset.left) position.right -= parseInt(this.options.offset.left);
142
-
143
- this.dropdown.style.left = 'auto';
144
- this.dropdown.style.right = 'auto';
145
- Helpers.removeClass(this.dropdown, 'popover-left popover-right popover-center popover-top popover-bottom');
146
- Helpers.addClass(this.dropdown, 'popover-' + topAlign);
147
- Helpers.addClass(this.dropdown, 'popover-' + leftAlign);
148
- Object.keys(position).forEach(function(key){
149
- this.dropdown.style[key] = position[key] + "px";
150
- }, this);
151
- }
152
-
153
- remove () {
154
- Component.prototype.remove.apply(this, arguments);
155
- if(this.dropdown.parentNode) this.dropdown.parentNode.removeChild(this.dropdown);
156
- delete this.dropdown;
38
+ render () {
39
+ return this;
40
+ }
41
+
42
+ toggle () {
43
+ this.active = !this.active
44
+ if(this.active) {
45
+ this.show()
46
+ } else {
47
+ this.hide()
157
48
  }
158
-
159
- toggle (e) {
160
- if (Helpers.hasClass(this.el, 'active') && e.type == "click") {
161
- this.hide();
162
- } else {
163
- this.show();
164
- }
165
- }
166
-
167
- show (options) {
168
- options || (options = {});
169
- if(this.options.hide_sm && window.innerWidth < 720) return;
170
- if(!this.dropdown) this.render();
171
-
172
- this.dropdown.style.display = 'block';
173
- Helpers.addClass(this.el, 'active');
174
-
175
- this.resize();
176
-
177
- this.overlay = document.createElement('div');
178
- Helpers.addClass(this.overlay, 'uniformOverlay');
179
- document.body.appendChild(this.overlay);
180
-
181
- if (window.innerWidth < 720) {
182
- this.lastScrollPosition = window.scrollY;
183
- Helpers.addClass(document.body, 'uniformModal-hideBody');
184
- }
185
-
186
- this.listenTo(this.overlay, 'click', this.hide);
187
- if(!options.silent) this.trigger('shown');
188
- }
189
-
190
- hide (options) {
191
- options || (options = {});
192
- if(!this.dropdown) return;
193
- if(!Helpers.hasClass(this.el, 'active')) return;
194
- this.dropdown.style.display = 'none';
195
- Helpers.removeClass(this.el, 'active');
196
- if (this.overlay && this.overlay.parentNode) this.overlay.parentNode.removeChild(this.overlay)
197
- if (window.innerWidth < 720) {
198
- Helpers.removeClass(document.body, 'uniformModal-hideBody');
199
- window.scrollTo(0, this.lastScrollPosition);
200
- }
201
- if(!options.silent) this.trigger('hidden');
202
- }
203
-
204
- outsideClick (e) {
205
- if (!this.dropdown || this.dropdown.offsetParent === null) return;
206
- if (e.target === this.el) return;
207
- if (e.target === this.overlay) return;
208
- if (this.el.contains(e.target)) return;
209
- if (this.dropdown.contains(e.target)) return;
210
- this.hide();
211
- }
212
-
213
- keyup (e) {
214
- if(e.which != 27) return;
215
- this.hide();
49
+ }
50
+
51
+ show () {
52
+ if(!this.enabled) return;
53
+ this.active = true;
54
+ this.el.classList.add('-active');
55
+ if (this.popup) {
56
+ this.popup.show()
57
+ } else {
58
+ this.popup = new Popover({
59
+ content: this.content,
60
+ anchor: this.el,
61
+ align: this.options.align,
62
+ container: this.options.container
63
+ }).render();
64
+ this.listenToOnce(this.popup, 'hidden', this.hidden)
216
65
  }
66
+ }
67
+
68
+ hide () {
69
+ this.popup.remove();
70
+ delete this.popup;
71
+ this.hidden();
72
+ }
73
+
74
+ hidden () {
75
+ this.active = false;
76
+ this.el.classList.remove('-active');
77
+ }
78
+
79
+ disable () {
80
+ this.enabled = false;
81
+ }
82
+
83
+ enabled () {
84
+ this.enabled = true;
85
+ }
217
86
  }