/*
Carousel3D v1.1.0
(c) 2015 Depth Development. http://depthdev.com
License: Apache 2.0
*/
'use strict';
// ES5 Version, 2.32KB Minified: function Carousel3D(t){var e=function(t){return document.querySelector(t)},a=function(t){for(var e=document.querySelectorAll(t),a=[],i=0,r=e.length;r>i;i++)a[i]=e[i];return a},i=t.carousel,r=e(i),n=t.items,o=a(n),s=t.itemsPercentOf||.25,l=t.perspective||0===t.perspective?t.perspective:.25,f=t.depth||0===t.depth?1/t.depth:2,h=t.float||"left",c=t.opacity?t.opacity:1,u=t.grayscale?t.grayscale:0,p=t.sepia?t.sepia:0,d=t.blur?t.blur:0,m="",M="",v=0,P=0,y=[],I=0,b=o.length,g=Math.ceil(b/2),x=360/b,w=t.animate||0===t.animate?t.animate:0,z=t.fps||0===t.fps?t.fps:62.5,T=w?w/z:0,k=w?w/T:1,q=0,E=null,L=0,S=function(){q+=L;var t=0>q?360- -1*q%360:q;C(t)},W=function(){setTimeout(function(){E?q>=I?clearTimeout(this):(S(),W()):I>=q?clearTimeout(this):(S(),W())},T)},A=function(t){if(w){var e=t;E=e>I,q=I,I=e,L=(I-q)/k,W()}else C(t)},C=function(t){for(var e=0,a=[];b>e;e++)a[e]=y[e]+t+90;for(e=0;b>e;e++){var i=a[e]*Math.PI/180,r=(y[e]+t)%360*Math.PI/180,n=rMath.PI?1-(Math.PI-(r-Math.PI))/(Math.PI*f):1-r/(Math.PI*f),l=v*Math.cos(i)+v,h=P*Math.sin(i)+P,I=function(){var a=(y[e]+t+180)%360;return Math.round(a>180?(180-(a-180))/x:a/x)}(),g="position:absolute;z-index:"+I+";left:"+l+"px;top:"+h+"px;"+M+m+"-webkit-transform:scale("+s+","+s+");-moz-transform:scale("+s+","+s+");-ms-transform:scale("+s+","+s+");-o-transform:scale("+s+","+s+");transform:scale("+s+","+s+");",w="opacity:"+(1>c?1-(1-1*c)*n:1)+";",z="grayscale("+(u?1*u*n:0)+")",T="sepia("+(p?1*p*n:0)+")",k="blur("+(d?d*n:0)+"px)",q=w+"-webkit-filter:"+z+" "+T+" "+k+";-moz-filter:"+z+" "+T+" "+k+";-ms-filter:"+z+" "+T+" "+k+";-o-filter:"+z+" "+T+" "+k+";filter:"+z+" "+T+" "+k+";";o[e].style.cssText=g+q}},D=function(){var t=r.offsetWidth,e=t*l;r.style.height=e+"px";var a=o[0].offsetWidth,i=o[0].offsetHeight,n=i/a,f=t*s;m="width:"+f+"px;height:auto;",M="margin:-"+f*n/2+"px auto auto -"+f/2+"px;",v=t/2,P=e/2,y=["left"===h?360:0];for(var c=1;b>c;c++)y.push("left"===h?360-Math.floor(c*x):Math.floor(c*x));C(0)},H=function(){r=e(i),o=a(n),b=o.length,g=Math.ceil(b/2),x=360/b,D()};return function(){r.style.position="relative",D.bind(this)(),window.addEventListener("load",D.bind(this)),window.addEventListener("resize",D.bind(this))}.bind(this)(),{turn:A,reset:H}}
class Carousel3D {
constructor(o) {
// Helpers
const $ = function (s) {return document.querySelector(s);};
const $$ = function (s) {let nl = document.querySelectorAll(s),a = [];for (let i = 0, l = nl.length; i < l; i++) {a[i] = nl[i];}return a;};
// General
let carouselStr = o.carousel;
let carousel = $(carouselStr);
let itemsStr = o.items;
let items = $$(itemsStr);
let itemsPercentOf = o.itemsPercentOf || 0.25;
let perspective = o.perspective || o.perspective === 0 ? o.perspective : 0.25;
let depth = o.depth || o.depth === 0 ? 1 / o.depth : 2;
let float = o.float || 'left';
// Filters
let filterOpacity = o.opacity ? o.opacity : 1;
let filterGrayscale = o.grayscale ? o.grayscale : 0;
let filterSepia = o.sepia ? o.sepia : 0;
let filterBlur = o.blur ? o.blur : 0;
// Math Dependencies
let itemWidthAndHeight = '';
let itemMargin = '';
let widthRadius = 0;
let heightRadius = 0;
let degrees = [];
let degree = 0;
let len = items.length;
let half = Math.ceil(len / 2);
let incBy = 360 / len;
// Animation
let animate = o.animate || o.animate === 0 ? o.animate : 0;
let fps = o.fps || o.fps === 0 ? o.fps : 62.5;
let speed = animate ? animate / fps : 0;
let divisions = animate ? animate / speed : 1;
let fromDegree = 0;
let toDegreeHigher = null;
let degreesToAnimateBy = 0;
let turning = function () {
fromDegree += degreesToAnimateBy;
let goToDegree = fromDegree < 0 ? 360 - -1 * fromDegree % 360 : fromDegree;
turn(goToDegree);
};
let animating = function () {
setTimeout(function () {
toDegreeHigher ? fromDegree >= degree ? clearTimeout(this) : (turning(), animating()) : fromDegree <= degree ? clearTimeout(this) : (turning(), animating());
}, speed);
};
// Run
let run = function (extDegree) {
if (animate) {
let turnTo = extDegree;
toDegreeHigher = turnTo > degree;
fromDegree = degree;
degree = turnTo;
degreesToAnimateBy = (degree - fromDegree) / divisions;
animating();
} else {
turn(extDegree);
}
};
// Turn
let turn = function (deg) {
let i = 0;
var d = []; // new degrees array
for (; i < len; i++) {
d[i] = degrees[i] + deg + 90;
}
i = 0;
for (; i < len; i++) {
let r = d[i] * Math.PI / 180;
let rr = (degrees[i] + deg) % 360 * Math.PI / 180;
let percentAsDecimal = rr < Math.PI ? rr / Math.PI : (Math.PI * 2 - rr) / Math.PI;
let s = rr > Math.PI ? 1 - (Math.PI - (rr - Math.PI)) / (Math.PI * depth) : 1 - rr / (Math.PI * depth);
let x = widthRadius * Math.cos(r) + widthRadius;
let y = heightRadius * Math.sin(r) + heightRadius;
let z = function () {
var degreeMod360 = (degrees[i] + deg + 180) % 360;
return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / incBy : degreeMod360 / incBy);
}();
let p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + itemMargin + itemWidthAndHeight +
'-webkit-transform:scale(' + s + ',' + s + ');' +
'-moz-transform:scale(' + s + ',' + s + ');' +
'-ms-transform:scale(' + s + ',' + s + ');' +
'-o-transform:scale(' + s + ',' + s + ');' +
'transform:scale(' + s + ',' + s + ');';
let fOpacity = 'opacity:' + (filterOpacity < 1 ? 1 - (1 - 1 * filterOpacity) * percentAsDecimal : 1) + ';';
let fGrayscale = 'grayscale(' + (filterGrayscale ? 1 * filterGrayscale * percentAsDecimal : 0) + ')';
let fSepia = 'sepia(' + (filterSepia ? 1 * filterSepia * percentAsDecimal : 0) + ')';
let fBlur = 'blur(' + (filterBlur ? filterBlur * percentAsDecimal : 0) + 'px)';
let f = fOpacity +
'-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
items[i].style.cssText = p + f;
}
}; // turn
// Reset
let reset = function () {
// Carousel size
let carouselWidth = carousel.offsetWidth;
let carouselHeight = carouselWidth * perspective;
carousel.style.height = carouselHeight + 'px';
// Items size
let aspectPointWidth = items[0].offsetWidth;
let aspectPointHeight = items[0].offsetHeight;
let itemAspectRatio = aspectPointHeight / aspectPointWidth;
let itemWidthNum = carouselWidth * itemsPercentOf;
itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
itemMargin = 'margin:-' + itemWidthNum * itemAspectRatio / 2 + 'px auto auto -' + itemWidthNum / 2 + 'px;';
// Math
widthRadius = carouselWidth / 2;
heightRadius = carouselHeight / 2;
degrees = [float === 'left' ? 360 : 0]; // Reset degrees and first elem
for (let i = 1; i < len; i++) {
degrees.push(float === 'left' ? 360 - Math.floor(i * incBy) : Math.floor(i * incBy));
}
// Position the items
turn(0);
};
// Hard reset
let hardReset = function () {
carousel = $(carouselStr);
items = $$(itemsStr);
len = items.length;
half = Math.ceil(len / 2);
incBy = 360 / len;
reset();
};
// Init
(function () {
carousel.style.position = 'relative';
reset.bind(this)();
window.addEventListener('load', reset.bind(this));
window.addEventListener('resize', reset.bind(this));
}).bind(this)();
// Dev API
return {
turn: run,
reset: hardReset };
} // constructor
}
// Carousel3D
////////////////////////////
// USE
////////////////////////////
/*
NOTE: The API only provides one method called "turn". For a small footprint, it's up to the developer to use the turn method in association with any features he/she wants; such as: click navigating, slider navigation, keyboard navigating, swiping, spinning with an ease, etc.
*/
var dev = {};
// CAROUSEL 1
dev.c1 = new Carousel3D({
carousel: '.js-carousel1 ul', // Required. Container for elements; as selector string
items: '.js-carousel1 li', // Required. Elements to move around; as selector string
itemsPercentOf: 0.25, // Optional. Percent of items width, relative to the carousel's width
perspective: 0.25, // Optional. Percent relative to the width; as a decimal
depth: 0.5, // Optional. Viewing depth percent; as a decimal
float: 'left', // Optional internationalization ordering. "Float" items to the 'left' or 'right'
animate: 250, // Optional. Animation duration in milleconds; as an int
fps: 60, // Optional. Frames Per Second; as an int
opacity: 0.125, // Optional. Opacity percent; as a decimal
//grayscale: 1, // Optional. Grayscale percent; as a decimal
//sepia: 1, // Optional. Sepia percent; as a decimal
blur: 10 // Optional. Blur in pixels; as a number
});
/////////////////////
// CUSTOM DEV STUFF
/////////////////////
let $ = function (s) {let nl = document.querySelectorAll(s),a = [];for (let i = 0, l = nl.length; i < l; i++) {a[i] = nl[i];}return a.length > 1 ? a : a[0];};
dev.degree = 0;
dev.incrementBy = 360 / $('.js-carousel1 li').length;
// Left Arrow
$('.js-carousel1 .js-left').addEventListener('click', function () {
dev.degree -= dev.incrementBy;
dev.c1.turn(dev.degree);
});
// Right Arrow
$('.js-carousel1 .js-right').addEventListener('click', function () {
dev.degree += dev.incrementBy;
dev.c1.turn(dev.degree);
});
// Range Input
$('.js-carousel1__range').addEventListener('input', function (e) {
dev.c1.turn(parseInt(this.value, 10));
}, true);
// Keyboard Navigation
window.addEventListener('keydown', function (e) {
if (e.keyCode === 37) {
dev.degree -= dev.incrementBy;
dev.c1.turn(dev.degree);
} else if (e.keyCode === 39) {
dev.degree += dev.incrementBy;
dev.c1.turn(dev.degree);
}
});
// Inject an item and then reset
/*
setTimeout(function() {
var li = document.createElement('li');
var a = document.createElement('a');
var img = document.createElement('img');
img.src = 'http://placebear.com/300/200';
var span = document.createElement('span');
span.textContent = $('.js-carousel1 li').length + 1;
a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
$('section.js-carousel1 ul').appendChild(li);
dev.c1.reset();
}, 5000);
*/
// Click-item navigation
(function () {
let items = $('.js-carousel1 li');
for (let i = 0, l = items.length; i < l; i++) {
items[i].addEventListener('click', function (e) {
let elem = e.target;
while (elem.nodeName.toLowerCase() !== 'li') {
elem = elem.parentNode;
}
let index = 0;
while (elem.previousSibling) {
if (elem.previousSibling.nodeName.toLowerCase() === 'li') {
index++;
}
elem = elem.previousSibling;
}
dev.degree = 360 / (items.length / index);
dev.c1.turn(dev.degree);
});
}
})();
// Mouse wheel
window.addEventListener('wheel', function (e) {
dev.degree = e.wheelDeltaY < 0 ? dev.degree + dev.incrementBy : dev.degree - dev.incrementBy;
dev.c1.turn(dev.degree);
});
// Mouse swipe
var swipeInstance = new MouseSwipe({
area: document.querySelector('.js-carousel1'),
//change: function(){},
move: function (obj) {
var isSwipe = swipeInstance.swipe();
if (isSwipe === 'left') {
dev.degree += 1.5;
dev.c1.turn(dev.degree);
} else if (isSwipe === 'right') {
dev.degree -= 1.5;
dev.c1.turn(dev.degree);
} else {
console.log(isSwipe);
}
},
moving: function (obj) {
},
//down: function(){},
//up: function(obj){},
swipe: 4 });
/*
MouseSwipe v0.3.0
(c) 2015 Clearwave Designs, LLC. http://clearwavedesigns.com
License: Apache 2.0
*/
function MouseSwipe(e) {var t = { ms: 0, x: 0, y: 0 },a = { ms: 0, x: 0, y: 0 },f = e.swipe,n = !1,o = function (a) {t.ms = a.timeStamp, t.x = a.clientX - e.area.offsetLeft, t.x = t.x < 0 ? 0 : t.x > e.area.offsetWidth ? e.area.offsetWidth : t.x, t.y = event.clientY - e.area.offsetTop, t.y = t.y < 0 ? 0 : t.y > e.area.offsetHeight ? e.area.offsetHeight : t.y;},i = function (t) {a.ms = t.timeStamp, a.x = t.clientX - e.area.offsetLeft, a.x = a.x < 0 ? 0 : a.x > e.area.offsetWidth ? e.area.offsetWidth : a.x, a.y = event.clientY - e.area.offsetTop, a.y = a.y < 0 ? 0 : a.y > e.area.offsetHeight ? e.area.offsetHeight : a.y, e.change && e.change(m());},s = function (f) {var o = event.clientX - e.area.offsetLeft,i = event.clientY - e.area.offsetTop;a.ms = f.timeStamp, a.x = o, a.y = i, e.move && n && e.move({ ms: f.timeStamp - t.ms, x: (0 > o ? 0 : o > e.area.offsetWidth ? e.area.offsetWidth : o) - t.x, y: (0 > i ? 0 : i > e.area.offsetHeight ? e.area.offsetHeight : i) - t.y }), e.moving && e.moving({ ms: f.timeStamp, x: 0 > o ? 0 : o > e.area.offsetWidth ? e.area.offsetWidth : o, y: 0 > i ? 0 : i > e.area.offsetHeight ? e.area.offsetHeight : i });},r = function () {if (f) {var e = m(),t = Math.abs(e.x),a = Math.abs(e.y);return t / f > a ? e.x > 0 ? "right" : "left" : a / f > t ? e.y > 0 ? "down" : "up" : !1;}},m = function () {return { ms: a.ms - t.ms, x: a.x - t.x, y: a.y - t.y };};return function () {e.area.addEventListener("mouseenter", function () {n = !1;}), (e.change || e.move) && (e.area.addEventListener("mousedown", function (t) {n = !0, o(t), e.down && e.down();}, !1), e.area.addEventListener("mouseup", function (t) {n = !1, i(t), e.up && e.up();}, !1)), (e.move || e.moving) && e.area.addEventListener("mousemove", s, !1);}.bind(this)(), { swipe: r };}