materialize-sass 0.97.8 → 1.0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (150) hide show
  1. checksums.yaml +5 -5
  2. data/.gitattributes +1 -0
  3. data/.gitignore +1 -0
  4. data/README.md +34 -32
  5. data/Rakefile +38 -21
  6. data/assets/javascripts/materialize/anime.min.js +417 -0
  7. data/assets/javascripts/materialize/autocomplete.js +504 -0
  8. data/assets/javascripts/materialize/buttons.js +409 -0
  9. data/assets/javascripts/materialize/cards.js +34 -0
  10. data/assets/javascripts/materialize/carousel.js +797 -0
  11. data/assets/javascripts/materialize/cash.js +990 -0
  12. data/assets/javascripts/materialize/characterCounter.js +180 -0
  13. data/assets/javascripts/materialize/chips.js +564 -0
  14. data/assets/javascripts/materialize/collapsible.js +337 -0
  15. data/assets/javascripts/materialize/component.js +57 -0
  16. data/assets/javascripts/materialize/datepicker.js +935 -0
  17. data/assets/javascripts/materialize/dropdown.js +659 -0
  18. data/assets/javascripts/materialize/extras/nouislider.js +2147 -0
  19. data/assets/javascripts/materialize/extras/nouislider.min.js +1 -0
  20. data/assets/javascripts/materialize/forms.js +244 -0
  21. data/assets/javascripts/materialize/global.js +408 -0
  22. data/assets/javascripts/materialize/materialbox.js +513 -0
  23. data/assets/javascripts/materialize/modal.js +449 -0
  24. data/assets/javascripts/materialize/parallax.js +173 -0
  25. data/assets/javascripts/materialize/pushpin.js +179 -0
  26. data/assets/javascripts/materialize/range.js +310 -0
  27. data/assets/javascripts/materialize/scrollspy.js +328 -0
  28. data/assets/javascripts/materialize/select.js +497 -0
  29. data/assets/javascripts/materialize/sidenav.js +655 -0
  30. data/assets/javascripts/materialize/slider.js +424 -0
  31. data/assets/javascripts/materialize/tabs.js +476 -0
  32. data/assets/javascripts/materialize/tapTarget.js +364 -0
  33. data/assets/javascripts/materialize/timepicker.js +647 -0
  34. data/assets/javascripts/materialize/toasts.js +355 -0
  35. data/assets/javascripts/materialize/tooltip.js +351 -0
  36. data/{app/assets → assets}/javascripts/materialize/waves.js +42 -47
  37. data/{app/assets → assets}/javascripts/materialize-sprockets.js +12 -13
  38. data/assets/javascripts/materialize.js +12374 -0
  39. data/assets/stylesheets/materialize/components/_badges.scss +55 -0
  40. data/{app/assets → assets}/stylesheets/materialize/components/_buttons.scss +99 -58
  41. data/{app/assets → assets}/stylesheets/materialize/components/_cards.scss +14 -6
  42. data/{app/assets → assets}/stylesheets/materialize/components/_carousel.scss +12 -7
  43. data/{app/assets → assets}/stylesheets/materialize/components/_chips.scss +13 -6
  44. data/{app/assets → assets}/stylesheets/materialize/components/_collapsible.scss +16 -15
  45. data/assets/stylesheets/materialize/components/_color-classes.scss +32 -0
  46. data/{app/assets/stylesheets/materialize/components/_color.scss → assets/stylesheets/materialize/components/_color-variables.scss} +2 -44
  47. data/assets/stylesheets/materialize/components/_datepicker.scss +191 -0
  48. data/{app/assets → assets}/stylesheets/materialize/components/_dropdown.scss +35 -15
  49. data/{app/assets → assets}/stylesheets/materialize/components/_global.scss +96 -125
  50. data/{app/assets → assets}/stylesheets/materialize/components/_grid.scss +45 -36
  51. data/{app/assets → assets}/stylesheets/materialize/components/_icons-material-design.scss +0 -0
  52. data/{app/assets → assets}/stylesheets/materialize/components/_materialbox.scss +13 -12
  53. data/{app/assets → assets}/stylesheets/materialize/components/_modal.scss +7 -3
  54. data/{app/assets → assets}/stylesheets/materialize/components/_navbar.scss +29 -11
  55. data/assets/stylesheets/materialize/components/_normalize.scss +447 -0
  56. data/{app/assets → assets}/stylesheets/materialize/components/_preloader.scss +2 -2
  57. data/assets/stylesheets/materialize/components/_pulse.scss +34 -0
  58. data/{app/assets/stylesheets/materialize/components/_sideNav.scss → assets/stylesheets/materialize/components/_sidenav.scss} +47 -47
  59. data/{app/assets → assets}/stylesheets/materialize/components/_slider.scss +0 -0
  60. data/{app/assets → assets}/stylesheets/materialize/components/_table_of_contents.scss +5 -5
  61. data/{app/assets → assets}/stylesheets/materialize/components/_tabs.scss +10 -10
  62. data/assets/stylesheets/materialize/components/_tapTarget.scss +103 -0
  63. data/assets/stylesheets/materialize/components/_timepicker.scss +183 -0
  64. data/{app/assets → assets}/stylesheets/materialize/components/_toast.scss +7 -14
  65. data/{app/assets → assets}/stylesheets/materialize/components/_tooltip.scss +3 -3
  66. data/assets/stylesheets/materialize/components/_transitions.scss +13 -0
  67. data/{app/assets → assets}/stylesheets/materialize/components/_typography.scss +8 -9
  68. data/{app/assets → assets}/stylesheets/materialize/components/_variables.scss +65 -29
  69. data/assets/stylesheets/materialize/components/_waves.scss +114 -0
  70. data/{app/assets → assets}/stylesheets/materialize/components/forms/_checkboxes.scss +26 -46
  71. data/{app/assets → assets}/stylesheets/materialize/components/forms/_file-input.scss +6 -0
  72. data/{app/assets → assets}/stylesheets/materialize/components/forms/_forms.scss +0 -0
  73. data/{app/assets → assets}/stylesheets/materialize/components/forms/_input-fields.scss +131 -63
  74. data/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +115 -0
  75. data/{app/assets → assets}/stylesheets/materialize/components/forms/_range.scss +35 -33
  76. data/{app/assets → assets}/stylesheets/materialize/components/forms/_select.scss +88 -19
  77. data/{app/assets → assets}/stylesheets/materialize/components/forms/_switches.scss +32 -21
  78. data/assets/stylesheets/materialize/extras/nouislider.css +406 -0
  79. data/{app/assets → assets}/stylesheets/materialize.scss +10 -9
  80. data/lib/materialize-sass/engine.rb +9 -7
  81. data/lib/materialize-sass/helpers.rb +38 -0
  82. data/lib/materialize-sass/version.rb +1 -1
  83. data/lib/materialize-sass.rb +13 -28
  84. data/materialize-sass.gemspec +5 -5
  85. metadata +97 -119
  86. data/app/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  87. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  88. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  89. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  90. data/app/assets/fonts/roboto/Roboto-Light.eot +0 -0
  91. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  92. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  93. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  94. data/app/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  95. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  96. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  97. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  98. data/app/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  99. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  100. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  101. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  102. data/app/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  103. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  104. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  105. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  106. data/app/assets/javascripts/materialize/animation.js +0 -9
  107. data/app/assets/javascripts/materialize/buttons.js +0 -267
  108. data/app/assets/javascripts/materialize/cards.js +0 -26
  109. data/app/assets/javascripts/materialize/carousel.js +0 -454
  110. data/app/assets/javascripts/materialize/character_counter.js +0 -72
  111. data/app/assets/javascripts/materialize/chips.js +0 -289
  112. data/app/assets/javascripts/materialize/collapsible.js +0 -160
  113. data/app/assets/javascripts/materialize/date_picker/picker.date.js +0 -1430
  114. data/app/assets/javascripts/materialize/date_picker/picker.js +0 -1123
  115. data/app/assets/javascripts/materialize/dropdown.js +0 -265
  116. data/app/assets/javascripts/materialize/extras/nouislider.js +0 -1666
  117. data/app/assets/javascripts/materialize/extras/nouislider.min.js +0 -1
  118. data/app/assets/javascripts/materialize/forms.js +0 -682
  119. data/app/assets/javascripts/materialize/global.js +0 -98
  120. data/app/assets/javascripts/materialize/hammer.min.js +0 -1
  121. data/app/assets/javascripts/materialize/init.js +0 -174
  122. data/app/assets/javascripts/materialize/initial.js +0 -11
  123. data/app/assets/javascripts/materialize/jquery.easing.1.3.js +0 -205
  124. data/app/assets/javascripts/materialize/jquery.hammer.js +0 -33
  125. data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  126. data/app/assets/javascripts/materialize/materialbox.js +0 -269
  127. data/app/assets/javascripts/materialize/modal.js +0 -184
  128. data/app/assets/javascripts/materialize/parallax.js +0 -58
  129. data/app/assets/javascripts/materialize/prism.js +0 -8
  130. data/app/assets/javascripts/materialize/pushpin.js +0 -71
  131. data/app/assets/javascripts/materialize/scrollFire.js +0 -48
  132. data/app/assets/javascripts/materialize/scrollspy.js +0 -284
  133. data/app/assets/javascripts/materialize/sideNav.js +0 -370
  134. data/app/assets/javascripts/materialize/slider.js +0 -321
  135. data/app/assets/javascripts/materialize/tabs.js +0 -164
  136. data/app/assets/javascripts/materialize/toasts.js +0 -137
  137. data/app/assets/javascripts/materialize/tooltip.js +0 -236
  138. data/app/assets/javascripts/materialize/transitions.js +0 -169
  139. data/app/assets/javascripts/materialize/velocity.min.js +0 -5
  140. data/app/assets/javascripts/materialize.js +0 -5
  141. data/app/assets/stylesheets/materialize/components/_mixins.scss +0 -5
  142. data/app/assets/stylesheets/materialize/components/_normalize.scss +0 -424
  143. data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -384
  144. data/app/assets/stylesheets/materialize/components/_roboto.scss +0 -49
  145. data/app/assets/stylesheets/materialize/components/_waves.scss +0 -177
  146. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +0 -435
  147. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +0 -201
  148. data/app/assets/stylesheets/materialize/components/date_picker/_default.time.scss +0 -125
  149. data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +0 -117
  150. data/app/assets/stylesheets/materialize/extras/nouislider.css +0 -259
@@ -0,0 +1,655 @@
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
+ var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
4
+
5
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
+
7
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
8
+
9
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
10
+
11
+ (function ($, anim) {
12
+ 'use strict';
13
+
14
+ var _defaults = {
15
+ edge: 'left',
16
+ draggable: true,
17
+ inDuration: 250,
18
+ outDuration: 200,
19
+ onOpenStart: null,
20
+ onOpenEnd: null,
21
+ onCloseStart: null,
22
+ onCloseEnd: null,
23
+ preventScrolling: true
24
+ };
25
+
26
+ /**
27
+ * @class
28
+ */
29
+
30
+ var Sidenav = function (_Component) {
31
+ _inherits(Sidenav, _Component);
32
+
33
+ /**
34
+ * Construct Sidenav instance and set up overlay
35
+ * @constructor
36
+ * @param {Element} el
37
+ * @param {Object} options
38
+ */
39
+ function Sidenav(el, options) {
40
+ _classCallCheck(this, Sidenav);
41
+
42
+ var _this = _possibleConstructorReturn(this, (Sidenav.__proto__ || Object.getPrototypeOf(Sidenav)).call(this, Sidenav, el, options));
43
+
44
+ _this.el.M_Sidenav = _this;
45
+ _this.id = _this.$el.attr('id');
46
+
47
+ /**
48
+ * Options for the Sidenav
49
+ * @member Sidenav#options
50
+ * @prop {String} [edge='left'] - Side of screen on which Sidenav appears
51
+ * @prop {Boolean} [draggable=true] - Allow swipe gestures to open/close Sidenav
52
+ * @prop {Number} [inDuration=250] - Length in ms of enter transition
53
+ * @prop {Number} [outDuration=200] - Length in ms of exit transition
54
+ * @prop {Function} onOpenStart - Function called when sidenav starts entering
55
+ * @prop {Function} onOpenEnd - Function called when sidenav finishes entering
56
+ * @prop {Function} onCloseStart - Function called when sidenav starts exiting
57
+ * @prop {Function} onCloseEnd - Function called when sidenav finishes exiting
58
+ */
59
+ _this.options = $.extend({}, Sidenav.defaults, options);
60
+
61
+ /**
62
+ * Describes open/close state of Sidenav
63
+ * @type {Boolean}
64
+ */
65
+ _this.isOpen = false;
66
+
67
+ /**
68
+ * Describes if Sidenav is fixed
69
+ * @type {Boolean}
70
+ */
71
+ _this.isFixed = _this.el.classList.contains('sidenav-fixed');
72
+
73
+ /**
74
+ * Describes if Sidenav is being draggeed
75
+ * @type {Boolean}
76
+ */
77
+ _this.isDragged = false;
78
+
79
+ // Window size variables for window resize checks
80
+ _this.lastWindowWidth = window.innerWidth;
81
+ _this.lastWindowHeight = window.innerHeight;
82
+
83
+ _this._createOverlay();
84
+ _this._createDragTarget();
85
+ _this._setupEventHandlers();
86
+ _this._setupClasses();
87
+ _this._setupFixed();
88
+
89
+ Sidenav._sidenavs.push(_this);
90
+ return _this;
91
+ }
92
+
93
+ _createClass(Sidenav, [{
94
+ key: 'destroy',
95
+
96
+
97
+ /**
98
+ * Teardown component
99
+ */
100
+ value: function destroy() {
101
+ this._removeEventHandlers();
102
+ this._enableBodyScrolling();
103
+ this._overlay.parentNode.removeChild(this._overlay);
104
+ this.dragTarget.parentNode.removeChild(this.dragTarget);
105
+ this.el.M_Sidenav = undefined;
106
+ this.el.style.transform = '';
107
+
108
+ var index = Sidenav._sidenavs.indexOf(this);
109
+ if (index >= 0) {
110
+ Sidenav._sidenavs.splice(index, 1);
111
+ }
112
+ }
113
+ }, {
114
+ key: '_createOverlay',
115
+ value: function _createOverlay() {
116
+ var overlay = document.createElement('div');
117
+ this._closeBound = this.close.bind(this);
118
+ overlay.classList.add('sidenav-overlay');
119
+
120
+ overlay.addEventListener('click', this._closeBound);
121
+
122
+ document.body.appendChild(overlay);
123
+ this._overlay = overlay;
124
+ }
125
+ }, {
126
+ key: '_setupEventHandlers',
127
+ value: function _setupEventHandlers() {
128
+ if (Sidenav._sidenavs.length === 0) {
129
+ document.body.addEventListener('click', this._handleTriggerClick);
130
+ }
131
+
132
+ this._handleDragTargetDragBound = this._handleDragTargetDrag.bind(this);
133
+ this._handleDragTargetReleaseBound = this._handleDragTargetRelease.bind(this);
134
+ this._handleCloseDragBound = this._handleCloseDrag.bind(this);
135
+ this._handleCloseReleaseBound = this._handleCloseRelease.bind(this);
136
+ this._handleCloseTriggerClickBound = this._handleCloseTriggerClick.bind(this);
137
+
138
+ this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound);
139
+ this.dragTarget.addEventListener('touchend', this._handleDragTargetReleaseBound);
140
+ this._overlay.addEventListener('touchmove', this._handleCloseDragBound);
141
+ this._overlay.addEventListener('touchend', this._handleCloseReleaseBound);
142
+ this.el.addEventListener('touchmove', this._handleCloseDragBound);
143
+ this.el.addEventListener('touchend', this._handleCloseReleaseBound);
144
+ this.el.addEventListener('click', this._handleCloseTriggerClickBound);
145
+
146
+ // Add resize for side nav fixed
147
+ if (this.isFixed) {
148
+ this._handleWindowResizeBound = this._handleWindowResize.bind(this);
149
+ window.addEventListener('resize', this._handleWindowResizeBound);
150
+ }
151
+ }
152
+ }, {
153
+ key: '_removeEventHandlers',
154
+ value: function _removeEventHandlers() {
155
+ if (Sidenav._sidenavs.length === 1) {
156
+ document.body.removeEventListener('click', this._handleTriggerClick);
157
+ }
158
+
159
+ this.dragTarget.removeEventListener('touchmove', this._handleDragTargetDragBound);
160
+ this.dragTarget.removeEventListener('touchend', this._handleDragTargetReleaseBound);
161
+ this._overlay.removeEventListener('touchmove', this._handleCloseDragBound);
162
+ this._overlay.removeEventListener('touchend', this._handleCloseReleaseBound);
163
+ this.el.removeEventListener('touchmove', this._handleCloseDragBound);
164
+ this.el.removeEventListener('touchend', this._handleCloseReleaseBound);
165
+ this.el.removeEventListener('click', this._handleCloseTriggerClickBound);
166
+
167
+ // Remove resize for side nav fixed
168
+ if (this.isFixed) {
169
+ window.removeEventListener('resize', this._handleWindowResizeBound);
170
+ }
171
+ }
172
+
173
+ /**
174
+ * Handle Trigger Click
175
+ * @param {Event} e
176
+ */
177
+
178
+ }, {
179
+ key: '_handleTriggerClick',
180
+ value: function _handleTriggerClick(e) {
181
+ var $trigger = $(e.target).closest('.sidenav-trigger');
182
+ if (e.target && $trigger.length) {
183
+ var sidenavId = M.getIdFromTrigger($trigger[0]);
184
+
185
+ var sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
186
+ if (sidenavInstance) {
187
+ sidenavInstance.open($trigger);
188
+ }
189
+ e.preventDefault();
190
+ }
191
+ }
192
+
193
+ /**
194
+ * Set variables needed at the beggining of drag
195
+ * and stop any current transition.
196
+ * @param {Event} e
197
+ */
198
+
199
+ }, {
200
+ key: '_startDrag',
201
+ value: function _startDrag(e) {
202
+ var clientX = e.targetTouches[0].clientX;
203
+ this.isDragged = true;
204
+ this._startingXpos = clientX;
205
+ this._xPos = this._startingXpos;
206
+ this._time = Date.now();
207
+ this._width = this.el.getBoundingClientRect().width;
208
+ this._overlay.style.display = 'block';
209
+ this._initialScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
210
+ this._verticallyScrolling = false;
211
+ anim.remove(this.el);
212
+ anim.remove(this._overlay);
213
+ }
214
+
215
+ /**
216
+ * Set variables needed at each drag move update tick
217
+ * @param {Event} e
218
+ */
219
+
220
+ }, {
221
+ key: '_dragMoveUpdate',
222
+ value: function _dragMoveUpdate(e) {
223
+ var clientX = e.targetTouches[0].clientX;
224
+ var currentScrollTop = this.isOpen ? this.el.scrollTop : M.getDocumentScrollTop();
225
+ this.deltaX = Math.abs(this._xPos - clientX);
226
+ this._xPos = clientX;
227
+ this.velocityX = this.deltaX / (Date.now() - this._time);
228
+ this._time = Date.now();
229
+ if (this._initialScrollTop !== currentScrollTop) {
230
+ this._verticallyScrolling = true;
231
+ }
232
+ }
233
+
234
+ /**
235
+ * Handles Dragging of Sidenav
236
+ * @param {Event} e
237
+ */
238
+
239
+ }, {
240
+ key: '_handleDragTargetDrag',
241
+ value: function _handleDragTargetDrag(e) {
242
+ // Check if draggable
243
+ if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
244
+ return;
245
+ }
246
+
247
+ // If not being dragged, set initial drag start variables
248
+ if (!this.isDragged) {
249
+ this._startDrag(e);
250
+ }
251
+
252
+ // Run touchmove updates
253
+ this._dragMoveUpdate(e);
254
+
255
+ // Calculate raw deltaX
256
+ var totalDeltaX = this._xPos - this._startingXpos;
257
+
258
+ // dragDirection is the attempted user drag direction
259
+ var dragDirection = totalDeltaX > 0 ? 'right' : 'left';
260
+
261
+ // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
262
+ totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
263
+ if (this.options.edge === dragDirection) {
264
+ totalDeltaX = 0;
265
+ }
266
+
267
+ /**
268
+ * transformX is the drag displacement
269
+ * transformPrefix is the initial transform placement
270
+ * Invert values if Sidenav is right edge
271
+ */
272
+ var transformX = totalDeltaX;
273
+ var transformPrefix = 'translateX(-100%)';
274
+ if (this.options.edge === 'right') {
275
+ transformPrefix = 'translateX(100%)';
276
+ transformX = -transformX;
277
+ }
278
+
279
+ // Calculate open/close percentage of sidenav, with open = 1 and close = 0
280
+ this.percentOpen = Math.min(1, totalDeltaX / this._width);
281
+
282
+ // Set transform and opacity styles
283
+ this.el.style.transform = transformPrefix + ' translateX(' + transformX + 'px)';
284
+ this._overlay.style.opacity = this.percentOpen;
285
+ }
286
+
287
+ /**
288
+ * Handle Drag Target Release
289
+ */
290
+
291
+ }, {
292
+ key: '_handleDragTargetRelease',
293
+ value: function _handleDragTargetRelease() {
294
+ if (this.isDragged) {
295
+ if (this.percentOpen > 0.2) {
296
+ this.open();
297
+ } else {
298
+ this._animateOut();
299
+ }
300
+
301
+ this.isDragged = false;
302
+ this._verticallyScrolling = false;
303
+ }
304
+ }
305
+
306
+ /**
307
+ * Handle Close Drag
308
+ * @param {Event} e
309
+ */
310
+
311
+ }, {
312
+ key: '_handleCloseDrag',
313
+ value: function _handleCloseDrag(e) {
314
+ if (this.isOpen) {
315
+ // Check if draggable
316
+ if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
317
+ return;
318
+ }
319
+
320
+ // If not being dragged, set initial drag start variables
321
+ if (!this.isDragged) {
322
+ this._startDrag(e);
323
+ }
324
+
325
+ // Run touchmove updates
326
+ this._dragMoveUpdate(e);
327
+
328
+ // Calculate raw deltaX
329
+ var totalDeltaX = this._xPos - this._startingXpos;
330
+
331
+ // dragDirection is the attempted user drag direction
332
+ var dragDirection = totalDeltaX > 0 ? 'right' : 'left';
333
+
334
+ // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
335
+ totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
336
+ if (this.options.edge !== dragDirection) {
337
+ totalDeltaX = 0;
338
+ }
339
+
340
+ var transformX = -totalDeltaX;
341
+ if (this.options.edge === 'right') {
342
+ transformX = -transformX;
343
+ }
344
+
345
+ // Calculate open/close percentage of sidenav, with open = 1 and close = 0
346
+ this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
347
+
348
+ // Set transform and opacity styles
349
+ this.el.style.transform = 'translateX(' + transformX + 'px)';
350
+ this._overlay.style.opacity = this.percentOpen;
351
+ }
352
+ }
353
+
354
+ /**
355
+ * Handle Close Release
356
+ */
357
+
358
+ }, {
359
+ key: '_handleCloseRelease',
360
+ value: function _handleCloseRelease() {
361
+ if (this.isOpen && this.isDragged) {
362
+ if (this.percentOpen > 0.8) {
363
+ this._animateIn();
364
+ } else {
365
+ this.close();
366
+ }
367
+
368
+ this.isDragged = false;
369
+ this._verticallyScrolling = false;
370
+ }
371
+ }
372
+
373
+ /**
374
+ * Handles closing of Sidenav when element with class .sidenav-close
375
+ */
376
+
377
+ }, {
378
+ key: '_handleCloseTriggerClick',
379
+ value: function _handleCloseTriggerClick(e) {
380
+ var $closeTrigger = $(e.target).closest('.sidenav-close');
381
+ if ($closeTrigger.length && !this._isCurrentlyFixed()) {
382
+ this.close();
383
+ }
384
+ }
385
+
386
+ /**
387
+ * Handle Window Resize
388
+ */
389
+
390
+ }, {
391
+ key: '_handleWindowResize',
392
+ value: function _handleWindowResize() {
393
+ // Only handle horizontal resizes
394
+ if (this.lastWindowWidth !== window.innerWidth) {
395
+ if (window.innerWidth > 992) {
396
+ this.open();
397
+ } else {
398
+ this.close();
399
+ }
400
+ }
401
+
402
+ this.lastWindowWidth = window.innerWidth;
403
+ this.lastWindowHeight = window.innerHeight;
404
+ }
405
+ }, {
406
+ key: '_setupClasses',
407
+ value: function _setupClasses() {
408
+ if (this.options.edge === 'right') {
409
+ this.el.classList.add('right-aligned');
410
+ this.dragTarget.classList.add('right-aligned');
411
+ }
412
+ }
413
+ }, {
414
+ key: '_removeClasses',
415
+ value: function _removeClasses() {
416
+ this.el.classList.remove('right-aligned');
417
+ this.dragTarget.classList.remove('right-aligned');
418
+ }
419
+ }, {
420
+ key: '_setupFixed',
421
+ value: function _setupFixed() {
422
+ if (this._isCurrentlyFixed()) {
423
+ this.open();
424
+ }
425
+ }
426
+ }, {
427
+ key: '_isCurrentlyFixed',
428
+ value: function _isCurrentlyFixed() {
429
+ return this.isFixed && window.innerWidth > 992;
430
+ }
431
+ }, {
432
+ key: '_createDragTarget',
433
+ value: function _createDragTarget() {
434
+ var dragTarget = document.createElement('div');
435
+ dragTarget.classList.add('drag-target');
436
+ document.body.appendChild(dragTarget);
437
+ this.dragTarget = dragTarget;
438
+ }
439
+ }, {
440
+ key: '_preventBodyScrolling',
441
+ value: function _preventBodyScrolling() {
442
+ var body = document.body;
443
+ body.style.overflow = 'hidden';
444
+ }
445
+ }, {
446
+ key: '_enableBodyScrolling',
447
+ value: function _enableBodyScrolling() {
448
+ var body = document.body;
449
+ body.style.overflow = '';
450
+ }
451
+ }, {
452
+ key: 'open',
453
+ value: function open() {
454
+ if (this.isOpen === true) {
455
+ return;
456
+ }
457
+
458
+ this.isOpen = true;
459
+
460
+ // Run onOpenStart callback
461
+ if (typeof this.options.onOpenStart === 'function') {
462
+ this.options.onOpenStart.call(this, this.el);
463
+ }
464
+
465
+ // Handle fixed Sidenav
466
+ if (this._isCurrentlyFixed()) {
467
+ anim.remove(this.el);
468
+ anim({
469
+ targets: this.el,
470
+ translateX: 0,
471
+ duration: 0,
472
+ easing: 'easeOutQuad'
473
+ });
474
+ this._enableBodyScrolling();
475
+ this._overlay.style.display = 'none';
476
+
477
+ // Handle non-fixed Sidenav
478
+ } else {
479
+ if (this.options.preventScrolling) {
480
+ this._preventBodyScrolling();
481
+ }
482
+
483
+ if (!this.isDragged || this.percentOpen != 1) {
484
+ this._animateIn();
485
+ }
486
+ }
487
+ }
488
+ }, {
489
+ key: 'close',
490
+ value: function close() {
491
+ if (this.isOpen === false) {
492
+ return;
493
+ }
494
+
495
+ this.isOpen = false;
496
+
497
+ // Run onCloseStart callback
498
+ if (typeof this.options.onCloseStart === 'function') {
499
+ this.options.onCloseStart.call(this, this.el);
500
+ }
501
+
502
+ // Handle fixed Sidenav
503
+ if (this._isCurrentlyFixed()) {
504
+ var transformX = this.options.edge === 'left' ? '-105%' : '105%';
505
+ this.el.style.transform = 'translateX(' + transformX + ')';
506
+
507
+ // Handle non-fixed Sidenav
508
+ } else {
509
+ this._enableBodyScrolling();
510
+
511
+ if (!this.isDragged || this.percentOpen != 0) {
512
+ this._animateOut();
513
+ } else {
514
+ this._overlay.style.display = 'none';
515
+ }
516
+ }
517
+ }
518
+ }, {
519
+ key: '_animateIn',
520
+ value: function _animateIn() {
521
+ this._animateSidenavIn();
522
+ this._animateOverlayIn();
523
+ }
524
+ }, {
525
+ key: '_animateSidenavIn',
526
+ value: function _animateSidenavIn() {
527
+ var _this2 = this;
528
+
529
+ var slideOutPercent = this.options.edge === 'left' ? -1 : 1;
530
+ if (this.isDragged) {
531
+ slideOutPercent = this.options.edge === 'left' ? slideOutPercent + this.percentOpen : slideOutPercent - this.percentOpen;
532
+ }
533
+
534
+ anim.remove(this.el);
535
+ anim({
536
+ targets: this.el,
537
+ translateX: [slideOutPercent * 100 + '%', 0],
538
+ duration: this.options.inDuration,
539
+ easing: 'easeOutQuad',
540
+ complete: function () {
541
+ // Run onOpenEnd callback
542
+ if (typeof _this2.options.onOpenEnd === 'function') {
543
+ _this2.options.onOpenEnd.call(_this2, _this2.el);
544
+ }
545
+ }
546
+ });
547
+ }
548
+ }, {
549
+ key: '_animateOverlayIn',
550
+ value: function _animateOverlayIn() {
551
+ var start = 0;
552
+ if (this.isDragged) {
553
+ start = this.percentOpen;
554
+ } else {
555
+ $(this._overlay).css({
556
+ display: 'block'
557
+ });
558
+ }
559
+
560
+ anim.remove(this._overlay);
561
+ anim({
562
+ targets: this._overlay,
563
+ opacity: [start, 1],
564
+ duration: this.options.inDuration,
565
+ easing: 'easeOutQuad'
566
+ });
567
+ }
568
+ }, {
569
+ key: '_animateOut',
570
+ value: function _animateOut() {
571
+ this._animateSidenavOut();
572
+ this._animateOverlayOut();
573
+ }
574
+ }, {
575
+ key: '_animateSidenavOut',
576
+ value: function _animateSidenavOut() {
577
+ var _this3 = this;
578
+
579
+ var endPercent = this.options.edge === 'left' ? -1 : 1;
580
+ var slideOutPercent = 0;
581
+ if (this.isDragged) {
582
+ slideOutPercent = this.options.edge === 'left' ? endPercent + this.percentOpen : endPercent - this.percentOpen;
583
+ }
584
+
585
+ anim.remove(this.el);
586
+ anim({
587
+ targets: this.el,
588
+ translateX: [slideOutPercent * 100 + '%', endPercent * 105 + '%'],
589
+ duration: this.options.outDuration,
590
+ easing: 'easeOutQuad',
591
+ complete: function () {
592
+ // Run onOpenEnd callback
593
+ if (typeof _this3.options.onCloseEnd === 'function') {
594
+ _this3.options.onCloseEnd.call(_this3, _this3.el);
595
+ }
596
+ }
597
+ });
598
+ }
599
+ }, {
600
+ key: '_animateOverlayOut',
601
+ value: function _animateOverlayOut() {
602
+ var _this4 = this;
603
+
604
+ anim.remove(this._overlay);
605
+ anim({
606
+ targets: this._overlay,
607
+ opacity: 0,
608
+ duration: this.options.outDuration,
609
+ easing: 'easeOutQuad',
610
+ complete: function () {
611
+ $(_this4._overlay).css('display', 'none');
612
+ }
613
+ });
614
+ }
615
+ }], [{
616
+ key: 'init',
617
+ value: function init(els, options) {
618
+ return _get(Sidenav.__proto__ || Object.getPrototypeOf(Sidenav), 'init', this).call(this, this, els, options);
619
+ }
620
+
621
+ /**
622
+ * Get Instance
623
+ */
624
+
625
+ }, {
626
+ key: 'getInstance',
627
+ value: function getInstance(el) {
628
+ var domElem = !!el.jquery ? el[0] : el;
629
+ return domElem.M_Sidenav;
630
+ }
631
+ }, {
632
+ key: 'defaults',
633
+ get: function () {
634
+ return _defaults;
635
+ }
636
+ }]);
637
+
638
+ return Sidenav;
639
+ }(Component);
640
+
641
+ /**
642
+ * @static
643
+ * @memberof Sidenav
644
+ * @type {Array.<Sidenav>}
645
+ */
646
+
647
+
648
+ Sidenav._sidenavs = [];
649
+
650
+ M.Sidenav = Sidenav;
651
+
652
+ if (M.jQueryLoaded) {
653
+ M.initializeJqueryWrapper(Sidenav, 'sidenav', 'M_Sidenav');
654
+ }
655
+ })(cash, M.anime);