mtl 1.0.1

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 (158) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/Gemfile +9 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +104 -0
  6. data/Rakefile +6 -0
  7. data/app/assets/javascripts/mtl/clickables.coffee +25 -0
  8. data/app/assets/javascripts/mtl/collapsible.coffee +43 -0
  9. data/app/assets/javascripts/mtl/configuration.coffee.erb +1 -0
  10. data/app/assets/javascripts/mtl/document_modal.coffee +130 -0
  11. data/app/assets/javascripts/mtl/dropdown.coffee +24 -0
  12. data/app/assets/javascripts/mtl/hooks.coffee +14 -0
  13. data/app/assets/javascripts/mtl/icon.coffee.erb +17 -0
  14. data/app/assets/javascripts/mtl/modal.coffee +32 -0
  15. data/app/assets/javascripts/mtl/select.coffee +44 -0
  16. data/app/assets/javascripts/mtl/templates.coffee +4 -0
  17. data/app/assets/javascripts/mtl/toc.coffee +31 -0
  18. data/app/assets/javascripts/mtl.js +42 -0
  19. data/app/assets/stylesheets/mtl/all.scss +69 -0
  20. data/app/assets/stylesheets/mtl/extend/_avatars.scss +37 -0
  21. data/app/assets/stylesheets/mtl/extend/_buttons.scss +31 -0
  22. data/app/assets/stylesheets/mtl/extend/_cards.scss +21 -0
  23. data/app/assets/stylesheets/mtl/extend/_chips.scss +3 -0
  24. data/app/assets/stylesheets/mtl/extend/_collection-files.scss +108 -0
  25. data/app/assets/stylesheets/mtl/extend/_document-modals.scss +95 -0
  26. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +12 -0
  27. data/app/assets/stylesheets/mtl/extend/_forms.scss +66 -0
  28. data/app/assets/stylesheets/mtl/extend/_global.scss +77 -0
  29. data/app/assets/stylesheets/mtl/extend/_grid.scss +25 -0
  30. data/app/assets/stylesheets/mtl/extend/_material-icons.scss +37 -0
  31. data/app/assets/stylesheets/mtl/extend/_mixins.scss +10 -0
  32. data/app/assets/stylesheets/mtl/extend/_roboto-rails.scss +49 -0
  33. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +22 -0
  34. data/app/assets/stylesheets/mtl/extend/_toc.scss +12 -0
  35. data/app/assets/stylesheets/mtl/extend/_typography.scss +32 -0
  36. data/app/assets/stylesheets/mtl/extend/forms/_input-fields.scss +50 -0
  37. data/app/assets/stylesheets/mtl/layouts/_default.scss +220 -0
  38. data/app/assets/stylesheets/mtl/layouts/_single.scss +25 -0
  39. data/app/views/mtl/header.html.erb +25 -0
  40. data/bin/coffeelint.rb +16 -0
  41. data/lib/generators/mtl/install_generator.rb +20 -0
  42. data/lib/generators/mtl/templates/_color.scss +410 -0
  43. data/lib/generators/mtl/templates/_variables.scss +330 -0
  44. data/lib/generators/mtl/templates/mtl.scss +8 -0
  45. data/lib/generators/mtl/templates/simple_form.rb +211 -0
  46. data/lib/mtl/rails/card_file_presenter.rb +70 -0
  47. data/lib/mtl/rails/view_helpers.rb +412 -0
  48. data/lib/mtl/simple_form/suffix.rb +52 -0
  49. data/lib/mtl/version.rb +6 -0
  50. data/lib/mtl.rb +38 -0
  51. data/mtl.gemspec +35 -0
  52. data/package.json +11 -0
  53. data/spec/mtl/rails/card_file_presenter_spec.rb +126 -0
  54. data/spec/mtl/rails/view_helpers_spec.rb +193 -0
  55. data/spec/mtl/simple_form/suffix_spec.rb +39 -0
  56. data/spec/mtl_spec.rb +34 -0
  57. data/spec/spec_helper.rb +18 -0
  58. data/spec/support/dom.rb +15 -0
  59. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.eot +0 -0
  60. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ijmap +1 -0
  61. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.svg +2373 -0
  62. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ttf +0 -0
  63. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff +0 -0
  64. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff2 +0 -0
  65. data/vendor/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  66. data/vendor/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  67. data/vendor/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  68. data/vendor/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  69. data/vendor/assets/fonts/roboto/Roboto-Light.eot +0 -0
  70. data/vendor/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  71. data/vendor/assets/fonts/roboto/Roboto-Light.woff +0 -0
  72. data/vendor/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  73. data/vendor/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  74. data/vendor/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  75. data/vendor/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  76. data/vendor/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  77. data/vendor/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  78. data/vendor/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  79. data/vendor/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  80. data/vendor/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  81. data/vendor/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  82. data/vendor/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  83. data/vendor/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  84. data/vendor/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  85. data/vendor/assets/javascripts/lodash.js +16607 -0
  86. data/vendor/assets/javascripts/materialize/animation.js +9 -0
  87. data/vendor/assets/javascripts/materialize/buttons.js +91 -0
  88. data/vendor/assets/javascripts/materialize/cards.js +26 -0
  89. data/vendor/assets/javascripts/materialize/carousel.js +454 -0
  90. data/vendor/assets/javascripts/materialize/character_counter.js +72 -0
  91. data/vendor/assets/javascripts/materialize/chips.js +267 -0
  92. data/vendor/assets/javascripts/materialize/collapsible.js +160 -0
  93. data/vendor/assets/javascripts/materialize/date_picker/picker.date.js +1430 -0
  94. data/vendor/assets/javascripts/materialize/date_picker/picker.js +1123 -0
  95. data/vendor/assets/javascripts/materialize/dropdown.js +265 -0
  96. data/vendor/assets/javascripts/materialize/forms.js +681 -0
  97. data/vendor/assets/javascripts/materialize/global.js +45 -0
  98. data/vendor/assets/javascripts/materialize/hammer.min.js +1 -0
  99. data/vendor/assets/javascripts/materialize/init.js +173 -0
  100. data/vendor/assets/javascripts/materialize/initial.js +11 -0
  101. data/vendor/assets/javascripts/materialize/jquery.easing.1.3.js +205 -0
  102. data/vendor/assets/javascripts/materialize/jquery.hammer.js +33 -0
  103. data/vendor/assets/javascripts/materialize/jquery.timeago.min.js +1 -0
  104. data/vendor/assets/javascripts/materialize/leanModal.js +192 -0
  105. data/vendor/assets/javascripts/materialize/materialbox.js +269 -0
  106. data/vendor/assets/javascripts/materialize/parallax.js +58 -0
  107. data/vendor/assets/javascripts/materialize/prism.js +8 -0
  108. data/vendor/assets/javascripts/materialize/pushpin.js +71 -0
  109. data/vendor/assets/javascripts/materialize/scrollFire.js +48 -0
  110. data/vendor/assets/javascripts/materialize/scrollspy.js +283 -0
  111. data/vendor/assets/javascripts/materialize/sideNav.js +352 -0
  112. data/vendor/assets/javascripts/materialize/slider.js +321 -0
  113. data/vendor/assets/javascripts/materialize/tabs.js +148 -0
  114. data/vendor/assets/javascripts/materialize/toasts.js +136 -0
  115. data/vendor/assets/javascripts/materialize/tooltip.js +230 -0
  116. data/vendor/assets/javascripts/materialize/transitions.js +169 -0
  117. data/vendor/assets/javascripts/materialize/velocity.min.js +5 -0
  118. data/vendor/assets/javascripts/materialize/waves.js +338 -0
  119. data/vendor/assets/javascripts/pdfobject.js +254 -0
  120. data/vendor/assets/stylesheets/materialize/_buttons.scss +211 -0
  121. data/vendor/assets/stylesheets/materialize/_cards.scss +185 -0
  122. data/vendor/assets/stylesheets/materialize/_carousel.scss +85 -0
  123. data/vendor/assets/stylesheets/materialize/_chips.scss +74 -0
  124. data/vendor/assets/stylesheets/materialize/_collapsible.scss +90 -0
  125. data/vendor/assets/stylesheets/materialize/_color.scss +412 -0
  126. data/vendor/assets/stylesheets/materialize/_dropdown.scss +57 -0
  127. data/vendor/assets/stylesheets/materialize/_global.scss +781 -0
  128. data/vendor/assets/stylesheets/materialize/_grid.scss +147 -0
  129. data/vendor/assets/stylesheets/materialize/_icons-material-design.scss +5 -0
  130. data/vendor/assets/stylesheets/materialize/_materialbox.scss +42 -0
  131. data/vendor/assets/stylesheets/materialize/_mixins.scss +5 -0
  132. data/vendor/assets/stylesheets/materialize/_modal.scss +90 -0
  133. data/vendor/assets/stylesheets/materialize/_navbar.scss +182 -0
  134. data/vendor/assets/stylesheets/materialize/_normalize.scss +424 -0
  135. data/vendor/assets/stylesheets/materialize/_prefixer.scss +384 -0
  136. data/vendor/assets/stylesheets/materialize/_preloader.scss +334 -0
  137. data/vendor/assets/stylesheets/materialize/_roboto.scss +49 -0
  138. data/vendor/assets/stylesheets/materialize/_sideNav.scss +219 -0
  139. data/vendor/assets/stylesheets/materialize/_slider.scss +92 -0
  140. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +33 -0
  141. data/vendor/assets/stylesheets/materialize/_tabs.scss +56 -0
  142. data/vendor/assets/stylesheets/materialize/_toast.scss +65 -0
  143. data/vendor/assets/stylesheets/materialize/_tooltip.scss +32 -0
  144. data/vendor/assets/stylesheets/materialize/_typography.scss +61 -0
  145. data/vendor/assets/stylesheets/materialize/_variables.scss +313 -0
  146. data/vendor/assets/stylesheets/materialize/_waves.scss +177 -0
  147. data/vendor/assets/stylesheets/materialize/date_picker/_default.date.scss +435 -0
  148. data/vendor/assets/stylesheets/materialize/date_picker/_default.scss +201 -0
  149. data/vendor/assets/stylesheets/materialize/date_picker/_default.time.scss +125 -0
  150. data/vendor/assets/stylesheets/materialize/forms/_checkboxes.scss +220 -0
  151. data/vendor/assets/stylesheets/materialize/forms/_file-input.scss +38 -0
  152. data/vendor/assets/stylesheets/materialize/forms/_forms.scss +22 -0
  153. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +273 -0
  154. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +119 -0
  155. data/vendor/assets/stylesheets/materialize/forms/_range.scss +159 -0
  156. data/vendor/assets/stylesheets/materialize/forms/_select.scss +116 -0
  157. data/vendor/assets/stylesheets/materialize/forms/_switches.scss +78 -0
  158. metadata +309 -0
@@ -0,0 +1,283 @@
1
+ /**
2
+ * Extend jquery with a scrollspy plugin.
3
+ * This watches the window scroll and fires events when elements are scrolled into viewport.
4
+ *
5
+ * throttle() and getTime() taken from Underscore.js
6
+ * https://github.com/jashkenas/underscore
7
+ *
8
+ * @author Copyright 2013 John Smart
9
+ * @license https://raw.github.com/thesmart/jquery-scrollspy/master/LICENSE
10
+ * @see https://github.com/thesmart
11
+ * @version 0.1.2
12
+ */
13
+ (function($) {
14
+
15
+ var jWindow = $(window);
16
+ var elements = [];
17
+ var elementsInView = [];
18
+ var isSpying = false;
19
+ var ticks = 0;
20
+ var unique_id = 1;
21
+ var offset = {
22
+ top : 0,
23
+ right : 0,
24
+ bottom : 0,
25
+ left : 0,
26
+ }
27
+
28
+ /**
29
+ * Find elements that are within the boundary
30
+ * @param {number} top
31
+ * @param {number} right
32
+ * @param {number} bottom
33
+ * @param {number} left
34
+ * @return {jQuery} A collection of elements
35
+ */
36
+ function findElements(top, right, bottom, left) {
37
+ var hits = $();
38
+ $.each(elements, function(i, element) {
39
+ if (element.height() > 0) {
40
+ var elTop = element.offset().top,
41
+ elLeft = element.offset().left,
42
+ elRight = elLeft + element.width(),
43
+ elBottom = elTop + element.height();
44
+
45
+ var isIntersect = !(elLeft > right ||
46
+ elRight < left ||
47
+ elTop > bottom ||
48
+ elBottom < top);
49
+
50
+ if (isIntersect) {
51
+ hits.push(element);
52
+ }
53
+ }
54
+ });
55
+
56
+ return hits;
57
+ }
58
+
59
+
60
+ /**
61
+ * Called when the user scrolls the window
62
+ */
63
+ function onScroll() {
64
+ // unique tick id
65
+ ++ticks;
66
+
67
+ // viewport rectangle
68
+ var top = jWindow.scrollTop(),
69
+ left = jWindow.scrollLeft(),
70
+ right = left + jWindow.width(),
71
+ bottom = top + jWindow.height();
72
+
73
+ // determine which elements are in view
74
+ // + 60 accounts for fixed nav
75
+ var intersections = findElements(top+offset.top + 200, right+offset.right, bottom+offset.bottom, left+offset.left);
76
+ $.each(intersections, function(i, element) {
77
+
78
+ var lastTick = element.data('scrollSpy:ticks');
79
+ if (typeof lastTick != 'number') {
80
+ // entered into view
81
+ element.triggerHandler('scrollSpy:enter');
82
+ }
83
+
84
+ // update tick id
85
+ element.data('scrollSpy:ticks', ticks);
86
+ });
87
+
88
+ // determine which elements are no longer in view
89
+ $.each(elementsInView, function(i, element) {
90
+ var lastTick = element.data('scrollSpy:ticks');
91
+ if (typeof lastTick == 'number' && lastTick !== ticks) {
92
+ // exited from view
93
+ element.triggerHandler('scrollSpy:exit');
94
+ element.data('scrollSpy:ticks', null);
95
+ }
96
+ });
97
+
98
+ // remember elements in view for next tick
99
+ elementsInView = intersections;
100
+ }
101
+
102
+ /**
103
+ * Called when window is resized
104
+ */
105
+ function onWinSize() {
106
+ jWindow.trigger('scrollSpy:winSize');
107
+ }
108
+
109
+ /**
110
+ * Get time in ms
111
+ * @license https://raw.github.com/jashkenas/underscore/master/LICENSE
112
+ * @type {function}
113
+ * @return {number}
114
+ */
115
+ var getTime = (Date.now || function () {
116
+ return new Date().getTime();
117
+ });
118
+
119
+ /**
120
+ * Returns a function, that, when invoked, will only be triggered at most once
121
+ * during a given window of time. Normally, the throttled function will run
122
+ * as much as it can, without ever going more than once per `wait` duration;
123
+ * but if you'd like to disable the execution on the leading edge, pass
124
+ * `{leading: false}`. To disable execution on the trailing edge, ditto.
125
+ * @license https://raw.github.com/jashkenas/underscore/master/LICENSE
126
+ * @param {function} func
127
+ * @param {number} wait
128
+ * @param {Object=} options
129
+ * @returns {Function}
130
+ */
131
+ function throttle(func, wait, options) {
132
+ var context, args, result;
133
+ var timeout = null;
134
+ var previous = 0;
135
+ options || (options = {});
136
+ var later = function () {
137
+ previous = options.leading === false ? 0 : getTime();
138
+ timeout = null;
139
+ result = func.apply(context, args);
140
+ context = args = null;
141
+ };
142
+ return function () {
143
+ var now = getTime();
144
+ if (!previous && options.leading === false) previous = now;
145
+ var remaining = wait - (now - previous);
146
+ context = this;
147
+ args = arguments;
148
+ if (remaining <= 0) {
149
+ clearTimeout(timeout);
150
+ timeout = null;
151
+ previous = now;
152
+ result = func.apply(context, args);
153
+ context = args = null;
154
+ } else if (!timeout && options.trailing !== false) {
155
+ timeout = setTimeout(later, remaining);
156
+ }
157
+ return result;
158
+ };
159
+ };
160
+
161
+ /**
162
+ * Enables ScrollSpy using a selector
163
+ * @param {jQuery|string} selector The elements collection, or a selector
164
+ * @param {Object=} options Optional.
165
+ throttle : number -> scrollspy throttling. Default: 100 ms
166
+ offsetTop : number -> offset from top. Default: 0
167
+ offsetRight : number -> offset from right. Default: 0
168
+ offsetBottom : number -> offset from bottom. Default: 0
169
+ offsetLeft : number -> offset from left. Default: 0
170
+ * @returns {jQuery}
171
+ */
172
+ $.scrollSpy = function(selector, options) {
173
+ var defaults = {
174
+ throttle: 100,
175
+ scrollOffset: 200 // offset - 200 allows elements near bottom of page to scroll
176
+ };
177
+ options = $.extend(defaults, options);
178
+
179
+ var visible = [];
180
+ selector = $(selector);
181
+ selector.each(function(i, element) {
182
+ elements.push($(element));
183
+ $(element).data("scrollSpy:id", i);
184
+ // Smooth scroll to section
185
+ $('a[href="#' + $(element).attr('id') + '"]').click(function(e) {
186
+ e.preventDefault();
187
+ var offset = $(this.hash).offset().top + 1;
188
+ $('html, body').animate({ scrollTop: offset - options.scrollOffset }, {duration: 400, queue: false, easing: 'easeOutCubic'});
189
+ });
190
+ });
191
+
192
+ offset.top = options.offsetTop || 0;
193
+ offset.right = options.offsetRight || 0;
194
+ offset.bottom = options.offsetBottom || 0;
195
+ offset.left = options.offsetLeft || 0;
196
+
197
+ var throttledScroll = throttle(onScroll, options.throttle || 100);
198
+ var readyScroll = function(){
199
+ $(document).ready(throttledScroll);
200
+ };
201
+
202
+ if (!isSpying) {
203
+ jWindow.on('scroll', readyScroll);
204
+ jWindow.on('resize', readyScroll);
205
+ isSpying = true;
206
+ }
207
+
208
+ // perform a scan once, after current execution context, and after dom is ready
209
+ setTimeout(readyScroll, 0);
210
+
211
+
212
+ selector.on('scrollSpy:enter', function() {
213
+ visible = $.grep(visible, function(value) {
214
+ return value.height() != 0;
215
+ });
216
+
217
+ var $this = $(this);
218
+
219
+ if (visible[0]) {
220
+ $('a[href="#' + visible[0].attr('id') + '"]').removeClass('active');
221
+ if ($this.data('scrollSpy:id') < visible[0].data('scrollSpy:id')) {
222
+ visible.unshift($(this));
223
+ }
224
+ else {
225
+ visible.push($(this));
226
+ }
227
+ }
228
+ else {
229
+ visible.push($(this));
230
+ }
231
+
232
+
233
+ $('a[href="#' + visible[0].attr('id') + '"]').addClass('active');
234
+ });
235
+ selector.on('scrollSpy:exit', function() {
236
+ visible = $.grep(visible, function(value) {
237
+ return value.height() != 0;
238
+ });
239
+
240
+ if (visible[0]) {
241
+ $('a[href="#' + visible[0].attr('id') + '"]').removeClass('active');
242
+ var $this = $(this);
243
+ visible = $.grep(visible, function(value) {
244
+ return value.attr('id') != $this.attr('id');
245
+ });
246
+ if (visible[0]) { // Check if empty
247
+ $('a[href="#' + visible[0].attr('id') + '"]').addClass('active');
248
+ }
249
+ }
250
+ });
251
+
252
+ return selector;
253
+ };
254
+
255
+ /**
256
+ * Listen for window resize events
257
+ * @param {Object=} options Optional. Set { throttle: number } to change throttling. Default: 100 ms
258
+ * @returns {jQuery} $(window)
259
+ */
260
+ $.winSizeSpy = function(options) {
261
+ $.winSizeSpy = function() { return jWindow; }; // lock from multiple calls
262
+ options = options || {
263
+ throttle: 100
264
+ };
265
+ return jWindow.on('resize', throttle(onWinSize, options.throttle || 100));
266
+ };
267
+
268
+ /**
269
+ * Enables ScrollSpy on a collection of elements
270
+ * e.g. $('.scrollSpy').scrollSpy()
271
+ * @param {Object=} options Optional.
272
+ throttle : number -> scrollspy throttling. Default: 100 ms
273
+ offsetTop : number -> offset from top. Default: 0
274
+ offsetRight : number -> offset from right. Default: 0
275
+ offsetBottom : number -> offset from bottom. Default: 0
276
+ offsetLeft : number -> offset from left. Default: 0
277
+ * @returns {jQuery}
278
+ */
279
+ $.fn.scrollSpy = function(options) {
280
+ return $.scrollSpy($(this), options);
281
+ };
282
+
283
+ })(jQuery);
@@ -0,0 +1,352 @@
1
+ (function ($) {
2
+
3
+ var methods = {
4
+ init : function(options) {
5
+ var defaults = {
6
+ menuWidth: 300,
7
+ edge: 'left',
8
+ closeOnClick: false
9
+ };
10
+ options = $.extend(defaults, options);
11
+
12
+ $(this).each(function(){
13
+ var $this = $(this);
14
+ var menu_id = $("#"+ $this.attr('data-activates'));
15
+
16
+ // Set to width
17
+ if (options.menuWidth != 300) {
18
+ menu_id.css('width', options.menuWidth);
19
+ }
20
+
21
+ // Add Touch Area
22
+ var dragTarget = $('<div class="drag-target"></div>');
23
+ $('body').append(dragTarget);
24
+
25
+ if (options.edge == 'left') {
26
+ menu_id.css('transform', 'translateX(-100%)');
27
+ dragTarget.css({'left': 0}); // Add Touch Area
28
+ }
29
+ else {
30
+ menu_id.addClass('right-aligned') // Change text-alignment to right
31
+ .css('transform', 'translateX(100%)');
32
+ dragTarget.css({'right': 0}); // Add Touch Area
33
+ }
34
+
35
+ // If fixed sidenav, bring menu out
36
+ if (menu_id.hasClass('fixed')) {
37
+ if (window.innerWidth > 992) {
38
+ menu_id.css('transform', 'translateX(0)');
39
+ }
40
+ }
41
+
42
+ // Window resize to reset on large screens fixed
43
+ if (menu_id.hasClass('fixed')) {
44
+ $(window).resize( function() {
45
+ if (window.innerWidth > 992) {
46
+ // Close menu if window is resized bigger than 992 and user has fixed sidenav
47
+ if ($('#sidenav-overlay').length !== 0 && menuOut) {
48
+ removeMenu(true);
49
+ }
50
+ else {
51
+ // menu_id.removeAttr('style');
52
+ menu_id.css('transform', 'translateX(0%)');
53
+ // menu_id.css('width', options.menuWidth);
54
+ }
55
+ }
56
+ else if (menuOut === false){
57
+ if (options.edge === 'left') {
58
+ menu_id.css('transform', 'translateX(-100%)');
59
+ } else {
60
+ menu_id.css('transform', 'translateX(100%)');
61
+ }
62
+
63
+ }
64
+
65
+ });
66
+ }
67
+
68
+ // if closeOnClick, then add close event for all a tags in side sideNav
69
+ if (options.closeOnClick === true) {
70
+ menu_id.on("click.itemclick", "a:not(.collapsible-header)", function(){
71
+ removeMenu();
72
+ });
73
+ }
74
+
75
+ function removeMenu(restoreNav) {
76
+ panning = false;
77
+ menuOut = false;
78
+ // Reenable scrolling
79
+ $('body').css({
80
+ overflow: '',
81
+ width: ''
82
+ });
83
+
84
+ $('#sidenav-overlay').velocity({opacity: 0}, {duration: 200,
85
+ queue: false, easing: 'easeOutQuad',
86
+ complete: function() {
87
+ $(this).remove();
88
+ } });
89
+ if (options.edge === 'left') {
90
+ // Reset phantom div
91
+ dragTarget.css({width: '', right: '', left: '0'});
92
+ menu_id.velocity(
93
+ {'translateX': '-100%'},
94
+ { duration: 200,
95
+ queue: false,
96
+ easing: 'easeOutCubic',
97
+ complete: function() {
98
+ if (restoreNav === true) {
99
+ // Restore Fixed sidenav
100
+ menu_id.removeAttr('style');
101
+ menu_id.css('width', options.menuWidth);
102
+ }
103
+ }
104
+
105
+ });
106
+ }
107
+ else {
108
+ // Reset phantom div
109
+ dragTarget.css({width: '', right: '0', left: ''});
110
+ menu_id.velocity(
111
+ {'translateX': '100%'},
112
+ { duration: 200,
113
+ queue: false,
114
+ easing: 'easeOutCubic',
115
+ complete: function() {
116
+ if (restoreNav === true) {
117
+ // Restore Fixed sidenav
118
+ menu_id.removeAttr('style');
119
+ menu_id.css('width', options.menuWidth);
120
+ }
121
+ }
122
+ });
123
+ }
124
+ }
125
+
126
+
127
+
128
+ // Touch Event
129
+ var panning = false;
130
+ var menuOut = false;
131
+
132
+ dragTarget.on('click', function(){
133
+ if (menuOut) {
134
+ removeMenu();
135
+ }
136
+ });
137
+
138
+ dragTarget.hammer({
139
+ prevent_default: false
140
+ }).bind('pan', function(e) {
141
+
142
+ if (e.gesture.pointerType == "touch") {
143
+
144
+ var direction = e.gesture.direction;
145
+ var x = e.gesture.center.x;
146
+ var y = e.gesture.center.y;
147
+ var velocityX = e.gesture.velocityX;
148
+
149
+ // Disable Scrolling
150
+ var $body = $('body');
151
+ var oldWidth = $body.innerWidth();
152
+ $body.css('overflow', 'hidden');
153
+ $body.width(oldWidth);
154
+
155
+ // If overlay does not exist, create one and if it is clicked, close menu
156
+ if ($('#sidenav-overlay').length === 0) {
157
+ var overlay = $('<div id="sidenav-overlay"></div>');
158
+ overlay.css('opacity', 0).click( function(){
159
+ removeMenu();
160
+ });
161
+ $('body').append(overlay);
162
+ }
163
+
164
+ // Keep within boundaries
165
+ if (options.edge === 'left') {
166
+ if (x > options.menuWidth) { x = options.menuWidth; }
167
+ else if (x < 0) { x = 0; }
168
+ }
169
+
170
+ if (options.edge === 'left') {
171
+ // Left Direction
172
+ if (x < (options.menuWidth / 2)) { menuOut = false; }
173
+ // Right Direction
174
+ else if (x >= (options.menuWidth / 2)) { menuOut = true; }
175
+ menu_id.css('transform', 'translateX(' + (x - options.menuWidth) + 'px)');
176
+ }
177
+ else {
178
+ // Left Direction
179
+ if (x < (window.innerWidth - options.menuWidth / 2)) {
180
+ menuOut = true;
181
+ }
182
+ // Right Direction
183
+ else if (x >= (window.innerWidth - options.menuWidth / 2)) {
184
+ menuOut = false;
185
+ }
186
+ var rightPos = (x - options.menuWidth / 2);
187
+ if (rightPos < 0) {
188
+ rightPos = 0;
189
+ }
190
+
191
+ menu_id.css('transform', 'translateX(' + rightPos + 'px)');
192
+ }
193
+
194
+
195
+ // Percentage overlay
196
+ var overlayPerc;
197
+ if (options.edge === 'left') {
198
+ overlayPerc = x / options.menuWidth;
199
+ $('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
200
+ }
201
+ else {
202
+ overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
203
+ $('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
204
+ }
205
+ }
206
+
207
+ }).bind('panend', function(e) {
208
+
209
+ if (e.gesture.pointerType == "touch") {
210
+ var velocityX = e.gesture.velocityX;
211
+ var x = e.gesture.center.x;
212
+ var leftPos = x - options.menuWidth;
213
+ var rightPos = x - options.menuWidth / 2;
214
+ if (leftPos > 0 ) {
215
+ leftPos = 0;
216
+ }
217
+ if (rightPos < 0) {
218
+ rightPos = 0;
219
+ }
220
+ panning = false;
221
+
222
+ if (options.edge === 'left') {
223
+ // If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
224
+ if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
225
+ // Return menu to open
226
+ if (leftPos !== 0) {
227
+ menu_id.velocity({'translateX': [0, leftPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
228
+ }
229
+
230
+ $('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
231
+ dragTarget.css({width: '50%', right: 0, left: ''});
232
+ menuOut = true;
233
+ }
234
+ else if (!menuOut || velocityX > 0.3) {
235
+ // Enable Scrolling
236
+ $('body').css({
237
+ overflow: '',
238
+ width: ''
239
+ });
240
+ // Slide menu closed
241
+ menu_id.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
242
+ $('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
243
+ complete: function () {
244
+ $(this).remove();
245
+ }});
246
+ dragTarget.css({width: '10px', right: '', left: 0});
247
+ }
248
+ }
249
+ else {
250
+ if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
251
+ // Return menu to open
252
+ if (rightPos !== 0) {
253
+ menu_id.velocity({'translateX': [0, rightPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
254
+ }
255
+
256
+ $('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
257
+ dragTarget.css({width: '50%', right: '', left: 0});
258
+ menuOut = true;
259
+ }
260
+ else if (!menuOut || velocityX < -0.3) {
261
+ // Enable Scrolling
262
+ $('body').css({
263
+ overflow: '',
264
+ width: ''
265
+ });
266
+
267
+ // Slide menu closed
268
+ menu_id.velocity({'translateX': [options.menuWidth + 10, rightPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
269
+ $('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
270
+ complete: function () {
271
+ $(this).remove();
272
+ }});
273
+ dragTarget.css({width: '10px', right: 0, left: ''});
274
+ }
275
+ }
276
+
277
+ }
278
+ });
279
+
280
+ $this.click(function() {
281
+ if (menuOut === true) {
282
+ menuOut = false;
283
+ panning = false;
284
+ removeMenu();
285
+ }
286
+ else {
287
+
288
+ // Disable Scrolling
289
+ var $body = $('body');
290
+ var oldWidth = $body.innerWidth();
291
+ $body.css('overflow', 'hidden');
292
+ $body.width(oldWidth);
293
+
294
+ // Push current drag target on top of DOM tree
295
+ $('body').append(dragTarget);
296
+
297
+ if (options.edge === 'left') {
298
+ dragTarget.css({width: '50%', right: 0, left: ''});
299
+ menu_id.velocity({'translateX': [0, -1 * options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
300
+ }
301
+ else {
302
+ dragTarget.css({width: '50%', right: '', left: 0});
303
+ menu_id.velocity({'translateX': [0, options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
304
+ }
305
+
306
+ var overlay = $('<div id="sidenav-overlay"></div>');
307
+ overlay.css('opacity', 0)
308
+ .click(function(){
309
+ menuOut = false;
310
+ panning = false;
311
+ removeMenu();
312
+ overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
313
+ complete: function() {
314
+ $(this).remove();
315
+ } });
316
+
317
+ });
318
+ $('body').append(overlay);
319
+ overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
320
+ complete: function () {
321
+ menuOut = true;
322
+ panning = false;
323
+ }
324
+ });
325
+ }
326
+
327
+ return false;
328
+ });
329
+ });
330
+
331
+
332
+ },
333
+ show : function() {
334
+ this.trigger('click');
335
+ },
336
+ hide : function() {
337
+ $('#sidenav-overlay').trigger('click');
338
+ }
339
+ };
340
+
341
+
342
+ $.fn.sideNav = function(methodOrOptions) {
343
+ if ( methods[methodOrOptions] ) {
344
+ return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
345
+ } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
346
+ // Default to "init"
347
+ return methods.init.apply( this, arguments );
348
+ } else {
349
+ $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.sideNav' );
350
+ }
351
+ }; // Plugin end
352
+ }( jQuery ));