materialize-sass 0.100.2.1 → 1.0.0.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +18 -42
  3. data/Rakefile +17 -17
  4. data/{app/assets → assets}/javascripts/materialize-sprockets.js +8 -12
  5. data/assets/javascripts/materialize.js +11877 -0
  6. data/assets/javascripts/materialize/autocomplete.js +420 -0
  7. data/assets/javascripts/materialize/buttons.js +388 -0
  8. data/assets/javascripts/materialize/cards.js +28 -0
  9. data/assets/javascripts/materialize/carousel.js +791 -0
  10. data/assets/javascripts/materialize/cash.js +992 -0
  11. data/assets/javascripts/materialize/characterCounter.js +180 -0
  12. data/assets/javascripts/materialize/chips.js +555 -0
  13. data/assets/javascripts/materialize/collapsible.js +275 -0
  14. data/assets/javascripts/materialize/datepicker.js +898 -0
  15. data/assets/javascripts/materialize/dropdown.js +530 -0
  16. data/{app/assets → assets}/javascripts/materialize/extras/nouislider.js +1 -1
  17. data/{app/assets → assets}/javascripts/materialize/extras/nouislider.min.js +1 -1
  18. data/assets/javascripts/materialize/forms.js +223 -0
  19. data/assets/javascripts/materialize/global.js +353 -0
  20. data/assets/javascripts/materialize/materialbox.js +432 -0
  21. data/{app/assets → assets}/javascripts/materialize/modal.js +82 -113
  22. data/assets/javascripts/materialize/parallax.js +135 -0
  23. data/assets/javascripts/materialize/pushpin.js +158 -0
  24. data/assets/javascripts/materialize/range.js +305 -0
  25. data/assets/javascripts/materialize/scrollspy.js +322 -0
  26. data/assets/javascripts/materialize/select.js +426 -0
  27. data/assets/javascripts/materialize/sidenav.js +584 -0
  28. data/assets/javascripts/materialize/slider.js +383 -0
  29. data/assets/javascripts/materialize/tabs.js +460 -0
  30. data/assets/javascripts/materialize/tapTarget.js +347 -0
  31. data/assets/javascripts/materialize/timepicker.js +616 -0
  32. data/{app/assets → assets}/javascripts/materialize/toasts.js +42 -46
  33. data/assets/javascripts/materialize/tooltip.js +325 -0
  34. data/assets/javascripts/materialize/velocity.min.js +782 -0
  35. data/{app/assets → assets}/javascripts/materialize/waves.js +0 -0
  36. data/{app/assets → assets}/stylesheets/materialize.scss +5 -6
  37. data/{app/assets → assets}/stylesheets/materialize/components/_badges.scss +1 -1
  38. data/{app/assets → assets}/stylesheets/materialize/components/_buttons.scss +34 -2
  39. data/{app/assets → assets}/stylesheets/materialize/components/_cards.scss +0 -0
  40. data/{app/assets → assets}/stylesheets/materialize/components/_carousel.scss +1 -1
  41. data/{app/assets → assets}/stylesheets/materialize/components/_chips.scss +6 -5
  42. data/{app/assets → assets}/stylesheets/materialize/components/_collapsible.scss +3 -3
  43. data/{app/assets → assets}/stylesheets/materialize/components/_color.scss +0 -0
  44. data/assets/stylesheets/materialize/components/_datepicker.scss +180 -0
  45. data/{app/assets → assets}/stylesheets/materialize/components/_dropdown.scss +16 -15
  46. data/{app/assets → assets}/stylesheets/materialize/components/_global.scss +49 -14
  47. data/{app/assets → assets}/stylesheets/materialize/components/_grid.scss +1 -1
  48. data/{app/assets → assets}/stylesheets/materialize/components/_icons-material-design.scss +0 -0
  49. data/{app/assets → assets}/stylesheets/materialize/components/_materialbox.scss +0 -0
  50. data/assets/stylesheets/materialize/components/_mixins.scss +5 -0
  51. data/{app/assets → assets}/stylesheets/materialize/components/_modal.scss +1 -1
  52. data/{app/assets → assets}/stylesheets/materialize/components/_navbar.scss +0 -0
  53. data/assets/stylesheets/materialize/components/_normalize.scss +447 -0
  54. data/{app/assets → assets}/stylesheets/materialize/components/_preloader.scss +0 -0
  55. data/{app/assets → assets}/stylesheets/materialize/components/_pulse.scss +0 -0
  56. data/{app/assets/stylesheets/materialize/components/_sideNav.scss → assets/stylesheets/materialize/components/_sidenav.scss} +23 -21
  57. data/{app/assets → assets}/stylesheets/materialize/components/_slider.scss +0 -0
  58. data/{app/assets → assets}/stylesheets/materialize/components/_table_of_contents.scss +3 -3
  59. data/{app/assets → assets}/stylesheets/materialize/components/_tabs.scss +2 -2
  60. data/{app/assets → assets}/stylesheets/materialize/components/_tapTarget.scss +0 -0
  61. data/assets/stylesheets/materialize/components/_timepicker.scss +182 -0
  62. data/{app/assets → assets}/stylesheets/materialize/components/_toast.scss +0 -0
  63. data/{app/assets → assets}/stylesheets/materialize/components/_tooltip.scss +1 -0
  64. data/{app/assets → assets}/stylesheets/materialize/components/_transitions.scss +0 -0
  65. data/{app/assets → assets}/stylesheets/materialize/components/_typography.scss +8 -8
  66. data/{app/assets → assets}/stylesheets/materialize/components/_variables.scss +42 -44
  67. data/{app/assets → assets}/stylesheets/materialize/components/_waves.scss +0 -0
  68. data/{app/assets → assets}/stylesheets/materialize/components/forms/_checkboxes.scss +24 -24
  69. data/{app/assets → assets}/stylesheets/materialize/components/forms/_file-input.scss +0 -0
  70. data/{app/assets → assets}/stylesheets/materialize/components/forms/_forms.scss +0 -0
  71. data/{app/assets → assets}/stylesheets/materialize/components/forms/_input-fields.scss +49 -35
  72. data/{app/assets → assets}/stylesheets/materialize/components/forms/_radio-buttons.scss +29 -29
  73. data/{app/assets → assets}/stylesheets/materialize/components/forms/_range.scss +32 -31
  74. data/{app/assets → assets}/stylesheets/materialize/components/forms/_select.scss +20 -11
  75. data/{app/assets → assets}/stylesheets/materialize/components/forms/_switches.scss +0 -0
  76. data/{app/assets → assets}/stylesheets/materialize/extras/nouislider.css +1 -1
  77. data/lib/materialize-sass.rb +13 -23
  78. data/lib/materialize-sass/engine.rb +6 -9
  79. data/lib/materialize-sass/version.rb +1 -1
  80. data/materialize-sass.gemspec +2 -1
  81. metadata +97 -97
  82. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  83. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  84. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  85. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  86. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  87. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  88. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  89. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  90. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  91. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  92. data/app/assets/javascripts/materialize.js +0 -10021
  93. data/app/assets/javascripts/materialize/animation.js +0 -7
  94. data/app/assets/javascripts/materialize/buttons.js +0 -253
  95. data/app/assets/javascripts/materialize/cards.js +0 -28
  96. data/app/assets/javascripts/materialize/carousel.js +0 -543
  97. data/app/assets/javascripts/materialize/character_counter.js +0 -64
  98. data/app/assets/javascripts/materialize/chips.js +0 -315
  99. data/app/assets/javascripts/materialize/collapsible.js +0 -178
  100. data/app/assets/javascripts/materialize/date_picker/picker.date.js +0 -1399
  101. data/app/assets/javascripts/materialize/date_picker/picker.js +0 -1196
  102. data/app/assets/javascripts/materialize/date_picker/picker.time.js +0 -646
  103. data/app/assets/javascripts/materialize/dropdown.js +0 -257
  104. data/app/assets/javascripts/materialize/forms.js +0 -806
  105. data/app/assets/javascripts/materialize/global.js +0 -170
  106. data/app/assets/javascripts/materialize/hammer.min.js +0 -424
  107. data/app/assets/javascripts/materialize/initial.js +0 -10
  108. data/app/assets/javascripts/materialize/jquery.easing.1.4.js +0 -144
  109. data/app/assets/javascripts/materialize/jquery.hammer.js +0 -33
  110. data/app/assets/javascripts/materialize/materialbox.js +0 -263
  111. data/app/assets/javascripts/materialize/parallax.js +0 -54
  112. data/app/assets/javascripts/materialize/pushpin.js +0 -68
  113. data/app/assets/javascripts/materialize/scrollFire.js +0 -49
  114. data/app/assets/javascripts/materialize/scrollspy.js +0 -230
  115. data/app/assets/javascripts/materialize/sideNav.js +0 -395
  116. data/app/assets/javascripts/materialize/slider.js +0 -295
  117. data/app/assets/javascripts/materialize/tabs.js +0 -244
  118. data/app/assets/javascripts/materialize/tapTarget.js +0 -184
  119. data/app/assets/javascripts/materialize/tooltip.js +0 -227
  120. data/app/assets/javascripts/materialize/transitions.js +0 -163
  121. data/app/assets/javascripts/materialize/velocity.min.js +0 -626
  122. data/app/assets/stylesheets/materialize/components/_normalize.scss +0 -424
  123. data/app/assets/stylesheets/materialize/components/_roboto.scss +0 -39
  124. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +0 -469
  125. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +0 -216
  126. data/app/assets/stylesheets/materialize/components/date_picker/_default.time.scss +0 -267
@@ -0,0 +1,180 @@
1
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2
+
3
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
+
5
+ (function ($) {
6
+ 'use strict';
7
+
8
+ var _defaults = {};
9
+
10
+ /**
11
+ * @class
12
+ *
13
+ */
14
+
15
+ var CharacterCounter = function () {
16
+ /**
17
+ * Construct CharacterCounter instance
18
+ * @constructor
19
+ * @param {Element} el
20
+ * @param {Object} options
21
+ */
22
+ function CharacterCounter(el, options) {
23
+ _classCallCheck(this, CharacterCounter);
24
+
25
+ // If exists, destroy and reinitialize
26
+ if (!!el.M_CharacterCounter) {
27
+ el.M_CharacterCounter.destroy();
28
+ }
29
+
30
+ this.el = el;
31
+ this.$el = $(el);
32
+ this.el.M_CharacterCounter = this;
33
+
34
+ /**
35
+ * Options for the character counter
36
+ */
37
+ this.options = $.extend({}, CharacterCounter.defaults, options);
38
+
39
+ this.isInvalid = false;
40
+ this.isValidLength = false;
41
+ this._setupCounter();
42
+ this._setupEventHandlers();
43
+ }
44
+
45
+ _createClass(CharacterCounter, [{
46
+ key: 'destroy',
47
+
48
+
49
+ /**
50
+ * Teardown component
51
+ */
52
+ value: function destroy() {
53
+ this._removeEventHandlers();
54
+ this.el.CharacterCounter = undefined;
55
+ this._removeCounter();
56
+ }
57
+
58
+ /**
59
+ * Setup Event Handlers
60
+ */
61
+
62
+ }, {
63
+ key: '_setupEventHandlers',
64
+ value: function _setupEventHandlers() {
65
+ this._handleUpdateCounterBound = this.updateCounter.bind(this);
66
+
67
+ this.el.addEventListener('focus', this._handleUpdateCounterBound, true);
68
+ this.el.addEventListener('input', this._handleUpdateCounterBound, true);
69
+ }
70
+
71
+ /**
72
+ * Remove Event Handlers
73
+ */
74
+
75
+ }, {
76
+ key: '_removeEventHandlers',
77
+ value: function _removeEventHandlers() {
78
+ this.el.removeEventListener('focus', this._handleUpdateCounterBound, true);
79
+ this.el.removeEventListener('input', this._handleUpdateCounterBound, true);
80
+ }
81
+
82
+ /**
83
+ * Setup counter element
84
+ */
85
+
86
+ }, {
87
+ key: '_setupCounter',
88
+ value: function _setupCounter() {
89
+ this.counterEl = document.createElement('span');
90
+ $(this.counterEl).addClass('character-counter').css({
91
+ float: 'right',
92
+ 'font-size': '12px',
93
+ height: 1
94
+ });
95
+
96
+ this.$el.parent().append(this.counterEl);
97
+ }
98
+
99
+ /**
100
+ * Remove counter element
101
+ */
102
+
103
+ }, {
104
+ key: '_removeCounter',
105
+ value: function _removeCounter() {
106
+ $(this.counterEl).remove();
107
+ }
108
+
109
+ /**
110
+ * Update counter
111
+ */
112
+
113
+ }, {
114
+ key: 'updateCounter',
115
+ value: function updateCounter() {
116
+ var maxLength = +this.$el.attr('data-length'),
117
+ actualLength = this.el.value.length;
118
+ this.isValidLength = actualLength <= maxLength;
119
+ var counterString = actualLength;
120
+
121
+ if (maxLength) {
122
+ counterString += '/' + maxLength;
123
+ this._validateInput();
124
+ }
125
+
126
+ $(this.counterEl).html(counterString);
127
+ }
128
+
129
+ /**
130
+ * Add validation classes
131
+ */
132
+
133
+ }, {
134
+ key: '_validateInput',
135
+ value: function _validateInput() {
136
+ if (this.isValidLength && this.isInvalid) {
137
+ this.isInvalid = false;
138
+ this.$el.removeClass('invalid');
139
+ } else if (!this.isValidLength && !this.isInvalid) {
140
+ this.isInvalid = true;
141
+ this.$el.removeClass('valid');
142
+ this.$el.addClass('invalid');
143
+ }
144
+ }
145
+ }], [{
146
+ key: 'init',
147
+ value: function init($els, options) {
148
+ var arr = [];
149
+ $els.each(function () {
150
+ arr.push(new CharacterCounter(this, options));
151
+ });
152
+ return arr;
153
+ }
154
+
155
+ /**
156
+ * Get Instance
157
+ */
158
+
159
+ }, {
160
+ key: 'getInstance',
161
+ value: function getInstance(el) {
162
+ var domElem = !!el.jquery ? el[0] : el;
163
+ return domElem.M_CharacterCounter;
164
+ }
165
+ }, {
166
+ key: 'defaults',
167
+ get: function () {
168
+ return _defaults;
169
+ }
170
+ }]);
171
+
172
+ return CharacterCounter;
173
+ }();
174
+
175
+ M.CharacterCounter = CharacterCounter;
176
+
177
+ if (M.jQueryLoaded) {
178
+ M.initializeJqueryWrapper(CharacterCounter, 'characterCounter', 'M_CharacterCounter');
179
+ }
180
+ })(cash);
@@ -0,0 +1,555 @@
1
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2
+
3
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
+
5
+ (function ($, Vel) {
6
+ 'use strict';
7
+
8
+ var _defaults = {
9
+ data: [],
10
+ placeholder: '',
11
+ secondaryPlaceholder: '',
12
+ autocompleteOptions: {},
13
+ limit: Infinity,
14
+ onChipAdd: null,
15
+ onChipSelect: null,
16
+ onChipDelete: null
17
+ };
18
+
19
+ /**
20
+ * @typedef {Object} chip
21
+ * @property {String} tag chip tag string
22
+ * @property {String} [image] chip avatar image string
23
+ */
24
+
25
+ /**
26
+ * @class
27
+ *
28
+ */
29
+
30
+ var Chips = function () {
31
+ /**
32
+ * Construct Chips instance and set up overlay
33
+ * @constructor
34
+ * @param {Element} el
35
+ * @param {Object} options
36
+ */
37
+ function Chips(el, options) {
38
+ _classCallCheck(this, Chips);
39
+
40
+ // If exists, destroy and reinitialize
41
+ if (!!el.M_Chips) {
42
+ el.M_Chips.destroy();
43
+ }
44
+
45
+ this.el = el;
46
+ this.$el = $(el);
47
+ this.el.M_Chips = this;
48
+
49
+ /**
50
+ * Options for the modal
51
+ * @member Chips#options
52
+ * @prop {Array} data
53
+ * @prop {String} placeholder
54
+ * @prop {String} secondaryPlaceholder
55
+ * @prop {Object} autocompleteOptions
56
+ */
57
+ this.options = $.extend({}, Chips.defaults, options);
58
+
59
+ this.$el.addClass('chips input-field');
60
+ this.chipsData = [];
61
+ this.$chips = $();
62
+ this.$input = this.$el.find('input');
63
+ this.$input.addClass('input');
64
+ this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
65
+
66
+ // Set input id
67
+ if (!this.$input.attr('id')) {
68
+ this.$input.attr('id', M.guid());
69
+ }
70
+
71
+ // Render initial chips
72
+ if (this.options.data.length) {
73
+ this.chipsData = this.options.data;
74
+ this._renderChips(this.chipsData);
75
+ }
76
+
77
+ // Setup autocomplete if needed
78
+ if (this.hasAutocomplete) {
79
+ this._setupAutocomplete();
80
+ }
81
+
82
+ this._setPlaceholder();
83
+ this._setupLabel();
84
+ this._setupEventHandlers();
85
+ }
86
+
87
+ _createClass(Chips, [{
88
+ key: 'getData',
89
+
90
+
91
+ /**
92
+ * Get Chips Data
93
+ */
94
+ value: function getData() {
95
+ return this.chipsData;
96
+ }
97
+
98
+ /**
99
+ * Teardown component
100
+ */
101
+
102
+ }, {
103
+ key: 'destroy',
104
+ value: function destroy() {
105
+ this._removeEventHandlers();
106
+ this.$chips.remove();
107
+ this.el.M_Chips = undefined;
108
+ }
109
+
110
+ /**
111
+ * Setup Event Handlers
112
+ */
113
+
114
+ }, {
115
+ key: '_setupEventHandlers',
116
+ value: function _setupEventHandlers() {
117
+ this._handleChipClickBound = this._handleChipClick.bind(this);
118
+ this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
119
+ this._handleInputFocusBound = this._handleInputFocus.bind(this);
120
+ this._handleInputBlurBound = this._handleInputBlur.bind(this);
121
+
122
+ this.el.addEventListener('click', this._handleChipClickBound);
123
+ document.addEventListener('keydown', Chips._handleChipsKeydown);
124
+ document.addEventListener('keyup', Chips._handleChipsKeyup);
125
+ this.el.addEventListener('blur', Chips._handleChipsBlur, true);
126
+ this.$input[0].addEventListener('focus', this._handleInputFocusBound);
127
+ this.$input[0].addEventListener('blur', this._handleInputBlurBound);
128
+ this.$input[0].addEventListener('keydown', this._handleInputKeydownBound);
129
+ }
130
+
131
+ /**
132
+ * Remove Event Handlers
133
+ */
134
+
135
+ }, {
136
+ key: '_removeEventHandlers',
137
+ value: function _removeEventHandlers() {
138
+ this.el.removeEventListener('click', this._handleChipClickBound);
139
+ document.removeEventListener('keydown', Chips._handleChipsKeydown);
140
+ document.removeEventListener('keyup', Chips._handleChipsKeyup);
141
+ this.el.removeEventListener('blur', Chips._handleChipsBlur, true);
142
+ this.$input[0].removeEventListener('focus', this._handleInputFocusBound);
143
+ this.$input[0].removeEventListener('blur', this._handleInputBlurBound);
144
+ this.$input[0].removeEventListener('keydown', this._handleInputKeydownBound);
145
+ }
146
+
147
+ /**
148
+ * Handle Chip Click
149
+ * @param {Event} e
150
+ */
151
+
152
+ }, {
153
+ key: '_handleChipClick',
154
+ value: function _handleChipClick(e) {
155
+ var $chip = $(e.target).closest('.chip');
156
+ var clickedClose = $(e.target).is('.close');
157
+ if ($chip.length) {
158
+ var index = $chip.index();
159
+ if (clickedClose) {
160
+ // delete chip
161
+ this.deleteChip(index);
162
+ this.$input[0].focus();
163
+ } else {
164
+ // select chip
165
+ this.selectChip(index);
166
+ }
167
+
168
+ // Default handle click to focus on input
169
+ } else {
170
+ this.$input[0].focus();
171
+ }
172
+ }
173
+
174
+ /**
175
+ * Handle Chips Keydown
176
+ * @param {Event} e
177
+ */
178
+
179
+ }, {
180
+ key: '_handleInputFocus',
181
+
182
+
183
+ /**
184
+ * Handle Input Focus
185
+ */
186
+ value: function _handleInputFocus() {
187
+ this.$el.addClass('focus');
188
+ }
189
+
190
+ /**
191
+ * Handle Input Blur
192
+ */
193
+
194
+ }, {
195
+ key: '_handleInputBlur',
196
+ value: function _handleInputBlur() {
197
+ this.$el.removeClass('focus');
198
+ }
199
+
200
+ /**
201
+ * Handle Input Keydown
202
+ * @param {Event} e
203
+ */
204
+
205
+ }, {
206
+ key: '_handleInputKeydown',
207
+ value: function _handleInputKeydown(e) {
208
+ Chips._keydown = true;
209
+
210
+ // enter
211
+ if (e.keyCode === 13) {
212
+ // Override enter if autocompleting.
213
+ if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
214
+ return;
215
+ }
216
+
217
+ e.preventDefault();
218
+ this.addChip({ tag: this.$input[0].value });
219
+ this.$input[0].value = '';
220
+
221
+ // delete or left
222
+ } else if ((e.keyCode === 8 || e.keyCode === 37) && this.$input[0].value === '' && this.chipsData.length) {
223
+ e.preventDefault();
224
+ this.selectChip(this.chipsData.length - 1);
225
+ }
226
+ }
227
+
228
+ /**
229
+ * Render Chip
230
+ * @param {chip} chip
231
+ * @return {Element}
232
+ */
233
+
234
+ }, {
235
+ key: '_renderChip',
236
+ value: function _renderChip(chip) {
237
+ if (!chip.tag) {
238
+ return;
239
+ }
240
+
241
+ var renderedChip = document.createElement('div');
242
+ var closeIcon = document.createElement('i');
243
+ renderedChip.classList.add('chip');
244
+ renderedChip.textContent = chip.tag;
245
+ renderedChip.setAttribute('tabindex', 0);
246
+ $(closeIcon).addClass('material-icons close');
247
+ closeIcon.textContent = 'close';
248
+
249
+ // attach image if needed
250
+ if (chip.image) {
251
+ var img = document.createElement('img');
252
+ img.setAttribute('src', chip.image);
253
+ renderedChip.insertBefore(img, renderedChip.firstChild);
254
+ }
255
+
256
+ renderedChip.appendChild(closeIcon);
257
+ return renderedChip;
258
+ }
259
+
260
+ /**
261
+ * Render Chips
262
+ */
263
+
264
+ }, {
265
+ key: '_renderChips',
266
+ value: function _renderChips() {
267
+ this.$chips.remove();
268
+ for (var i = 0; i < this.chipsData.length; i++) {
269
+ var chipEl = this._renderChip(this.chipsData[i]);
270
+ this.$el.append(chipEl);
271
+ this.$chips.add(chipEl);
272
+ }
273
+
274
+ // move input to end
275
+ this.$el.append(this.$input);
276
+ }
277
+
278
+ /**
279
+ * Setup Autocomplete
280
+ */
281
+
282
+ }, {
283
+ key: '_setupAutocomplete',
284
+ value: function _setupAutocomplete() {
285
+ var _this = this;
286
+
287
+ this.options.autocompleteOptions.onAutocomplete = function (val) {
288
+ _this.addChip({ tag: val });
289
+ _this.$input[0].value = '';
290
+ _this.$input[0].focus();
291
+ };
292
+
293
+ this.autocomplete = M.Autocomplete.init(this.$input, this.options.autocompleteOptions)[0];
294
+ }
295
+
296
+ /**
297
+ * Setup Label
298
+ */
299
+
300
+ }, {
301
+ key: '_setupLabel',
302
+ value: function _setupLabel() {
303
+ this.$label = this.$el.find('label');
304
+ if (this.$label.length) {
305
+ this.$label.setAttribute('for', this.$input.attr('id'));
306
+ }
307
+ }
308
+
309
+ /**
310
+ * Set placeholder
311
+ */
312
+
313
+ }, {
314
+ key: '_setPlaceholder',
315
+ value: function _setPlaceholder() {
316
+ if (this.chipsData !== undefined && !this.chipsData.length && this.options.placeholder) {
317
+ $(this.$input).prop('placeholder', this.options.placeholder);
318
+ } else if ((this.chipsData === undefined || !!this.chipsData.length) && this.options.secondaryPlaceholder) {
319
+ $(this.$input).prop('placeholder', this.options.secondaryPlaceholder);
320
+ }
321
+ }
322
+
323
+ /**
324
+ * Check if chip is valid
325
+ * @param {chip} chip
326
+ */
327
+
328
+ }, {
329
+ key: '_isValid',
330
+ value: function _isValid(chip) {
331
+ if (chip.hasOwnProperty('tag') && chip.tag !== '') {
332
+ var exists = false;
333
+ for (var i = 0; i < this.chipsData.length; i++) {
334
+ if (this.chipsData[i].tag === chip.tag) {
335
+ exists = true;
336
+ break;
337
+ }
338
+ }
339
+ return !exists;
340
+ } else {
341
+ return false;
342
+ }
343
+ }
344
+
345
+ /**
346
+ * Add chip
347
+ * @param {chip} chip
348
+ */
349
+
350
+ }, {
351
+ key: 'addChip',
352
+ value: function addChip(chip) {
353
+ if (!this._isValid(chip) || this.chipsData.length >= this.options.limit) {
354
+ return;
355
+ }
356
+
357
+ var renderedChip = this._renderChip(chip);
358
+ this.$chips.add(renderedChip);
359
+ this.chipsData.push(chip);
360
+ $(this.$input).before(renderedChip);
361
+ this._setPlaceholder();
362
+
363
+ // fire chipAdd callback
364
+ if (typeof this.options.onChipAdd === 'function') {
365
+ this.options.onChipAdd.call(this, this.$el, renderedChip);
366
+ }
367
+ }
368
+
369
+ /**
370
+ * Delete chip
371
+ * @param {Number} chip
372
+ */
373
+
374
+ }, {
375
+ key: 'deleteChip',
376
+ value: function deleteChip(chipIndex) {
377
+ // let chip = this.chips[chipIndex];
378
+ this.$chips.eq(chipIndex).remove();
379
+ this.$chips = this.$chips.filter(function (el) {
380
+ return $(el).index() >= 0;
381
+ });
382
+ this.chipsData.splice(chipIndex, 1);
383
+ this._setPlaceholder();
384
+
385
+ // fire chipDelete callback
386
+ if (typeof this.options.onChipDelete === 'function') {
387
+ this.options.onChipDelete.call(this, this.$el, this.$chip);
388
+ }
389
+ }
390
+
391
+ /**
392
+ * Select chip
393
+ * @param {Number} chip
394
+ */
395
+
396
+ }, {
397
+ key: 'selectChip',
398
+ value: function selectChip(chipIndex) {
399
+ var $chip = this.$chips.eq(chipIndex);
400
+ this._selectedChip = $chip;
401
+ $chip[0].focus();
402
+
403
+ // fire chipSelect callback
404
+ if (typeof this.options.onChipSelect === 'function') {
405
+ this.options.onChipSelect.call(this, this.$el, this.$chip);
406
+ }
407
+ }
408
+
409
+ /**
410
+ * Deselect chip
411
+ * @param {Number} chip
412
+ */
413
+
414
+ }, {
415
+ key: 'deselectChip',
416
+ value: function deselectChip(chipIndex) {
417
+ var $chip = this.$chips.eq(chipIndex);
418
+ this._selectedChip = null;
419
+ }
420
+ }], [{
421
+ key: 'init',
422
+ value: function init($els, options) {
423
+ var arr = [];
424
+ $els.each(function () {
425
+ arr.push(new Chips(this, options));
426
+ });
427
+ return arr;
428
+ }
429
+
430
+ /**
431
+ * Get Instance
432
+ */
433
+
434
+ }, {
435
+ key: 'getInstance',
436
+ value: function getInstance(el) {
437
+ var domElem = !!el.jquery ? el[0] : el;
438
+ return domElem.M_Chips;
439
+ }
440
+ }, {
441
+ key: '_handleChipsKeydown',
442
+ value: function _handleChipsKeydown(e) {
443
+ Chips._keydown = true;
444
+
445
+ var $chips = $(e.target).closest('.chips');
446
+ var chipsKeydown = e.target && $chips.length;
447
+
448
+ // Don't handle keydown inputs on input and textarea
449
+ if ($(e.target).is('input, textarea') || !chipsKeydown) {
450
+ return;
451
+ }
452
+
453
+ var currChips = $chips[0].M_Chips;
454
+
455
+ // backspace and delete
456
+ if (e.keyCode === 8 || e.keyCode === 46) {
457
+ e.preventDefault();
458
+
459
+ var selectIndex = currChips.chipsData.length;
460
+ if (currChips._selectedChip) {
461
+ var index = currChips._selectedChip.index();
462
+ currChips.deleteChip(index);
463
+ currChips._selectedChip = null;
464
+ selectIndex = index - 1;
465
+ }
466
+
467
+ if (currChips.chipsData.length) {
468
+ currChips.selectChip(selectIndex);
469
+ }
470
+
471
+ // left arrow key
472
+ } else if (e.keyCode === 37) {
473
+ if (currChips._selectedChip) {
474
+ var _selectIndex = currChips._selectedChip.index() - 1;
475
+ if (_selectIndex < 0) {
476
+ return;
477
+ }
478
+ currChips.selectChip(_selectIndex);
479
+ }
480
+
481
+ // right arrow key
482
+ } else if (e.keyCode === 39) {
483
+ if (currChips._selectedChip) {
484
+ var _selectIndex2 = currChips._selectedChip.index() + 1;
485
+
486
+ if (_selectIndex2 >= currChips.chipsData.length) {
487
+ currChips.$input[0].focus();
488
+ } else {
489
+ currChips.selectChip(_selectIndex2);
490
+ }
491
+ }
492
+ }
493
+ }
494
+
495
+ /**
496
+ * Handle Chips Keyup
497
+ * @param {Event} e
498
+ */
499
+
500
+ }, {
501
+ key: '_handleChipsKeyup',
502
+ value: function _handleChipsKeyup(e) {
503
+ Chips._keydown = false;
504
+ }
505
+
506
+ /**
507
+ * Handle Chips Blur
508
+ * @param {Event} e
509
+ */
510
+
511
+ }, {
512
+ key: '_handleChipsBlur',
513
+ value: function _handleChipsBlur(e) {
514
+ if (!Chips._keydown) {
515
+ var $chips = $(e.target).closest('.chips');
516
+ var currChips = $chips[0].M_Chips;
517
+
518
+ currChips._selectedChip = null;
519
+ }
520
+ }
521
+ }, {
522
+ key: 'defaults',
523
+ get: function () {
524
+ return _defaults;
525
+ }
526
+ }]);
527
+
528
+ return Chips;
529
+ }();
530
+
531
+ /**
532
+ * @static
533
+ * @memberof Chips
534
+ */
535
+
536
+
537
+ Chips._keydown = false;
538
+
539
+ M.Chips = Chips;
540
+
541
+ if (M.jQueryLoaded) {
542
+ M.initializeJqueryWrapper(Chips, 'chips', 'M_Chips');
543
+ }
544
+
545
+ $(document).on('ready turbolinks:load', function () {
546
+ // Handle removal of static chips.
547
+ $(document.body).on('click', '.chip .close', function () {
548
+ var $chips = $(this).closest('.chips');
549
+ if ($chips.length && $chips[0].M_Chips) {
550
+ return;
551
+ }
552
+ $(this).closest('.chip').remove();
553
+ });
554
+ });
555
+ })(cash);