tbg-foundation-sites
Version:
TBG fork of the most advanced responsive front-end framework in the world.
363 lines (325 loc) • 9.31 kB
JavaScript
!(function($) {
/**
* Flickity Carousel module.
* By The Berndt Group
* @module foundation.flickity
* @requires jquery.mousewheel
* @requires flickity.pkgd
*/
class FlickityCarousel {
/**
* Creates a new instance of a Flickity Carousel.
* @class
* @param {jQuery} element - jQuery object to make into an Flickity Carousel.
* @param {Object} options - Overrides to the default plugin settings.
*/
constructor(element, options) {
this.$element = element;
this.options = $.extend({}, FlickityCarousel.defaults, this.$element.data(), options);
this.id = this.$element[0].id || Foundation.GetYoDigits(6, 'flickity'); // eslint-disable-line new-cap
this.nextPrevEls = [];
this._init();
Foundation.registerPlugin(this, 'FlickityCarousel');
}
/**
* Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
* @function
* @private
*/
_init() {
if (this.options.horizontalScrolling) {
if (!this.options.cellAlign) {
this.options.cellAlign = 'left';
}
if (!this.options.cellAlign) {
this.options.freeScroll = true;
}
}
this.$element.attr({
'data-resize': this.id,
'id': this.id
});
if (this.options.disableBreakpoint === '' &&
this.options.enableBreakpoint === '') {
this._enableFlickity();
if (this.options.autoPlayBreakpoint !== '') {
this._autoplayIfMediaQuery(this.options.autoPlayBreakpoint);
}
} else {
if (this.options.disableBreakpoint !== '') {
this._disableIfMediaQuery(this.options.disableBreakpoint);
}
if (this.options.enableBreakpoint !== '') {
this._enableIfMediaQuery(this.options.enableBreakpoint);
}
}
this._events();
}
/**
* Adds event listeners to basically everything within the element.
* @function
* @private
*/
_events() {
var _this = this,
mediaqueryListener = this.mediaqueryListener = `changed.zf.mediaquery.${this.id}`;
if (this.options.horizontalScrolling) {
this.$element.off('mousewheel.zf.flickity DOMMouseScroll.zf.flickity')
.on('mousewheel.zf.flickity DOMMouseScroll.zf.flickity', function (e) {
if (_this.$element.data('flickity')) {
var flckty = _this.$element.data('flickity');
if (!window.wheeling) {
if (e.deltaX > 0 || e.deltaY < 0) {
if (flckty.selectedIndex !== flckty.slides.length - 1) {
_this.$element.flickity('next');
e.preventDefault();
}
} else if (e.deltaX < 0 || e.deltaY > 0) {
if (flckty.selectedIndex !== 0) {
_this.$element.flickity('previous');
e.preventDefault();
}
}
}
clearTimeout(window.wheeling);
window.wheeling = setTimeout(function () {
delete window.wheeling;
if (window.wheeldata) {
window.wheeldelta.x = 0;
window.wheeldelta.y = 0;
}
}, 250);
if (window.wheeldelta) {
window.wheeldelta.x += e.deltaFactor * e.deltaX;
window.wheeldelta.y += e.deltaFactor * e.deltaY;
if (window.wheeldelta.x > 500 ||
window.wheeldelta.y > 500 ||
window.wheeldelta.x < -500 ||
window.wheeldelta.y < -500) {
window.wheeldelta.x = 0;
window.wheeldelta.y = 0;
if (e.deltaX > 0 || e.deltaY < 0) {
if (flckty.selectedIndex !== flckty.slides.length - 1) {
_this.$element.flickity('next');
}
} else if (e.deltaX < 0 || e.deltaY > 0) {
if (flckty.selectedIndex !== 0) {
_this.$element.flickity('previous');
}
}
}
}
}
});
}
if (this.options.previousElement !== '') {
var prevElArr = this.options.previousElement.split(',');
$.each(prevElArr, function(i, selector) {
var $selector = $(selector);
if ($selector.length > 0) {
$selector.off('click.zf.flickity')
.on('click.zf.flickity', function (e) {
_this.$element.flickity('previous');
e.preventDefault();
});
_this.nextPrevEls.push($selector);
}
});
}
if (this.options.nextElement !== '') {
var nextElArr = this.options.nextElement.split(',');
$.each(nextElArr, function(i, selector) {
var $selector = $(selector);
if ($selector.length > 0) {
$selector.off('click.zf.flickity')
.on('click.zf.flickity', function (e) {
_this.$element.flickity('next');
e.preventDefault();
});
_this.nextPrevEls.push($selector);
}
});
}
if (this.$element.data('flickity')) {
if (_this.$element.data('flickity').options.resize) {
this.$element.on('settle.flickity', function () {
_this.$element.flickity('resize');
});
}
}
if (this.options.autoPlayBreakpoint !== '') {
$(window).off(mediaqueryListener)
.on(mediaqueryListener, function() {
_this._autoplayIfMediaQuery(_this.options.autoPlayBreakpoint);
});
}
if (this.options.disableBreakpoint !== '') {
$(window).off(mediaqueryListener)
.on(mediaqueryListener, function() {
_this._disableIfMediaQuery(_this.options.disableBreakpoint);
});
}
if (this.options.enableBreakpoint !== '') {
$(window).off(mediaqueryListener)
.on(mediaqueryListener, function() {
_this._enableIfMediaQuery(_this.options.enableBreakpoint);
});
}
if (this.options.noDragging) {
if (this.$element.data('flickity')) {
this.$element.flickity('unbindDrag');
}
}
}
/**
* Disable Flickity based on media query
* @function
* @private
*/
_autoplayIfMediaQuery(mediaQuery) {
if (this.$element.data('flickity')) {
if (Foundation.MediaQuery.atLeast(mediaQuery)) {
this.$element.flickity('playPlayer');
} else {
this.$element.flickity('stopPlayer');
}
}
}
/**
* Disable Flickity based on media query
* @function
* @private
*/
_disableIfMediaQuery(mediaQuery) {
if (Foundation.MediaQuery.atLeast(mediaQuery)) {
this._disableFlickity();
} else {
this._enableFlickity();
}
}
/**
* Enable Flickity based on media query
* @function
* @private
*/
_enableIfMediaQuery(mediaQuery) {
if (Foundation.MediaQuery.atLeast(mediaQuery)) {
this._enableFlickity();
} else {
this._disableFlickity();
}
}
/**
* Destroy Flickity and remove all event listeners tied to the element
* (does not remove window event listeners)
* @function
* @private
*/
_disableFlickity() {
if (this.$element.data('flickity')) {
this.$element.flickity('destroy');
}
this.$element.off('.zf.flickity').find('*').off('.zf.flickity');
if (this.nextPrevEls.length > 0) {
$.each(this.nextPrevEls, function(i, $el) {
$el.off('.zf.flickity');
});
}
}
/**
* (Re-)enables Flickity
* @function
* @private
*/
_enableFlickity() {
this.$element.flickity(this.options);
this._events();
}
/**
* Destroys the carousel and hides the element.
* @function
*/
destroy() {
$(window).off(this.mediaqueryListener);
this._disableFlickity();
this.$element.hide();
Foundation.unregisterPlugin(this);
}
}
FlickityCarousel.defaults = {
/**
* Enable horizontal scrolling with mousewheel support
* @option
* @type {boolean}
* @default false
*/
horizontalScrolling: false,
/**
* Comma separated list of selectors that will trigger the previous
* slide in the carousel
* @option
* @type {string}
* @default ''
*/
previousElement: '',
/**
* Comma separated list of selectors that will trigger the next slide
* in the carousel
* @option
* @type {string}
* @default ''
*/
nextElement: '',
/**
* Enable autoPlay option at a given breakpoint
* @option
* @type {string}
* @default ''
*/
autoPlayBreakpoint: '',
/**
* Disable Flickity at a given breakpoint
* @option
* @type {string}
* @default ''
*/
disableBreakpoint: '',
/**
* Enable Flickity at a given breakpoint
* @option
* @type {string}
* @default ''
*/
enableBreakpoint: '',
/**
* Disable dragging
* @option
* @type {boolean}
* @default false
*/
noDragging: false,
/**
* Generates previous and next button HTML
* @option
* @type {boolean}
* @default false
*/
prevNextButtons: false,
/**
* Generates page dots HTML
* @option
* @type {boolean}
* @default false
*/
pageDots: false,
/**
* Re-positions carousel once its images have loaded
* @option
* @type {boolean}
* @default true
*/
imagesLoaded: true
};
// Window exports
Foundation.plugin(FlickityCarousel, 'FlickityCarousel');
})(jQuery);