Skip to content

Instantly share code, notes, and snippets.

@craigpotter
Created December 22, 2016 17:08
Show Gist options
  • Save craigpotter/b13eee0930915cced13e6307e24d8248 to your computer and use it in GitHub Desktop.
Save craigpotter/b13eee0930915cced13e6307e24d8248 to your computer and use it in GitHub Desktop.
Minified version of photostack with ClickToFlip Option
!function(a){"use strict";function e(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function f(a){for(var b=[],c=a.length,d=a[0].length,e=0;c>e;e++)b=b.concat(a[e]);b=g(b);for(var f=[],h=0,i=0;c>i;i++){for(var j=[],k=0;d>k;k++)j.push(b[h]),h++;f.push(j)}return f}function g(a){for(var c,d,b=a.length;b;)d=Math.floor(Math.random()*b--),c=a[b],a[b]=a[d],a[d]=c;return a}function h(a,b){this.el=a,this.inner=this.el.querySelector("div"),this.allItems=[].slice.call(this.inner.children),this.allItemsCount=this.allItems.length,this.allItemsCount&&(this.items=[].slice.call(this.inner.querySelectorAll("figure:not([data-dummy])")),this.itemsCount=this.items.length,this.current=0,this.options=e({},this.options),e(this.options,b),this._init())}Modernizr.addTest("csstransformspreserve3d",function(){var d,b=Modernizr.prefixed("transformStyle"),c="preserve-3d";return b?(b=b.replace(/([A-Z])/g,function(a,b){return"-"+b.toLowerCase()}).replace(/^ms-/,"-ms-"),Modernizr.testStyles("#modernizr{"+b+":"+c+";}",function(c,e){d=a.getComputedStyle?getComputedStyle(c,null).getPropertyValue(b):""}),d===c):!1});var b={transitions:Modernizr.csstransitions,preserve3d:Modernizr.csstransformspreserve3d},c={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},d=c[Modernizr.prefixed("transition")];h.prototype.options={},h.prototype._init=function(){this.currentItem=this.items[this.current],this._addNavigation(),this._getSizes(),this._initEvents()},h.prototype._addNavigation=function(){this.nav=document.createElement("nav");for(var a="",b=0;b<this.itemsCount;++b)a+="<span></span>";this.nav.innerHTML=a,this.el.appendChild(this.nav),this.navDots=[].slice.call(this.nav.children)},h.prototype._initEvents=function(){"true"==this.options.clickToFlip&&this.items.forEach(function(a,b){a.addEventListener("click",function(){b===c.current&&c._rotateItem()})});var c=this,d=classie.hasClass(this.el,"photostack-start"),e=function(){var a=function(){b.transitions&&classie.addClass(c.el,"photostack-transition")};d?(this.removeEventListener("click",e),classie.removeClass(c.el,"photostack-start"),a()):(c.openDefault=!0,setTimeout(a,25)),c.started=!0,c._showPhoto(c.current)};d?(this._shuffle(),this.el.addEventListener("click",e)):e(),this.navDots.forEach(function(a,b){a.addEventListener("click",function(){if(b===c.current)c._rotateItem();else{var a=function(){c._showPhoto(b)};c.flipped?c._rotateItem(a):a()}})}),a.addEventListener("resize",function(){c._resizeHandler()})},h.prototype._resizeHandler=function(){function b(){a._resize(),a._resizeTimeout=null}var a=this;this._resizeTimeout&&clearTimeout(this._resizeTimeout),this._resizeTimeout=setTimeout(b,100)},h.prototype._resize=function(){var a=this,b=function(){a._shuffle(!0)};this._getSizes(),this.started&&this.flipped?this._rotateItem(b):b()},h.prototype._showPhoto=function(a){return this.isShuffling?!1:(this.isShuffling=!0,classie.hasClass(this.currentItem,"photostack-flip")&&(this._removeItemPerspective(),classie.removeClass(this.navDots[this.current],"flippable")),classie.removeClass(this.navDots[this.current],"current"),classie.removeClass(this.currentItem,"photostack-current"),this.current=a,this.currentItem=this.items[this.current],classie.addClass(this.navDots[this.current],"current"),this.currentItem.querySelector(".photostack-back")&&classie.addClass(this.navDots[a],"flippable"),void this._shuffle())},h.prototype._shuffle=function(a){var c=a?1:this.currentItem.getAttribute("data-shuffle-iteration")||1;(0>=c||!this.started||this.openDefault)&&(c=1),this.openDefault&&(classie.addClass(this.currentItem,"photostack-flip"),this.openDefault=!1,this.isShuffling=!1);var e=.5,g=Math.ceil(this.sizes.inner.width/(this.sizes.item.width*e)),h=Math.ceil(this.sizes.inner.height/(this.sizes.item.height*e)),i=g*this.sizes.item.width*e+this.sizes.item.width/2-this.sizes.inner.width,j=h*this.sizes.item.height*e+this.sizes.item.height/2-this.sizes.inner.height,k=i/2,l=j/2,m=35,n=-35,o=this,p=function(){--c;for(var a=[],i=0;h>i;++i)for(var j=a[i]=[],q=0;g>q;++q){var r=q*(o.sizes.item.width*e)-k,s=i*(o.sizes.item.height*e)-l,t=0,u=0;if(o.started&&0===c){var v=o._isOverlapping({x:r,y:s});if(v.overlapping){t=v.noOverlap.x,u=v.noOverlap.y;var w=Math.floor(3*Math.random());switch(w){case 0:t=0;break;case 1:u=0}}}j[q]={x:r+t,y:s+u}}a=f(a);var x=0,y=0,z=0;o.allItems.forEach(function(e,f){x===g-1?(y=y===h-1?0:y+1,x=1):++x;var k=(Math.floor(Math.random()*g),Math.floor(Math.random()*h),a[y][x-1]),l={x:k.x,y:k.y},q=function(){++z,b.transitions&&this.removeEventListener(d,q),z===o.allItemsCount&&(c>0?p.call():(classie.addClass(o.currentItem,"photostack-flip"),o.isShuffling=!1,"function"==typeof o.options.callback&&o.options.callback(o.currentItem)))};o.items.indexOf(e)===o.current&&o.started&&0===c?(o.currentItem.style.WebkitTransform="translate("+o.centerItem.x+"px,"+o.centerItem.y+"px) rotate(0deg)",o.currentItem.style.msTransform="translate("+o.centerItem.x+"px,"+o.centerItem.y+"px) rotate(0deg)",o.currentItem.style.transform="translate("+o.centerItem.x+"px,"+o.centerItem.y+"px) rotate(0deg)",o.currentItem.querySelector(".photostack-back")&&o._addItemPerspective(),classie.addClass(o.currentItem,"photostack-current")):(e.style.WebkitTransform="translate("+l.x+"px,"+l.y+"px) rotate("+Math.floor(Math.random()*(m-n+1)+n)+"deg)",e.style.msTransform="translate("+l.x+"px,"+l.y+"px) rotate("+Math.floor(Math.random()*(m-n+1)+n)+"deg)",e.style.transform="translate("+l.x+"px,"+l.y+"px) rotate("+Math.floor(Math.random()*(m-n+1)+n)+"deg)"),o.started&&(b.transitions?e.addEventListener(d,q):q())})};p.call()},h.prototype._getSizes=function(){this.sizes={inner:{width:this.inner.offsetWidth,height:this.inner.offsetHeight},item:{width:this.currentItem.offsetWidth,height:this.currentItem.offsetHeight}},this.centerItem={x:this.sizes.inner.width/2-this.sizes.item.width/2,y:this.sizes.inner.height/2-this.sizes.item.height/2}},h.prototype._isOverlapping=function(a){var b=this.sizes.item.width+this.sizes.item.width/3,c=this.sizes.item.height+this.sizes.item.height/3,d={x:this.sizes.inner.width/2-b/2,y:this.sizes.inner.height/2-c/2},e=this.sizes.item.width,f=this.sizes.item.height;if(!(a.x+e<d.x||a.x>d.x+b||a.y+f<d.y||a.y>d.y+c)){var g=Math.random()<.5,h=Math.floor(Math.random()*(e/4+1)),i=Math.floor(Math.random()*(f/4+1)),j=g?-1*(a.x-d.x+e)-h:d.x+b-(a.x+e)+e+h,k=g?-1*(a.y-d.y+f)-i:d.y+c-(a.y+f)+f+i;return{overlapping:!0,noOverlap:{x:j,y:k}}}return{overlapping:!1}},h.prototype._addItemPerspective=function(){classie.addClass(this.el,"photostack-perspective")},h.prototype._removeItemPerspective=function(){classie.removeClass(this.el,"photostack-perspective"),classie.removeClass(this.currentItem,"photostack-flip")},h.prototype._rotateItem=function(a){if(classie.hasClass(this.el,"photostack-perspective")&&!this.isRotating&&!this.isShuffling){this.isRotating=!0;var c=this,e=function(){b.transitions&&b.preserve3d&&this.removeEventListener(d,e),c.isRotating=!1,"function"==typeof a&&a()};this.flipped?(classie.removeClass(this.navDots[this.current],"flip"),b.preserve3d?(this.currentItem.style.WebkitTransform="translate("+this.centerItem.x+"px,"+this.centerItem.y+"px) rotateY(0deg)",this.currentItem.style.transform="translate("+this.centerItem.x+"px,"+this.centerItem.y+"px) rotateY(0deg)"):classie.removeClass(this.currentItem,"photostack-showback")):(classie.addClass(this.navDots[this.current],"flip"),b.preserve3d?(this.currentItem.style.WebkitTransform="translate("+this.centerItem.x+"px,"+this.centerItem.y+"px) translate("+this.sizes.item.width+"px) rotateY(-179.9deg)",this.currentItem.style.transform="translate("+this.centerItem.x+"px,"+this.centerItem.y+"px) translate("+this.sizes.item.width+"px) rotateY(-179.9deg)"):classie.addClass(this.currentItem,"photostack-showback")),this.flipped=!this.flipped,b.transitions&&b.preserve3d?this.currentItem.addEventListener(d,e):e()}},a.Photostack=h}(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment