mtl 1.0.3 → 1.1.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/Gemfile +1 -1
- data/app/assets/javascripts/mtl.js +1 -1
- data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
- data/app/assets/javascripts/mtl/modal.coffee +6 -11
- data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
- data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
- data/lib/mtl/version.rb +3 -2
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/buttons.js +181 -5
- data/vendor/assets/javascripts/materialize/carousel.js +1 -1
- data/vendor/assets/javascripts/materialize/chips.js +75 -53
- data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
- data/vendor/assets/javascripts/materialize/forms.js +3 -2
- data/vendor/assets/javascripts/materialize/global.js +56 -3
- data/vendor/assets/javascripts/materialize/init.js +3 -2
- data/vendor/assets/javascripts/materialize/modal.js +184 -0
- data/vendor/assets/javascripts/materialize/parallax.js +2 -2
- data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
- data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
- data/vendor/assets/javascripts/materialize/tabs.js +30 -14
- data/vendor/assets/javascripts/materialize/toasts.js +29 -28
- data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
- data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
- data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
- data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
- data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
- data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
- data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
- data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
- data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
- data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
- data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
- metadata +3 -3
- data/vendor/assets/javascripts/materialize/leanModal.js +0 -192
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 08081cb22a5be14a4c4414c87e810b81ef1e6583
|
4
|
+
data.tar.gz: 20c8e64b6ef82f5e99497509e52d1c9b6ad2102d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2e1758ed56f6ed803ee82fed48b5a4c456dab5c643289e3abc3fbb4098f32109983c663b40d70d6d17390b97a0a54fec6f7ce7d4ab3aea1276337769f35c642e
|
7
|
+
data.tar.gz: 922222e382812a4274e2040619c4c91676537b1e1b5bb9d2793767187f8964d5d2879bd9246c5747b35e2844039408ea9cb33b1c52b551597c53430d9b3616a1
|
data/Gemfile
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
updateAttrs = ($el) ->
|
2
2
|
$el
|
3
3
|
.on('click', -> false)
|
4
|
-
.attr('data-constrainwidth', 'false')
|
5
4
|
.attr('data-beloworigin', 'true')
|
6
5
|
.attr('data-alignment', alignment($el))
|
7
6
|
.attr('data-activates', activator($el))
|
@@ -15,7 +14,9 @@ activator = ($el) ->
|
|
15
14
|
init = ->
|
16
15
|
$('[data-mtl-dropdown]').each ->
|
17
16
|
$el = $(this)
|
18
|
-
updateAttrs($el).dropdown()
|
17
|
+
updateAttrs($el).dropdown(constrain_width: false)
|
18
|
+
$el.siblings('input.select-dropdown').on 'mousedown', (e) ->
|
19
|
+
e.preventDefault() if e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight
|
19
20
|
|
20
21
|
closeAll = ->
|
21
22
|
setTimeout -> $('[data-mtl-dropdown]').dropdown('close')
|
@@ -7,10 +7,6 @@ MODAL_TEMPLATE = '
|
|
7
7
|
</div>
|
8
8
|
'
|
9
9
|
|
10
|
-
initModal = ($el) ->
|
11
|
-
return initXhrModal($el) if $el.data('mtl-modal') == 'xhr'
|
12
|
-
return initDefaultModal($el) if $el.data('mtl-modal') == 'default'
|
13
|
-
|
14
10
|
initXhrModal = ($el) ->
|
15
11
|
modalId = 'mtl-modal-' + (MODAL_IDS++)
|
16
12
|
ds = $el.prop('href')
|
@@ -18,15 +14,14 @@ initXhrModal = ($el) ->
|
|
18
14
|
$modal.appendTo('body')
|
19
15
|
$modal.addClass(modalClass) if modalClass = $el.data('mtl-modal-class')
|
20
16
|
$el.prop('href', "##{modalId}")
|
21
|
-
|
22
|
-
initDefaultModal $el,
|
23
|
-
ready: -> $modal.load(ds)
|
24
|
-
|
25
|
-
initDefaultModal = ($el, options = {}) -> $el.leanModal(options)
|
17
|
+
$modal.modal ready: -> $modal.load(ds)
|
26
18
|
|
27
19
|
$(document).on 'click', '[data-mtl-modal="close"]', (e) ->
|
28
20
|
e.preventDefault()
|
29
|
-
$(this).parents('.modal:first').
|
21
|
+
$(this).parents('.modal:first').modal('close')
|
22
|
+
|
23
|
+
init = ->
|
24
|
+
$('[data-mtl-modal="inline"]').modal()
|
25
|
+
$('[data-mtl-modal="xhr"]').each -> initXhrModal($(this))
|
30
26
|
|
31
|
-
init = -> $('[data-mtl-modal]').each -> initModal($(this))
|
32
27
|
if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)
|
@@ -1,8 +1,18 @@
|
|
1
1
|
// scss-lint:disable QualifyingElement SelectorFormat
|
2
2
|
|
3
|
-
//
|
4
|
-
.select-wrapper
|
5
|
-
|
3
|
+
// select/dropdown hotfixes
|
4
|
+
.select-wrapper {
|
5
|
+
// caret fix
|
6
|
+
span.caret {
|
7
|
+
color: inherit;
|
8
|
+
}
|
9
|
+
// ellipsis of selected option
|
10
|
+
input.select-dropdown {
|
11
|
+
padding-right: 1rem;
|
12
|
+
overflow: hidden;
|
13
|
+
text-overflow: ellipsis;
|
14
|
+
box-sizing: border-box;
|
15
|
+
}
|
6
16
|
}
|
7
17
|
|
8
18
|
.radio_buttons {
|
data/lib/mtl/version.rb
CHANGED
data/package.json
CHANGED
@@ -5,17 +5,17 @@
|
|
5
5
|
$.fn.reverse = [].reverse;
|
6
6
|
|
7
7
|
// Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
|
8
|
-
$(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
8
|
+
$(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
|
9
9
|
var $this = $(this);
|
10
10
|
openFABMenu($this);
|
11
11
|
});
|
12
|
-
$(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) {
|
12
|
+
$(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
|
13
13
|
var $this = $(this);
|
14
14
|
closeFABMenu($this);
|
15
15
|
});
|
16
16
|
|
17
17
|
// Toggle-on-click behaviour.
|
18
|
-
$(document).on('click.
|
18
|
+
$(document).on('click.fabClickToggle', '.fixed-action-btn.click-to-toggle > a', function(e) {
|
19
19
|
var $this = $(this);
|
20
20
|
var $menu = $this.parent();
|
21
21
|
if ($menu.hasClass('active')) {
|
@@ -25,6 +25,13 @@
|
|
25
25
|
}
|
26
26
|
});
|
27
27
|
|
28
|
+
// Toolbar transition behaviour.
|
29
|
+
$(document).on('click.fabToolbar', '.fixed-action-btn.toolbar > a', function(e) {
|
30
|
+
var $this = $(this);
|
31
|
+
var $menu = $this.parent();
|
32
|
+
FABtoToolbar($menu);
|
33
|
+
});
|
34
|
+
|
28
35
|
});
|
29
36
|
|
30
37
|
$.fn.extend({
|
@@ -33,12 +40,18 @@
|
|
33
40
|
},
|
34
41
|
closeFAB: function() {
|
35
42
|
closeFABMenu($(this));
|
43
|
+
},
|
44
|
+
openToolbar: function() {
|
45
|
+
FABtoToolbar($(this));
|
46
|
+
},
|
47
|
+
closeToolbar: function() {
|
48
|
+
toolbarToFAB($(this));
|
36
49
|
}
|
37
50
|
});
|
38
51
|
|
39
52
|
|
40
53
|
var openFABMenu = function (btn) {
|
41
|
-
$this = btn;
|
54
|
+
var $this = btn;
|
42
55
|
if ($this.hasClass('active') === false) {
|
43
56
|
|
44
57
|
// Get direction option
|
@@ -67,7 +80,7 @@
|
|
67
80
|
};
|
68
81
|
|
69
82
|
var closeFABMenu = function (btn) {
|
70
|
-
$this = btn;
|
83
|
+
var $this = btn;
|
71
84
|
// Get direction option
|
72
85
|
var horizontal = $this.hasClass('horizontal');
|
73
86
|
var offsetY, offsetX;
|
@@ -88,4 +101,167 @@
|
|
88
101
|
};
|
89
102
|
|
90
103
|
|
104
|
+
/**
|
105
|
+
* Transform FAB into toolbar
|
106
|
+
* @param {Object} object jQuery object
|
107
|
+
*/
|
108
|
+
var FABtoToolbar = function(btn) {
|
109
|
+
if (btn.attr('data-open') === "true") {
|
110
|
+
return;
|
111
|
+
}
|
112
|
+
|
113
|
+
var offsetX, offsetY, scaleFactor;
|
114
|
+
var windowWidth = window.innerWidth;
|
115
|
+
var windowHeight = window.innerHeight;
|
116
|
+
var btnRect = btn[0].getBoundingClientRect();
|
117
|
+
var anchor = btn.find('> a').first();
|
118
|
+
var menu = btn.find('> ul').first();
|
119
|
+
var backdrop = $('<div class="fab-backdrop"></div>');
|
120
|
+
var fabColor = anchor.css('background-color');
|
121
|
+
anchor.append(backdrop);
|
122
|
+
|
123
|
+
offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
|
124
|
+
offsetY = windowHeight - btnRect.bottom;
|
125
|
+
scaleFactor = windowWidth / backdrop.width();
|
126
|
+
btn.attr('data-origin-bottom', btnRect.bottom);
|
127
|
+
btn.attr('data-origin-left', btnRect.left);
|
128
|
+
btn.attr('data-origin-width', btnRect.width);
|
129
|
+
|
130
|
+
// Set initial state
|
131
|
+
btn.addClass('active');
|
132
|
+
btn.attr('data-open', true);
|
133
|
+
btn.css({
|
134
|
+
'text-align': 'center',
|
135
|
+
width: '100%',
|
136
|
+
bottom: 0,
|
137
|
+
left: 0,
|
138
|
+
transform: 'translateX(' + offsetX + 'px)',
|
139
|
+
transition: 'none'
|
140
|
+
});
|
141
|
+
anchor.css({
|
142
|
+
transform: 'translateY(' + -offsetY + 'px)',
|
143
|
+
transition: 'none'
|
144
|
+
});
|
145
|
+
backdrop.css({
|
146
|
+
'background-color': fabColor
|
147
|
+
});
|
148
|
+
|
149
|
+
|
150
|
+
setTimeout(function() {
|
151
|
+
btn.css({
|
152
|
+
transform: '',
|
153
|
+
transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
|
154
|
+
});
|
155
|
+
anchor.css({
|
156
|
+
overflow: 'visible',
|
157
|
+
transform: '',
|
158
|
+
transition: 'transform .2s'
|
159
|
+
});
|
160
|
+
|
161
|
+
setTimeout(function() {
|
162
|
+
btn.css({
|
163
|
+
overflow: 'hidden',
|
164
|
+
'background-color': fabColor
|
165
|
+
});
|
166
|
+
backdrop.css({
|
167
|
+
transform: 'scale(' + scaleFactor + ')',
|
168
|
+
transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
|
169
|
+
});
|
170
|
+
menu.find('> li > a').css({
|
171
|
+
opacity: 1
|
172
|
+
});
|
173
|
+
|
174
|
+
// Scroll to close.
|
175
|
+
$(window).on('scroll.fabToolbarClose', function() {
|
176
|
+
toolbarToFAB(btn);
|
177
|
+
$(window).off('scroll.fabToolbarClose');
|
178
|
+
$(document).off('click.fabToolbarClose');
|
179
|
+
});
|
180
|
+
|
181
|
+
$(document).on('click.fabToolbarClose', function(e) {
|
182
|
+
if (!$(e.target).closest(menu).length) {
|
183
|
+
toolbarToFAB(btn);
|
184
|
+
$(window).off('scroll.fabToolbarClose');
|
185
|
+
$(document).off('click.fabToolbarClose');
|
186
|
+
}
|
187
|
+
});
|
188
|
+
}, 100);
|
189
|
+
}, 0);
|
190
|
+
};
|
191
|
+
|
192
|
+
/**
|
193
|
+
* Transform toolbar back into FAB
|
194
|
+
* @param {Object} object jQuery object
|
195
|
+
*/
|
196
|
+
var toolbarToFAB = function(btn) {
|
197
|
+
if (btn.attr('data-open') !== "true") {
|
198
|
+
return;
|
199
|
+
}
|
200
|
+
|
201
|
+
var offsetX, offsetY, scaleFactor;
|
202
|
+
var windowWidth = window.innerWidth;
|
203
|
+
var windowHeight = window.innerHeight;
|
204
|
+
var btnWidth = btn.attr('data-origin-width');
|
205
|
+
var btnBottom = btn.attr('data-origin-bottom');
|
206
|
+
var btnLeft = btn.attr('data-origin-left');
|
207
|
+
var anchor = btn.find('> .btn-floating').first();
|
208
|
+
var menu = btn.find('> ul').first();
|
209
|
+
var backdrop = btn.find('.fab-backdrop');
|
210
|
+
var fabColor = anchor.css('background-color');
|
211
|
+
|
212
|
+
offsetX = btnLeft - (windowWidth / 2) + (btnWidth / 2);
|
213
|
+
offsetY = windowHeight - btnBottom;
|
214
|
+
scaleFactor = windowWidth / backdrop.width();
|
215
|
+
|
216
|
+
|
217
|
+
// Hide backdrop
|
218
|
+
btn.removeClass('active');
|
219
|
+
btn.attr('data-open', false);
|
220
|
+
btn.css({
|
221
|
+
'background-color': 'transparent',
|
222
|
+
transition: 'none'
|
223
|
+
});
|
224
|
+
anchor.css({
|
225
|
+
transition: 'none'
|
226
|
+
});
|
227
|
+
backdrop.css({
|
228
|
+
transform: 'scale(0)',
|
229
|
+
'background-color': fabColor
|
230
|
+
});
|
231
|
+
menu.find('> li > a').css({
|
232
|
+
opacity: ''
|
233
|
+
});
|
234
|
+
|
235
|
+
setTimeout(function() {
|
236
|
+
backdrop.remove();
|
237
|
+
|
238
|
+
// Set initial state.
|
239
|
+
btn.css({
|
240
|
+
'text-align': '',
|
241
|
+
width: '',
|
242
|
+
bottom: '',
|
243
|
+
left: '',
|
244
|
+
overflow: '',
|
245
|
+
'background-color': '',
|
246
|
+
transform: 'translate3d(' + -offsetX + 'px,0,0)'
|
247
|
+
});
|
248
|
+
anchor.css({
|
249
|
+
overflow: '',
|
250
|
+
transform: 'translate3d(0,' + offsetY + 'px,0)'
|
251
|
+
});
|
252
|
+
|
253
|
+
setTimeout(function() {
|
254
|
+
btn.css({
|
255
|
+
transform: 'translate3d(0,0,0)',
|
256
|
+
transition: 'transform .2s'
|
257
|
+
});
|
258
|
+
anchor.css({
|
259
|
+
transform: 'translate3d(0,0,0)',
|
260
|
+
transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
|
261
|
+
});
|
262
|
+
}, 20);
|
263
|
+
}, 200);
|
264
|
+
};
|
265
|
+
|
266
|
+
|
91
267
|
}( jQuery ));
|
@@ -39,7 +39,7 @@
|
|
39
39
|
options.dist = 0;
|
40
40
|
var firstImage = view.find('.carousel-item img').first();
|
41
41
|
if (firstImage.length) {
|
42
|
-
imageHeight = firstImage.load
|
42
|
+
imageHeight = firstImage.on('load', function(){
|
43
43
|
view.css('height', $(this).height());
|
44
44
|
});
|
45
45
|
} else {
|
@@ -6,11 +6,11 @@
|
|
6
6
|
secondaryPlaceholder: '',
|
7
7
|
};
|
8
8
|
|
9
|
-
$(document).ready(function(){
|
9
|
+
$(document).ready(function() {
|
10
10
|
// Handle removal of static chips.
|
11
11
|
$(document).on('click', '.chip .close', function(e){
|
12
12
|
var $chips = $(this).closest('.chips');
|
13
|
-
if ($chips.
|
13
|
+
if ($chips.attr('data-initialized')) {
|
14
14
|
return;
|
15
15
|
}
|
16
16
|
$(this).closest('.chip').remove();
|
@@ -33,11 +33,8 @@
|
|
33
33
|
return this.$el.data('chips');
|
34
34
|
}
|
35
35
|
|
36
|
-
|
37
|
-
return this.$el.data('options');
|
38
|
-
}
|
36
|
+
var curr_options = $.extend({}, materialChipsDefaults, options);
|
39
37
|
|
40
|
-
this.$el.data('options', $.extend({}, materialChipsDefaults, options));
|
41
38
|
|
42
39
|
// Initialize
|
43
40
|
this.init = function() {
|
@@ -45,23 +42,20 @@
|
|
45
42
|
var chips;
|
46
43
|
self.$el.each(function(){
|
47
44
|
var $chips = $(this);
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
var options = $chips.data('options');
|
53
|
-
if (!options.data || !options.data instanceof Array) {
|
54
|
-
options.data = [];
|
45
|
+
var chipId = Materialize.guid();
|
46
|
+
|
47
|
+
if (!curr_options.data || !(curr_options.data instanceof Array)) {
|
48
|
+
curr_options.data = [];
|
55
49
|
}
|
56
|
-
$chips.data('chips',
|
57
|
-
$chips.
|
58
|
-
$chips.
|
50
|
+
$chips.data('chips', curr_options.data);
|
51
|
+
$chips.attr('data-index', i);
|
52
|
+
$chips.attr('data-initialized', true);
|
59
53
|
|
60
54
|
if (!$chips.hasClass(self.SELS.CHIPS)) {
|
61
55
|
$chips.addClass('chips');
|
62
56
|
}
|
63
57
|
|
64
|
-
self.chips($chips);
|
58
|
+
self.chips($chips, chipId);
|
65
59
|
i++;
|
66
60
|
});
|
67
61
|
};
|
@@ -69,16 +63,16 @@
|
|
69
63
|
this.handleEvents = function(){
|
70
64
|
var SELS = self.SELS;
|
71
65
|
|
72
|
-
self.$document.on('click', SELS.CHIPS, function(e){
|
66
|
+
self.$document.off('click.chips-focus', SELS.CHIPS).on('click.chips-focus', SELS.CHIPS, function(e){
|
73
67
|
$(e.target).find(SELS.INPUT).focus();
|
74
68
|
});
|
75
69
|
|
76
|
-
self.$document.on('click', SELS.CHIP, function(e){
|
70
|
+
self.$document.off('click.chips-select', SELS.CHIP).on('click.chips-select', SELS.CHIP, function(e){
|
77
71
|
$(SELS.CHIP).removeClass('selected');
|
78
72
|
$(this).toggleClass('selected');
|
79
73
|
});
|
80
74
|
|
81
|
-
self.$document.on('keydown', function(e){
|
75
|
+
self.$document.off('keydown.chips').on('keydown.chips', function(e){
|
82
76
|
if ($(e.target).is('input, textarea')) {
|
83
77
|
return;
|
84
78
|
}
|
@@ -95,10 +89,9 @@
|
|
95
89
|
|
96
90
|
if (e.which === 8 || e.which === 46) {
|
97
91
|
e.preventDefault();
|
98
|
-
var chipsIndex = $chips.data('index');
|
99
92
|
|
100
93
|
index = $chip.index();
|
101
|
-
self.deleteChip(
|
94
|
+
self.deleteChip(index, $chips);
|
102
95
|
|
103
96
|
var selectIndex = null;
|
104
97
|
if ((index + 1) < length) {
|
@@ -110,7 +103,7 @@
|
|
110
103
|
if (selectIndex < 0) selectIndex = null;
|
111
104
|
|
112
105
|
if (null !== selectIndex) {
|
113
|
-
self.selectChip(
|
106
|
+
self.selectChip(selectIndex, $chips);
|
114
107
|
}
|
115
108
|
if (!length) $chips.find('input').focus();
|
116
109
|
|
@@ -121,7 +114,7 @@
|
|
121
114
|
return;
|
122
115
|
}
|
123
116
|
$(SELS.CHIP).removeClass('selected');
|
124
|
-
self.selectChip(
|
117
|
+
self.selectChip(index, $chips);
|
125
118
|
|
126
119
|
// right
|
127
120
|
} else if (e.which === 39) {
|
@@ -131,64 +124,78 @@
|
|
131
124
|
$chips.find('input').focus();
|
132
125
|
return;
|
133
126
|
}
|
134
|
-
self.selectChip(
|
127
|
+
self.selectChip(index, $chips);
|
135
128
|
}
|
136
129
|
});
|
137
130
|
|
138
|
-
self.$document.on('focusin', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
139
|
-
$(e.target).closest(SELS.CHIPS)
|
131
|
+
self.$document.off('focusin.chips', SELS.CHIPS + ' ' + SELS.INPUT).on('focusin.chips', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
132
|
+
var $currChips = $(e.target).closest(SELS.CHIPS);
|
133
|
+
$currChips.addClass('focus');
|
134
|
+
$currChips.siblings('label, .prefix').addClass('active');
|
140
135
|
$(SELS.CHIP).removeClass('selected');
|
141
136
|
});
|
142
137
|
|
143
|
-
self.$document.on('focusout', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
144
|
-
$(e.target).closest(SELS.CHIPS)
|
138
|
+
self.$document.off('focusout.chips', SELS.CHIPS + ' ' + SELS.INPUT).on('focusout.chips', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
139
|
+
var $currChips = $(e.target).closest(SELS.CHIPS);
|
140
|
+
$currChips.removeClass('focus');
|
141
|
+
|
142
|
+
// Remove active if empty
|
143
|
+
if (!$currChips.data('chips').length) {
|
144
|
+
$currChips.siblings('label').removeClass('active');
|
145
|
+
}
|
146
|
+
$currChips.siblings('.prefix').removeClass('active');
|
145
147
|
});
|
146
148
|
|
147
|
-
self.$document.on('keydown', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
149
|
+
self.$document.off('keydown.chips-add', SELS.CHIPS + ' ' + SELS.INPUT).on('keydown.chips-add', SELS.CHIPS + ' ' + SELS.INPUT, function(e){
|
148
150
|
var $target = $(e.target);
|
149
151
|
var $chips = $target.closest(SELS.CHIPS);
|
150
|
-
var chipsIndex = $chips.data('index');
|
151
152
|
var chipsLength = $chips.children(SELS.CHIP).length;
|
152
153
|
|
153
154
|
// enter
|
154
155
|
if (13 === e.which) {
|
155
156
|
e.preventDefault();
|
156
|
-
self.addChip(
|
157
|
+
self.addChip({tag: $target.val()}, $chips);
|
157
158
|
$target.val('');
|
158
159
|
return;
|
159
160
|
}
|
160
161
|
|
161
162
|
// delete or left
|
162
163
|
if ((8 === e.keyCode || 37 === e.keyCode) && '' === $target.val() && chipsLength) {
|
163
|
-
self.selectChip(
|
164
|
+
self.selectChip(chipsLength - 1, $chips);
|
164
165
|
$target.blur();
|
165
166
|
return;
|
166
167
|
}
|
167
168
|
});
|
168
169
|
|
169
|
-
|
170
|
+
// Click on delete icon in chip.
|
171
|
+
self.$document.off('click.chips-delete', SELS.CHIPS + ' ' + SELS.DELETE).on('click.chips-delete', SELS.CHIPS + ' ' + SELS.DELETE, function(e) {
|
170
172
|
var $target = $(e.target);
|
171
173
|
var $chips = $target.closest(SELS.CHIPS);
|
172
174
|
var $chip = $target.closest(SELS.CHIP);
|
173
175
|
e.stopPropagation();
|
174
|
-
self.deleteChip(
|
175
|
-
$chips.data('index'),
|
176
|
-
$chip.index(),
|
177
|
-
$chips
|
178
|
-
);
|
176
|
+
self.deleteChip($chip.index(), $chips);
|
179
177
|
$chips.find('input').focus();
|
180
178
|
});
|
181
179
|
};
|
182
180
|
|
183
|
-
this.chips = function($chips) {
|
181
|
+
this.chips = function($chips, chipId) {
|
184
182
|
var html = '';
|
185
|
-
var options = $chips.data('options');
|
186
183
|
$chips.data('chips').forEach(function(elem){
|
187
184
|
html += self.renderChip(elem);
|
188
185
|
});
|
189
|
-
html += '<input class="input" placeholder="">';
|
186
|
+
html += '<input id="' + chipId +'" class="input" placeholder="">';
|
190
187
|
$chips.html(html);
|
191
188
|
self.setPlaceholder($chips);
|
189
|
+
|
190
|
+
// Set for attribute for label
|
191
|
+
var label = $chips.next('label');
|
192
|
+
if (label.length) {
|
193
|
+
label.attr('for', chipId);
|
194
|
+
|
195
|
+
if ($chips.data('chips').length) {
|
196
|
+
label.addClass('active');
|
197
|
+
}
|
198
|
+
}
|
192
199
|
};
|
193
200
|
|
194
201
|
this.renderChip = function(elem) {
|
@@ -204,11 +211,11 @@
|
|
204
211
|
};
|
205
212
|
|
206
213
|
this.setPlaceholder = function($chips) {
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
} else if (!$chips.data('chips').length &&
|
211
|
-
$chips.find('input').prop('placeholder',
|
214
|
+
if ($chips.data('chips').length && curr_options.placeholder) {
|
215
|
+
$chips.find('input').prop('placeholder', curr_options.placeholder);
|
216
|
+
|
217
|
+
} else if (!$chips.data('chips').length && curr_options.secondaryPlaceholder) {
|
218
|
+
$chips.find('input').prop('placeholder', curr_options.secondaryPlaceholder);
|
212
219
|
}
|
213
220
|
};
|
214
221
|
|
@@ -224,27 +231,42 @@
|
|
224
231
|
return '' !== elem.tag && !exists;
|
225
232
|
};
|
226
233
|
|
227
|
-
this.addChip = function(
|
234
|
+
this.addChip = function(elem, $chips) {
|
228
235
|
if (!self.isValid($chips, elem)) {
|
229
236
|
return;
|
230
237
|
}
|
231
|
-
var options = $chips.data('options');
|
232
238
|
var chipHtml = self.renderChip(elem);
|
233
|
-
|
239
|
+
var newData = [];
|
240
|
+
var oldData = $chips.data('chips');
|
241
|
+
for (var i = 0; i < oldData.length; i++) {
|
242
|
+
newData.push(oldData[i]);
|
243
|
+
}
|
244
|
+
newData.push(elem);
|
245
|
+
|
246
|
+
$chips.data('chips', newData);
|
234
247
|
$(chipHtml).insertBefore($chips.find('input'));
|
235
248
|
$chips.trigger('chip.add', elem);
|
236
249
|
self.setPlaceholder($chips);
|
237
250
|
};
|
238
251
|
|
239
|
-
this.deleteChip = function(
|
252
|
+
this.deleteChip = function(chipIndex, $chips) {
|
240
253
|
var chip = $chips.data('chips')[chipIndex];
|
241
254
|
$chips.find('.chip').eq(chipIndex).remove();
|
242
|
-
|
255
|
+
|
256
|
+
var newData = [];
|
257
|
+
var oldData = $chips.data('chips');
|
258
|
+
for (var i = 0; i < oldData.length; i++) {
|
259
|
+
if (i !== chipIndex) {
|
260
|
+
newData.push(oldData[i]);
|
261
|
+
}
|
262
|
+
}
|
263
|
+
|
264
|
+
$chips.data('chips', newData);
|
243
265
|
$chips.trigger('chip.delete', chip);
|
244
266
|
self.setPlaceholder($chips);
|
245
267
|
};
|
246
268
|
|
247
|
-
this.selectChip = function(
|
269
|
+
this.selectChip = function(chipIndex, $chips) {
|
248
270
|
var $chip = $chips.find('.chip').eq(chipIndex);
|
249
271
|
if ($chip && false === $chip.hasClass('selected')) {
|
250
272
|
$chip.addClass('selected');
|