-
Notifications
You must be signed in to change notification settings - Fork 1
/
zflick.min.js
2 lines (2 loc) · 7.26 KB
/
zflick.min.js
1
2
/* zflick.js [email protected] http://funnythingz.github.com/zflickjs/ | mit-license */
var zflickjs=function(a){this.id=document.getElementById(a.id),this.contents=document.getElementById(a.contents),this.col=this.contents.getElementsByClassName(a.col),this.lamp=a.lamp?document.getElementById(a.lamp):!1,this.lampActiveClassName=a.lampActiveClassName?a.lampActiveClassName:"cur",this.btnPrev=a.btn?document.getElementById(a.btn.prev):!1,this.btnNext=a.btn?document.getElementById(a.btn.next):!1,this.btnActiveClassName=a.btnActiveClassName?a.btnActiveClassName:"zflickBtnCur",this.move=a.move?a.move:!1,this.loop=a.loop?a.loop:!1,this.autoChange=a.autoChange?a.autoChange:!1,this.autoTimer=a.autoTimer?a.autoTimer:5000,this.cur=a.cur?a.cur:0,this.initCallback=a.initCallback?a.initCallback:function(){},this.moveCallback=a.moveCallback?a.moveCallback:function(){},this.isArgsWidth=!a.width||a.width<=0?!1:!0,this.idWidth=this.isArgsWidth?a.width:this.id.clientWidth,this.num=0,this.disX=!a.disX||a.disX<=0?5:a.disX,this.disY=!a.disY||a.disY<=0?5:a.disY,this.length=0,this.carray=[],this.warray=[],this.lamps=[],this.cloneLength=a.cloneLength?a.cloneLength:3,this.autoChange&&(this.autoChangeFlag=!0,this.autoTimerCache=[]),this._cNowPos=0,this._cStartPosX=0,this._cStartPosY=0,this._cDistance=0,this._cHoge=0,this._orien=!1,this._btnFlag=a.btn?!0:!1,this._ua=navigator.userAgent,this._initFlag=!0,this._totalWidth=0,this.init()};zflickjs.prototype={init:function(){this.domInit(),this.touchInit(),this._btnFlag&&(this.clickPrevInit(),this.clickNextInit()),this.createLamp(),this.animation(this),this.resetAutoChange(),this.initCallback()},touchInit:function(){var a=!1,b=this;this.contents.addEventListener("touchstart",function(c){b._cStartPosX=c.touches[0].clientX,b._cStartPosY=c.touches[0].clientY,b.killAutoChange()},!1),this.contents.addEventListener("touchmove",function(c){Math.abs(b._cStartPosY-c.touches[0].clientY)>b.disY||a||(b._cDistance=b._cStartPosX-c.touches[0].clientX,b._cHoge=b._cNowPos,b.disX<Math.abs(b._cDistance)&&b._cDistance>0?(c.preventDefault(),c.stopPropagation(),b._cHoge=b._cNowPos-Math.abs(b._cDistance),b._orien=!0,a=!0):b.disX<Math.abs(b._cDistance)&&b._cDistance<0&&(c.preventDefault(),c.stopPropagation(),b._cHoge=b._cNowPos+Math.abs(b._cDistance),b._orien=!1,a=!0),a&&(b.animation(b),b._cDistance=0,b.resetAutoChange()))},!1),this.contents.addEventListener("touchend",function(){a=!1},!1)},animation:function(a){a._orien?(a.cur+=1,a.cur<a.length?a.loop&&a.cur===a.length-1?(a._cNowPos=a.warray[0]+2*a.idWidth,a.noTransAnimate(a),a._cNowPos=a.warray[0]+a.idWidth):a._cNowPos=a.warray[a.cur]:(a.loop&&a.cur===a.length&&(a._cNowPos=a.warray[0]+a.idWidth,a.noTransAnimate(a),a._cNowPos=a.warray[a.cur]),a.cur=a.loop?0:a.length-1,a._cNowPos=a.warray[a.cur])):(a.cur=a._initFlag?a.cur:a.cur-1,a.cur>0?(a._cNowPos=a.warray[a.cur],a.loop&&a.cur===a.length-2&&(a._cNowPos=a.warray[a.length-1],a.noTransAnimate(a),a._cNowPos=a.warray[a.cur])):a.cur<=0&&(a.loop&&a.cur<0?(a.cur=a.length-1,a._cNowPos=a.warray[a.length-1]-a.idWidth,a.noTransAnimate(a)):a.cur=0,a._cNowPos=a.warray[a.cur])),setTimeout(function(){a.transAnimate(a)},1),a.btnCurrentAction(),a.setLamps(a.cur),a._initFlag=!1},transAnimate:function(a){/AppleWebKit/.test(a._ua)?(a.contents.style.webkitTransition="-webkit-transform 0.3s ease-in-out",a.contents.style.webkitTransform="translate3d("+a._cNowPos+"px, 0, 0)"):/Firefox/.test(a._ua)&&(a.contents.style.MozTransition="-moz-transform 0.3s ease-in-out",a.contents.style.MozTransform="translate3d("+a._cNowPos+"px, 0, 0)"),setTimeout(function(){a.moveCallback()},300)},noTransAnimate:function(a){/AppleWebKit/.test(a._ua)?(a.contents.style.webkitTransition="none",a.contents.style.webkitTransform="translate3d("+a._cNowPos+"px, 0, 0)"):/Firefox/.test(a._ua)&&(a.contents.style.MozTransition="none",a.contents.style.MozTransform="translate3d("+a._cNowPos+"px, 0, 0)")},btnCurrentAction:function(){this._btnFlag&&(this.loop?(this.btnNext.className.indexOf(this.btnActiveClassName)<0&&(this.btnNext.className+=" "+this.btnActiveClassName),this.btnPrev.className.indexOf(this.btnActiveClassName)<0&&(this.btnPrev.className+=" "+this.btnActiveClassName)):this.cur<=0?(this.btnPrev.className.indexOf(this.btnActiveClassName)>0&&(this.btnPrev.className=this.btnPrev.className.replace(this.btnActiveClassName,"")),this.btnNext.className.indexOf(this.btnActiveClassName)<0&&(this.btnNext.className+=" "+this.btnActiveClassName)):this.cur===this.length-1?(this.btnPrev.className.indexOf(this.btnActiveClassName)<0&&(this.btnPrev.className+=" "+this.btnActiveClassName),this.btnNext.className.indexOf(this.btnActiveClassName)>0&&(this.btnNext.className=this.btnNext.className.replace(this.btnActiveClassName,""))):(this.btnPrev.className.indexOf(this.btnActiveClassName)<0&&(this.btnPrev.className+=" "+this.btnActiveClassName),this.btnNext.className.indexOf(this.btnActiveClassName)<0&&(this.btnNext.className+=" "+this.btnActiveClassName)))},clickPrevInit:function(){var a=this;this.btnPrev.addEventListener("click",function(){a._orien=!1,a.animation(a),a.killAutoChange(),setTimeout(function(){a.resetAutoChange()},a.autoTimer)},!1)},clickNextInit:function(){var a=this;this.btnNext.addEventListener("click",function(){a._orien=!0,a.animation(a),a.killAutoChange(),setTimeout(function(){a.resetAutoChange()},a.autoTimer)},!1)},resizeInit:function(){var a=this,b=!1;window.addEventListener("resize",function(){b!==!1&&clearTimeout(b),b=setTimeout(function(){a.domInit(),a.animation(a),a.resetAutoChange()},200)},!1)},domInit:function(){this.id.style.width="auto",this.isArgsWidth||(this.idWidth=this.id.clientWidth),this.length=this.col.length,this.id.style.width=this.idWidth+"px",this.loop?(this._totalWidth=this.getContentsWidth(),this.contents.style.width=this._totalWidth*this.cloneLength+"px",this.cloneNode(this.cloneLength),this.loopInitPos()):this.contents.style.width=this.getContentsWidth()+"px"},createLamp:function(){var a=this;if(this.lamp){for(var b=0;b<this.length;b++){this.lamps[b]=document.createElement("div"),function(c){a.lamps[c].addEventListener("click",function(){a.autoChange&&a.killAutoChange(),a.cur=a._orien?c-1:c+1,a.animation(a),a.btnCurrentAction(),a.setLamps(a.cur),a.autoChange&&a.autoChangeFunc()},!1)}(b),this.lamp.appendChild(this.lamps[b])}}},setLamps:function(a){if(this.lamp){for(var b=0;b<this.length;b++){this.lamps[b].setAttribute("class","")}this.lamps[a].setAttribute("class",this.lampActiveClassName)}},getContentsWidth:function(){for(var b=0,c=0,a=this.length;a>c;c++){this.col[c];this.carray[c]=this.idWidth,this.warray[c]=-b,b+=this.idWidth}return b},loopInitPos:function(){for(var a=0,b=this.length;b>a;a++){this.warray[a]-=this._totalWidth}},cloneNode:function(c){c-=1;for(var d=0;c>d;d++){for(var a=0,b=this.length;b>a;a++){cloneNode=this.col[a].cloneNode(!0),cloneNode.setAttribute("clone","clone"),this.contents.appendChild(cloneNode)}}},autoChangeFunc:function(){if(!this.autoChangeFlag){var a=this;this.autoTimerCache.push(setInterval(function(){a.autoChangeFlag=!0,a.loop?a._orien=!0:a.cur===a.length-1?(a._orien=!1,a.cur=0):a._orien=!0,a.animation(a)},this.autoTimer))}},resetAutoChange:function(){this.autoChange&&(this.killAutoChange(),this.autoChangeFunc())},killAutoChange:function(){if(this.autoChange){this.autoChangeFlag=!1;for(var a=0,b=this.autoTimerCache.length;b>a;a++){clearInterval(this.autoTimerCache[a]),this.autoTimerCache.splice(a,1)}}}};