lory-8.x-1.x-dev/js/lory.slicebox.min.js

/**
 * @file
 * Adapted from jquery.slicebox.js v1.1.0, and converted into vanilla JS.
 *
 * Licensed under the MIT license.
 * @see http://www.opensource.org/licenses/mit-license.php
 * @see https://github.com/codrops/slicebox#readme
 *
 * This is a modified version, made vanilla JS, modernized using Web Animations
 * API, with rAF and Blazy supports, by @gausarts.
 */

!function(a,b){"use strict";function d(a,b){var c=this;c.config=a,c.pos=b,c.side=1,c._setSize(),c._configureStyles()}var c=lory.prototype;c.effects.slicebox=function(b){var c=this;c.support&&(c.$track=b.$track,c.$slider=c.$track.parentNode.parentNode,c.options=b.options,c.transformProp=b.transformProp,c.options=a.extend({},c.defaults,c.options))},c.effects.slicebox.prototype={support:"AnimationEvent"in b,defaults:{orientation:"v",perspective:1200,cuboidsCount:5,cuboidsRandom:!1,maxCuboidsCount:5,disperseFactor:0,colorHiddenSides:"#222",sequentialFactor:150,slideSpeed:600,ease:"ease",interval:3e3,fallbackFadeSpeed:300},run:function(){var c=this;return"undefined"!==c.$slider.animate&&(c._validate(),c.$slides=c.$track.childNodes,c.itemsCount=c.$slides.length,!(0===c.itemsCount||!c.transformProp)&&(c.current=c.options.initialSlide||0,c.isAnimating=!1,c.isReady=!1,c.$box=document.createElement("div"),c.$box.classList.add("lory__perspective"),c.$slider.appendChild(c.$box),b.setTimeout(function(){var b=c.$track.querySelector(".slide.is-current"),d=null!==b.querySelector(".b-lazy")?b.querySelector(".b-lazy").getAttribute("data-src"):"";d||(d=b.querySelector("img").getAttribute("src"));var e=new Image;null!==b.querySelector("img.b-loaded")&&(d=b.querySelector(".b-loaded").getAttribute("src")),e.src=d,null!==d&&(c.realWidth=e.width,c._initEvents(),a.trigger(c.$slider,"sliceboxReady",{slicebox:c}),c.isReady=!0,c.$slider.classList.add("is-sliced"),c.$slider.classList.remove("is-animating","is-slicing"))},2e3),void c.$slider.addEventListener("before.lory.slide",c.rotateTo.bind(c))))},_validate:function(){var a=this,b=a.options;b.cuboidsCount<0?b.cuboidsCount=1:b.cuboidsCount>15?b.cuboidsCount=15:b.cuboidsCount%2===0&&++b.cuboidsCount,b.maxCuboidsCount<0?b.maxCuboidsCount=1:b.maxCuboidsCount>15?b.maxCuboidsCount=15:b.maxCuboidsCount%2===0&&++b.maxCuboidsCount,b.disperseFactor<0&&(b.disperseFactor=0),"v"!==b.orientation&&"h"!==b.orientation&&"r"!==b.orientation&&(b.orientation="v")},_setSize:function(){var c,d,a=this,b=a.$slides[a.current].querySelector("img");null===b?(b=a.$slides[a.current],c=b.offsetWidth,d=b.offsetHeight):(c=b.width,d=b.height),a.size={width:c,height:d}},_initEvents:function(){var b=this;a.resize(function(){b._setSize()})()},_layout:function(c){var e=this,f=e.options.orientation;"r"===f&&(f=0===Math.floor(2*Math.random())?"v":"h"),e.options.cuboidsRandom&&(e.options.cuboidsCount=Math.floor(Math.random()*e.options.maxCuboidsCount+1)),e._validate();var g={width:e.size.width,height:e.size.height,perspective:e.options.perspective},h=a.extend(e.options,{size:e.size,items:e.$slides,direction:c,prev:e.prev,current:e.current,o:f,support:e.support});e.cuboids=[];for(var i=document.createDocumentFragment(),j=0;j<e.options.cuboidsCount;++j){var k=new d(h,j);i.appendChild(k.getEl()),e.cuboids.push(k)}e.$box.appendChild(i),b.setTimeout(function(){e.$slider.classList.add("is-slicing"),e.$slider.classList.remove("is-sliced")},600),a.forEach(g,function(a,b){e.$box.style[b]=a+"px"})},_rotate:function(){for(var c=this,d=0;d<c.options.cuboidsCount;++d){var e=c.cuboids[d];e.rotate(function(d){d===c.options.cuboidsCount-1&&(b.setTimeout(function(){c.isAnimating=!1,c.$box.innerHTML="",c.$slider.classList.remove("is-animating","is-slicing"),c.$slider.classList.add("is-sliced"),c.$slider.querySelector(".slide.is-current").classList.add("is-focus")},0),a.trigger(c.$slider,"sliceboxAfterChange",{currentSlide:c.current}))})}},rotateTo:function(a){var b=this;b.navigate(a.detail.nextSlide,"next")},navigate:function(b,c){var d=this;return!(d.isAnimating||!d.isReady||d.itemsCount<2)&&(d.isAnimating=!0,d.prev=d.current,"undefined"!==b?d.current=b:"next"===c?d.current=d.current<d.itemsCount-1?d.current+1:0:"prev"===c&&(d.current=d.current>0?d.current-1:d.itemsCount-1),a.trigger(d.$slider,"sliceboxBeforeChange",{currentSlide:d.current}),d._layout(c),void d._rotate())}},d.prototype={_setSize:function(){var a=this,b=a.config;a.size={width:"v"===b.o?Math.floor(b.size.width/b.cuboidsCount):b.size.width,height:"v"===b.o?b.size.height:Math.floor(b.size.height/b.cuboidsCount)},a.extra="v"===b.o?b.size.width-a.size.width*b.cuboidsCount:b.size.height-a.size.height*b.cuboidsCount},_configureStyles:function(){var b=this,c=b.config,d=Math.ceil(c.cuboidsCount/2),e=b.pos<d?{zIndex:100*(b.pos+1),left:"v"===c.o?b.size.width*b.pos:0,top:"v"===c.o?0:b.size.height*b.pos}:{zIndex:100*(c.cuboidsCount-b.pos),left:"v"===c.o?b.size.width*b.pos:0,top:"v"===c.o?0:b.size.height*b.pos};b.disperseFactor=c.disperseFactor*(b.pos+1-d),b.style=a.extend({transition:"transform "+c.slideSpeed+"ms "+c.ease},e,b.size),b.animationStyles={side1:"v"===c.o?{transform:"translate3d(0, 0, -"+b.size.height/2+"px)"}:{transform:"translate3d(0, 0, -"+b.size.width/2+"px)"},side2:"v"===c.o?{transform:"translate3d(0, 0, -"+b.size.height/2+"px) rotate3d(1, 0, 0, -90deg)"}:{transform:"translate3d(0, 0, -"+b.size.width/2+"px) rotate3d(0, 1, 0, -90deg)"},side3:"v"===c.o?{transform:"translate3d(0, 0, -"+b.size.height/2+"px) rotate3d(1, 0, 0, -180deg)"}:{transform:"translate3d(0, 0, -"+b.size.width/2+"px) rotate3d(0, 1, 0, -180deg)"},side4:"v"===c.o?{transform:"translate3d(0, 0, -"+b.size.height/2+"px) rotate3d(1, 0, 0, -270deg)"}:{transform:"translate3d(0, 0, -"+b.size.width/2+"px) rotate3d(0, 1, 0, -270deg)"}};var f="v"===c.o?b.size.height:b.size.width;b.sidesStyles={frontSideStyle:{width:"v"===c.o?b.size.width+b.extra:b.size.width,height:"v"===c.o?b.size.height:b.size.height+b.extra,backgroundColor:c.colorHiddenSides,transform:"rotate3d(0, 1, 0, 0deg) translate3d(0, 0, "+f/2+"px)"},backSideStyle:{width:b.size.width,height:b.size.height,backgroundColor:c.colorHiddenSides,transform:"rotate3d(0, 1, 0, 180deg) translate3d(0, 0, "+f/2+"px) rotateZ(180deg)"},rightSideStyle:{width:f,height:"v"===c.o?b.size.height:b.size.height+b.extra,left:"v"===c.o?b.size.width/2-b.size.height/2:0,backgroundColor:c.colorHiddenSides,transform:"rotate3d(0, 1, 0, 90deg) translate3d(0, 0, "+b.size.width/2+"px)"},leftSideStyle:{width:f,height:"v"===c.o?b.size.height:b.size.height+b.extra,left:"v"===c.o?b.size.width/2-b.size.height/2:0,backgroundColor:c.colorHiddenSides,transform:"rotate3d(0, 1, 0, -90deg) translate3d(0, 0, "+b.size.width/2+"px)"},topSideStyle:{width:"v"===c.o?b.size.width+b.extra:b.size.width,height:f,top:"v"===c.o?0:b.size.height/2-b.size.width/2,backgroundColor:c.colorHiddenSides,transform:"rotate3d(1, 0, 0, 90deg) translate3d(0, 0, "+b.size.height/2+"px)"},bottomSideStyle:{width:"v"===c.o?b.size.width+b.extra:b.size.width,height:f,top:"v"===c.o?0:b.size.height/2-b.size.width/2,backgroundColor:c.colorHiddenSides,transform:"rotate3d(1, 0, 0, -90deg) translate3d(0, 0, "+b.size.height/2+"px)"}}},addPx:function(a,b){return"left"!==b&&"top"!==b&&"width"!==b&&"height"!==b||(a+="px"),a},getEl:function(){var b=this;return b.$el=document.createElement("div"),a.forEach(b.style,function(a,c){b.$el.style[c]=b.addPx(a,c)}),a.forEach(b.animationStyles.side1,function(a,c){b.$el.style[c]=b.addPx(a,c)}),a.forEach(b.sidesStyles,function(a){var c=b.sliceEl(a);b.$el.appendChild(c)}),b.$el.classList.add("lory__box"),b._showImage(b.config.prev),b.$el},sliceEl:function(b){var c=this,d=document.createElement("div"),e=d.cloneNode(!0);return e.classList.add("lory__slice"),a.forEach(b,function(a,b){e.style[b]=c.addPx(a,b)}),e},_showImage:function(b){var e,c=this,d=c.config,f=d.items[b],g=f.querySelector(".b-loaded"),h=null,i=d.size.width+"px "+d.size.height+"px",j={backgroundSize:i};switch(null!==g&&g.getAttribute("src")&&(h=g.getAttribute("src")),null===h&&(h=null!==f.querySelector(".b-lazy")?f.querySelector(".b-lazy").getAttribute("data-src"):"",h||(h=f.querySelector("img").getAttribute("src"))),j.backgroundImage="url("+h+")",c.side){case 1:e=0;break;case 2:e="v"===d.o?4:2;break;case 3:e=1;break;case 4:e="v"===d.o?5:3}j.backgroundPosition="v"===d.o?-(c.pos*c.size.width)+"px 0px":"0px -"+c.pos*c.size.height+"px",a.forEach(j,function(a,b){c.$el.childNodes[e].style[b]=a})},rotate:function(c){var f,d=this,e=d.config;b.setTimeout(function(){if("next"===e.direction)switch(d.side){case 1:f=d.animationStyles.side2,d.side=2;break;case 2:f=d.animationStyles.side3,d.side=3;break;case 3:f=d.animationStyles.side4,d.side=4;break;case 4:f=d.animationStyles.side1,d.side=1}else switch(d.side){case 1:f=d.animationStyles.side4,d.side=4;break;case 2:f=d.animationStyles.side1,d.side=1;break;case 3:f=d.animationStyles.side2,d.side=2;break;case 4:f=d.animationStyles.side3,d.side=3}d._showImage(e.current);var i,j,b={},g={},h=0;"v"===e.o?(h=parseInt(d.getCssProp(d.$el,"left")),i=h-d.disperseFactor,j=h+d.disperseFactor,b.left=[h+"px",i+"px",h+"px"],g.left=[h+"px",j+"px",h+"px"]):"h"===e.o&&(h=parseInt(d.getCssProp(d.$el,"top")),i=h-d.disperseFactor,j=h+d.disperseFactor,b.top=[h+"px",i+"px",h+"px"],g.top=[h+"px",j+"px",h+"px"]),a.forEach(f,function(a,b){d.$el.style[b]=a});var k={direction:"normal",duration:2.5*e.slideSpeed,delay:0,fill:"forwards",easing:e.ease,iterationStart:0};d.$el.animate(b,k);var l=d.$el.animate(g,k),m=function(){c&&c.call(d,d.pos)};l.finished?l.finished.then(m):l.onfinish=m},e.sequentialFactor*d.pos+30)},getCssProp:function(a,c){var d=null;return a.currentStyle?d=a.currentStyle[c]:b.getComputedStyle&&(d=b.getComputedStyle(a,null).getPropertyValue(c)),d}},b.Cuboid=d}(dBlazy,window);