foundation-rails 6.1.2.0 → 6.2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +7 -6
  3. data/README.md +1 -1
  4. data/Rakefile +5 -1
  5. data/bower.json +3 -3
  6. data/foundation-rails.gemspec +1 -0
  7. data/lib/foundation-rails.rb +1 -0
  8. data/lib/foundation/rails/version.rb +1 -1
  9. data/lib/generators/foundation/templates/foundation_and_overrides.scss +2 -2
  10. data/vendor/assets/js/foundation.abide.js.es6 +462 -0
  11. data/vendor/assets/js/{foundation.accordion.js → foundation.accordion.js.es6} +55 -47
  12. data/vendor/assets/js/{foundation.accordionMenu.js → foundation.accordionMenu.js.es6} +46 -35
  13. data/vendor/assets/js/{foundation.core.js → foundation.core.js.es6} +10 -8
  14. data/vendor/assets/js/{foundation.drilldown.js → foundation.drilldown.js.es6} +75 -49
  15. data/vendor/assets/js/{foundation.dropdown.js → foundation.dropdown.js.es6} +100 -88
  16. data/vendor/assets/js/{foundation.dropdownMenu.js → foundation.dropdownMenu.js.es6} +134 -128
  17. data/vendor/assets/js/{foundation.equalizer.js → foundation.equalizer.js.es6} +72 -61
  18. data/vendor/assets/js/{foundation.interchange.js → foundation.interchange.js.es6} +44 -45
  19. data/vendor/assets/js/{foundation.js → foundation.js.es6} +0 -0
  20. data/vendor/assets/js/{foundation.magellan.js → foundation.magellan.js.es6} +80 -83
  21. data/vendor/assets/js/foundation.offcanvas.js.es6 +395 -0
  22. data/vendor/assets/js/foundation.orbit.js.es6 +445 -0
  23. data/vendor/assets/js/{foundation.responsiveMenu.js → foundation.responsiveMenu.js.es6} +37 -31
  24. data/vendor/assets/js/foundation.responsiveToggle.js.es6 +112 -0
  25. data/vendor/assets/js/foundation.reveal.js.es6 +544 -0
  26. data/vendor/assets/js/{foundation.slider.js → foundation.slider.js.es6} +235 -184
  27. data/vendor/assets/js/{foundation.sticky.js → foundation.sticky.js.es6} +177 -166
  28. data/vendor/assets/js/{foundation.tabs.js → foundation.tabs.js.es6} +138 -118
  29. data/vendor/assets/js/{foundation.toggler.js → foundation.toggler.js.es6} +34 -37
  30. data/vendor/assets/js/{foundation.tooltip.js → foundation.tooltip.js.es6} +162 -153
  31. data/vendor/assets/js/foundation.util.box.js.es6 +183 -0
  32. data/vendor/assets/js/{foundation.util.keyboard.js → foundation.util.keyboard.js.es6} +54 -54
  33. data/vendor/assets/js/{foundation.util.mediaQuery.js → foundation.util.mediaQuery.js.es6} +46 -46
  34. data/vendor/assets/js/{foundation.util.motion.js → foundation.util.motion.js.es6} +58 -48
  35. data/vendor/assets/js/foundation.util.nest.js.es6 +76 -0
  36. data/vendor/assets/js/foundation.util.timerAndImageLoader.js.es6 +86 -0
  37. data/vendor/assets/js/{foundation.util.touch.js → foundation.util.touch.js.es6} +2 -2
  38. data/vendor/assets/js/foundation.util.triggers.js.es6 +239 -0
  39. data/vendor/assets/scss/_global.scss +28 -27
  40. data/vendor/assets/scss/components/_badge.scss +1 -1
  41. data/vendor/assets/scss/components/_button-group.scss +77 -26
  42. data/vendor/assets/scss/components/_button.scss +8 -8
  43. data/vendor/assets/scss/components/_callout.scss +2 -2
  44. data/vendor/assets/scss/components/_drilldown.scss +4 -0
  45. data/vendor/assets/scss/components/_dropdown-menu.scss +104 -54
  46. data/vendor/assets/scss/components/_flex.scss +28 -0
  47. data/vendor/assets/scss/components/_label.scss +1 -1
  48. data/vendor/assets/scss/components/_media-object.scss +37 -7
  49. data/vendor/assets/scss/components/_menu-icon.scss +9 -0
  50. data/vendor/assets/scss/components/_menu.scss +127 -29
  51. data/vendor/assets/scss/components/_off-canvas.scss +1 -0
  52. data/vendor/assets/scss/components/_pagination.scss +3 -3
  53. data/vendor/assets/scss/components/_progress-bar.scss +1 -25
  54. data/vendor/assets/scss/components/_reveal.scss +12 -6
  55. data/vendor/assets/scss/components/_slider.scss +3 -35
  56. data/vendor/assets/scss/components/_table.scss +8 -0
  57. data/vendor/assets/scss/components/_tabs.scss +5 -10
  58. data/vendor/assets/scss/components/_title-bar.scss +27 -10
  59. data/vendor/assets/scss/components/_tooltip.scss +0 -4
  60. data/vendor/assets/scss/components/_top-bar.scss +93 -21
  61. data/vendor/assets/scss/components/_visibility.scss +1 -1
  62. data/vendor/assets/scss/forms/_checkbox.scss +1 -1
  63. data/vendor/assets/scss/forms/_error.scss +7 -5
  64. data/vendor/assets/scss/forms/_forms.scss +3 -0
  65. data/vendor/assets/scss/forms/_help-text.scss +1 -1
  66. data/vendor/assets/scss/forms/_input-group.scss +44 -9
  67. data/vendor/assets/scss/forms/_meter.scss +109 -0
  68. data/vendor/assets/scss/forms/_progress.scss +85 -0
  69. data/vendor/assets/scss/forms/_range.scss +144 -0
  70. data/vendor/assets/scss/forms/_select.scss +1 -1
  71. data/vendor/assets/scss/forms/_text.scss +10 -1
  72. data/vendor/assets/scss/foundation.scss +16 -5
  73. data/vendor/assets/scss/grid/_classes.scss +5 -18
  74. data/vendor/assets/scss/grid/_column.scss +13 -11
  75. data/vendor/assets/scss/grid/_flex-grid.scss +54 -80
  76. data/vendor/assets/scss/grid/_grid.scss +22 -10
  77. data/vendor/assets/scss/grid/_layout.scss +18 -0
  78. data/vendor/assets/scss/grid/_row.scss +11 -15
  79. data/vendor/assets/scss/motion-ui/_classes.scss +10 -3
  80. data/vendor/assets/scss/motion-ui/effects/_fade.scss +4 -1
  81. data/vendor/assets/scss/motion-ui/effects/_zoom.scss +1 -1
  82. data/vendor/assets/scss/motion-ui/transitions/_slide.scss +1 -1
  83. data/vendor/assets/scss/motion-ui/util/_transition.scss +1 -1
  84. data/vendor/assets/scss/settings/_settings.scss +64 -47
  85. data/vendor/assets/scss/typography/_base.scss +4 -0
  86. data/vendor/assets/scss/typography/_print.scss +9 -5
  87. data/vendor/assets/scss/util/_breakpoint.scss +31 -25
  88. data/vendor/assets/scss/util/_color.scss +19 -0
  89. data/vendor/assets/scss/util/_flex.scss +68 -0
  90. data/vendor/assets/scss/util/_mixins.scss +13 -7
  91. data/vendor/assets/scss/util/_util.scss +1 -5
  92. data/vendor/assets/scss/util/_value.scss +9 -28
  93. metadata +51 -31
  94. data/vendor/assets/js/foundation.abide.js +0 -418
  95. data/vendor/assets/js/foundation.offcanvas.js +0 -376
  96. data/vendor/assets/js/foundation.orbit.js +0 -421
  97. data/vendor/assets/js/foundation.responsiveToggle.js +0 -106
  98. data/vendor/assets/js/foundation.reveal.js +0 -514
  99. data/vendor/assets/js/foundation.util.box.js +0 -169
  100. data/vendor/assets/js/foundation.util.nest.js +0 -63
  101. data/vendor/assets/js/foundation.util.timerAndImageLoader.js +0 -82
  102. data/vendor/assets/js/foundation.util.triggers.js +0 -224
@@ -1,376 +0,0 @@
1
- /**
2
- * OffCanvas module.
3
- * @module foundation.offcanvas
4
- * @requires foundation.util.mediaQuery
5
- * @requires foundation.util.triggers
6
- * @requires foundation.util.motion
7
- */
8
- !function($, Foundation) {
9
-
10
- 'use strict';
11
-
12
- /**
13
- * Creates a new instance of an off-canvas wrapper.
14
- * @class
15
- * @fires OffCanvas#init
16
- * @param {Object} element - jQuery object to initialize.
17
- * @param {Object} options - Overrides to the default plugin settings.
18
- */
19
- function OffCanvas(element, options) {
20
- this.$element = element;
21
- this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
22
- this.$lastTrigger = $();
23
-
24
- this._init();
25
- this._events();
26
-
27
- Foundation.registerPlugin(this, 'OffCanvas');
28
- }
29
-
30
- OffCanvas.defaults = {
31
- /**
32
- * Allow the user to click outside of the menu to close it.
33
- * @option
34
- * @example true
35
- */
36
- closeOnClick: true,
37
- /**
38
- * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
39
- * @option
40
- * @example 500
41
- */
42
- transitionTime: 0,
43
- /**
44
- * Direction the offcanvas opens from. Determines class applied to body.
45
- * @option
46
- * @example left
47
- */
48
- position: 'left',
49
- /**
50
- * Force the page to scroll to top on open.
51
- */
52
- forceTop: true,
53
- /**
54
- * Allow the offcanvas to be sticky while open. Does nothing if Sass option `$maincontent-prevent-scroll === true`.
55
- * Performance in Safari OSX/iOS is not great.
56
- */
57
- // isSticky: false,
58
- /**
59
- * Allow the offcanvas to remain open for certain breakpoints.
60
- * @option
61
- * @example false
62
- */
63
- isRevealed: false,
64
- /**
65
- * Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class @`revealClass`.
66
- * @option
67
- * @example reveal-for-large
68
- */
69
- revealOn: null,
70
- /**
71
- * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
72
- * @option
73
- * @example true
74
- */
75
- autoFocus: true,
76
- /**
77
- * Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
78
- * @option
79
- * TODO improve the regex testing for this.
80
- * @example reveal-for-large
81
- */
82
- revealClass: 'reveal-for-',
83
- /**
84
- * Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
85
- * @option
86
- * @example true
87
- */
88
- trapFocus: false
89
- };
90
-
91
- /**
92
- * Initializes the off-canvas wrapper by adding the exit overlay (if needed).
93
- * @function
94
- * @private
95
- */
96
- OffCanvas.prototype._init = function() {
97
- var id = this.$element.attr('id');
98
-
99
- this.$element.attr('aria-hidden', 'true');
100
-
101
- // Find triggers that affect this element and add aria-expanded to them
102
- $(document)
103
- .find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
104
- .attr('aria-expanded', 'false')
105
- .attr('aria-controls', id);
106
-
107
- // Add a close trigger over the body if necessary
108
- if (this.options.closeOnClick){
109
- if($('.js-off-canvas-exit').length){
110
- this.$exiter = $('.js-off-canvas-exit');
111
- }else{
112
- var exiter = document.createElement('div');
113
- exiter.setAttribute('class', 'js-off-canvas-exit');
114
- $('[data-off-canvas-content]').append(exiter);
115
-
116
- this.$exiter = $(exiter);
117
- }
118
- }
119
-
120
- this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
121
-
122
- if(this.options.isRevealed){
123
- this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
124
- this._setMQChecker();
125
- }
126
- if(!this.options.transitionTime){
127
- this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
128
- }
129
- };
130
-
131
- /**
132
- * Adds event handlers to the off-canvas wrapper and the exit overlay.
133
- * @function
134
- * @private
135
- */
136
- OffCanvas.prototype._events = function() {
137
- this.$element.off('.zf.trigger .zf.offcanvas').on({
138
- 'open.zf.trigger': this.open.bind(this),
139
- 'close.zf.trigger': this.close.bind(this),
140
- 'toggle.zf.trigger': this.toggle.bind(this),
141
- 'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
142
- });
143
-
144
- if (this.options.closeOnClick && this.$exiter.length) {
145
- this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
146
- }
147
- };
148
- /**
149
- * Applies event listener for elements that will reveal at certain breakpoints.
150
- * @private
151
- */
152
- OffCanvas.prototype._setMQChecker = function(){
153
- var _this = this;
154
-
155
- $(window).on('changed.zf.mediaquery', function(){
156
- if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
157
- _this.reveal(true);
158
- }else{
159
- _this.reveal(false);
160
- }
161
- }).one('load.zf.offcanvas', function(){
162
- if(Foundation.MediaQuery.atLeast(_this.options.revealOn)){
163
- _this.reveal(true);
164
- }
165
- });
166
- };
167
- /**
168
- * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
169
- * @param {Boolean} isRevealed - true if element should be revealed.
170
- * @function
171
- */
172
- OffCanvas.prototype.reveal = function(isRevealed){
173
- var $closer = this.$element.find('[data-close]');
174
- if(isRevealed){
175
- this.close();
176
- this.isRevealed = true;
177
- // if(!this.options.forceTop){
178
- // var scrollPos = parseInt(window.pageYOffset);
179
- // this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
180
- // }
181
- // if(this.options.isSticky){ this._stick(); }
182
- this.$element.off('open.zf.trigger toggle.zf.trigger');
183
- if($closer.length){ $closer.hide(); }
184
- }else{
185
- this.isRevealed = false;
186
- // if(this.options.isSticky || !this.options.forceTop){
187
- // this.$element[0].style.transform = '';
188
- // $(window).off('scroll.zf.offcanvas');
189
- // }
190
- this.$element.on({
191
- 'open.zf.trigger': this.open.bind(this),
192
- 'toggle.zf.trigger': this.toggle.bind(this)
193
- });
194
- if($closer.length){
195
- $closer.show();
196
- }
197
- }
198
- };
199
-
200
- /**
201
- * Opens the off-canvas menu.
202
- * @function
203
- * @param {Object} event - Event object passed from listener.
204
- * @param {jQuery} trigger - element that triggered the off-canvas to open.
205
- * @fires OffCanvas#opened
206
- */
207
- OffCanvas.prototype.open = function(event, trigger) {
208
- if (this.$element.hasClass('is-open') || this.isRevealed){ return; }
209
- var _this = this,
210
- $body = $(document.body);
211
- $('body').scrollTop(0);
212
- // window.pageYOffset = 0;
213
-
214
- // if(!this.options.forceTop){
215
- // var scrollPos = parseInt(window.pageYOffset);
216
- // this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
217
- // if(this.$exiter.length){
218
- // this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
219
- // }
220
- // }
221
- /**
222
- * Fires when the off-canvas menu opens.
223
- * @event OffCanvas#opened
224
- */
225
- Foundation.Move(this.options.transitionTime, this.$element, function(){
226
- $('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position);
227
-
228
- _this.$element
229
- .addClass('is-open')
230
-
231
- // if(_this.options.isSticky){
232
- // _this._stick();
233
- // }
234
- });
235
- this.$element.attr('aria-hidden', 'false')
236
- .trigger('opened.zf.offcanvas');
237
-
238
- if(this.options.closeOnClick){
239
- this.$exiter.addClass('is-visible');
240
- }
241
- if(trigger){
242
- this.$lastTrigger = trigger.attr('aria-expanded', 'true');
243
- }
244
- if(this.options.autoFocus){
245
- this.$element.one('finished.zf.animate', function(){
246
- _this.$element.find('a, button').eq(0).focus();
247
- });
248
- }
249
- if(this.options.trapFocus){
250
- $('[data-off-canvas-content]').attr('tabindex', '-1');
251
- this._trapFocus();
252
- }
253
- };
254
- /**
255
- * Traps focus within the offcanvas on open.
256
- * @private
257
- */
258
- OffCanvas.prototype._trapFocus = function(){
259
- var focusable = Foundation.Keyboard.findFocusable(this.$element),
260
- first = focusable.eq(0),
261
- last = focusable.eq(-1);
262
-
263
- focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e){
264
- if(e.which === 9 || e.keycode === 9){
265
- if(e.target === last[0] && !e.shiftKey){
266
- e.preventDefault();
267
- first.focus();
268
- }
269
- if(e.target === first[0] && e.shiftKey){
270
- e.preventDefault();
271
- last.focus();
272
- }
273
- }
274
- });
275
- };
276
- /**
277
- * Allows the offcanvas to appear sticky utilizing translate properties.
278
- * @private
279
- */
280
- // OffCanvas.prototype._stick = function(){
281
- // var elStyle = this.$element[0].style;
282
- //
283
- // if(this.options.closeOnClick){
284
- // var exitStyle = this.$exiter[0].style;
285
- // }
286
- //
287
- // $(window).on('scroll.zf.offcanvas', function(e){
288
- // console.log(e);
289
- // var pageY = window.pageYOffset;
290
- // elStyle.transform = 'translate(0,' + pageY + 'px)';
291
- // if(exitStyle !== undefined){ exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
292
- // });
293
- // // this.$element.trigger('stuck.zf.offcanvas');
294
- // };
295
- /**
296
- * Closes the off-canvas menu.
297
- * @function
298
- * @param {Function} cb - optional cb to fire after closure.
299
- * @fires OffCanvas#closed
300
- */
301
- OffCanvas.prototype.close = function(cb) {
302
- if(!this.$element.hasClass('is-open') || this.isRevealed){ return; }
303
-
304
- var _this = this;
305
-
306
- // Foundation.Move(this.options.transitionTime, this.$element, function(){
307
- $('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-' + _this.options.position);
308
- _this.$element.removeClass('is-open');
309
- // Foundation._reflow();
310
- // });
311
- this.$element.attr('aria-hidden', 'true')
312
- /**
313
- * Fires when the off-canvas menu opens.
314
- * @event OffCanvas#closed
315
- */
316
- .trigger('closed.zf.offcanvas');
317
- // if(_this.options.isSticky || !_this.options.forceTop){
318
- // setTimeout(function(){
319
- // _this.$element[0].style.transform = '';
320
- // $(window).off('scroll.zf.offcanvas');
321
- // }, this.options.transitionTime);
322
- // }
323
- if(this.options.closeOnClick){
324
- this.$exiter.removeClass('is-visible');
325
- }
326
-
327
- this.$lastTrigger.attr('aria-expanded', 'false');
328
- if(this.options.trapFocus){
329
- $('[data-off-canvas-content]').removeAttr('tabindex');
330
- }
331
-
332
- };
333
-
334
- /**
335
- * Toggles the off-canvas menu open or closed.
336
- * @function
337
- * @param {Object} event - Event object passed from listener.
338
- * @param {jQuery} trigger - element that triggered the off-canvas to open.
339
- */
340
- OffCanvas.prototype.toggle = function(event, trigger) {
341
- if (this.$element.hasClass('is-open')) {
342
- this.close(event, trigger);
343
- }
344
- else {
345
- this.open(event, trigger);
346
- }
347
- };
348
-
349
- /**
350
- * Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
351
- * @function
352
- * @private
353
- */
354
- OffCanvas.prototype._handleKeyboard = function(event) {
355
- if (event.which !== 27) return;
356
-
357
- event.stopPropagation();
358
- event.preventDefault();
359
- this.close();
360
- this.$lastTrigger.focus();
361
- };
362
- /**
363
- * Destroys the offcanvas plugin.
364
- * @function
365
- */
366
- OffCanvas.prototype.destroy = function(){
367
- this.close();
368
- this.$element.off('.zf.trigger .zf.offcanvas');
369
- this.$exiter.off('.zf.offcanvas');
370
-
371
- Foundation.unregisterPlugin(this);
372
- };
373
-
374
- Foundation.plugin(OffCanvas, 'OffCanvas');
375
-
376
- }(jQuery, Foundation);
@@ -1,421 +0,0 @@
1
- /**
2
- * Orbit module.
3
- * @module foundation.orbit
4
- * @requires foundation.util.keyboard
5
- * @requires foundation.util.motion
6
- * @requires foundation.util.timerAndImageLoader
7
- * @requires foundation.util.touch
8
- */
9
- !function($, Foundation){
10
- 'use strict';
11
- /**
12
- * Creates a new instance of an orbit carousel.
13
- * @class
14
- * @param {jQuery} element - jQuery object to make into an Orbit Carousel.
15
- * @param {Object} options - Overrides to the default plugin settings.
16
- */
17
- function Orbit(element, options){
18
- this.$element = element;
19
- this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
20
-
21
- this._init();
22
-
23
- Foundation.registerPlugin(this, 'Orbit');
24
- Foundation.Keyboard.register('Orbit', {
25
- 'ltr': {
26
- 'ARROW_RIGHT': 'next',
27
- 'ARROW_LEFT': 'previous'
28
- },
29
- 'rtl': {
30
- 'ARROW_LEFT': 'next',
31
- 'ARROW_RIGHT': 'previous'
32
- }
33
- });
34
- }
35
- Orbit.defaults = {
36
- /**
37
- * Tells the JS to loadBullets.
38
- * @option
39
- * @example true
40
- */
41
- bullets: true,
42
- /**
43
- * Tells the JS to apply event listeners to nav buttons
44
- * @option
45
- * @example true
46
- */
47
- navButtons: true,
48
- /**
49
- * motion-ui animation class to apply
50
- * @option
51
- * @example 'slide-in-right'
52
- */
53
- animInFromRight: 'slide-in-right',
54
- /**
55
- * motion-ui animation class to apply
56
- * @option
57
- * @example 'slide-out-right'
58
- */
59
- animOutToRight: 'slide-out-right',
60
- /**
61
- * motion-ui animation class to apply
62
- * @option
63
- * @example 'slide-in-left'
64
- *
65
- */
66
- animInFromLeft: 'slide-in-left',
67
- /**
68
- * motion-ui animation class to apply
69
- * @option
70
- * @example 'slide-out-left'
71
- */
72
- animOutToLeft: 'slide-out-left',
73
- /**
74
- * Allows Orbit to automatically animate on page load.
75
- * @option
76
- * @example true
77
- */
78
- autoPlay: true,
79
- /**
80
- * Amount of time, in ms, between slide transitions
81
- * @option
82
- * @example 5000
83
- */
84
- timerDelay: 5000,
85
- /**
86
- * Allows Orbit to infinitely loop through the slides
87
- * @option
88
- * @example true
89
- */
90
- infiniteWrap: true,
91
- /**
92
- * Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
93
- * @option
94
- * @example true
95
- */
96
- swipe: true,
97
- /**
98
- * Allows the timing function to pause animation on hover.
99
- * @option
100
- * @example true
101
- */
102
- pauseOnHover: true,
103
- /**
104
- * Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
105
- * @option
106
- * @example true
107
- */
108
- accessible: true,
109
- /**
110
- * Class applied to the container of Orbit
111
- * @option
112
- * @example 'orbit-container'
113
- */
114
- containerClass: 'orbit-container',
115
- /**
116
- * Class applied to individual slides.
117
- * @option
118
- * @example 'orbit-slide'
119
- */
120
- slideClass: 'orbit-slide',
121
- /**
122
- * Class applied to the bullet container. You're welcome.
123
- * @option
124
- * @example 'orbit-bullets'
125
- */
126
- boxOfBullets: 'orbit-bullets',
127
- /**
128
- * Class applied to the `next` navigation button.
129
- * @option
130
- * @example 'orbit-next'
131
- */
132
- nextClass: 'orbit-next',
133
- /**
134
- * Class applied to the `previous` navigation button.
135
- * @option
136
- * @example 'orbit-previous'
137
- */
138
- prevClass: 'orbit-previous',
139
- /**
140
- * Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatability.
141
- * @option
142
- * @example true
143
- */
144
- useMUI: true
145
- };
146
- /**
147
- * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
148
- * @function
149
- * @private
150
- */
151
- Orbit.prototype._init = function(){
152
- this.$wrapper = this.$element.find('.' + this.options.containerClass);
153
- this.$slides = this.$element.find('.' + this.options.slideClass);
154
- var $images = this.$element.find('img'),
155
- initActive = this.$slides.filter('.is-active');
156
-
157
- if(!initActive.length){
158
- this.$slides.eq(0).addClass('is-active');
159
- }
160
- if(!this.options.useMUI){
161
- this.$slides.addClass('no-motionui');
162
- }
163
- if($images.length){
164
- Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
165
- }else{
166
- this._prepareForOrbit();//hehe
167
- }
168
-
169
- if(this.options.bullets){
170
- this._loadBullets();
171
- }
172
-
173
- this._events();
174
-
175
- if(this.options.autoPlay && this.$slides.length > 1){
176
- this.geoSync();
177
- }
178
- if(this.options.accessible){ // allow wrapper to be focusable to enable arrow navigation
179
- this.$wrapper.attr('tabindex', 0);
180
- }
181
- };
182
- /**
183
- * Creates a jQuery collection of bullets, if they are being used.
184
- * @function
185
- * @private
186
- */
187
- Orbit.prototype._loadBullets = function(){
188
- this.$bullets = this.$element.find('.' + this.options.boxOfBullets).find('button');
189
- };
190
- /**
191
- * Sets a `timer` object on the orbit, and starts the counter for the next slide.
192
- * @function
193
- */
194
- Orbit.prototype.geoSync = function(){
195
- var _this = this;
196
- this.timer = new Foundation.Timer(
197
- this.$element,
198
- {duration: this.options.timerDelay,
199
- infinite: false},
200
- function(){
201
- _this.changeSlide(true);
202
- });
203
- this.timer.start();
204
- };
205
- /**
206
- * Sets wrapper and slide heights for the orbit.
207
- * @function
208
- * @private
209
- */
210
- Orbit.prototype._prepareForOrbit = function(){
211
- var _this = this;
212
- this._setWrapperHeight(function(max){
213
- _this._setSlideHeight(max);
214
- });
215
- };
216
- /**
217
- * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
218
- * @function
219
- * @private
220
- * @param {Function} cb - a callback function to fire when complete.
221
- */
222
- Orbit.prototype._setWrapperHeight = function(cb){//rewrite this to `for` loop
223
- var max = 0, temp, counter = 0;
224
-
225
- this.$slides.each(function(){
226
- temp = this.getBoundingClientRect().height;
227
- $(this).attr('data-slide', counter);
228
-
229
- if(counter){//if not the first slide, set css position and display property
230
- $(this).css({'position': 'relative', 'display': 'none'});
231
- }
232
- max = temp > max ? temp : max;
233
- counter++;
234
- });
235
-
236
- if(counter === this.$slides.length){
237
- this.$wrapper.css({'height': max});//only change the wrapper height property once.
238
- cb(max);//fire callback with max height dimension.
239
- }
240
- };
241
- /**
242
- * Sets the max-height of each slide.
243
- * @function
244
- * @private
245
- */
246
- Orbit.prototype._setSlideHeight = function(height){
247
- this.$slides.each(function(){
248
- $(this).css('max-height', height);
249
- });
250
- };
251
- /**
252
- * Adds event listeners to basically everything within the element.
253
- * @function
254
- * @private
255
- */
256
- Orbit.prototype._events = function(){
257
- var _this = this;
258
-
259
- //***************************************
260
- //**Now using custom event - thanks to:**
261
- //** Yohai Ararat of Toronto **
262
- //***************************************
263
- if(this.$slides.length > 1){
264
-
265
- if(this.options.swipe){
266
- this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
267
- .on('swipeleft.zf.orbit', function(e){
268
- e.preventDefault();
269
- _this.changeSlide(true);
270
- }).on('swiperight.zf.orbit', function(e){
271
- e.preventDefault();
272
- _this.changeSlide(false);
273
- });
274
- }
275
- //***************************************
276
-
277
- if(this.options.autoPlay){
278
- this.$slides.on('click.zf.orbit', function(){
279
- _this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
280
- _this.timer[_this.$element.data('clickedOn') ? 'pause' : 'start']();
281
- });
282
- if(this.options.pauseOnHover){
283
- this.$element.on('mouseenter.zf.orbit', function(){
284
- _this.timer.pause();
285
- }).on('mouseleave.zf.orbit', function(){
286
- if(!_this.$element.data('clickedOn')){
287
- _this.timer.start();
288
- }
289
- });
290
- }
291
- }
292
-
293
- if(this.options.navButtons){
294
- var $controls = this.$element.find('.' + this.options.nextClass + ', .' + this.options.prevClass);
295
- $controls.attr('tabindex', 0)
296
- //also need to handle enter/return and spacebar key presses
297
- .on('click.zf.orbit touchend.zf.orbit', function(){
298
- _this.changeSlide($(this).hasClass(_this.options.nextClass));
299
- });
300
- }
301
-
302
- if(this.options.bullets){
303
- this.$bullets.on('click.zf.orbit touchend.zf.orbit', function(){
304
- if(/is-active/g.test(this.className)){ return false; }//if this is active, kick out of function.
305
- var idx = $(this).data('slide'),
306
- ltr = idx > _this.$slides.filter('.is-active').data('slide'),
307
- $slide = _this.$slides.eq(idx);
308
-
309
- _this.changeSlide(ltr, $slide, idx);
310
- });
311
- }
312
-
313
- this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e){
314
- // handle keyboard event with keyboard util
315
- Foundation.Keyboard.handleKey(e, 'Orbit', {
316
- next: function() {
317
- _this.changeSlide(true);
318
- },
319
- previous: function() {
320
- _this.changeSlide(false);
321
- },
322
- handled: function() { // if bullet is focused, make sure focus moves
323
- if ($(e.target).is(_this.$bullets)) {
324
- _this.$bullets.filter('.is-active').focus();
325
- }
326
- }
327
- });
328
- });
329
- }
330
- };
331
- /**
332
- * Changes the current slide to a new one.
333
- * @function
334
- * @param {Boolean} isLTR - flag if the slide should move left to right.
335
- * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
336
- * @param {Number} idx - the index of the new slide in its collection, if one chosen.
337
- * @fires Orbit#slidechange
338
- */
339
- Orbit.prototype.changeSlide = function(isLTR, chosenSlide, idx){
340
- var $curSlide = this.$slides.filter('.is-active').eq(0);
341
-
342
- if(/mui/g.test($curSlide[0].className)){ return false; }//if the slide is currently animating, kick out of the function
343
-
344
- var $firstSlide = this.$slides.first(),
345
- $lastSlide = this.$slides.last(),
346
- dirIn = isLTR ? 'Right' : 'Left',
347
- dirOut = isLTR ? 'Left' : 'Right',
348
- _this = this,
349
- $newSlide;
350
-
351
- if(!chosenSlide){//most of the time, this will be auto played or clicked from the navButtons.
352
- $newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
353
- (this.options.infiniteWrap ? $curSlide.next('.' + this.options.slideClass).length ? $curSlide.next('.' + this.options.slideClass) : $firstSlide : $curSlide.next('.' + this.options.slideClass))//pick next slide if moving left to right
354
- :
355
- (this.options.infiniteWrap ? $curSlide.prev('.' + this.options.slideClass).length ? $curSlide.prev('.' + this.options.slideClass) : $lastSlide : $curSlide.prev('.' + this.options.slideClass));//pick prev slide if moving right to left
356
- }else{
357
- $newSlide = chosenSlide;
358
- }
359
- if($newSlide.length){
360
- if(this.options.bullets){
361
- idx = idx || this.$slides.index($newSlide);//grab index to update bullets
362
- this._updateBullets(idx);
363
- }
364
- if(this.options.useMUI){
365
-
366
- Foundation.Motion.animateIn(
367
- $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
368
- this.options['animInFrom' + dirIn],
369
- function(){
370
- $newSlide.css({'position': 'relative', 'display': 'block'})
371
- .attr('aria-live', 'polite');
372
- });
373
-
374
- Foundation.Motion.animateOut(
375
- $curSlide.removeClass('is-active'),
376
- this.options['animOutTo' + dirOut],
377
- function(){
378
- $curSlide.removeAttr('aria-live');
379
- if(_this.options.autoPlay && !_this.timer.isPaused){
380
- _this.timer.restart();
381
- }
382
- //do stuff?
383
- });
384
- }else{
385
- $curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
386
- $newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
387
- if(this.options.autoPlay && !this.timer.isPaused){
388
- this.timer.restart();
389
- }
390
- }
391
- /**
392
- * Triggers when the slide has finished animating in.
393
- * @event Orbit#slidechange
394
- */
395
- this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
396
- }
397
- };
398
- /**
399
- * Updates the active state of the bullets, if displayed.
400
- * @function
401
- * @private
402
- * @param {Number} idx - the index of the current slide.
403
- */
404
- Orbit.prototype._updateBullets = function(idx){
405
- var $oldBullet = this.$element.find('.' + this.options.boxOfBullets)
406
- .find('.is-active').removeClass('is-active').blur(),
407
- span = $oldBullet.find('span:last').detach(),
408
- $newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
409
- };
410
- /**
411
- * Destroys the carousel and hides the element.
412
- * @function
413
- */
414
- Orbit.prototype.destroy = function(){
415
- this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
416
- Foundation.unregisterPlugin(this);
417
- };
418
-
419
- Foundation.plugin(Orbit, 'Orbit');
420
-
421
- }(jQuery, window.Foundation);