718 lines
21 KiB
JavaScript
718 lines
21 KiB
JavaScript
|
(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);
|