mtl 1.0.3 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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');
|