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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +1 -1
  3. data/app/assets/javascripts/mtl.js +1 -1
  4. data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
  5. data/app/assets/javascripts/mtl/modal.coffee +6 -11
  6. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
  7. data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
  8. data/lib/mtl/version.rb +3 -2
  9. data/package.json +1 -1
  10. data/vendor/assets/javascripts/materialize/buttons.js +181 -5
  11. data/vendor/assets/javascripts/materialize/carousel.js +1 -1
  12. data/vendor/assets/javascripts/materialize/chips.js +75 -53
  13. data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
  14. data/vendor/assets/javascripts/materialize/forms.js +3 -2
  15. data/vendor/assets/javascripts/materialize/global.js +56 -3
  16. data/vendor/assets/javascripts/materialize/init.js +3 -2
  17. data/vendor/assets/javascripts/materialize/modal.js +184 -0
  18. data/vendor/assets/javascripts/materialize/parallax.js +2 -2
  19. data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
  20. data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
  21. data/vendor/assets/javascripts/materialize/tabs.js +30 -14
  22. data/vendor/assets/javascripts/materialize/toasts.js +29 -28
  23. data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
  24. data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
  25. data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
  26. data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
  27. data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
  28. data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
  29. data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
  30. data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
  31. data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
  32. data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
  33. data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
  34. data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
  35. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
  36. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
  37. data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
  38. metadata +3 -3
  39. data/vendor/assets/javascripts/materialize/leanModal.js +0 -192
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 4dc441000080bcf25ab6100aa8c9b90d7e3f7757
4
- data.tar.gz: ff95abadcccab9596fdf8c4a1f49f9d279a4f6bd
3
+ metadata.gz: 08081cb22a5be14a4c4414c87e810b81ef1e6583
4
+ data.tar.gz: 20c8e64b6ef82f5e99497509e52d1c9b6ad2102d
5
5
  SHA512:
6
- metadata.gz: 1411a73aad207b27e030de39222445fff380e8ec18a43d0e6b5f4f04c5affe5916f9f2d7362dc9bdeb8edaf4e8093e08e571932cca56acd2db7a0bd9ab32abe9
7
- data.tar.gz: c2d3f10ec312f4bb65096602bd27bca814f240c31ed76ec84ae31827893868cb9cb8c6bf19bc7b3a8c8b1a2f36e00bca5cd81419dbe576cbf5ae0ced737a2c88
6
+ metadata.gz: 2e1758ed56f6ed803ee82fed48b5a4c456dab5c643289e3abc3fbb4098f32109983c663b40d70d6d17390b97a0a54fec6f7ce7d4ab3aea1276337769f35c642e
7
+ data.tar.gz: 922222e382812a4274e2040619c4c91676537b1e1b5bb9d2793767187f8964d5d2879bd9246c5747b35e2844039408ea9cb33b1c52b551597c53430d9b3616a1
data/Gemfile CHANGED
@@ -4,6 +4,6 @@ source 'https://rubygems.org'
4
4
  gemspec
5
5
 
6
6
  # Linters
7
+ gem 'coffeelint', require: false
7
8
  gem 'rubocop', require: false
8
9
  gem 'scss_lint', require: false
9
- gem 'coffeelint', require: false
@@ -9,7 +9,7 @@
9
9
 
10
10
  //=require "materialize/collapsible"
11
11
  //=require "materialize/dropdown"
12
- //=require "materialize/leanModal"
12
+ //=require "materialize/modal"
13
13
  //=require "materialize/materialbox"
14
14
  //=require "materialize/parallax"
15
15
  //=require "materialize/tabs"
@@ -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').closeModal()
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)
@@ -5,7 +5,6 @@
5
5
 
6
6
  .dropdown-content li > a > .material-icons {
7
7
  float: left;
8
- width: auto;
9
8
  color: lighten($dropdown-color, 30%);
10
9
  font-size: 1.4rem;
11
10
  margin-right: 8px;
@@ -1,8 +1,18 @@
1
1
  // scss-lint:disable QualifyingElement SelectorFormat
2
2
 
3
- // caret fix
4
- .select-wrapper span.caret {
5
- color: inherit;
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
@@ -1,6 +1,7 @@
1
1
  module Mtl
2
- VERSION = '1.0.3'.freeze
3
- MATERIALIZE_VERSION = '0.97.7'.freeze
2
+ VERSION = '1.1.0'.freeze
3
+ MATERIALIZE_VERSION = '0.97.8'.freeze
4
4
  ICONS_VERSION = '2.2.3'.freeze
5
5
  LODASH_VERSION = '4.14.1'.freeze
6
+ PDFOBJECT_VERSION = '2.0.201604172'.freeze
6
7
  end
data/package.json CHANGED
@@ -6,6 +6,6 @@
6
6
  "pdfobject": "2.0",
7
7
  "lodash": "4.14.1",
8
8
  "material-design-icons": "2.2.3",
9
- "materialize-css": "https://github.com/Dogfalo/materialize.git#171a9ef"
9
+ "materialize-css": "https://github.com/Dogfalo/materialize.git#fda1e45"
10
10
  }
11
11
  }
@@ -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.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) {
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(function(){
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.data('initialized')) {
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
- if ('options' === options) {
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
- if ($chips.data('initialized')) {
49
- // Prevent double initialization.
50
- return;
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', options.data);
57
- $chips.data('index', i);
58
- $chips.data('initialized', true);
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(chipsIndex, index, $chips);
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(chipsIndex, selectIndex, $chips);
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($chips.data('index'), index, $chips);
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($chips.data('index'), index, $chips);
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).addClass('focus');
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).removeClass('focus');
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(chipsIndex, {tag: $target.val()}, $chips);
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(chipsIndex, chipsLength - 1, $chips);
164
+ self.selectChip(chipsLength - 1, $chips);
164
165
  $target.blur();
165
166
  return;
166
167
  }
167
168
  });
168
169
 
169
- self.$document.on('click', SELS.CHIPS + ' ' + SELS.DELETE, function(e) {
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
- var options = $chips.data('options');
208
- if ($chips.data('chips').length && options.placeholder) {
209
- $chips.find('input').prop('placeholder', options.placeholder);
210
- } else if (!$chips.data('chips').length && options.secondaryPlaceholder) {
211
- $chips.find('input').prop('placeholder', options.secondaryPlaceholder);
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(chipsIndex, elem, $chips) {
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
- $chips.data('chips').push(elem);
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(chipsIndex, chipIndex, $chips) {
252
+ this.deleteChip = function(chipIndex, $chips) {
240
253
  var chip = $chips.data('chips')[chipIndex];
241
254
  $chips.find('.chip').eq(chipIndex).remove();
242
- $chips.data('chips').splice(chipIndex, 1);
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(chipsIndex, chipIndex, $chips) {
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');