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
@@ -1,7 +0,0 @@
1
- // Custom Easing
2
- jQuery.extend(jQuery.easing, {
3
- easeInOutMaterial: function (x, t, b, c, d) {
4
- if ((t /= d / 2) < 1) return c / 2 * t * t + b;
5
- return c / 4 * ((t -= 2) * t * t + 2) + b;
6
- }
7
- });
@@ -1,253 +0,0 @@
1
- (function ($) {
2
- $(document).on('ready turbolinks:load', function () {
3
-
4
- // jQuery reverse
5
- $.fn.reverse = [].reverse;
6
-
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):not(.toolbar)', function (e) {
9
- var $this = $(this);
10
- openFABMenu($this);
11
- });
12
- $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function (e) {
13
- var $this = $(this);
14
- closeFABMenu($this);
15
- });
16
-
17
- // Toggle-on-click behaviour.
18
- $(document).on('click.fabClickToggle', '.fixed-action-btn.click-to-toggle > a', function (e) {
19
- var $this = $(this);
20
- var $menu = $this.parent();
21
- if ($menu.hasClass('active')) {
22
- closeFABMenu($menu);
23
- } else {
24
- openFABMenu($menu);
25
- }
26
- });
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
- });
35
-
36
- $.fn.extend({
37
- openFAB: function () {
38
- openFABMenu($(this));
39
- },
40
- closeFAB: function () {
41
- closeFABMenu($(this));
42
- },
43
- openToolbar: function () {
44
- FABtoToolbar($(this));
45
- },
46
- closeToolbar: function () {
47
- toolbarToFAB($(this));
48
- }
49
- });
50
-
51
- var openFABMenu = function (btn) {
52
- var $this = btn;
53
- if ($this.hasClass('active') === false) {
54
-
55
- // Get direction option
56
- var horizontal = $this.hasClass('horizontal');
57
- var offsetY, offsetX;
58
-
59
- if (horizontal === true) {
60
- offsetX = 40;
61
- } else {
62
- offsetY = 40;
63
- }
64
-
65
- $this.addClass('active');
66
- $this.find('ul .btn-floating').velocity({ scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px' }, { duration: 0 });
67
-
68
- var time = 0;
69
- $this.find('ul .btn-floating').reverse().each(function () {
70
- $(this).velocity({ opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0' }, { duration: 80, delay: time });
71
- time += 40;
72
- });
73
- }
74
- };
75
-
76
- var closeFABMenu = function (btn) {
77
- var $this = btn;
78
- // Get direction option
79
- var horizontal = $this.hasClass('horizontal');
80
- var offsetY, offsetX;
81
-
82
- if (horizontal === true) {
83
- offsetX = 40;
84
- } else {
85
- offsetY = 40;
86
- }
87
-
88
- $this.removeClass('active');
89
- var time = 0;
90
- $this.find('ul .btn-floating').velocity("stop", true);
91
- $this.find('ul .btn-floating').velocity({ opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px' }, { duration: 80 });
92
- };
93
-
94
- /**
95
- * Transform FAB into toolbar
96
- * @param {Object} object jQuery object
97
- */
98
- var FABtoToolbar = function (btn) {
99
- if (btn.attr('data-open') === "true") {
100
- return;
101
- }
102
-
103
- var offsetX, offsetY, scaleFactor;
104
- var windowWidth = window.innerWidth;
105
- var windowHeight = window.innerHeight;
106
- var btnRect = btn[0].getBoundingClientRect();
107
- var anchor = btn.find('> a').first();
108
- var menu = btn.find('> ul').first();
109
- var backdrop = $('<div class="fab-backdrop"></div>');
110
- var fabColor = anchor.css('background-color');
111
- anchor.append(backdrop);
112
-
113
- offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
114
- offsetY = windowHeight - btnRect.bottom;
115
- scaleFactor = windowWidth / backdrop.width();
116
- btn.attr('data-origin-bottom', btnRect.bottom);
117
- btn.attr('data-origin-left', btnRect.left);
118
- btn.attr('data-origin-width', btnRect.width);
119
-
120
- // Set initial state
121
- btn.addClass('active');
122
- btn.attr('data-open', true);
123
- btn.css({
124
- 'text-align': 'center',
125
- width: '100%',
126
- bottom: 0,
127
- left: 0,
128
- transform: 'translateX(' + offsetX + 'px)',
129
- transition: 'none'
130
- });
131
- anchor.css({
132
- transform: 'translateY(' + -offsetY + 'px)',
133
- transition: 'none'
134
- });
135
- backdrop.css({
136
- 'background-color': fabColor
137
- });
138
-
139
- setTimeout(function () {
140
- btn.css({
141
- transform: '',
142
- transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
143
- });
144
- anchor.css({
145
- overflow: 'visible',
146
- transform: '',
147
- transition: 'transform .2s'
148
- });
149
-
150
- setTimeout(function () {
151
- btn.css({
152
- overflow: 'hidden',
153
- 'background-color': fabColor
154
- });
155
- backdrop.css({
156
- transform: 'scale(' + scaleFactor + ')',
157
- transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
158
- });
159
- menu.find('> li > a').css({
160
- opacity: 1
161
- });
162
-
163
- // Scroll to close.
164
- $(window).on('scroll.fabToolbarClose', function () {
165
- toolbarToFAB(btn);
166
- $(window).off('scroll.fabToolbarClose');
167
- $(document).off('click.fabToolbarClose');
168
- });
169
-
170
- $(document).on('click.fabToolbarClose', function (e) {
171
- if (!$(e.target).closest(menu).length) {
172
- toolbarToFAB(btn);
173
- $(window).off('scroll.fabToolbarClose');
174
- $(document).off('click.fabToolbarClose');
175
- }
176
- });
177
- }, 100);
178
- }, 0);
179
- };
180
-
181
- /**
182
- * Transform toolbar back into FAB
183
- * @param {Object} object jQuery object
184
- */
185
- var toolbarToFAB = function (btn) {
186
- if (btn.attr('data-open') !== "true") {
187
- return;
188
- }
189
-
190
- var offsetX, offsetY, scaleFactor;
191
- var windowWidth = window.innerWidth;
192
- var windowHeight = window.innerHeight;
193
- var btnWidth = btn.attr('data-origin-width');
194
- var btnBottom = btn.attr('data-origin-bottom');
195
- var btnLeft = btn.attr('data-origin-left');
196
- var anchor = btn.find('> .btn-floating').first();
197
- var menu = btn.find('> ul').first();
198
- var backdrop = btn.find('.fab-backdrop');
199
- var fabColor = anchor.css('background-color');
200
-
201
- offsetX = btnLeft - windowWidth / 2 + btnWidth / 2;
202
- offsetY = windowHeight - btnBottom;
203
- scaleFactor = windowWidth / backdrop.width();
204
-
205
- // Hide backdrop
206
- btn.removeClass('active');
207
- btn.attr('data-open', false);
208
- btn.css({
209
- 'background-color': 'transparent',
210
- transition: 'none'
211
- });
212
- anchor.css({
213
- transition: 'none'
214
- });
215
- backdrop.css({
216
- transform: 'scale(0)',
217
- 'background-color': fabColor
218
- });
219
- menu.find('> li > a').css({
220
- opacity: ''
221
- });
222
-
223
- setTimeout(function () {
224
- backdrop.remove();
225
-
226
- // Set initial state.
227
- btn.css({
228
- 'text-align': '',
229
- width: '',
230
- bottom: '',
231
- left: '',
232
- overflow: '',
233
- 'background-color': '',
234
- transform: 'translate3d(' + -offsetX + 'px,0,0)'
235
- });
236
- anchor.css({
237
- overflow: '',
238
- transform: 'translate3d(0,' + offsetY + 'px,0)'
239
- });
240
-
241
- setTimeout(function () {
242
- btn.css({
243
- transform: 'translate3d(0,0,0)',
244
- transition: 'transform .2s'
245
- });
246
- anchor.css({
247
- transform: 'translate3d(0,0,0)',
248
- transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
249
- });
250
- }, 20);
251
- }, 200);
252
- };
253
- })(jQuery);
@@ -1,28 +0,0 @@
1
- (function ($) {
2
- $(document).on('ready turbolinks:load', function () {
3
-
4
- $(document).on('click.card', '.card', function (e) {
5
- if ($(this).find('> .card-reveal').length) {
6
- var $card = $(e.target).closest('.card');
7
- if ($card.data('initialOverflow') === undefined) {
8
- $card.data('initialOverflow', $card.css('overflow') === undefined ? '' : $card.css('overflow'));
9
- }
10
- if ($(e.target).is($('.card-reveal .card-title')) || $(e.target).is($('.card-reveal .card-title i'))) {
11
- // Make Reveal animate down and display none
12
- $(this).find('.card-reveal').velocity({ translateY: 0 }, {
13
- duration: 225,
14
- queue: false,
15
- easing: 'easeInOutQuad',
16
- complete: function () {
17
- $(this).css({ display: 'none' });
18
- $card.css('overflow', $card.data('initialOverflow'));
19
- }
20
- });
21
- } else if ($(e.target).is($('.card .activator')) || $(e.target).is($('.card .activator i'))) {
22
- $card.css('overflow', 'hidden');
23
- $(this).find('.card-reveal').css({ display: 'block' }).velocity("stop", false).velocity({ translateY: '-100%' }, { duration: 300, queue: false, easing: 'easeInOutQuad' });
24
- }
25
- }
26
- });
27
- });
28
- })(jQuery);
@@ -1,543 +0,0 @@
1
- (function ($) {
2
-
3
- var methods = {
4
-
5
- init: function (options) {
6
- var defaults = {
7
- duration: 200, // ms
8
- dist: -100, // zoom scale TODO: make this more intuitive as an option
9
- shift: 0, // spacing for center image
10
- padding: 0, // Padding between non center items
11
- fullWidth: false, // Change to full width styles
12
- indicators: false, // Toggle indicators
13
- noWrap: false, // Don't wrap around and cycle through items.
14
- onCycleTo: null // Callback for when a new slide is cycled to.
15
- };
16
- options = $.extend(defaults, options);
17
- var namespace = Materialize.objectSelectorString($(this));
18
-
19
- return this.each(function (i) {
20
-
21
- var images, item_width, item_height, offset, center, pressed, dim, count, reference, referenceY, amplitude, target, velocity, scrolling, xform, frame, timestamp, ticker, dragged, vertical_dragged;
22
- var $indicators = $('<ul class="indicators"></ul>');
23
- var scrollingTimeout = null;
24
- var oneTimeCallback = null;
25
-
26
- // Initialize
27
- var view = $(this);
28
- var hasMultipleSlides = view.find('.carousel-item').length > 1;
29
- var showIndicators = (view.attr('data-indicators') || options.indicators) && hasMultipleSlides;
30
- var noWrap = view.attr('data-no-wrap') || options.noWrap || !hasMultipleSlides;
31
- var uniqueNamespace = view.attr('data-namespace') || namespace + i;
32
- view.attr('data-namespace', uniqueNamespace);
33
-
34
- // Options
35
- var setCarouselHeight = function (imageOnly) {
36
- var firstSlide = view.find('.carousel-item.active').length ? view.find('.carousel-item.active').first() : view.find('.carousel-item').first();
37
- var firstImage = firstSlide.find('img').first();
38
- if (firstImage.length) {
39
- if (firstImage[0].complete) {
40
- // If image won't trigger the load event
41
- var imageHeight = firstImage.height();
42
- if (imageHeight > 0) {
43
- view.css('height', firstImage.height());
44
- } else {
45
- // If image still has no height, use the natural dimensions to calculate
46
- var naturalWidth = firstImage[0].naturalWidth;
47
- var naturalHeight = firstImage[0].naturalHeight;
48
- var adjustedHeight = view.width() / naturalWidth * naturalHeight;
49
- view.css('height', adjustedHeight);
50
- }
51
- } else {
52
- // Get height when image is loaded normally
53
- firstImage.on('load', function () {
54
- view.css('height', $(this).height());
55
- });
56
- }
57
- } else if (!imageOnly) {
58
- var slideHeight = firstSlide.height();
59
- view.css('height', slideHeight);
60
- }
61
- };
62
-
63
- if (options.fullWidth) {
64
- options.dist = 0;
65
- setCarouselHeight();
66
-
67
- // Offset fixed items when indicators.
68
- if (showIndicators) {
69
- view.find('.carousel-fixed-item').addClass('with-indicators');
70
- }
71
- }
72
-
73
- // Don't double initialize.
74
- if (view.hasClass('initialized')) {
75
- // Recalculate variables
76
- $(window).trigger('resize');
77
-
78
- // Redraw carousel.
79
- view.trigger('carouselNext', [0.000001]);
80
- return true;
81
- }
82
-
83
- view.addClass('initialized');
84
- pressed = false;
85
- offset = target = 0;
86
- images = [];
87
- item_width = view.find('.carousel-item').first().innerWidth();
88
- item_height = view.find('.carousel-item').first().innerHeight();
89
- dim = item_width * 2 + options.padding;
90
-
91
- view.find('.carousel-item').each(function (i) {
92
- images.push($(this)[0]);
93
- if (showIndicators) {
94
- var $indicator = $('<li class="indicator-item"></li>');
95
-
96
- // Add active to first by default.
97
- if (i === 0) {
98
- $indicator.addClass('active');
99
- }
100
-
101
- // Handle clicks on indicators.
102
- $indicator.click(function (e) {
103
- e.stopPropagation();
104
-
105
- var index = $(this).index();
106
- cycleTo(index);
107
- });
108
- $indicators.append($indicator);
109
- }
110
- });
111
-
112
- if (showIndicators) {
113
- view.append($indicators);
114
- }
115
- count = images.length;
116
-
117
- function setupEvents() {
118
- if (typeof window.ontouchstart !== 'undefined') {
119
- view.on('touchstart.carousel', tap);
120
- view.on('touchmove.carousel', drag);
121
- view.on('touchend.carousel', release);
122
- }
123
- view.on('mousedown.carousel', tap);
124
- view.on('mousemove.carousel', drag);
125
- view.on('mouseup.carousel', release);
126
- view.on('mouseleave.carousel', release);
127
- view.on('click.carousel', click);
128
- }
129
-
130
- function xpos(e) {
131
- // touch event
132
- if (e.targetTouches && e.targetTouches.length >= 1) {
133
- return e.targetTouches[0].clientX;
134
- }
135
-
136
- // mouse event
137
- return e.clientX;
138
- }
139
-
140
- function ypos(e) {
141
- // touch event
142
- if (e.targetTouches && e.targetTouches.length >= 1) {
143
- return e.targetTouches[0].clientY;
144
- }
145
-
146
- // mouse event
147
- return e.clientY;
148
- }
149
-
150
- function wrap(x) {
151
- return x >= count ? x % count : x < 0 ? wrap(count + x % count) : x;
152
- }
153
-
154
- function scroll(x) {
155
- // Track scrolling state
156
- scrolling = true;
157
- if (!view.hasClass('scrolling')) {
158
- view.addClass('scrolling');
159
- }
160
- if (scrollingTimeout != null) {
161
- window.clearTimeout(scrollingTimeout);
162
- }
163
- scrollingTimeout = window.setTimeout(function () {
164
- scrolling = false;
165
- view.removeClass('scrolling');
166
- }, options.duration);
167
-
168
- // Start actual scroll
169
- var i, half, delta, dir, tween, el, alignment, xTranslation;
170
- var lastCenter = center;
171
-
172
- offset = typeof x === 'number' ? x : offset;
173
- center = Math.floor((offset + dim / 2) / dim);
174
- delta = offset - center * dim;
175
- dir = delta < 0 ? 1 : -1;
176
- tween = -dir * delta * 2 / dim;
177
- half = count >> 1;
178
-
179
- if (!options.fullWidth) {
180
- alignment = 'translateX(' + (view[0].clientWidth - item_width) / 2 + 'px) ';
181
- alignment += 'translateY(' + (view[0].clientHeight - item_height) / 2 + 'px)';
182
- } else {
183
- alignment = 'translateX(0)';
184
- }
185
-
186
- // Set indicator active
187
- if (showIndicators) {
188
- var diff = center % count;
189
- var activeIndicator = $indicators.find('.indicator-item.active');
190
- if (activeIndicator.index() !== diff) {
191
- activeIndicator.removeClass('active');
192
- $indicators.find('.indicator-item').eq(diff).addClass('active');
193
- }
194
- }
195
-
196
- // center
197
- // Don't show wrapped items.
198
- if (!noWrap || center >= 0 && center < count) {
199
- el = images[wrap(center)];
200
-
201
- // Add active class to center item.
202
- if (!$(el).hasClass('active')) {
203
- view.find('.carousel-item').removeClass('active');
204
- $(el).addClass('active');
205
- }
206
- el.style[xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * options.shift * tween * i + 'px)' + ' translateZ(' + options.dist * tween + 'px)';
207
- el.style.zIndex = 0;
208
- if (options.fullWidth) {
209
- tweenedOpacity = 1;
210
- } else {
211
- tweenedOpacity = 1 - 0.2 * tween;
212
- }
213
- el.style.opacity = tweenedOpacity;
214
- el.style.display = 'block';
215
- }
216
-
217
- for (i = 1; i <= half; ++i) {
218
- // right side
219
- if (options.fullWidth) {
220
- zTranslation = options.dist;
221
- tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
222
- } else {
223
- zTranslation = options.dist * (i * 2 + tween * dir);
224
- tweenedOpacity = 1 - 0.2 * (i * 2 + tween * dir);
225
- }
226
- // Don't show wrapped items.
227
- if (!noWrap || center + i < count) {
228
- el = images[wrap(center + i)];
229
- el.style[xform] = alignment + ' translateX(' + (options.shift + (dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
230
- el.style.zIndex = -i;
231
- el.style.opacity = tweenedOpacity;
232
- el.style.display = 'block';
233
- }
234
-
235
- // left side
236
- if (options.fullWidth) {
237
- zTranslation = options.dist;
238
- tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
239
- } else {
240
- zTranslation = options.dist * (i * 2 - tween * dir);
241
- tweenedOpacity = 1 - 0.2 * (i * 2 - tween * dir);
242
- }
243
- // Don't show wrapped items.
244
- if (!noWrap || center - i >= 0) {
245
- el = images[wrap(center - i)];
246
- el.style[xform] = alignment + ' translateX(' + (-options.shift + (-dim * i - delta) / 2) + 'px)' + ' translateZ(' + zTranslation + 'px)';
247
- el.style.zIndex = -i;
248
- el.style.opacity = tweenedOpacity;
249
- el.style.display = 'block';
250
- }
251
- }
252
-
253
- // center
254
- // Don't show wrapped items.
255
- if (!noWrap || center >= 0 && center < count) {
256
- el = images[wrap(center)];
257
- el.style[xform] = alignment + ' translateX(' + -delta / 2 + 'px)' + ' translateX(' + dir * options.shift * tween + 'px)' + ' translateZ(' + options.dist * tween + 'px)';
258
- el.style.zIndex = 0;
259
- if (options.fullWidth) {
260
- tweenedOpacity = 1;
261
- } else {
262
- tweenedOpacity = 1 - 0.2 * tween;
263
- }
264
- el.style.opacity = tweenedOpacity;
265
- el.style.display = 'block';
266
- }
267
-
268
- // onCycleTo callback
269
- if (lastCenter !== center && typeof options.onCycleTo === "function") {
270
- var $curr_item = view.find('.carousel-item').eq(wrap(center));
271
- options.onCycleTo.call(this, $curr_item, dragged);
272
- }
273
-
274
- // One time callback
275
- if (typeof oneTimeCallback === "function") {
276
- oneTimeCallback.call(this, $curr_item, dragged);
277
- oneTimeCallback = null;
278
- }
279
- }
280
-
281
- function track() {
282
- var now, elapsed, delta, v;
283
-
284
- now = Date.now();
285
- elapsed = now - timestamp;
286
- timestamp = now;
287
- delta = offset - frame;
288
- frame = offset;
289
-
290
- v = 1000 * delta / (1 + elapsed);
291
- velocity = 0.8 * v + 0.2 * velocity;
292
- }
293
-
294
- function autoScroll() {
295
- var elapsed, delta;
296
-
297
- if (amplitude) {
298
- elapsed = Date.now() - timestamp;
299
- delta = amplitude * Math.exp(-elapsed / options.duration);
300
- if (delta > 2 || delta < -2) {
301
- scroll(target - delta);
302
- requestAnimationFrame(autoScroll);
303
- } else {
304
- scroll(target);
305
- }
306
- }
307
- }
308
-
309
- function click(e) {
310
- // Disable clicks if carousel was dragged.
311
- if (dragged) {
312
- e.preventDefault();
313
- e.stopPropagation();
314
- return false;
315
- } else if (!options.fullWidth) {
316
- var clickedIndex = $(e.target).closest('.carousel-item').index();
317
- var diff = wrap(center) - clickedIndex;
318
-
319
- // Disable clicks if carousel was shifted by click
320
- if (diff !== 0) {
321
- e.preventDefault();
322
- e.stopPropagation();
323
- }
324
- cycleTo(clickedIndex);
325
- }
326
- }
327
-
328
- function cycleTo(n) {
329
- var diff = center % count - n;
330
-
331
- // Account for wraparound.
332
- if (!noWrap) {
333
- if (diff < 0) {
334
- if (Math.abs(diff + count) < Math.abs(diff)) {
335
- diff += count;
336
- }
337
- } else if (diff > 0) {
338
- if (Math.abs(diff - count) < diff) {
339
- diff -= count;
340
- }
341
- }
342
- }
343
-
344
- // Call prev or next accordingly.
345
- if (diff < 0) {
346
- view.trigger('carouselNext', [Math.abs(diff)]);
347
- } else if (diff > 0) {
348
- view.trigger('carouselPrev', [diff]);
349
- }
350
- }
351
-
352
- function tap(e) {
353
- // Fixes firefox draggable image bug
354
- if (e.type === 'mousedown' && $(e.target).is('img')) {
355
- e.preventDefault();
356
- }
357
- pressed = true;
358
- dragged = false;
359
- vertical_dragged = false;
360
- reference = xpos(e);
361
- referenceY = ypos(e);
362
-
363
- velocity = amplitude = 0;
364
- frame = offset;
365
- timestamp = Date.now();
366
- clearInterval(ticker);
367
- ticker = setInterval(track, 100);
368
- }
369
-
370
- function drag(e) {
371
- var x, delta, deltaY;
372
- if (pressed) {
373
- x = xpos(e);
374
- y = ypos(e);
375
- delta = reference - x;
376
- deltaY = Math.abs(referenceY - y);
377
- if (deltaY < 30 && !vertical_dragged) {
378
- // If vertical scrolling don't allow dragging.
379
- if (delta > 2 || delta < -2) {
380
- dragged = true;
381
- reference = x;
382
- scroll(offset + delta);
383
- }
384
- } else if (dragged) {
385
- // If dragging don't allow vertical scroll.
386
- e.preventDefault();
387
- e.stopPropagation();
388
- return false;
389
- } else {
390
- // Vertical scrolling.
391
- vertical_dragged = true;
392
- }
393
- }
394
-
395
- if (dragged) {
396
- // If dragging don't allow vertical scroll.
397
- e.preventDefault();
398
- e.stopPropagation();
399
- return false;
400
- }
401
- }
402
-
403
- function release(e) {
404
- if (pressed) {
405
- pressed = false;
406
- } else {
407
- return;
408
- }
409
-
410
- clearInterval(ticker);
411
- target = offset;
412
- if (velocity > 10 || velocity < -10) {
413
- amplitude = 0.9 * velocity;
414
- target = offset + amplitude;
415
- }
416
- target = Math.round(target / dim) * dim;
417
-
418
- // No wrap of items.
419
- if (noWrap) {
420
- if (target >= dim * (count - 1)) {
421
- target = dim * (count - 1);
422
- } else if (target < 0) {
423
- target = 0;
424
- }
425
- }
426
- amplitude = target - offset;
427
- timestamp = Date.now();
428
- requestAnimationFrame(autoScroll);
429
-
430
- if (dragged) {
431
- e.preventDefault();
432
- e.stopPropagation();
433
- }
434
- return false;
435
- }
436
-
437
- xform = 'transform';
438
- ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
439
- var e = prefix + 'Transform';
440
- if (typeof document.body.style[e] !== 'undefined') {
441
- xform = e;
442
- return false;
443
- }
444
- return true;
445
- });
446
-
447
- var throttledResize = Materialize.throttle(function () {
448
- if (options.fullWidth) {
449
- item_width = view.find('.carousel-item').first().innerWidth();
450
- var imageHeight = view.find('.carousel-item.active').height();
451
- dim = item_width * 2 + options.padding;
452
- offset = center * 2 * item_width;
453
- target = offset;
454
- setCarouselHeight(true);
455
- } else {
456
- scroll();
457
- }
458
- }, 200);
459
- $(window).off('resize.carousel-' + uniqueNamespace).on('resize.carousel-' + uniqueNamespace, throttledResize);
460
-
461
- setupEvents();
462
- scroll(offset);
463
-
464
- $(this).on('carouselNext', function (e, n, callback) {
465
- if (n === undefined) {
466
- n = 1;
467
- }
468
- if (typeof callback === "function") {
469
- oneTimeCallback = callback;
470
- }
471
-
472
- target = dim * Math.round(offset / dim) + dim * n;
473
- if (offset !== target) {
474
- amplitude = target - offset;
475
- timestamp = Date.now();
476
- requestAnimationFrame(autoScroll);
477
- }
478
- });
479
-
480
- $(this).on('carouselPrev', function (e, n, callback) {
481
- if (n === undefined) {
482
- n = 1;
483
- }
484
- if (typeof callback === "function") {
485
- oneTimeCallback = callback;
486
- }
487
-
488
- target = dim * Math.round(offset / dim) - dim * n;
489
- if (offset !== target) {
490
- amplitude = target - offset;
491
- timestamp = Date.now();
492
- requestAnimationFrame(autoScroll);
493
- }
494
- });
495
-
496
- $(this).on('carouselSet', function (e, n, callback) {
497
- if (n === undefined) {
498
- n = 0;
499
- }
500
- if (typeof callback === "function") {
501
- oneTimeCallback = callback;
502
- }
503
-
504
- cycleTo(n);
505
- });
506
- });
507
- },
508
- next: function (n, callback) {
509
- $(this).trigger('carouselNext', [n, callback]);
510
- },
511
- prev: function (n, callback) {
512
- $(this).trigger('carouselPrev', [n, callback]);
513
- },
514
- set: function (n, callback) {
515
- $(this).trigger('carouselSet', [n, callback]);
516
- },
517
- destroy: function () {
518
- var uniqueNamespace = $(this).attr('data-namespace');
519
- $(this).removeAttr('data-namespace');
520
- $(this).removeClass('initialized');
521
- $(this).find('.indicators').remove();
522
-
523
- // Remove event handlers
524
- $(this).off('carouselNext carouselPrev carouselSet');
525
- $(window).off('resize.carousel-' + uniqueNamespace);
526
- if (typeof window.ontouchstart !== 'undefined') {
527
- $(this).off('touchstart.carousel touchmove.carousel touchend.carousel');
528
- }
529
- $(this).off('mousedown.carousel mousemove.carousel mouseup.carousel mouseleave.carousel click.carousel');
530
- }
531
- };
532
-
533
- $.fn.carousel = function (methodOrOptions) {
534
- if (methods[methodOrOptions]) {
535
- return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
536
- } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
537
- // Default to "init"
538
- return methods.init.apply(this, arguments);
539
- } else {
540
- $.error('Method ' + methodOrOptions + ' does not exist on jQuery.carousel');
541
- }
542
- }; // Plugin end
543
- })(jQuery);