atoms.app.carousel.js

(function(){var ATTRIBUTES,RESISTANCE,TRANSITION,TRIGGER_PX,_removeTransform,__hasProp={}.hasOwnProperty,__extends=function(child,parent){function ctor(){this.constructor=child}for(var key in parent)__hasProp.call(parent,key)&&(child[key]=parent[key]);return ctor.prototype=parent.prototype,child.prototype=new ctor,child.__super__=parent.prototype,child},__bind=function(fn,me){return function(){return fn.apply(me,arguments)}},__indexOf=[].indexOf||function(item){for(var i=0,l=this.length;l>i;i++)if(i in this&&this[i]===item)return i;return-1};Atoms.App.Extension.Carousel={},Atoms.App.Extension.Carousel.Index=function(_super){function Index(attributes){null==attributes&&(attributes={}),attributes.method="prepend",Index.__super__.constructor.call(this,attributes)}return __extends(Index,_super),Index.template="<div></div>",Index.base="index",Index.prototype.add=function(index,active){var child;return null==active&&(active=!1),child=Atoms.$('<span data-index="'+(index+1)+'"></span>'),active&&child.addClass("active"),this.el.append(child)},Index.prototype.setActive=function(index){return this.el.find("[data-index]").removeClass("active").filter("[data-index='"+(index+1)+"']").addClass("active")},Index}(Atoms.Class.Atom),ATTRIBUTES={TRANSITION:"data-carousel-transition",POSITION:"data-carousel-position"},TRANSITION={PREVIOUS:"previous",CURRENT:"current",NEXT:"next",RESTORE:"restoring"},TRIGGER_PX=120,RESISTANCE=5,Atoms.Molecule.Carousel=function(_super){function Carousel(){this._onTransitionEnd=__bind(this._onTransitionEnd,this),this._onEnd=__bind(this._onEnd,this),this._onSwiping=__bind(this._onSwiping,this),this._onStart=__bind(this._onStart,this),this.previous=__bind(this.previous,this),this.next=__bind(this.next,this),Carousel.__super__.constructor.apply(this,arguments),this.initialize(),__indexOf.call(this.attributes.events||[],"swipe")>=0&&(this.el.bind("touchstart",this._onStart),this.el.bind("swiping",this._onSwiping),this.el.bind("touchend",this._onEnd)),this.el.bind("webkitTransitionEnd",this._onTransitionEnd),this.el.bind("transitionend",this._onTransitionEnd)}return __extends(Carousel,_super),Carousel["extends"]=!0,Carousel.template='<div {{#if.style}}class="{{style}}"{{/if.style}}></div>',Carousel.available=["Atom.Figure","Atom.Image","Atom.Video","Molecule.Div"],Carousel.base="Form",Carousel.events=["swipe","start","change","end"],Carousel.prototype.clean=function(){return this.destroyChildren()},Carousel.prototype.initialize=function(){var child,index,transition,_i,_len,_ref;if(this.index=new Atoms.App.Extension.Carousel.Index({container:this.el}),this.children.unshift(this.index),this.children.length>1)for(this._index=1,this._total_childs=this.children.length-1,this.blocked=!1,_ref=this.children,index=_i=0,_len=_ref.length;_len>_i;index=++_i)child=_ref[index],"index"!==child.constructor.base&&(transition=1===index?TRANSITION.CURRENT:TRANSITION.NEXT,child.el.attr(ATTRIBUTES.POSITION,transition),this.index.add(index,1===index));return this.attributes.interval&&this.children.length>2&&(this._interval=setTimeout(this.next,this.attributes.interval)),this.bubble("start",{})},Carousel.prototype.next=function(){var next;return this._canMove(!0)?(this._move(next=!0),this.blocked=!0):this.attributes.interval&&this._total_childs>1?(this.children[1].el.attr(ATTRIBUTES.POSITION,"next"),this.children[1].el.attr(ATTRIBUTES.TRANSITION,"current"),this.children[this._total_childs].el.attr(ATTRIBUTES.TRANSITION,"next"),this._index=1,this.bubble("end",{})):void 0},Carousel.prototype.previous=function(){var next;return this._canMove(!1)?(this._move(next=!1),this.blocked=!0):void 0},Carousel.prototype._onStart=function(){return this.blocked?void 0:this.swiped=0},Carousel.prototype._onSwiping=function(event){return null!==this.swiped&&(this.swiped=event.touch.delta.x,this._handleSwipe(),this.attributes.interval&&clearTimeout(this._interval)),event.originalEvent.preventDefault(),event.stopPropagation()},Carousel.prototype._onEnd=function(){var absPx,next;if(null!==this.swiped)return absPx=Math.abs(this.swiped),absPx>0&&(this.blocked=!0,next=this.swiped<0,absPx>TRIGGER_PX&&this._canMove(next)?this._move(next):this._removeTransforms(!0)),this.swiped=null},Carousel.prototype._removeTransforms=function(animate){var child,other_index,_i,_len,_ref,_ref1;for(_ref=this.children,_i=0,_len=_ref.length;_len>_i;_i++)child=_ref[_i],_removeTransform(child.el[0]);return animate?(this.children[this._index].el.attr(ATTRIBUTES.TRANSITION,TRANSITION.RESTORE),other_index=this.swiped>0?this._index-1:this._index+1,null!=(_ref1=this.children[other_index])?_ref1.el.attr(ATTRIBUTES.TRANSITION,TRANSITION.RESTORE):void 0):void 0},Carousel.prototype._resetPositions=function(){var child,_i,_len,_ref,_results;for(_ref=this.children,_results=[],_i=0,_len=_ref.length;_len>_i;_i++)child=_ref[_i],_results.push(child.el.removeAttr(ATTRIBUTES.POSITION));return _results},Carousel.prototype._handleSwipe=function(){var otherTarget,possible,target,toSwipe;return target=this.children[this._index].el,possible=this._canMove(this.swiped<0),toSwipe=possible?this.swiped:this.swiped/RESISTANCE,target.vendor("transform","translateX("+toSwipe+"px)"),possible?(otherTarget=Atoms.$(target[0][this.swiped>0?"previousSibling":"nextSibling"]),otherTarget.vendor("transform","translateX("+toSwipe+"px)")):void 0},Carousel.prototype._canMove=function(is_next){return null==is_next&&(is_next=!0),!(1===this._index&&!is_next||this._index===this._total_childs&&is_next)},Carousel.prototype._move=function(next){var direction,future_index,_ref,_ref1;return next?(direction=TRANSITION.NEXT,future_index=this._index+1,null!=(_ref=this.children[this._index-1])&&_ref.el.removeAttr(ATTRIBUTES.POSITION)):(direction=TRANSITION.PREVIOUS,future_index=this._index-1,null!=(_ref1=this.children[this._index+1])&&_ref1.el.removeAttr(ATTRIBUTES.POSITION)),this._removeTransforms(!1),this.children[this._index].el.attr(ATTRIBUTES.TRANSITION,direction),_removeTransform(this.children[this._index].el[0]),this.children[future_index].el.attr(ATTRIBUTES.TRANSITION,TRANSITION.CURRENT),this._index=future_index,this.bubble("change",{index:this._index})},Carousel.prototype._onTransitionEnd=function(e){var child,position,transition,_ref,_ref1;return child=e.target,transition=child.getAttribute(ATTRIBUTES.TRANSITION),position=child.getAttribute(ATTRIBUTES.POSITION),transition===TRANSITION.CURRENT&&(this._resetPositions(),null!=(_ref=this.index)&&_ref.setActive(this._index),child.setAttribute(ATTRIBUTES.POSITION,TRANSITION.CURRENT),null!=(_ref1=child.previousSibling)&&_ref1.setAttribute(ATTRIBUTES.POSITION,TRANSITION.PREVIOUS),null!=child.nextSibling&&"index"!==child.nextSibling.className&&child.nextSibling.setAttribute(ATTRIBUTES.POSITION,TRANSITION.NEXT)),this.attributes.interval&&clearTimeout(this._interval),(transition===TRANSITION.CURRENT||transition===TRANSITION.RESTORE&&position===TRANSITION.CURRENT)&&(this.blocked=!1,this.attributes.interval&&setTimeout(function(_this){return function(){return _this._interval=setTimeout(_this.next,_this.attributes.interval)}}(this),100)),child.removeAttribute(ATTRIBUTES.TRANSITION)},Carousel}(Atoms.Class.Molecule),_removeTransform=function(el){return el.style.webkitTransform="",el.style.MozTransform="",el.style.transform=""}}).call(this);