Your IP : 216.73.216.175
(function ($) {
'use strict';
let _defaults = {
duration: 200, // ms
dist: -100, // zoom scale TODO: make this more intuitive as an option
shift: 0, // spacing for center image
padding: 0, // Padding between non center items
numVisible: 5, // Number of visible items in carousel
fullWidth: false, // Change to full width styles
indicators: false, // Toggle indicators
noWrap: false, // Don't wrap around and cycle through items.
onCycleTo: null // Callback for when a new slide is cycled to.
};
/**
* @class
*
*/
class Carousel extends Component {
/**
* Construct Carousel instance
* @constructor
* @param {Element} el
* @param {Object} options
*/
constructor(el, options) {
super(Carousel, el, options);
this.el.M_Carousel = this;
/**
* Options for the carousel
* @member Carousel#options
* @prop {Number} duration
* @prop {Number} dist
* @prop {Number} shift
* @prop {Number} padding
* @prop {Number} numVisible
* @prop {Boolean} fullWidth
* @prop {Boolean} indicators
* @prop {Boolean} noWrap
* @prop {Function} onCycleTo
*/
this.options = $.extend({}, Carousel.defaults, options);
// Setup
this.hasMultipleSlides = this.$el.find('.carousel-item').length > 1;
this.showIndicators = this.options.indicators && this.hasMultipleSlides;
this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
this.pressed = false;
this.dragged = false;
this.offset = this.target = 0;
this.images = [];
this.itemWidth = this.$el.find('.carousel-item').first().innerWidth();
this.itemHeight = this.$el.find('.carousel-item').first().innerHeight();
this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
this._autoScrollBound = this._autoScroll.bind(this);
this._trackBound = this._track.bind(this);
// Full Width carousel setup
if (this.options.fullWidth) {
this.options.dist = 0;
this._setCarouselHeight();
// Offset fixed items when indicators.
if (this.showIndicators) {
this.$el.find('.carousel-fixed-item').addClass('with-indicators');
}
}
// Iterate through slides
this.$indicators = $('<ul class="indicators"></ul>');
this.$el.find('.carousel-item').each((el, i) => {
this.images.push(el);
if (this.showIndicators) {
let $indicator = $('<li class="indicator-item"></li>');
// Add active to first by default.
if (i === 0) {
$indicator[0].classList.add('active');
}
this.$indicators.append($indicator);
}
});
if (this.showIndicators) {
this.$el.append(this.$indicators);
}
this.count = this.images.length;
// Cap numVisible at count
this.options.numVisible = Math.min(this.count, this.options.numVisible);
// Setup cross browser string
this.xform = 'transform';
['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
var e = prefix + 'Transform';
if (typeof document.body.style[e] !== 'undefined') {
this.xform = e;
return false;
}
return true;
});
this._setupEventHandlers();
this._scroll(this.offset);
}
static get defaults() {
return _defaults;
}
static init(els, options) {
return super.init(this, els, options);
}
/**
* Get Instance
*/
static getInstance(el) {
let domElem = !!el.jquery ? el[0] : el;
return domElem.M_Carousel;
}
/**
* Teardown component
*/
destroy() {
this._removeEventHandlers();
this.el.M_Carousel = undefined;
}
/**
* Setup Event Handlers
*/
_setupEventHandlers() {
this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this);
this._handleCarouselClickBound = this._handleCarouselClick.bind(this);
if (typeof window.ontouchstart !== 'undefined') {
this.el.addEventListener('touchstart', this._handleCarouselTapBound);
this.el.addEventListener('touchmove', this._handleCarouselDragBound);
this.el.addEventListener('touchend', this._handleCarouselReleaseBound);
}
this.el.addEventListener('mousedown', this._handleCarouselTapBound);
this.el.addEventListener('mousemove', this._handleCarouselDragBound);
this.el.addEventListener('mouseup', this._handleCarouselReleaseBound);
this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
this.el.addEventListener('click', this._handleCarouselClickBound);
if (this.showIndicators && this.$indicators) {
this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
this.$indicators.find('.indicator-item').each((el, i) => {
el.addEventListener('click', this._handleIndicatorClickBound);
});
}
// Resize
let throttledResize = M.throttle(this._handleResize, 200);
this._handleThrottledResizeBound = throttledResize.bind(this);
window.addEventListener('resize', this._handleThrottledResizeBound);
}
/**
* Remove Event Handlers
*/
_removeEventHandlers() {
if (typeof window.ontouchstart !== 'undefined') {
this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
this.el.removeEventListener('touchmove', this._handleCarouselDragBound);
this.el.removeEventListener('touchend', this._handleCarouselReleaseBound);
}
this.el.removeEventListener('mousedown', this._handleCarouselTapBound);
this.el.removeEventListener('mousemove', this._handleCarouselDragBound);
this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound);
this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound);
this.el.removeEventListener('click', this._handleCarouselClickBound);
if (this.showIndicators && this.$indicators) {
this.$indicators.find('.indicator-item').each((el, i) => {
el.removeEventListener('click', this._handleIndicatorClickBound);
});
}
window.removeEventListener('resize', this._handleThrottledResizeBound);
}
/**
* Handle Carousel Tap
* @param {Event} e
*/
_handleCarouselTap(e) {
// Fixes firefox draggable image bug
if (e.type === 'mousedown' && $(e.target).is('img')) {
e.preventDefault();
}
this.pressed = true;
this.dragged = false;
this.verticalDragged = false;
this.reference = this._xpos(e);
this.referenceY = this._ypos(e);
this.velocity = this.amplitude = 0;
this.frame = this.offset;
this.timestamp = Date.now();
clearInterval(this.ticker);
this.ticker = setInterval(this._trackBound, 100);
}
/**
* Handle Carousel Drag
* @param {Event} e
*/
_handleCarouselDrag(e) {
let x, y, delta, deltaY;
if (this.pressed) {
x = this._xpos(e);
y = this._ypos(e);
delta = this.reference - x;
deltaY = Math.abs(this.referenceY - y);
if (deltaY < 30 && !this.verticalDragged) {
// If vertical scrolling don't allow dragging.
if (delta > 2 || delta < -2) {
this.dragged = true;
this.reference = x;
this._scroll(this.offset + delta);
}
} else if (this.dragged) {
// If dragging don't allow vertical scroll.
e.preventDefault();
e.stopPropagation();
return false;
} else {
// Vertical scrolling.
this.verticalDragged = true;
}
}
if (this.dragged) {
// If dragging don't allow vertical scroll.
e.preventDefault();
e.stopPropagation();
return false;
}
}
/**
* Handle Carousel Release
* @param {Event} e
*/
_handleCarouselRelease(e) {
if (this.pressed) {
this.pressed = false;
} else {
return;
}
clearInterval(this.ticker);
this.target = this.offset;
if (this.velocity > 10 || this.velocity < -10) {
this.amplitude = 0.9 * this.velocity;
this.target = this.offset + this.amplitude;
}
this.target = Math.round(this.target / this.dim) * this.dim;
// No wrap of items.
if (this.noWrap) {
if (this.target >= this.dim * (this.count - 1)) {
this.target = this.dim * (this.count - 1);
} else if (this.target < 0) {
this.target = 0;
}
}
this.amplitude = this.target - this.offset;
this.timestamp = Date.now();
requestAnimationFrame(this._autoScrollBound);
if (this.dragged) {
e.preventDefault();
e.stopPropagation();
}
return false;
}
/**
* Handle Carousel CLick
* @param {Event} e
*/
_handleCarouselClick(e) {
// Disable clicks if carousel was dragged.
if (this.dragged) {
e.preventDefault();
e.stopPropagation();
return false;
} else if (!this.options.fullWidth) {
let clickedIndex = $(e.target).closest('.carousel-item').index();
let diff = this._wrap(this.center) - clickedIndex;
// Disable clicks if carousel was shifted by click
if (diff !== 0) {
e.preventDefault();
e.stopPropagation();
}
this._cycleTo(clickedIndex);
}
}
/**
* Handle Indicator CLick
* @param {Event} e
*/
_handleIndicatorClick(e) {
e.stopPropagation();
let indicator = $(e.target).closest('.indicator-item');
if (indicator.length) {
this._cycleTo(indicator.index());
}
}
/**
* Handle Throttle Resize
* @param {Event} e
*/
_handleResize(e) {
if (this.options.fullWidth) {
this.itemWidth = this.$el.find('.carousel-item').first().innerWidth();
this.imageHeight = this.$el.find('.carousel-item.active').height();
this.dim = this.itemWidth * 2 + this.options.padding;
this.offset = this.center * 2 * this.itemWidth;
this.target = this.offset;
this._setCarouselHeight(true);
} else {
this._scroll();
}
}
/**
* Set carousel height based on first slide
* @param {Booleam} imageOnly - true for image slides
*/
_setCarouselHeight(imageOnly) {
let firstSlide = this.$el.find('.carousel-item.active').length ? this.$el.find('.carousel-item.active').first() : this.$el.find('.carousel-item').first();
let firstImage = firstSlide.find('img').first();
if (firstImage.length) {
if (firstImage[0].complete) {
// If image won't trigger the load event
let imageHeight = firstImage.height();
if (imageHeight > 0) {
this.$el.css('height', imageHeight + 'px');
} else {
// If image still has no height, use the natural dimensions to calculate
let naturalWidth = firstImage[0].naturalWidth;
let naturalHeight = firstImage[0].naturalHeight;
let adjustedHeight = (this.$el.width() / naturalWidth) * naturalHeight;
this.$el.css('height', adjustedHeight + 'px');
}
} else {
// Get height when image is loaded normally
firstImage.one('load', (el, i) => {
this.$el.css('height', el.offsetHeight + 'px');
});
}
} else if (!imageOnly) {
let slideHeight = firstSlide.height();
this.$el.css('height', slideHeight + 'px');
}
}
/**
* Get x position from event
* @param {Event} e
*/
_xpos(e) {
// touch event
if (e.targetTouches && (e.targetTouches.length >= 1)) {
return e.targetTouches[0].clientX;
}
// mouse event
return e.clientX;
}
/**
* Get y position from event
* @param {Event} e
*/
_ypos(e) {
// touch event
if (e.targetTouches && (e.targetTouches.length >= 1)) {
return e.targetTouches[0].clientY;
}
// mouse event
return e.clientY;
}
/**
* Wrap index
* @param {Number} x
*/
_wrap(x) {
return (x >= this.count) ? (x % this.count) : (x < 0) ? this._wrap(this.count + (x % this.count)) : x;
}
/**
* Tracks scrolling information
*/
_track() {
let now, elapsed, delta, v;
now = Date.now();
elapsed = now - this.timestamp;
this.timestamp = now;
delta = this.offset - this.frame;
this.frame = this.offset;
v = 1000 * delta / (1 + elapsed);
this.velocity = 0.8 * v + 0.2 * this.velocity;
}
/**
* Auto scrolls to nearest carousel item.
*/
_autoScroll() {
let elapsed, delta;
if (this.amplitude) {
elapsed = Date.now() - this.timestamp;
delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
if (delta > 2 || delta < -2) {
this._scroll(this.target - delta);
requestAnimationFrame(this._autoScrollBound);
} else {
this._scroll(this.target);
}
}
}
/**
* Scroll to target
* @param {Number} x
*/
_scroll(x) {
// Track scrolling state
if (!this.$el.hasClass('scrolling')) {
this.el.classList.add('scrolling');
}
if (this.scrollingTimeout != null) {
window.clearTimeout(this.scrollingTimeout);
}
this.scrollingTimeout = window.setTimeout(() => {
this.$el.removeClass('scrolling');
}, this.options.duration);
// Start actual scroll
let i, half, delta, dir, tween, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
let lastCenter = this.center;
let numVisibleOffset = 1 / this.options.numVisible;
this.offset = (typeof x === 'number') ? x : this.offset;
this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
delta = this.offset - this.center * this.dim;
dir = (delta < 0) ? 1 : -1;
tween = -dir * delta * 2 / this.dim;
half = this.count >> 1;
if (this.options.fullWidth) {
alignment = 'translateX(0)';
centerTweenedOpacity = 1;
} else {
alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
centerTweenedOpacity = 1 - numVisibleOffset * tween;
}
// Set indicator active
if (this.showIndicators) {
let diff = (this.center % this.count);
let activeIndicator = this.$indicators.find('.indicator-item.active');
if (activeIndicator.index() !== diff) {
activeIndicator.removeClass('active');
this.$indicators.find('.indicator-item').eq(diff)[0].classList.add('active');
}
}
// center
// Don't show wrapped items.
if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
el = this.images[this._wrap(this.center)];
// Add active class to center item.
if (!$(el).hasClass('active')) {
this.$el.find('.carousel-item').removeClass('active');
el.classList.add('active');
}
let transformString = alignment +
' translateX(' + (-delta / 2) + 'px)' +
' translateX(' + (dir * this.options.shift * tween * i) + 'px)' +
' translateZ(' + (this.options.dist * tween) + 'px)';
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
}
for (i = 1; i <= half; ++i) {
// right side
if (this.options.fullWidth) {
zTranslation = this.options.dist;
tweenedOpacity = (i === half && delta < 0) ? 1 - tween : 1;
} else {
zTranslation = this.options.dist * (i * 2 + tween * dir);
tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
}
// Don't show wrapped items.
if (!this.noWrap || this.center + i < this.count) {
el = this.images[this._wrap(this.center + i)];
let transformString = alignment +
' translateX(' + (this.options.shift + (this.dim * i - delta) / 2) + 'px)' +
' translateZ(' + zTranslation + 'px)';
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
// left side
if (this.options.fullWidth) {
zTranslation = this.options.dist;
tweenedOpacity = (i === half && delta > 0) ? 1 - tween : 1;
} else {
zTranslation = this.options.dist * (i * 2 - tween * dir);
tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
}
// Don't show wrapped items.
if (!this.noWrap || this.center - i >= 0) {
el = this.images[this._wrap(this.center - i)];
let transformString = alignment +
' translateX(' + (-this.options.shift + (-this.dim * i - delta) / 2) + 'px)' +
' translateZ(' + zTranslation + 'px)';
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
}
// center
// Don't show wrapped items.
if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
el = this.images[this._wrap(this.center)];
let transformString = alignment +
' translateX(' + (-delta / 2) + 'px)' +
' translateX(' + (dir * this.options.shift * tween) + 'px)' +
' translateZ(' + (this.options.dist * tween) + 'px)';
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
}
// onCycleTo callback
let $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
if (lastCenter !== this.center &&
typeof (this.options.onCycleTo) === "function") {
this.options.onCycleTo.call(this, $currItem[0], this.dragged);
}
// One time callback
if (typeof (this.oneTimeCallback) === "function") {
this.oneTimeCallback.call(this, $currItem[0], this.dragged);
this.oneTimeCallback = null;
}
}
/**
* Cycle to target
* @param {Element} el
* @param {Number} opacity
* @param {Number} zIndex
* @param {String} transform
*/
_updateItemStyle(el, opacity, zIndex, transform) {
el.style[this.xform] = transform;
el.style.zIndex = zIndex;
el.style.opacity = opacity;
el.style.visibility = 'visible';
}
/**
* Cycle to target
* @param {Number} n
* @param {Function} callback
*/
_cycleTo(n, callback) {
let diff = (this.center % this.count) - n;
// Account for wraparound.
if (!this.noWrap) {
if (diff < 0) {
if (Math.abs(diff + this.count) < Math.abs(diff)) {
diff += this.count;
}
} else if (diff > 0) {
if (Math.abs(diff - this.count) < diff) {
diff -= this.count;
}
}
}
this.target = (this.dim * Math.round(this.offset / this.dim));
// Next
if (diff < 0) {
this.target += (this.dim * Math.abs(diff));
// Prev
} else if (diff > 0) {
this.target -= (this.dim * diff);
}
// Set one time callback
if (typeof (callback) === "function") {
this.oneTimeCallback = callback;
}
// Scroll
if (this.offset !== this.target) {
this.amplitude = this.target - this.offset;
this.timestamp = Date.now();
requestAnimationFrame(this._autoScrollBound);
}
}
/**
* Cycle to next item
* @param {Number} [n]
*/
next(n) {
if (n === undefined || isNaN(n)) {
n = 1;
}
let index = this.center + n;
if (index > this.count || index < 0) {
if (this.noWrap) {
return;
}
index = this._wrap(index);
}
this._cycleTo(index);
}
/**
* Cycle to previous item
* @param {Number} [n]
*/
prev(n) {
if (n === undefined || isNaN(n)) {
n = 1;
}
let index = this.center - n;
if (index > this.count || index < 0) {
if (this.noWrap) {
return;
}
index = this._wrap(index);
}
this._cycleTo(index);
}
/**
* Cycle to nth item
* @param {Number} [n]
* @param {Function} callback
*/
set(n, callback) {
if (n === undefined || isNaN(n)) {
n = 0;
}
if (n > this.count || n < 0) {
if (this.noWrap) {
return;
}
n = this._wrap(n);
}
this._cycleTo(n, callback);
}
}
M.Carousel = Carousel;
if (M.jQueryLoaded) {
M.initializeJqueryWrapper(Carousel, 'carousel', 'M_Carousel');
}
}(cash));