diff --git a/README.md b/README.md index 8effb989..9e65fab4 100644 --- a/README.md +++ b/README.md @@ -289,6 +289,17 @@ To learn more advanced features, please refer to [WIKI](https://github.com/BE-FE - Precondition: isAutoplay === ```TRUE``` +##### wakeupAutoplayDazetime + +- `{Number}` +- User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay. +- This configuration will attempt to restart autoplay after N milliseconds. +- **AutoPlay will be forced to wake up, even when the user fill in a form items !** +- **It will be blocked by "lock()"** +- Unit: ms +- Precondition: isAutoplay === ```TRUE``` + + ##### isLooping - `{Boolean}` diff --git a/README_Chinese.md b/README_Chinese.md index c5537a31..2253ef56 100644 --- a/README_Chinese.md +++ b/README_Chinese.md @@ -289,6 +289,17 @@ var data = [{ - 前置条件：isAutoplay === ```TRUE``` +##### wakeupAutoplayDazetime + +- `{Number}` +- 当用户产生点击/触摸行为(比如触发一个超链接)，或者页面失去焦点时会停止自动播放 +- 此项配置会在吻合上面条件之后，尝试在N毫秒后重新唤醒自动播放 +- **自动播放的唤醒是强制性的，无论你在做什么，比如正在某一帧上填写表单!** +- **此项配置会被"lock()"阻止，当你设置了此项又想在某一帧停留的时候请使用"lock()"方法** +- 单位：毫秒 +- 前置条件：isAutoplay === ```TRUE``` + + ##### isLooping - `{Boolean}` diff --git a/bower.json b/bower.json index a386a5bd..d04fcf5c 100644 --- a/bower.json +++ b/bower.json @@ -41,5 +41,5 @@ "index.html", "gulp" ], - "version": "2.2.0" + "version": "2.2.1" } diff --git a/build/iSlider.animate.min.js b/build/iSlider.animate.min.js index 1e1a1eab..2f553026 100644 --- a/build/iSlider.animate.min.js +++ b/build/iSlider.animate.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||a<0&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=f<1?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); \ No newline at end of file +!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),0>a&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),0>a&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||0>a&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=1>f?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); \ No newline at end of file diff --git a/build/iSlider.js b/build/iSlider.js index 70c3dc01..3aa6387d 100644 --- a/build/iSlider.js +++ b/build/iSlider.js @@ -95,10 +95,10 @@ try { return obj instanceof HTMLElement; } - catch(e){ - return (typeof obj==="object") && - (obj.nodeType===1) && (typeof obj.style === "object") && - (typeof obj.ownerDocument ==="object"); + catch (e) { + return (typeof obj === "object") && + (obj.nodeType === 1) && (typeof obj.style === "object") && + (typeof obj.ownerDocument === "object"); } } @@ -152,7 +152,7 @@ if (!opts.dom) { throw new Error('Container can not be empty!'); } - else if (!isDom(opts.dom)){ + else if (!isDom(opts.dom)) { throw new Error('Container must be a HTMLElement instance!'); } @@ -186,7 +186,7 @@ * version * @type {string} */ - iSlider.VERSION = '2.2.0'; + iSlider.VERSION = '2.2.1'; /** * Event white list @@ -660,6 +660,16 @@ */ self.isAutoplay = opts.isAutoplay && self.data.length > 1 ? true : false; + /** + * When autoplay is enabled. + * User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay. + * This configuration will attempt to restart autoplay after N milliseconds. + * ! AutoPlay will be forced to wake up, even when the user fill in a form item + * ! It will be blocked by "lock()" + * @type {number} + */ + self.wakeupAutoplayDazetime = opts.wakeupAutoplayDazetime > -1 ? parseInt(opts.wakeupAutoplayDazetime) : -1; + /** * Animate type * @type {String} @@ -1165,6 +1175,7 @@ break; case 'blur': this.pause(); + this._tryToWakeupAutoplay(); break; } }; @@ -1322,6 +1333,8 @@ } this.offset.X = this.offset.Y = 0; + + this._tryToWakeupAutoplay(); }; /** @@ -1817,6 +1830,16 @@ this.delay > 0 ? global.setTimeout(this.play.bind(this), this.delay) : this.play(); }; + /** + * try to restart autoplay + * @private + */ + iSliderPrototype._tryToWakeupAutoplay = function () { + if (~this.wakeupAutoplayDazetime) { + this.wakeupAutoplayDazetime > 0 ? global.setTimeout(this.play.bind(this), this.wakeupAutoplayDazetime) : this.play(); + } + }; + /** * Start autoplay * @public diff --git a/build/iSlider.min.js b/build/iSlider.min.js index e6eef941..9f2a4365 100644 --- a/build/iSlider.min.js +++ b/build/iSlider.min.js @@ -1 +1 @@ -!function(t){"use strict";function e(){}function i(t,e){return e.indexOf(t)>-1}function n(t){return"[object Array]"===Object.prototype.toString.call(t)}function s(t){return"[object Object]"===Object.prototype.toString.call(t)}function a(t,e){return t.className.match(new RegExp("(\\s|^)("+e+")(\\s|$)"))}function r(t,e){a(t,e)||(t.className+=" "+e)}function o(t,e){a(t,e)&&(t.className=t.className.replace(RegExp("(\\s|^)("+e+")(\\s|$)"),"$3"))}function h(t){return!/<\/?[^>]*>/.test(t)&&/^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(t)}function l(t){try{return t instanceof HTMLElement}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}}function d(t){return Array.prototype.slice.apply(t,Array.prototype.slice.call(arguments,1))}function c(t){return t.replace(/^[a-z]/,function(t){return t.toUpperCase()})}var u=function(){var t=d(arguments,0,3);if(!t.length)throw new Error("Parameters required!");var e=s(t.slice(-1)[0])?t.pop():{};switch(t.length){case 2:e.data=e.data||t[1];case 1:e.dom=e.dom||t[0]}if(!e.dom)throw new Error("Container can not be empty!");if(!l(e.dom))throw new Error("Container must be a HTMLElement instance!");if(!e.data||!e.data.length)throw new Error("Data must be an array and must have more than one element!");this._opts=e,e=null,t=null,this._setting(),this.fire("initialize"),this._renderWrapper(),this._initPlugins(),this._bindHandler(),this.fire("initialized"),this._autoPlay()};u.VERSION="2.2.0",u.EVENTS=["initialize","initialized","pluginInitialize","pluginInitialized","renderComplete","slide","slideStart","slideEnd","slideChange","slideChanged","slideRestore","slideRestored","loadData","reset","destroy"],u.EASING=[["linear","ease","ease-in","ease-out","ease-in-out"],/cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/],u.FIX_PAGE_TAGS=["SELECT","INPUT","TEXTAREA","BUTTON","LABEL"],u.NODE_TYPE={unknown:"unknown",empty:"empty",pic:"pic",dom:"dom",html:"html",node:"node",element:"element"},u.TRANSITION_END_EVENT=null,u.BROWSER_PREFIX=null,function(){var t=document.createElement("fakeElement");[["WebkitTransition","webkitTransitionEnd","webkit"],["transition","transitionend",null],["MozTransition","transitionend","moz"],["OTransition","oTransitionEnd","o"]].some(function(e){if(void 0!==t.style[e[0]])return u.TRANSITION_END_EVENT=e[1],u.BROWSER_PREFIX=e[2],!0})}(),u.DEVICE_EVENTS=function(){var e=!!("ontouchstart"in t&&!/Mac OS X /.test(t.navigator.userAgent)||t.DocumentTouch&&document instanceof t.DocumentTouch);return{hasTouch:e,startEvt:e?"touchstart":"mousedown",moveEvt:e?"touchmove":"mousemove",endEvt:e?"touchend":"mouseup",cancelEvt:e?"touchcancel":"mouseout",resizeEvt:"onorientationchange"in t?"orientationchange":"resize"}}(),u.extend=function(){var t,e,i=arguments;switch(i.length){case 0:return;case 1:t=u.prototype,e=i[0];break;case 2:t=i[0],e=i[1]}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},u.plugins={},u.regPlugin=function(t,e){u.plugins[t]=u.plugins[t]||e},u.styleProp=function(t,e){return u.BROWSER_PREFIX?e?u.BROWSER_PREFIX+c(t):"-"+u.BROWSER_PREFIX+"-"+t:t},u.setStyle=function(t,e,i){t.style[u.styleProp(e,1)]=i},u.getStyle=function(t,e){return t.style[u.styleProp(e,1)]},u._animateFuncs={normal:function(){function t(t,e,i,n,s){u.setStyle(t,"transform","translateZ(0) translate"+e+"("+(s+i*(n-1))+"px)")}return t.effect=u.styleProp("transform"),t}()};var f=u.prototype;f.extend=u.extend,f._setting=function(){var s=this;s._plugins=u.plugins,s._animateFuncs=u._animateFuncs,s._holding=!1,s._locking=!1,s._intermediateScene=null,s._transitionEndHandler=null,s._LSN={autoPlay:null,resize:null,transitionEnd:null},s.currentEl=null,s._EventHandle={},s.onMoving=!1,s.onSliding=!1,s.direction=null;var a=this._opts;s.wrap=a.dom,s.data=a.data,s.isVertical=!!a.isVertical,s.isOverspread=!!a.isOverspread,s.duration=a.duration||2e3,s.initIndex=a.initIndex>0&&a.initIndex<=a.data.length-1?a.initIndex:0,s.fixPage=function(){var t=a.fixPage;return t!==!1&&0!==t&&(!(n(t)&&t.length>0||"string"==typeof t&&""!==t)||[].concat(t).toString())}(),s.fillSeam=!!a.fillSeam,s.slideIndex=s.slideIndex||s.initIndex||0,s.axis=s.isVertical?"Y":"X",s.reverseAxis="Y"===s.axis?"X":"Y",s.width="number"==typeof a.width?a.width:s.wrap.offsetWidth,s.height="number"==typeof a.height?a.height:s.wrap.offsetHeight,s.ratio=s.height/s.width,s.scale=s.isVertical?s.height:s.width,s.offset=s.offset||{X:0,Y:0},s.isTouchable=null==a.isTouchable||!!a.isTouchable,s.isLooping=!!(a.isLooping&&s.data.length>1),s.dampingForce=Math.max(0,Math.min(1,parseFloat(a.dampingForce)||0)),s.delay=a.delay||0,s.isAutoplay=!!(a.isAutoplay&&s.data.length>1),s.animateType=a.animateType in s._animateFuncs?a.animateType:"normal",s._animateFunc=s._animateFuncs[s.animateType],s._animateReverse=function(){var t=[];for(var e in s._animateFuncs)s._animateFuncs.hasOwnProperty(e)&&s._animateFuncs[e].reverse&&t.push(e);return t}(),s.isVertical&&"card"===s.animateType&&(s.isOverspread=!0),s.log=a.isDebug?function(){t.console.log.apply(t.console,arguments)}:e,s._damping=function(){return function(t){return.62*Math.atan(Math.abs(t)/s.scale)*(1-s.dampingForce)*s.scale*(t>0?1:-1)}}(),s.animateTime=null!=a.animateTime&&a.animateTime>-1?a.animateTime:300,s.animateEasing=i(a.animateEasing,u.EASING[0])||u.EASING[1].test(a.animateEasing)?a.animateEasing:"ease",s.deviceEvents=u.DEVICE_EVENTS,s.fingerRecognitionRange=a.fingerRecognitionRange>-1?parseInt(a.fingerRecognitionRange):10,s.events={},u.EVENTS.forEach(function(t){var e=a["on"+t.replace(/^\w{1}/,function(t){return t.toUpperCase()})]||a["on"+t.toLowerCase()];"function"==typeof e&&s.on(t,e,1)}),s.pluginConfig=function(){var t={};return n(a.plugins)&&a.plugins.forEach(function(e){n(e)?t[e[0]]=e.slice(1):"string"==typeof e&&(t[e]=[])}),t}()},f._initPlugins=function(){var t=this.pluginConfig,e=this._plugins;for(var i in t)t.hasOwnProperty(i)&&e.hasOwnProperty(i)&&(this.log("[INIT PLUGIN]:",i,e[i]),e[i]&&"function"==typeof e[i]&&typeof e[i].apply&&e[i].apply(this,t[i]));this.fire("pluginInitialized")},f._itemType=function(t){if(isNaN(t)||(t=this.data[t]),t.hasOwnProperty("type"))return t.type;var e,i=t.content,n=u.NODE_TYPE;return e=null==i?n.empty:Boolean(i.nodeName)&&Boolean(i.nodeType)?n.node:"string"==typeof i?h(i)?n.pic:n.html:n.unknown,t.type=e,e},f._renderItem=function(t,e){var i,n=this,s=this.data.length,a=function(){var e=' src="'+i.content+'"';e+=i.height/i.width>n.ratio?' height="100%"':' width="100%"',n.isOverspread&&(t.style.cssText+="background-image:url("+i.content+");background-repeat:no-repeat;background-position:50% 50%;background-size:cover",e+=' style="display:block;opacity:0;height:100%;width:100%;"'),t.innerHTML=""};if(t.innerHTML="",t.style.background="",this.isLooping||null!=this.data[e]){e=(s+e)%s,i=this.data[e];var o=this._itemType(i),h=u.NODE_TYPE;switch(this.log("[RENDER]:",o,e,i),r(t,"islider-"+o),o){case h.pic:if(2===i.load)a();else{var l=new Image;l.src=i.content,l.onload=function(){i.height=l.height,i.width=l.width,a(),i.load=2}}break;case h.dom:case h.html:t.innerHTML=i.content;break;case h.node:case h.element:if(11===i.content.nodeType){var d=document.createElement("div");d.appendChild(i.content),i.content=d}t.appendChild(i.content)}}},f._renderIntermediateScene=function(){null!=this._intermediateScene&&(this._renderItem.apply(this,this._intermediateScene),this._intermediateScene=null)},f._changedStyles=function(){var t=["islider-prev","islider-active","islider-next"];this.els.forEach(function(e,i){o(e,t.join("|")),r(e,t[i]),this.fillSeam&&this.originScale(e)}.bind(this))},f._renderWrapper=function(){var e;this.outer?(e=this.outer,e.innerHTML=""):e=document.createElement("ul"),e.className="islider-outer",this.els=[];for(var i=0;i<3;i++){var n=document.createElement("li");e.appendChild(n),this.els.push(n),this._animateFunc(n,this.axis,this.scale,i,0),this.fixPage||(n.style.overflow="auto"),!this.isVertical||"rotate"!==this.animateType&&"flip"!==this.animateType?this._renderItem(n,i-1+this.slideIndex):this._renderItem(n,1-i+this.slideIndex)}this._changedStyles(),this.fillSeam&&this.els.forEach(function(t,e){r(t,"islider-sliding"+(1===e?"-focus":""))}),t.setTimeout(function(){this._preloadImg(this.slideIndex)}.bind(this),200),this.outer||(this.outer=e,this.wrap.appendChild(e)),this.currentEl=this.els[1],this.fire("renderComplete",this.slideIndex,this.currentEl,this)},f._preloadImg=function(t){if(this.data.length>3){var e=this.data,i=e.length,n=this,s=function(t){var i=e[t];if("pic"===n._itemType(i)&&!i.load){var s=new Image;s.src=i.content,s.onload=function(){i.width=s.width,i.height=s.height,i.load=2},i.load=1}};s((t+2)%i),s((t-2+i)%i)}},f._watchTransitionEnd=function(e,i){var n=function(){this._unWatchTransitionEnd(),"slideChanged"===i&&this._changedStyles(),this.fire.call(this,i,this.slideIndex,this.currentEl,this),this._renderIntermediateScene(),this.play(),this.onSliding=!1,this.direction=null}.bind(this);u.TRANSITION_END_EVENT&&(this.currentEl.addEventListener(u.TRANSITION_END_EVENT,n),this._transitionEndHandler={el:this.currentEl,handler:n}),this._LSN.transitionEnd=t.setTimeout(n,e)},f._unWatchTransitionEnd=function(){this._LSN.transitionEnd&&t.clearTimeout(this._LSN.transitionEnd),null!==this._transitionEndHandler&&(this._transitionEndHandler.el.removeEventListener(u.TRANSITION_END_EVENT,this._transitionEndHandler.handler),this._transitionEndHandler=null)},f._bindHandler=function(){var e=this.outer,i=this.deviceEvents;this.isTouchable&&(i.hasTouch||(e.style.cursor="pointer",e.ondragstart=function(t){return!t}),e.addEventListener(i.startEvt,this),e.addEventListener(i.moveEvt,this),e.addEventListener(i.endEvt,this),!i.hasTouch&&e.addEventListener("mouseout",this)),t.addEventListener(i.resizeEvt,this),t.addEventListener("focus",this,!1),t.addEventListener("blur",this,!1)},f.handleEvent=function(t){var e=this.deviceEvents;switch(t.type){case"mousedown":if(0!==t.button)break;case"touchstart":this.startHandler(t);break;case e.moveEvt:this.moveHandler(t);break;case e.endEvt:case e.cancelEvt:this.endHandler(t);break;case e.resizeEvt:this.resizeHandler();break;case"focus":this.play();break;case"blur":this.pause()}},f.startHandler=function(t){if(this.fixPage&&u.FIX_PAGE_TAGS.indexOf(t.target.tagName.toUpperCase())<0&&!this._isItself(t.target)&&t.preventDefault(),!this._holding&&!this._locking){var e=this.deviceEvents;this.onMoving=!0,this.pause(),this.log("[EVENT]: start"),this.fire("slideStart",t,this),this.startTime=(new Date).getTime(),this.startX=e.hasTouch?t.targetTouches[0].pageX:t.pageX,this.startY=e.hasTouch?t.targetTouches[0].pageY:t.pageY}},f.moveHandler=function(t){if(this.onMoving){this.log("[EVENT]: moving");var e=this.deviceEvents,i=this.data.length,n=this.axis,s=this.reverseAxis,a={};t.hasOwnProperty("offsetRatio")?(a[n]=t.offsetRatio*this.scale,a[s]=0):(a.X=e.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,a.Y=e.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY),this.offset=a,t.offsetRatio=a[n]/this.scale,Math.abs(a[n])-Math.abs(a[s])>10&&(t.preventDefault(),this._unWatchTransitionEnd(),this.isLooping||(a[n]>0&&0===this.slideIndex||a[n]<0&&this.slideIndex===i-1)&&(a[n]=this._damping(a[n])),this.els.forEach(function(t,e){t.style.visibility="visible",u.setStyle(t,"transition","none"),this._animateFunc(t,n,this.scale,e,a[n],a[n]),this.fillSeam&&this.seamScale(t)}.bind(this)),this.fire("slide",t,this))}},f.endHandler=function(e){function i(n){if(null!=n)if("A"===n.tagName){if(n.href)return"_blank"===n.getAttribute("target")?t.open(n.href):t.location.href=n.href,e.preventDefault(),!1}else{if("LI"===n.tagName&&n.className.search(/^islider\-/)>-1)return!1;i(n.parentNode)}}if(this.onMoving){this.log("[EVENT]: end"),this.onMoving=!1;var n=this.offset,s=this.axis,a=this.scale/2,r=(new Date).getTime(),o=this.fingerRecognitionRange;a=r-this.startTime>300?a:14;var h=Math.abs(n[s]),l=Math.abs(n[this.reverseAxis]);this.fire("slideEnd",e,this),n[s]>=a&&l=o&&this.slideTo(this.slideIndex),Math.abs(this.offset[s])=1e3&&n&&t.clearInterval(n)}.bind(this),12)):(n&&t.clearTimeout(n),n=t.setTimeout(function(){this.height===this.wrap.offsetHeight&&this.width===this.wrap.offsetWidth||(n&&t.clearInterval(n),this.reset(),this.log("[EVENT]: resize"))}.bind(this),200))},f.slideTo=function(t,e){if(this.isAutoplay&&this.pause(),!this._locking){this.unhold(),this.onSliding=!0;var n,s=this.animateTime,a=this.animateType,h=this._animateFunc,l=this.data,d=this.els,c=this.axis,f=t,p=t-this.slideIndex,g=this.offset,m=0;"object"==typeof e&&(e.animateTime>-1&&(s=e.animateTime),"string"==typeof e.animateType&&e.animateType in this._animateFuncs&&(a=e.animateType,h=this._animateFuncs[a])),0!==g[c]&&(m=Math.abs(g[c])/this.scale*s),Math.abs(p)>1&&this._renderItem(p>0?this.els[2]:this.els[0],f),this._preloadImg(f),l[f]?this.slideIndex=f:this.isLooping?this.slideIndex=p>0?0:l.length-1:p=0,this.log("[SLIDE TO]: "+this.slideIndex);var v,E,_;0===p?n="slideRestore":((this.isVertical&&i(a,this._animateReverse))^p>0?(d.push(d.shift()),v=d[2],E=d[0],_=1):(d.unshift(d.pop()),v=d[0],E=d[2],_=-1),this.currentEl=d[1],1===Math.abs(p)?(this._renderIntermediateScene(),this._renderItem(v,f+p)):Math.abs(p)>1&&(this.isVertical&&i(a,this._animateReverse)?(this._renderItem(E,f+_),this._renderItem(d[1],f),this._intermediateScene=[v,f-_]):(this._renderItem(v,f+_),this._intermediateScene=[E,f-_])),u.setStyle(v,"transition","none"),m=s-m,n="slideChange",this.fillSeam&&(d.forEach(function(t){o(t,"islider-sliding|islider-sliding-focus")}),r(this.currentEl,"islider-sliding-focus"),r(v,"islider-sliding")),this.direction=_);for(var y=0;y<3;y++)d[y]!==v&&u.setStyle(d[y],"transition",(h.effect||"all")+" "+m+"ms "+this.animateEasing),h.call(this,d[y],c,this.scale,y,0,_),this.fillSeam&&this.seamScale(d[y]);this._watchTransitionEnd(m,n+"d"),this.fire(n,this.slideIndex,this.currentEl,this)}},f.slideNext=function(){this.slideTo.apply(this,[this.slideIndex+1].concat(d(arguments)))},f.slidePrev=function(){this.slideTo.apply(this,[this.slideIndex-1].concat(d(arguments)))},f.regPlugin=function(){var t=d(arguments),e=t.shift(),n=t[0];(this._plugins.hasOwnProperty(e)||"function"==typeof n)&&("function"==typeof n&&(this._plugins[e]=n,t.shift()),i(e,this._opts.plugins)||(this._opts.plugins.push(t.length?[].concat([e],t):e),"function"==typeof this._plugins[e]&&this._plugins[e].apply(this,t)))},f.bind=f.delegate=function(e,i,n){function s(e){for(var s=t.event?t.event:e,a=s.target,r=document.querySelectorAll(i),o=0;o-1)return this.wrap.removeEventListener(t,this._EventHandle[n][1][s]),this._EventHandle[n][0][s]=this._EventHandle[n][1][s]=null,!0}return!1},f.destroy=function(){var e=this.outer,i=this.deviceEvents;this.fire("destroy"),this.isTouchable&&(e.removeEventListener(i.startEvt,this),e.removeEventListener(i.moveEvt,this),e.removeEventListener(i.endEvt,this),!i.hasTouch&&e.removeEventListener("mouseout",this)),t.removeEventListener(i.resizeEvt,this),t.removeEventListener("focus",this),t.removeEventListener("blur",this);var n;for(n in this._EventHandle)for(var s=this._EventHandle[n][1],a=0;a-1&&delete this.events[t][i]}},f.fire=function(t){var e=d(arguments,1);t.split(/\x20+/).forEach(function(t){if(this.log("[EVENT FIRE]:",t,e),t in this.events)for(var i=this.events[t],n=0;n0?t.setTimeout(this.play.bind(this),this.delay):this.play()},f.play=function(){this.pause(),this.isAutoplay&&(this.isLooping||this.slideIndex-1?(i=i.split(","),n.X=parseFloat(i[0]),n.Y=parseFloat(i[1])):n.Y=n.X=parseFloat(i),n[this.axis]*=1.001,"scale("+n.X+", "+n.Y+")")}.bind(this))):u.setStyle(t,"transform",i+" scale"+this.axis+"(1.001)")},f.originScale=function(t){var e=/([\x20]?scale)([XY]?)\(([^\)]+)\)/;u.setStyle(t,"transform",u.getStyle(t,"transform").replace(e,function(t,e,i,n){return t={},i?"1.001"===n?"":(t[i]=parseFloat(n),"scale"+this.axis+"("+(i===this.axis?t[this.axis]/1.001:1)+")"):(n.indexOf(",")>-1?(n=n.split(","),t.X=parseFloat(n[0]),t.Y=parseFloat(n[1])):t.Y=t.X=parseFloat(n),t[this.axis]/=1.001,"scale("+t.X+", "+t.Y+")")}.bind(this)))},f._isItself=function(t){var e=this.fixPage;if("string"==typeof e){for(var i,n=[],s=t;!a(s,"islider-outer")&&s!==this.wrap;)n.push(s),s=s.parentNode;if(s=n.pop(),n.length)try{if(i=Array.prototype.slice.call(s.querySelectorAll(e)),i.length)for(var r=0;r-1)return!0}catch(o){return!1}}return!1},f.subjectTo=function(t,e){if(!(!t instanceof u)){var i=this;i.animateTime=t.animateTime,i.isLooping=t.isLooping,i.isAutoplay=!1,t.on("slideStart",function(t){i.startHandler(t)}),t.on("slide",function(t){i.moveHandler(t)}),t.on("slideEnd",function(t){i.endHandler(t)}),t.on("slideChange",function(t){var e=i.data.length,n=i.direction;n>0&&(t-i.slideIndex+e)%e===1?i.slideNext():n<0&&(t-i.slideIndex-e)%e===-1&&i.slidePrev()}),t.on("slideRestore",function(t){i.slideIndex!==t&&i.slideTo(t)})}},"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?module.exports=u:"function"==typeof define&&define.amd?define(function(){return u}):t.iSlider=t.iSlider||u}(window||this); \ No newline at end of file +!function(t){"use strict";function e(){}function i(t,e){return e.indexOf(t)>-1}function n(t){return"[object Array]"===Object.prototype.toString.call(t)}function s(t){return"[object Object]"===Object.prototype.toString.call(t)}function a(t,e){return t.className.match(new RegExp("(\\s|^)("+e+")(\\s|$)"))}function r(t,e){a(t,e)||(t.className+=" "+e)}function o(t,e){a(t,e)&&(t.className=t.className.replace(RegExp("(\\s|^)("+e+")(\\s|$)"),"$3"))}function h(t){return/<\/?[^>]*>/.test(t)?!1:/^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(t)}function l(t){try{return t instanceof HTMLElement}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}}function d(t){return Array.prototype.slice.apply(t,Array.prototype.slice.call(arguments,1))}function u(t){return t.replace(/^[a-z]/,function(t){return t.toUpperCase()})}var c=function(){var t=d(arguments,0,3);if(!t.length)throw new Error("Parameters required!");var e=s(t.slice(-1)[0])?t.pop():{};switch(t.length){case 2:e.data=e.data||t[1];case 1:e.dom=e.dom||t[0]}if(!e.dom)throw new Error("Container can not be empty!");if(!l(e.dom))throw new Error("Container must be a HTMLElement instance!");if(!e.data||!e.data.length)throw new Error("Data must be an array and must have more than one element!");this._opts=e,e=null,t=null,this._setting(),this.fire("initialize"),this._renderWrapper(),this._initPlugins(),this._bindHandler(),this.fire("initialized"),this._autoPlay()};c.VERSION="2.2.1",c.EVENTS=["initialize","initialized","pluginInitialize","pluginInitialized","renderComplete","slide","slideStart","slideEnd","slideChange","slideChanged","slideRestore","slideRestored","loadData","reset","destroy"],c.EASING=[["linear","ease","ease-in","ease-out","ease-in-out"],/cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/],c.FIX_PAGE_TAGS=["SELECT","INPUT","TEXTAREA","BUTTON","LABEL"],c.NODE_TYPE={unknown:"unknown",empty:"empty",pic:"pic",dom:"dom",html:"html",node:"node",element:"element"},c.TRANSITION_END_EVENT=null,c.BROWSER_PREFIX=null,function(){var t=document.createElement("fakeElement");[["WebkitTransition","webkitTransitionEnd","webkit"],["transition","transitionend",null],["MozTransition","transitionend","moz"],["OTransition","oTransitionEnd","o"]].some(function(e){return void 0!==t.style[e[0]]?(c.TRANSITION_END_EVENT=e[1],c.BROWSER_PREFIX=e[2],!0):void 0})}(),c.DEVICE_EVENTS=function(){var e=!!("ontouchstart"in t&&!/Mac OS X /.test(t.navigator.userAgent)||t.DocumentTouch&&document instanceof t.DocumentTouch);return{hasTouch:e,startEvt:e?"touchstart":"mousedown",moveEvt:e?"touchmove":"mousemove",endEvt:e?"touchend":"mouseup",cancelEvt:e?"touchcancel":"mouseout",resizeEvt:"onorientationchange"in t?"orientationchange":"resize"}}(),c.extend=function(){var t,e,i=arguments;switch(i.length){case 0:return;case 1:t=c.prototype,e=i[0];break;case 2:t=i[0],e=i[1]}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},c.plugins={},c.regPlugin=function(t,e){c.plugins[t]=c.plugins[t]||e},c.styleProp=function(t,e){return c.BROWSER_PREFIX?e?c.BROWSER_PREFIX+u(t):"-"+c.BROWSER_PREFIX+"-"+t:t},c.setStyle=function(t,e,i){t.style[c.styleProp(e,1)]=i},c.getStyle=function(t,e){return t.style[c.styleProp(e,1)]},c._animateFuncs={normal:function(){function t(t,e,i,n,s){c.setStyle(t,"transform","translateZ(0) translate"+e+"("+(s+i*(n-1))+"px)")}return t.effect=c.styleProp("transform"),t}()};var f=c.prototype;f.extend=c.extend,f._setting=function(){var s=this;s._plugins=c.plugins,s._animateFuncs=c._animateFuncs,s._holding=!1,s._locking=!1,s._intermediateScene=null,s._transitionEndHandler=null,s._LSN={autoPlay:null,resize:null,transitionEnd:null},s.currentEl=null,s._EventHandle={},s.onMoving=!1,s.onSliding=!1,s.direction=null;var a=this._opts;s.wrap=a.dom,s.data=a.data,s.isVertical=!!a.isVertical,s.isOverspread=!!a.isOverspread,s.duration=a.duration||2e3,s.initIndex=a.initIndex>0&&a.initIndex<=a.data.length-1?a.initIndex:0,s.fixPage=function(){var t=a.fixPage;return t===!1||0===t?!1:n(t)&&t.length>0||"string"==typeof t&&""!==t?[].concat(t).toString():!0}(),s.fillSeam=!!a.fillSeam,s.slideIndex=s.slideIndex||s.initIndex||0,s.axis=s.isVertical?"Y":"X",s.reverseAxis="Y"===s.axis?"X":"Y",s.width="number"==typeof a.width?a.width:s.wrap.offsetWidth,s.height="number"==typeof a.height?a.height:s.wrap.offsetHeight,s.ratio=s.height/s.width,s.scale=s.isVertical?s.height:s.width,s.offset=s.offset||{X:0,Y:0},s.isTouchable=null==a.isTouchable?!0:!!a.isTouchable,s.isLooping=a.isLooping&&s.data.length>1?!0:!1,s.dampingForce=Math.max(0,Math.min(1,parseFloat(a.dampingForce)||0)),s.delay=a.delay||0,s.isAutoplay=a.isAutoplay&&s.data.length>1?!0:!1,s.wakeupAutoplayDazetime=a.wakeupAutoplayDazetime>-1?parseInt(a.wakeupAutoplayDazetime):-1,s.animateType=a.animateType in s._animateFuncs?a.animateType:"normal",s._animateFunc=s._animateFuncs[s.animateType],s._animateReverse=function(){var t=[];for(var e in s._animateFuncs)s._animateFuncs.hasOwnProperty(e)&&s._animateFuncs[e].reverse&&t.push(e);return t}(),s.isVertical&&"card"===s.animateType&&(s.isOverspread=!0),s.log=a.isDebug?function(){t.console.log.apply(t.console,arguments)}:e,s._damping=function(){return function(t){return.62*Math.atan(Math.abs(t)/s.scale)*(1-s.dampingForce)*s.scale*(t>0?1:-1)}}(),s.animateTime=null!=a.animateTime&&a.animateTime>-1?a.animateTime:300,s.animateEasing=i(a.animateEasing,c.EASING[0])||c.EASING[1].test(a.animateEasing)?a.animateEasing:"ease",s.deviceEvents=c.DEVICE_EVENTS,s.fingerRecognitionRange=a.fingerRecognitionRange>-1?parseInt(a.fingerRecognitionRange):10,s.events={},c.EVENTS.forEach(function(t){var e=a["on"+t.replace(/^\w{1}/,function(t){return t.toUpperCase()})]||a["on"+t.toLowerCase()];"function"==typeof e&&s.on(t,e,1)}),s.pluginConfig=function(){var t={};return n(a.plugins)&&a.plugins.forEach(function(e){n(e)?t[e[0]]=e.slice(1):"string"==typeof e&&(t[e]=[])}),t}()},f._initPlugins=function(){var t=this.pluginConfig,e=this._plugins;for(var i in t)t.hasOwnProperty(i)&&e.hasOwnProperty(i)&&e[i]&&"function"==typeof e[i]&&typeof e[i].apply&&e[i].apply(this,t[i]);this.fire("pluginInitialized")},f._itemType=function(t){if(isNaN(t)||(t=this.data[t]),t.hasOwnProperty("type"))return t.type;var e,i=t.content,n=c.NODE_TYPE;return e=null==i?n.empty:Boolean(i.nodeName)&&Boolean(i.nodeType)?n.node:"string"==typeof i?h(i)?n.pic:n.html:n.unknown,t.type=e,e},f._renderItem=function(t,e){var i,n=this,s=this.data.length,a=function(){var e=' src="'+i.content+'"';e+=i.height/i.width>n.ratio?' height="100%"':' width="100%"',n.isOverspread&&(t.style.cssText+="background-image:url("+i.content+");background-repeat:no-repeat;background-position:50% 50%;background-size:cover",e+=' style="display:block;opacity:0;height:100%;width:100%;"'),t.innerHTML=""};if(t.innerHTML="",t.style.background="",this.isLooping||null!=this.data[e]){e=(s+e)%s,i=this.data[e];var o=this._itemType(i),h=c.NODE_TYPE;switch(r(t,"islider-"+o),o){case h.pic:if(2===i.load)a();else{var l=new Image;l.src=i.content,l.onload=function(){i.height=l.height,i.width=l.width,a(),i.load=2}}break;case h.dom:case h.html:t.innerHTML=i.content;break;case h.node:case h.element:if(11===i.content.nodeType){var d=document.createElement("div");d.appendChild(i.content),i.content=d}t.appendChild(i.content)}}},f._renderIntermediateScene=function(){null!=this._intermediateScene&&(this._renderItem.apply(this,this._intermediateScene),this._intermediateScene=null)},f._changedStyles=function(){var t=["islider-prev","islider-active","islider-next"];this.els.forEach(function(e,i){o(e,t.join("|")),r(e,t[i]),this.fillSeam&&this.originScale(e)}.bind(this))},f._renderWrapper=function(){var e;this.outer?(e=this.outer,e.innerHTML=""):e=document.createElement("ul"),e.className="islider-outer",this.els=[];for(var i=0;3>i;i++){var n=document.createElement("li");e.appendChild(n),this.els.push(n),this._animateFunc(n,this.axis,this.scale,i,0),this.fixPage||(n.style.overflow="auto"),!this.isVertical||"rotate"!==this.animateType&&"flip"!==this.animateType?this._renderItem(n,i-1+this.slideIndex):this._renderItem(n,1-i+this.slideIndex)}this._changedStyles(),this.fillSeam&&this.els.forEach(function(t,e){r(t,"islider-sliding"+(1===e?"-focus":""))}),t.setTimeout(function(){this._preloadImg(this.slideIndex)}.bind(this),200),this.outer||(this.outer=e,this.wrap.appendChild(e)),this.currentEl=this.els[1],this.fire("renderComplete",this.slideIndex,this.currentEl,this)},f._preloadImg=function(t){if(this.data.length>3){var e=this.data,i=e.length,n=this,s=function(t){var i=e[t];if("pic"===n._itemType(i)&&!i.load){var s=new Image;s.src=i.content,s.onload=function(){i.width=s.width,i.height=s.height,i.load=2},i.load=1}};s((t+2)%i),s((t-2+i)%i)}},f._watchTransitionEnd=function(e,i){var n=function(){this._unWatchTransitionEnd(),"slideChanged"===i&&this._changedStyles(),this.fire.call(this,i,this.slideIndex,this.currentEl,this),this._renderIntermediateScene(),this.play(),this.onSliding=!1,this.direction=null}.bind(this);c.TRANSITION_END_EVENT&&(this.currentEl.addEventListener(c.TRANSITION_END_EVENT,n),this._transitionEndHandler={el:this.currentEl,handler:n}),this._LSN.transitionEnd=t.setTimeout(n,e)},f._unWatchTransitionEnd=function(){this._LSN.transitionEnd&&t.clearTimeout(this._LSN.transitionEnd),null!==this._transitionEndHandler&&(this._transitionEndHandler.el.removeEventListener(c.TRANSITION_END_EVENT,this._transitionEndHandler.handler),this._transitionEndHandler=null)},f._bindHandler=function(){var e=this.outer,i=this.deviceEvents;this.isTouchable&&(i.hasTouch||(e.style.cursor="pointer",e.ondragstart=function(t){return t?!1:!0}),e.addEventListener(i.startEvt,this),e.addEventListener(i.moveEvt,this),e.addEventListener(i.endEvt,this),!i.hasTouch&&e.addEventListener("mouseout",this)),t.addEventListener(i.resizeEvt,this),t.addEventListener("focus",this,!1),t.addEventListener("blur",this,!1)},f.handleEvent=function(t){var e=this.deviceEvents;switch(t.type){case"mousedown":if(0!==t.button)break;case"touchstart":this.startHandler(t);break;case e.moveEvt:this.moveHandler(t);break;case e.endEvt:case e.cancelEvt:this.endHandler(t);break;case e.resizeEvt:this.resizeHandler();break;case"focus":this.play();break;case"blur":this.pause(),this._tryToWakeupAutoplay()}},f.startHandler=function(t){if(this.fixPage&&c.FIX_PAGE_TAGS.indexOf(t.target.tagName.toUpperCase())<0&&!this._isItself(t.target)&&t.preventDefault(),!this._holding&&!this._locking){var e=this.deviceEvents;this.onMoving=!0,this.pause(),this.fire("slideStart",t,this),this.startTime=(new Date).getTime(),this.startX=e.hasTouch?t.targetTouches[0].pageX:t.pageX,this.startY=e.hasTouch?t.targetTouches[0].pageY:t.pageY}},f.moveHandler=function(t){if(this.onMoving){var e=this.deviceEvents,i=this.data.length,n=this.axis,s=this.reverseAxis,a={};t.hasOwnProperty("offsetRatio")?(a[n]=t.offsetRatio*this.scale,a[s]=0):(a.X=e.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,a.Y=e.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY),this.offset=a,t.offsetRatio=a[n]/this.scale,Math.abs(a[n])-Math.abs(a[s])>10&&(t.preventDefault(),this._unWatchTransitionEnd(),this.isLooping||(a[n]>0&&0===this.slideIndex||a[n]<0&&this.slideIndex===i-1)&&(a[n]=this._damping(a[n])),this.els.forEach(function(t,e){t.style.visibility="visible",c.setStyle(t,"transition","none"),this._animateFunc(t,n,this.scale,e,a[n],a[n]),this.fillSeam&&this.seamScale(t)}.bind(this)),this.fire("slide",t,this))}},f.endHandler=function(e){function i(n){if(null!=n)if("A"===n.tagName){if(n.href)return"_blank"===n.getAttribute("target")?t.open(n.href):t.location.href=n.href,e.preventDefault(),!1}else{if("LI"===n.tagName&&n.className.search(/^islider\-/)>-1)return!1;i(n.parentNode)}}if(this.onMoving){this.onMoving=!1;var n=this.offset,s=this.axis,a=this.scale/2,r=(new Date).getTime(),o=this.fingerRecognitionRange;a=r-this.startTime>300?a:14;var h=Math.abs(n[s]),l=Math.abs(n[this.reverseAxis]);this.fire("slideEnd",e,this),n[s]>=a&&h>l?this.slideTo(this.slideIndex-1):n[s]<-a&&h>l?this.slideTo(this.slideIndex+1):Math.abs(this.offset[s])>=o&&this.slideTo(this.slideIndex),Math.abs(this.offset[s])=1e3&&n&&t.clearInterval(n)}.bind(this),12)):(n&&t.clearTimeout(n),n=t.setTimeout(function(){(this.height!==this.wrap.offsetHeight||this.width!==this.wrap.offsetWidth)&&(n&&t.clearInterval(n),this.reset())}.bind(this),200))},f.slideTo=function(t,e){if(this.isAutoplay&&this.pause(),!this._locking){this.unhold(),this.onSliding=!0;var n,s=this.animateTime,a=this.animateType,h=this._animateFunc,l=this.data,d=this.els,u=this.axis,f=t,p=t-this.slideIndex,m=this.offset,g=0;"object"==typeof e&&(e.animateTime>-1&&(s=e.animateTime),"string"==typeof e.animateType&&e.animateType in this._animateFuncs&&(a=e.animateType,h=this._animateFuncs[a])),0!==m[u]&&(g=Math.abs(m[u])/this.scale*s),Math.abs(p)>1&&this._renderItem(p>0?this.els[2]:this.els[0],f),this._preloadImg(f),l[f]?this.slideIndex=f:this.isLooping?this.slideIndex=p>0?0:l.length-1:p=0;var v,E,y;0===p?n="slideRestore":((this.isVertical&&i(a,this._animateReverse))^p>0?(d.push(d.shift()),v=d[2],E=d[0],y=1):(d.unshift(d.pop()),v=d[0],E=d[2],y=-1),this.currentEl=d[1],1===Math.abs(p)?(this._renderIntermediateScene(),this._renderItem(v,f+p)):Math.abs(p)>1&&(this.isVertical&&i(a,this._animateReverse)?(this._renderItem(E,f+y),this._renderItem(d[1],f),this._intermediateScene=[v,f-y]):(this._renderItem(v,f+y),this._intermediateScene=[E,f-y])),c.setStyle(v,"transition","none"),g=s-g,n="slideChange",this.fillSeam&&(d.forEach(function(t){o(t,"islider-sliding|islider-sliding-focus")}),r(this.currentEl,"islider-sliding-focus"),r(v,"islider-sliding")),this.direction=y);for(var _=0;3>_;_++)d[_]!==v&&c.setStyle(d[_],"transition",(h.effect||"all")+" "+g+"ms "+this.animateEasing),h.call(this,d[_],u,this.scale,_,0,y),this.fillSeam&&this.seamScale(d[_]);this._watchTransitionEnd(g,n+"d"),this.fire(n,this.slideIndex,this.currentEl,this)}},f.slideNext=function(){this.slideTo.apply(this,[this.slideIndex+1].concat(d(arguments)))},f.slidePrev=function(){this.slideTo.apply(this,[this.slideIndex-1].concat(d(arguments)))},f.regPlugin=function(){var t=d(arguments),e=t.shift(),n=t[0];(this._plugins.hasOwnProperty(e)||"function"==typeof n)&&("function"==typeof n&&(this._plugins[e]=n,t.shift()),i(e,this._opts.plugins)||(this._opts.plugins.push(t.length?[].concat([e],t):e),"function"==typeof this._plugins[e]&&this._plugins[e].apply(this,t)))},f.bind=f.delegate=function(e,i,n){function s(e){for(var s=t.event?t.event:e,a=s.target,r=document.querySelectorAll(i),o=0;o-1)return this.wrap.removeEventListener(t,this._EventHandle[n][1][s]),this._EventHandle[n][0][s]=this._EventHandle[n][1][s]=null,!0}return!1},f.destroy=function(){var e=this.outer,i=this.deviceEvents;this.fire("destroy"),this.isTouchable&&(e.removeEventListener(i.startEvt,this),e.removeEventListener(i.moveEvt,this),e.removeEventListener(i.endEvt,this),!i.hasTouch&&e.removeEventListener("mouseout",this)),t.removeEventListener(i.resizeEvt,this),t.removeEventListener("focus",this),t.removeEventListener("blur",this);var n;for(n in this._EventHandle)for(var s=this._EventHandle[n][1],a=0;a-1&&delete this.events[t][i]}},f.fire=function(t){var e=d(arguments,1);t.split(/\x20+/).forEach(function(t){if(t in this.events)for(var i=this.events[t],n=0;n0?t.setTimeout(this.play.bind(this),this.delay):this.play()},f._tryToWakeupAutoplay=function(){~this.wakeupAutoplayDazetime&&(this.wakeupAutoplayDazetime>0?t.setTimeout(this.play.bind(this),this.wakeupAutoplayDazetime):this.play())},f.play=function(){this.pause(),this.isAutoplay&&(this.isLooping||this.slideIndex-1?(i=i.split(","),n.X=parseFloat(i[0]),n.Y=parseFloat(i[1])):n.Y=n.X=parseFloat(i),n[this.axis]*=1.001,"scale("+n.X+", "+n.Y+")")}.bind(this))):c.setStyle(t,"transform",i+" scale"+this.axis+"(1.001)")},f.originScale=function(t){var e=/([\x20]?scale)([XY]?)\(([^\)]+)\)/;c.setStyle(t,"transform",c.getStyle(t,"transform").replace(e,function(t,e,i,n){return t={},i?"1.001"===n?"":(t[i]=parseFloat(n),"scale"+this.axis+"("+(i===this.axis?t[this.axis]/1.001:1)+")"):(n.indexOf(",")>-1?(n=n.split(","),t.X=parseFloat(n[0]),t.Y=parseFloat(n[1])):t.Y=t.X=parseFloat(n),t[this.axis]/=1.001,"scale("+t.X+", "+t.Y+")")}.bind(this)))},f._isItself=function(t){var e=this.fixPage;if("string"==typeof e){for(var i,n=[],s=t;!a(s,"islider-outer")&&s!==this.wrap;)n.push(s),s=s.parentNode;if(s=n.pop(),n.length)try{if(i=Array.prototype.slice.call(s.querySelectorAll(e)),i.length)for(var r=0;r-1)return!0}catch(o){return!1}}return!1},f.subjectTo=function(t,e){if(!(!t instanceof c)){var i=this;i.animateTime=t.animateTime,i.isLooping=t.isLooping,i.isAutoplay=!1,t.on("slideStart",function(t){i.startHandler(t)}),t.on("slide",function(t){i.moveHandler(t)}),t.on("slideEnd",function(t){i.endHandler(t)}),t.on("slideChange",function(t){var e=i.data.length,n=i.direction;n>0&&(t-i.slideIndex+e)%e===1?i.slideNext():0>n&&(t-i.slideIndex-e)%e===-1&&i.slidePrev()}),t.on("slideRestore",function(t){i.slideIndex!==t&&i.slideTo(t)})}},"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t.iSlider=t.iSlider||c}(window||this); \ No newline at end of file diff --git a/build/iSlider.plugin.BIZone.min.js b/build/iSlider.plugin.BIZone.min.js index a31fa793..f7ea02c3 100644 --- a/build/iSlider.plugin.BIZone.min.js +++ b/build/iSlider.plugin.BIZone.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("BIZone",function(e){function t(e){if("number"==typeof e)return e<0&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;i<4;i++)if(Math.abs(n[i]-u[i])e&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;4>i;i++)if(Math.abs(n[i]-u[i])n;n++)i[n]=document.createElement("div"),i[n].className="islider-btn-outer",t[n]=document.createElement("div"),t[n].className="islider-btn-inner",0===n?(i[n].className+=" left",i[n].dir=-1):(i[n].className+=" right",i[n].dir=1),i[n].addEventListener("click",function(){var i=parseInt(this.getAttribute("dir"),10);e.slideTo(e.slideIndex+i)}),i[n].appendChild(t[n]),e.wrap.appendChild(i[n],e.wrap.nextSibling)})}); \ No newline at end of file diff --git a/build/iSlider.plugin.dot.min.js b/build/iSlider.plugin.dot.min.js index af12e8d6..b5d52332 100644 --- a/build/iSlider.plugin.dot.min.js +++ b/build/iSlider.plugin.dot.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("dot",function(e){function t(){var e=document.createDocumentFragment();a.forEach(function(e,t){e.removeEventListener(r,d[t],!1)}),a=[],d=[],l.innerHTML="";for(var t=0;t1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){E=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,p-H<300&&(t.preventDefault(),S=3),H=p}}}function p(t){if(E){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}q.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=T*r0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);O={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=O.start[o],n=O.end[o],e>=r&&e<=n}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=O.start.left,e=O.end.top-s;break;case 2:t=O.start.left,e=O.start.top;break;case 3:t=O.end.left-n,e=O.end.top-s;break;case 4:t=O.end.left-n,e=O.start.top;break;case 5:e=O.end.top-s;break;case 6:e=O.start.top;break;case 7:t=O.end.left-n;break;case 8:t=O.start.left}n1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){E=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,300>p-H&&(t.preventDefault(),S=3),H=p}}}function p(t){if(E){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}q.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=C>T*r?C:T*r,n.style.webkitTransform=a(0,0,0,r)}function d(t){if(E){var e=0;if(2===S?(y(t),e=2):1==S?(y(t),e=1):3===S&&(u(t),y(t),E=!1),e>0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);O={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=O.start[o],n=O.end[o],e>=r&&n>=e}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=O.start.left,e=O.end.top-s;break;case 2:t=O.start.left,e=O.start.top;break;case 3:t=O.end.left-n,e=O.end.top-s;break;case 4:t=O.end.left-n,e=O.start.top;break;case 5:e=O.end.top-s;break;case 6:e=O.start.top;break;case 7:t=O.end.left-n;break;case 8:t=O.start.left}n li {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n height: 100%;\r\n list-style: none;\r\n overflow: hidden;\r\n display: -moz-box;\r\n display: -webkit-box;\r\n display: box;\r\n -moz-box-pack: center;\r\n -webkit-box-pack: center;\r\n box-pack: center;\r\n -moz-box-align: center;\r\n -webkit-box-align: center;\r\n box-align: center;\r\n}\r\n\r\n.islider-img > img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.islider-sliding {\r\n z-index: 0;\r\n}\r\n\r\n.islider-sliding-focus {\r\n z-index: 1;\r\n}\r\n\r\n/**\r\n * ===========================\r\n * iSlider.plugin.button\r\n * ===========================\r\n */\r\n.islider-btn-outer {\r\n position: absolute;\r\n width: 3em;\r\n height: 3em;\r\n cursor: pointer;\r\n top: 0;\r\n bottom: 0;\r\n margin: auto 0;\r\n display: block;\r\n background-color: #777777;\r\n}\r\n\r\n.islider-btn-outer.left {\r\n left: 5%;\r\n}\r\n\r\n.islider-btn-outer.right {\r\n right: 5%;\r\n}\r\n\r\n.islider-btn-inner {\r\n position: absolute;\r\n width: 50%;\r\n height: 50%;\r\n border-top: 2px solid #ffffff;\r\n border-left: 2px solid #ffffff;\r\n margin: auto;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n}\r\n\r\n.islider-btn-outer.left > .islider-btn-inner {\r\n -webkit-transform: rotate(-45deg);\r\n -moz-transform: rotate(-45deg);\r\n -ms-transform: rotate(-45deg);\r\n -o-transform: rotate(-45deg);\r\n transform: rotate(-45deg);\r\n}\r\n\r\n.islider-btn-outer.right > .islider-btn-inner {\r\n -webkit-transform: rotate(135deg);\r\n -moz-transform: rotate(135deg);\r\n -ms-transform: rotate(135deg);\r\n -o-transform: rotate(135deg);\r\n transform: rotate(135deg);\r\n}\r\n\r\n/**\r\n * ===========================\r\n * iSlider.plugin.dot\r\n * ===========================\r\n */\r\n.islider-dot-wrap {\r\n width: 80%;\r\n height: 10%;\r\n margin: 0 auto;\r\n position: absolute;\r\n padding: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 10000;\r\n text-align: center;\r\n}\r\n\r\n.islider-dot {\r\n position: relative;\r\n display: inline-block;\r\n width: 0.8em;\r\n height: 0.8em;\r\n border-radius: 50%;\r\n border: 1px solid #ffffff;\r\n list-style: none;\r\n margin: 5px;\r\n}\r\n\r\n.islider-dot.active {\r\n background-color: #ffffff;\r\n}", ""]); + exports.push([module.id, "/**\n * @file iSlider.css\n */\n\n/**\n * ===========================\n * iSlider\n * ===========================\n */\n.islider-outer {\n display: block;\n position: relative;\n list-style: none;\n margin: 0;\n padding: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.islider-outer > li {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n list-style: none;\n overflow: hidden;\n display: -moz-box;\n display: -webkit-box;\n display: box;\n -moz-box-pack: center;\n -webkit-box-pack: center;\n box-pack: center;\n -moz-box-align: center;\n -webkit-box-align: center;\n box-align: center;\n}\n\n.islider-img > img {\n max-width: 100%;\n max-height: 100%;\n}\n\n.islider-sliding {\n z-index: 0;\n}\n\n.islider-sliding-focus {\n z-index: 1;\n}\n\n/**\n * ===========================\n * iSlider.plugin.button\n * ===========================\n */\n.islider-btn-outer {\n position: absolute;\n width: 3em;\n height: 3em;\n cursor: pointer;\n top: 0;\n bottom: 0;\n margin: auto 0;\n display: block;\n background-color: #777777;\n}\n\n.islider-btn-outer.left {\n left: 5%;\n}\n\n.islider-btn-outer.right {\n right: 5%;\n}\n\n.islider-btn-inner {\n position: absolute;\n width: 50%;\n height: 50%;\n border-top: 2px solid #ffffff;\n border-left: 2px solid #ffffff;\n margin: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.islider-btn-outer.left > .islider-btn-inner {\n -webkit-transform: rotate(-45deg);\n -moz-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n\n.islider-btn-outer.right > .islider-btn-inner {\n -webkit-transform: rotate(135deg);\n -moz-transform: rotate(135deg);\n -ms-transform: rotate(135deg);\n -o-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n\n/**\n * ===========================\n * iSlider.plugin.dot\n * ===========================\n */\n.islider-dot-wrap {\n width: 80%;\n height: 10%;\n margin: 0 auto;\n position: absolute;\n padding: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10000;\n text-align: center;\n}\n\n.islider-dot {\n position: relative;\n display: inline-block;\n width: 0.8em;\n height: 0.8em;\n border-radius: 50%;\n border: 1px solid #ffffff;\n list-style: none;\n margin: 5px;\n}\n\n.islider-dot.active {\n background-color: #ffffff;\n}", ""]); // exports @@ -417,2270 +417,2293 @@ return /******/ (function(modules) { // webpackBootstrap /* 5 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {/** - * A simple, efficent mobile slider solution - * @file iSlider.js - * @author BE-FE Team - * qbaty qbaty.qi@gmail.com - * xieyu33333 xieyu33333@gmail.com - * shinate shine.wangrs@gmail.com - * - * @LICENSE https://github.com/BE-FE/iSlider/blob/master/LICENSE - */ - - (function (global) { - 'use strict'; - - /** - * noop function - */ - function noop() { - } - - /** - * Check in array - * @param {*} o - * @param {Array} arr - * @returns {Boolean} - */ - function inArray(o, arr) { - return arr.indexOf(o) > -1; - } - - /** - * Check is array - * @param {*} o - * @returns {Boolean} - */ - function isArray(o) { - return Object.prototype.toString.call(o) === '[object Array]'; - } - - /** - * Check is object - * @param {*} o - * @returns {Boolean} - */ - function isObject(o) { - return Object.prototype.toString.call(o) === '[object Object]'; - } - - /** - * @param {HTMLElement} el - * @param {String} cls - * @returns {Array|{index: number, input: string}} - */ - function hasClass(el, cls) { - return el.className.match(new RegExp('(\\s|^)(' + cls + ')(\\s|$)')); - } - - /** - * @param {HTMLElement} el - * @param {String} cls - */ - function addClass(el, cls) { - if (!hasClass(el, cls)) { - el.className += ' ' + cls; - } - } - - /** - * @param {HTMLElement} el - * @param {String} cls - */ - function removeClass(el, cls) { - if (hasClass(el, cls)) { - el.className = el.className.replace(RegExp('(\\s|^)(' + cls + ')(\\s|$)'), '$3'); - } - } - - /** - * Check is url - * @param {String} url - * @returns {Boolean} - */ - function isUrl(url) { - if (/<\/?[^>]*>/.test(url)) - return false; - return /^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(url); - } - - /** - * Check is dom object - * @param {object} dom - * @returns {Boolean} - */ - function isDom(obj) { - try { - return obj instanceof HTMLElement; - } - catch(e){ - return (typeof obj==="object") && - (obj.nodeType===1) && (typeof obj.style === "object") && - (typeof obj.ownerDocument ==="object"); - } - } - - /** - * Parse arguments to array - * - * @param {Arguments} a - * @param {Number|null} start - * @param {Number|null} end - * @returns {Array} - */ - function _A(a) { - return Array.prototype.slice.apply(a, Array.prototype.slice.call(arguments, 1)); - } - - function IU(word) { - return word.replace(/^[a-z]/, function (t) { - return t.toUpperCase(); - }); - } - - /** - * @constructor - * - * iSlider([[{HTMLElement} container,] {Array} datalist,] {Object} options) - * - * @param {HTMLElement} container - * @param {Array} datalist - * @param {Object} options - * - * @description - * options.dom > container - * options.data > datalist - */ - var iSlider = function () { - - var args = _A(arguments, 0, 3); - if (!args.length) { - throw new Error('Parameters required!'); - } - - var opts = isObject(args.slice(-1)[0]) ? args.pop() : {}; - - switch (args.length) { - case 2: - opts.data = opts.data || args[1]; - case 1: - opts.dom = opts.dom || args[0]; - } - - if (!opts.dom) { - throw new Error('Container can not be empty!'); - } - else if (!isDom(opts.dom)){ - throw new Error('Container must be a HTMLElement instance!'); - } - - if (!opts.data || !opts.data.length) { - throw new Error('Data must be an array and must have more than one element!'); - } - - /** - * Options - * @private - */ - this._opts = opts; - - opts = null, args = null; - - this._setting(); - - this.fire('initialize'); - - this._renderWrapper(); - this._initPlugins(); - this._bindHandler(); - - this.fire('initialized'); - - // Autoplay mode - this._autoPlay(); - }; - - /** - * version - * @type {string} - */ - iSlider.VERSION = '2.2.0'; - - /** - * Event white list - * @type {Array} - * @protected - */ - iSlider.EVENTS = [ - 'initialize', - 'initialized', - 'pluginInitialize', - 'pluginInitialized', - 'renderComplete', - 'slide', - 'slideStart', - 'slideEnd', - 'slideChange', - 'slideChanged', - 'slideRestore', - 'slideRestored', - 'loadData', - 'reset', - 'destroy' - ]; - - /** - * Easing white list - * @type [Array, RegExp[]] - * @protected - */ - iSlider.EASING = [ - ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'], - /cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/ - ]; - - /** - * TAGS whitelist on fixpage mode - * @type {Array} - * @protected - */ - iSlider.FIX_PAGE_TAGS = ['SELECT', 'INPUT', 'TEXTAREA', 'BUTTON', 'LABEL']; - - /** - * Scene node types - * @type {Object} - * @protected - * TODO Prepare for the migration Symbol ES6. - */ - iSlider.NODE_TYPE = { - unknown: 'unknown', - empty: 'empty', - pic: 'pic', - dom: 'dom', - html: 'html', - node: 'node', - element: 'element' - }; - - /** - * @returns {String} - * @private - */ - iSlider.TRANSITION_END_EVENT = null; - - iSlider.BROWSER_PREFIX = null; - - (function () { - var e = document.createElement('fakeElement'); - [ - ['WebkitTransition', 'webkitTransitionEnd', 'webkit'], - ['transition', 'transitionend', null], - ['MozTransition', 'transitionend', 'moz'], - ['OTransition', 'oTransitionEnd', 'o'] - ].some(function (t) { - if (e.style[t[0]] !== undefined) { - iSlider.TRANSITION_END_EVENT = t[1]; - iSlider.BROWSER_PREFIX = t[2]; - return true; - } - }); - })(); - - /** - * Event match depending on the browser supported - * @type {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}} - */ - iSlider.DEVICE_EVENTS = (function () { - // IOS desktop has touch events, make them busting - var hasTouch = !!(('ontouchstart' in global && !/Mac OS X /.test(global.navigator.userAgent)) || global.DocumentTouch && document instanceof global.DocumentTouch); - return { - hasTouch: hasTouch, - startEvt: hasTouch ? 'touchstart' : 'mousedown', - moveEvt: hasTouch ? 'touchmove' : 'mousemove', - endEvt: hasTouch ? 'touchend' : 'mouseup', - cancelEvt: hasTouch ? 'touchcancel' : 'mouseout', - resizeEvt: 'onorientationchange' in global ? 'orientationchange' : 'resize' - }; - })(); - - /** - * Extend - * @public - */ - iSlider.extend = function () { - var main, extend, args = arguments; - - switch (args.length) { - case 0: - return; - case 1: - main = iSlider.prototype; - extend = args[0]; - break; - case 2: - main = args[0]; - extend = args[1]; - break; - } - - for (var property in extend) { - if (extend.hasOwnProperty(property)) { - main[property] = extend[property]; - } - } - }; - - /** - * Plugins - * @type {{}} - * @protected - */ - iSlider.plugins = {}; - - /** - * @param name - * @param plugin - * @public - */ - iSlider.regPlugin = function (name, plugin) { - iSlider.plugins[name] = iSlider.plugins[name] || plugin; - }; - - /** - * @param {String} prop - * @param {String} value - * @returns {String} - * @public - */ - iSlider.styleProp = function (prop, isDP) { - if (iSlider.BROWSER_PREFIX) { - if (!!isDP) { - return iSlider.BROWSER_PREFIX + IU(prop); - } else { - return '-' + iSlider.BROWSER_PREFIX + '-' + prop; - } - } else { - return prop; - } - }; - - /** - * @param {String} prop - * @param {HTMLElement} dom - * @param {String} value - * @public - */ - iSlider.setStyle = function (dom, prop, value) { - dom.style[iSlider.styleProp(prop, 1)] = value; - }; - - /** - * @param {String} prop - * @param {HTMLElement} dom - * @param {String} value - * @public - */ - iSlider.getStyle = function (dom, prop) { - return dom.style[iSlider.styleProp(prop, 1)]; - }; - - /** - * @type {Object} - * - * @param {HTMLElement} dom The wrapper
  • element - * @param {String} axis Animate direction - * @param {Number} scale Outer wrapper - * @param {Number} i Wrapper's index - * @param {Number} offset Move distance - * @protected - */ - iSlider._animateFuncs = { - normal: (function () { - function normal(dom, axis, scale, i, offset) { - iSlider.setStyle(dom, 'transform', 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)'); - } - - normal.effect = iSlider.styleProp('transform'); - return normal; - })() - }; - - /** - * This is a alias, conducive to compression - * @type {Object} - */ - var iSliderPrototype = iSlider.prototype; - - /** - * & iSlider.extend - * @public - */ - iSliderPrototype.extend = iSlider.extend; - - /** - * setting parameters for slider - * @private - */ - iSliderPrototype._setting = function () { - - var self = this; - - // -------------------------------- - // - Status - // -------------------------------- - - /** - * The plugins - * @type {Array|{}|*} - * @private - */ - self._plugins = iSlider.plugins; - - /** - * Extend animations - * @type {{default: Function}|*} - * @private - */ - self._animateFuncs = iSlider._animateFuncs; - - /** - * @type {Boolean} - * @private - */ - self._holding = false; - - /** - * @type {Boolean} - * @private - */ - self._locking = false; - - /** - * @type {Array} - * @private - */ - self._intermediateScene = null; - - /** - * @type {null} - * @private - */ - self._transitionEndHandler = null; - - /** - * listener - * @type {{autoPlay: null, resize: null, transitionEnd: null}} - * @private - */ - self._LSN = { - autoPlay: null, - resize: null, - transitionEnd: null - }; - - /** - * current scene element: this.els[1] - * @type {null} - * @public - */ - self.currentEl = null; - - /** - * Event handle - * @type {Object} - * @private - */ - self._EventHandle = {}; - - /** - * is on Moving - * @type {Boolean} - * @private - */ - self.onMoving = false; - - /** - * is on Sliding - * @type {Boolean} - * @private - */ - self.onSliding = false; - - /** - * animate direction - * @type {Number|null} - * @private - */ - self.direction = null; - - // -------------------------------- - // - Set options - // -------------------------------- - - var opts = this._opts; - - /** - * dom element wrapping content - * @type {HTMLElement} - * @public - */ - self.wrap = opts.dom; - - /** - * Data list - * @type {Array} - * @public - */ - self.data = opts.data; - - /** - * default slide direction - * @type {Boolean} - * @public - */ - self.isVertical = !!opts.isVertical; - - /** - * Overspread mode - * @type {Boolean} - * @public - */ - self.isOverspread = !!opts.isOverspread; - - /** - * Play time gap - * @type {Number} - * @public - */ - self.duration = opts.duration || 2000; - - /** - * start from initIndex or 0 - * @type {Number} - * @public - */ - self.initIndex = opts.initIndex > 0 && opts.initIndex <= opts.data.length - 1 ? opts.initIndex : 0; - - /** - * touchstart prevent default to fixPage - * @type {Boolean} - * @public - */ - self.fixPage = (function () { - var fp = opts.fixPage; - if (fp === false || fp === 0) { - return false; - } - if (isArray(fp) && fp.length > 0 || typeof fp === 'string' && fp !== '') { - return [].concat(fp).toString(); - } - return true; - })(); - - /** - * Fill seam when render - * Default is false - * @type {Boolean} - * @public - */ - self.fillSeam = !!opts.fillSeam; - - /** - * slideIndex - * @type {Number} - * @private - */ - self.slideIndex = self.slideIndex || self.initIndex || 0; - - /** - * Axis - * @type {String} - * @public - */ - self.axis = self.isVertical ? 'Y' : 'X'; - - /** - * reverseAxis - * @type {String} - * @private - */ - self.reverseAxis = self.axis === 'Y' ? 'X' : 'Y'; - - /** - * Wrapper width - * @type {Number} - * @private - */ - self.width = typeof opts.width === 'number' ? opts.width : self.wrap.offsetWidth; - - /** - * Wrapper height - * @type {Number} - * @private - */ - self.height = typeof opts.height === 'number' ? opts.height : self.wrap.offsetHeight; - - /** - * Ratio height:width - * @type {Number} - * @private - */ - self.ratio = self.height / self.width; - - /** - * Scale, size rule - * @type {Number} - * @private - */ - self.scale = self.isVertical ? self.height : self.width; - - /** - * On slide offset position - * @type {{X: number, Y: number}} - * @private - */ - self.offset = self.offset || {X: 0, Y: 0}; - - /** - * Enable/disable touch events - * @type {Boolean} - * @private - */ - self.isTouchable = opts.isTouchable == null ? true : !!opts.isTouchable; - - /** - * looping logic adjust - * @type {Boolean} - * @private - */ - self.isLooping = opts.isLooping && self.data.length > 1 ? true : false; - - /** - * Damping force - * Effect in non-looping mode - * Range 0 ~ 1 - * @type {Number} - * @private - */ - self.dampingForce = Math.max(0, Math.min(1, parseFloat(opts.dampingForce) || 0)); - - /** - * AutoPlay waitting milsecond to start - * @type {Number} - * @private - */ - self.delay = opts.delay || 0; - - /** - * autoplay logic adjust - * @type {Boolean} - * @private - */ - self.isAutoplay = opts.isAutoplay && self.data.length > 1 ? true : false; - - /** - * Animate type - * @type {String} - * @private - */ - self.animateType = opts.animateType in self._animateFuncs ? opts.animateType : 'normal'; - - /** - * @protected - */ - self._animateFunc = self._animateFuncs[self.animateType]; - - /** - * @private - */ - self._animateReverse = (function () { - var _ = []; - for (var type in self._animateFuncs) { - if (self._animateFuncs.hasOwnProperty(type) && self._animateFuncs[type].reverse) { - _.push(type); - } - } - return _; - })(); - - // little trick set, when you chooce tear & vertical same time - // iSlider overspread mode will be set true autometicly - if (self.isVertical && self.animateType === 'card') { - self.isOverspread = true; - } - - /** - * Debug mode - * @type {Function} - * @private - */ - self.log = opts.isDebug ? function () { - global.console.log.apply(global.console, arguments); - } : noop; - - /** - * Enable damping when slider meet the edge - * @param distance - * @returns {*} - * @private - */ - self._damping = (function () { - return function (distance) { - return Math.atan(Math.abs(distance) / self.scale) * 0.62 * (1 - self.dampingForce) * self.scale * (distance > 0 ? 1 : -1); - } - })(); - - /** - * animate process time (ms), default: 300ms - * @type {Number} - * @public - */ - self.animateTime = opts.animateTime != null && opts.animateTime > -1 ? opts.animateTime : 300; - - /** - * animate effects, default: ease - * @type {String} - * @public - */ - self.animateEasing = - inArray(opts.animateEasing, iSlider.EASING[0]) - || iSlider.EASING[1].test(opts.animateEasing) - ? opts.animateEasing - : 'ease'; - - /** - * Fix touch/mouse events - * @type {{hasTouch, startEvt, moveEvt, endEvt}} - * @private - */ - self.deviceEvents = iSlider.DEVICE_EVENTS; - - /** - * Finger recognition range, prevent inadvertently touch - * @type {Number} - * @private - */ - self.fingerRecognitionRange = opts.fingerRecognitionRange > -1 ? parseInt(opts.fingerRecognitionRange) : 10; - - /** - * Init events - * @type {{}} - * @private - */ - self.events = {}; - - // -------------------------------- - // - Register events - // -------------------------------- - - iSlider.EVENTS.forEach(function (eventName) { - // TODO callback name of All-Lower-Case will be discarded - var fn = opts['on' + eventName.replace(/^\w{1}/, function (m) { - return m.toUpperCase(); - })] || opts['on' + eventName.toLowerCase()]; - typeof fn === 'function' && self.on(eventName, fn, 1); - }); - - // -------------------------------- - // - Plugins - // -------------------------------- - - /** - * @type {Object} - * @private - */ - self.pluginConfig = (function () { - var config = {}; - if (isArray(opts.plugins)) { - opts.plugins.forEach(function pluginConfigEach(plugin) { - if (isArray(plugin)) { - config[plugin[0]] = plugin.slice(1); - } else if (typeof plugin === 'string') { - config[plugin] = []; - } - }); - } - return config; - })(); - }; - - /** - * Init plugins - * @private - */ - iSliderPrototype._initPlugins = function () { - var config = this.pluginConfig; - var plugins = this._plugins; - for (var i in config) { - if (config.hasOwnProperty(i) && plugins.hasOwnProperty(i)) { - this.log('[INIT PLUGIN]:', i, plugins[i]); - plugins[i] - && typeof plugins[i] === 'function' - && typeof plugins[i].apply - && plugins[i].apply(this, config[i]); - } - } - this.fire('pluginInitialized'); - }; - - /** - * Get item type - * @param {Number} index - * @returns {String} - * @private - */ - iSliderPrototype._itemType = function (item) { - if (!isNaN(item)) { - item = this.data[item]; - } - if (item.hasOwnProperty('type')) { - return item.type; - } - var content = item.content; - var _NT = iSlider.NODE_TYPE; - var type; - if (content == null) { - type = _NT.empty; - } else { - if (Boolean(content.nodeName) && Boolean(content.nodeType)) { - type = _NT.node; - } else if (typeof content === 'string') { - if (isUrl(content)) { - type = _NT.pic; - } else { - type = _NT.html; - } - } else { - type = _NT.unknown; - } - } - - item.type = type; - - return type; - }; - - /** - * render single item html by idx - * @param {HTMLElement} el .. - * @param {Number} dataIndex .. - * @private - */ - iSliderPrototype._renderItem = function (el, dataIndex) { - - var item, - self = this, - len = this.data.length; - - var insertImg = function renderItemInsertImg() { - var simg = ' src="' + item.content + '"'; - // auto scale to full screen - if (item.height / item.width > self.ratio) { - simg += ' height="100%"'; - } else { - simg += ' width="100%"'; - } - if (self.isOverspread) { - el.style.cssText += 'background-image:url(' + item.content + ');background-repeat:no-repeat;background-position:50% 50%;background-size:cover'; - simg += ' style="display:block;opacity:0;height:100%;width:100%;"'; - } - // for right button, save picture - el.innerHTML = ''; - }; - - // clean scene - el.innerHTML = ''; - el.style.background = ''; - - // get the right item of data - if (!this.isLooping && this.data[dataIndex] == null) { - // Stop slide when item is empty - return; - } - else { - dataIndex = (len /* * Math.ceil(Math.abs(dataIndex / len))*/ + dataIndex) % len; - item = this.data[dataIndex]; - } - - var type = this._itemType(item); - var _NT = iSlider.NODE_TYPE; - - this.log('[RENDER]:', type, dataIndex, item); - - addClass(el, 'islider-' + type); - - switch (type) { - case _NT.pic: - if (item.load === 2) { - insertImg(); - } - else { - var currentImg = new Image(); - currentImg.src = item.content; - currentImg.onload = function () { - item.height = currentImg.height; - item.width = currentImg.width; - insertImg(); - item.load = 2; - }; - } - break; - case _NT.dom: - case _NT.html: - el.innerHTML = item.content; - break; - case _NT.node: - case _NT.element: - // fragment, create container - if (item.content.nodeType === 11) { - var entity = document.createElement('div'); - entity.appendChild(item.content); - item.content = entity; - } - el.appendChild(item.content); - break; - default: - // do nothing - break; - } - }; - - /** - * Postponing the intermediate scene rendering - * until the target scene is completely rendered (render in event slideChanged) - * to avoid a jumpy feel when switching between scenes - * given that the distance of sliding is more than 1. - * e.g. ```this.slideTo(>+-1)``` - * - * @private - */ - iSliderPrototype._renderIntermediateScene = function () { - if (this._intermediateScene != null) { - this._renderItem.apply(this, this._intermediateScene); - this._intermediateScene = null; - } - }; - - /** - * Apply styles on changed - * @private - */ - iSliderPrototype._changedStyles = function () { - var slideStyles = ['islider-prev', 'islider-active', 'islider-next']; - this.els.forEach(function changeStypeEach(el, index) { - removeClass(el, slideStyles.join('|')); - addClass(el, slideStyles[index]); - this.fillSeam && this.originScale(el); - }.bind(this)); - }; - - /** - * render list html - * @private - */ - iSliderPrototype._renderWrapper = function () { - //this.wrap.style.overflow = 'hidden'; - // initail outer element - var outer; - if (this.outer) { - outer = this.outer; - outer.innerHTML = ''; - } else { - outer = document.createElement('ul'); - } - outer.className = 'islider-outer'; - - //outer.style.overflow = 'hidden'; - // no need... - // outer.style.cssText += 'width:' + this.width + 'px;height:' + this.height + 'px'; - - // storage li elements, only store 3 elements to reduce memory usage - /** - * Slider elements x3 - * @type {Array} - * @public - */ - this.els = []; - - for (var i = 0; i < 3; i++) { - var li = document.createElement('li'); - outer.appendChild(li); - this.els.push(li); - - // prepare style animation - this._animateFunc(li, this.axis, this.scale, i, 0); - - // auto overflow in none fixPage mode - if (!this.fixPage) { - li.style.overflow = 'auto'; - } - - this.isVertical && (this.animateType === 'rotate' || this.animateType === 'flip') - ? this._renderItem(li, 1 - i + this.slideIndex) - : this._renderItem(li, i - 1 + this.slideIndex); - } - - this._changedStyles(); - - if (this.fillSeam) { - this.els.forEach(function (el, i) { - addClass(el, 'islider-sliding' + (i === 1 ? '-focus' : '')); - }); - } - - // Preload picture [ may be pic :) ] - global.setTimeout(function () { - this._preloadImg(this.slideIndex); - }.bind(this), 200); - - // append ul to div#canvas - if (!this.outer) { - /** - * @type {HTMLElement} - * @public - */ - this.outer = outer; - this.wrap.appendChild(outer); - } - - this.currentEl = this.els[1]; - - this.fire('renderComplete', this.slideIndex, this.currentEl, this); - }; - - /** - * Preload img when slideChange - * From current index +2, -2 scene - * @param {Number} dataIndex means which image will be load - * @private - */ - iSliderPrototype._preloadImg = function (dataIndex) { - if (this.data.length > 3) { - var data = this.data; - var len = data.length; - var self = this; - var loadImg = function preloadImgLoadingProcess(index) { - var item = data[index]; - if (self._itemType(item) === 'pic' && !item.load) { - var preloadImg = new Image(); - preloadImg.src = item.content; - preloadImg.onload = function () { - item.width = preloadImg.width; - item.height = preloadImg.height; - item.load = 2; - }; - item.load = 1; - } - }; - - loadImg((dataIndex + 2) % len); - loadImg((dataIndex - 2 + len) % len); - } - }; - - /** - * watch transition end - * @private - */ - iSliderPrototype._watchTransitionEnd = function (squeezeTime, eventType) { - var cb = function () { - this._unWatchTransitionEnd(); - if (eventType === 'slideChanged') { - this._changedStyles(); - } - this.fire.call(this, eventType, this.slideIndex, this.currentEl, this); - this._renderIntermediateScene(); - this.play(); - this.onSliding = false; - this.direction = null; - }.bind(this); - - if (iSlider.TRANSITION_END_EVENT) { - this.currentEl.addEventListener(iSlider.TRANSITION_END_EVENT, cb); - // keep handler and element - this._transitionEndHandler = {el: this.currentEl, handler: cb}; - } - this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime); - }; - - /** - * unwatch transition end - * @private - */ - iSliderPrototype._unWatchTransitionEnd = function () { - if (this._LSN.transitionEnd) { - global.clearTimeout(this._LSN.transitionEnd); - } - if (this._transitionEndHandler !== null) { - this._transitionEndHandler.el.removeEventListener(iSlider.TRANSITION_END_EVENT, this._transitionEndHandler.handler); - this._transitionEndHandler = null; - } - - //this.onSliding = false; - }; - - /** - * bind all event handler, when on PC, disable drag event - * @private - */ - iSliderPrototype._bindHandler = function () { - var outer = this.outer; - var device = this.deviceEvents; - - if (this.isTouchable) { - if (!device.hasTouch) { - outer.style.cursor = 'pointer'; - // disable drag - outer.ondragstart = function (evt) { - if (evt) { - return false; - } - return true; - }; - } - outer.addEventListener(device.startEvt, this); - outer.addEventListener(device.moveEvt, this); - outer.addEventListener(device.endEvt, this); - - // Viscous drag adaptation - !device.hasTouch && outer.addEventListener('mouseout', this); - } - - global.addEventListener(device.resizeEvt, this); - - // Fix android device - global.addEventListener('focus', this, false); - global.addEventListener('blur', this, false); - }; - - /** - * Uniformity admin event - * Event router - * @param {Object} evt event object - * @protected - */ - iSliderPrototype.handleEvent = function (evt) { - var device = this.deviceEvents; - switch (evt.type) { - case 'mousedown': - // block mouse buttons except left - if (evt.button !== 0) break; - case 'touchstart': - this.startHandler(evt); - break; - case device.moveEvt: - this.moveHandler(evt); - break; - case device.endEvt: - case device.cancelEvt: // mouseout, touchcancel event, trigger endEvent - this.endHandler(evt); - break; - case device.resizeEvt: - this.resizeHandler(); - break; - case 'focus': - this.play(); - break; - case 'blur': - this.pause(); - break; - } - }; - - /** - * touchstart callback - * @param {Object} evt event object - * @public - */ - iSliderPrototype.startHandler = function (evt) { - if (this.fixPage && iSlider.FIX_PAGE_TAGS.indexOf(evt.target.tagName.toUpperCase()) < 0 && !this._isItself(evt.target)) { - evt.preventDefault(); - } - if (this._holding || this._locking) { - return; - } - var device = this.deviceEvents; - this.onMoving = true; - this.pause(); - - this.log('[EVENT]: start'); - this.fire('slideStart', evt, this); - - /** - * @type {Number} - * @private - */ - this.startTime = new Date().getTime(); - - /** - * @type {Number} - * @private - */ - this.startX = device.hasTouch ? evt.targetTouches[0].pageX : evt.pageX; - - /** - * @type {Number} - * @private - */ - this.startY = device.hasTouch ? evt.targetTouches[0].pageY : evt.pageY; - }; - - /** - * touchmove callback - * @param {Object} evt event object - * @public - */ - iSliderPrototype.moveHandler = function (evt) { - if (!this.onMoving) { - return; - } - this.log('[EVENT]: moving'); - var device = this.deviceEvents; - var len = this.data.length; - var axis = this.axis; - var reverseAxis = this.reverseAxis; - var offset = {}; - - if (evt.hasOwnProperty('offsetRatio')) { - offset[axis] = evt.offsetRatio * this.scale; - offset[reverseAxis] = 0; - } else { - offset.X = device.hasTouch ? (evt.targetTouches[0].pageX - this.startX) : (evt.pageX - this.startX); - offset.Y = device.hasTouch ? (evt.targetTouches[0].pageY - this.startY) : (evt.pageY - this.startY); - } - - this.offset = offset; - evt.offsetRatio = offset[axis] / this.scale; - - if (Math.abs(offset[axis]) - Math.abs(offset[reverseAxis]) > 10) { - - evt.preventDefault(); - this._unWatchTransitionEnd(); - - if (!this.isLooping) { - if (offset[axis] > 0 && this.slideIndex === 0 || offset[axis] < 0 && this.slideIndex === len - 1) { - offset[axis] = this._damping(offset[axis]); - } - } - - this.els.forEach(function (item, i) { - item.style.visibility = 'visible'; - iSlider.setStyle(item, 'transition', 'none'); - this._animateFunc(item, axis, this.scale, i, offset[axis], offset[axis]); - this.fillSeam && this.seamScale(item); - }.bind(this)); - - this.fire('slide', evt, this); - } - }; - - /** - * touchend callback - * @param {Object} evt event object - * @public - */ - iSliderPrototype.endHandler = function (evt) { - if (!this.onMoving) { - return; - } - this.log('[EVENT]: end'); - this.onMoving = false; - var offset = this.offset; - var axis = this.axis; - var boundary = this.scale / 2; - var endTime = new Date().getTime(); - var FRR = this.fingerRecognitionRange; - - // a quick slide time must under 300ms - // a quick slide should also slide at least 14 px - boundary = endTime - this.startTime > 300 ? boundary : 14; - - var absOffset = Math.abs(offset[axis]); - var absReverseOffset = Math.abs(offset[this.reverseAxis]); - - function dispatchLink(el) { - if (el != null) { - if (el.tagName === 'A') { - if (el.href) { - if (el.getAttribute('target') === '_blank') { - global.open(el.href); - } else { - global.location.href = el.href; - } - evt.preventDefault(); - return false; - } - } - else if (el.tagName === 'LI' && el.className.search(/^islider\-/) > -1) { - return false; - } - else { - dispatchLink(el.parentNode); - } - } - } - - this.fire('slideEnd', evt, this); - - if (offset[axis] >= boundary && absReverseOffset < absOffset) { - this.slideTo(this.slideIndex - 1); - } - else if (offset[axis] < -boundary && absReverseOffset < absOffset) { - this.slideTo(this.slideIndex + 1); - } - else { - if (Math.abs(this.offset[axis]) >= FRR) { - this.slideTo(this.slideIndex); - } - } - - // create sim tap event if offset < this.fingerRecognitionRange - if (Math.abs(this.offset[axis]) < FRR && this.fixPage && evt.target) { - dispatchLink(evt.target); - } - - this.offset.X = this.offset.Y = 0; - }; - - /** - * resize callback - * @public - */ - iSliderPrototype.resizeHandler = function () { - var _L = this._LSN.resize; - var startTime = +new Date, _W, _H; - - if (this.deviceEvents.hasTouch) { - // Fuck Android - _L && global.clearInterval(_L); - _L = global.setInterval(function () { - if (this.height !== this.wrap.offsetHeight || this.width !== this.wrap.offsetWidth) { - _L && global.clearInterval(_L); - _L = global.setInterval(function () { - if (_W === this.wrap.offsetWidth && _H === this.wrap.offsetHeight) { - _L && global.clearInterval(_L); - this.reset(); - this.log('[EVENT]: resize'); - } else { - _W = this.wrap.offsetWidth, _H = this.wrap.offsetHeight; - } - }.bind(this), 12); - } else { - if (+new Date - startTime >= 1000) { - _L && global.clearInterval(_L); - } - } - }.bind(this), 12); - } else { - _L && global.clearTimeout(_L); - _L = global.setTimeout(function () { - if (this.height !== this.wrap.offsetHeight || this.width !== this.wrap.offsetWidth) { - _L && global.clearInterval(_L); - this.reset(); - this.log('[EVENT]: resize'); - } - }.bind(this), 200); - } - }; - - /** - * slide logical, goto data index - * @param {Number} dataIndex the goto index - * @public - */ - iSliderPrototype.slideTo = function (dataIndex, opts) { - // stop auto play - if (this.isAutoplay) { - this.pause(); - } - if (this._locking) { - return; - } - this.unhold(); - this.onSliding = true; - var animateTime = this.animateTime; - var animateType = this.animateType; - var animateFunc = this._animateFunc; - var data = this.data; - var els = this.els; - var axis = this.axis; - var idx = dataIndex; - var n = dataIndex - this.slideIndex; - var offset = this.offset; - var eventType; - var squeezeTime = 0; - - if (typeof opts === 'object') { - if (opts.animateTime > -1) { - animateTime = opts.animateTime; - } - if (typeof opts.animateType === 'string' && opts.animateType in this._animateFuncs) { - animateType = opts.animateType; - animateFunc = this._animateFuncs[animateType]; - } - } - - // In the slide process, animate time is squeezed - if (offset[axis] !== 0) { - squeezeTime = Math.abs(offset[axis]) / this.scale * animateTime; - } - - if (Math.abs(n) > 1) { - this._renderItem(n > 0 ? this.els[2] : this.els[0], idx); - } - - // preload when slide - this._preloadImg(idx); - - // get right item of data - if (data[idx]) { - this.slideIndex = idx; - } - else { - if (this.isLooping) { - this.slideIndex = n > 0 ? 0 : data.length - 1; - } - else { - n = 0; - } - } - - this.log('[SLIDE TO]: ' + this.slideIndex); - - // keep the right order of items - var headEl, tailEl, direction; - - // slidechange should render new item - // and change new item style to fit animation - if (n === 0) { - // Restore to current scene - eventType = 'slideRestore'; - } else { - - if ((this.isVertical && (inArray(animateType, this._animateReverse))) ^ (n > 0)) { - els.push(els.shift()); - headEl = els[2]; - tailEl = els[0]; - direction = 1; - } else { - els.unshift(els.pop()); - headEl = els[0]; - tailEl = els[2]; - direction = -1; - } - - this.currentEl = els[1]; - - if (Math.abs(n) === 1) { - this._renderIntermediateScene(); - this._renderItem(headEl, idx + n); - } else if (Math.abs(n) > 1) { - if ((this.isVertical && (inArray(animateType, this._animateReverse)))) { - this._renderItem(tailEl, idx + direction); - this._renderItem(els[1], idx); - this._intermediateScene = [headEl, idx - direction]; - } - else { - this._renderItem(headEl, idx + direction); - this._intermediateScene = [tailEl, idx - direction]; - } - } - - iSlider.setStyle(headEl, 'transition', 'none'); - - // Minus squeeze time - squeezeTime = animateTime - squeezeTime; - - eventType = 'slideChange'; - - // For seams - if (this.fillSeam) { - els.forEach(function (el) { - removeClass(el, 'islider-sliding|islider-sliding-focus'); - }); - addClass(this.currentEl, 'islider-sliding-focus'); - addClass(headEl, 'islider-sliding'); - } - - this.direction = direction; - } - - // do the trick animation - for (var i = 0; i < 3; i++) { - if (els[i] !== headEl) { - // Only applies their effects - iSlider.setStyle(els[i], 'transition', (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing); - } - animateFunc.call(this, els[i], axis, this.scale, i, 0, direction); - this.fillSeam && this.seamScale(els[i]); - } - - this._watchTransitionEnd(squeezeTime, eventType + 'd'); - this.fire(eventType, this.slideIndex, this.currentEl, this); - }; - - /** - * Slide to next scene - * @public - */ - iSliderPrototype.slideNext = function () { - this.slideTo.apply(this, [this.slideIndex + 1].concat(_A(arguments))); - }; - - /** - * Slide to previous scene - * @public - */ - iSliderPrototype.slidePrev = function () { - this.slideTo.apply(this, [this.slideIndex - 1].concat(_A(arguments))); - }; - - /** - * Register plugin (run time mode) - * @param {String} name - * @param {Function} plugin - * @param {...} - * @public - */ - iSliderPrototype.regPlugin = function () { - var args = _A(arguments); - var name = args.shift(), - plugin = args[0]; - - if (!this._plugins.hasOwnProperty(name) && typeof plugin !== 'function') { - return; - } - if (typeof plugin === 'function') { - this._plugins[name] = plugin; - args.shift(); - } - - // Auto enable and init plugin when at run time - if (!inArray(name, this._opts.plugins)) { - this._opts.plugins.push(args.length ? [].concat([name], args) : name); - typeof this._plugins[name] === 'function' && this._plugins[name].apply(this, args); - } - }; - - /** - * simple event delegate method - * - * @param {String} evtType event name - * @param {String} selector the simple css selector like jQuery - * @param {Function} callback event callback - * @public - * - * @alias iSliderPrototype.bind - */ - iSliderPrototype.bind = iSliderPrototype.delegate = function (evtType, selector, callback) { - - function delegatedEventCallbackHandle(e) { - var evt = global.event ? global.event : e; - var target = evt.target; - var eleArr = document.querySelectorAll(selector); - for (var i = 0; i < eleArr.length; i++) { - if (target === eleArr[i]) { - callback.call(target); - break; - } - } - } - - this.wrap.addEventListener(evtType, delegatedEventCallbackHandle, false); - - var key = evtType + ';' + selector; - if (!this._EventHandle.hasOwnProperty(key)) { - this._EventHandle[key] = [ - [callback], - [delegatedEventCallbackHandle] - ]; - } else { - this._EventHandle[key][0].push(callback); - this._EventHandle[key][1].push(delegatedEventCallbackHandle); - } - }; - - /** - * remove event delegate from wrap - * - * @param {String} evtType event name - * @param {String} selector the simple css selector like jQuery - * @param {Function} callback event callback - * @public - * - * @alias iSliderPrototype.unbind - */ - iSliderPrototype.unbind = iSliderPrototype.unDelegate = function (evtType, selector, callback) { - var key = evtType + ';' + selector; - if (this._EventHandle.hasOwnProperty(key)) { - var i = this._EventHandle[key][0].indexOf(callback); - if (i > -1) { - this.wrap.removeEventListener(evtType, this._EventHandle[key][1][i]); - this._EventHandle[key][0][i] = this._EventHandle[key][1][i] = null; - // delete this._EventHandle[key][0][i]; - // delete this._EventHandle[key][1][i]; - return true; - } - } - - return false; - }; - - /** - * removeEventListener to release the memory - * @public - */ - iSliderPrototype.destroy = function () { - var outer = this.outer; - var device = this.deviceEvents; - - this.fire('destroy'); - - // Clear events - if (this.isTouchable) { - outer.removeEventListener(device.startEvt, this); - outer.removeEventListener(device.moveEvt, this); - outer.removeEventListener(device.endEvt, this); - - // Viscous drag unbind - !device.hasTouch && outer.removeEventListener('mouseout', this); - } - global.removeEventListener(device.resizeEvt, this); - global.removeEventListener('focus', this); - global.removeEventListener('blur', this); - - var n; - - // Clear delegate events - for (n in this._EventHandle) { - var handList = this._EventHandle[n][1]; - for (var i = 0; i < handList.length; i++) { - if (typeof handList[i] === 'function') { - this.wrap.removeEventListener(n.substr(0, n.indexOf(';')), handList[i]); - } - } - } - this._EventHandle = null; - - // Clear timer - for (n in this._LSN) { - this._LSN.hasOwnProperty(n) && this._LSN[n] && global.clearTimeout(this._LSN[n]); - } - - this._LSN = null; - - this.wrap.innerHTML = ''; - }; - - /** - * Register event callback - * @param {String} eventName - * @param {Function} func - * @returns {Object} return this instance of iSlider - * @public - */ - iSliderPrototype.on = function (eventName, func, force) { - if (inArray(eventName, iSlider.EVENTS) && typeof func === 'function') { - !(eventName in this.events) && (this.events[eventName] = []); - if (!force) { - this.events[eventName].push(func); - } else { - this.events[eventName].unshift(func); - } - } - return this; - }; - - /** - * Find callback function position - * @param {String} eventName - * @param {Function} func - * @returns {Boolean} - * @public - */ - iSliderPrototype.has = function (eventName, func) { - if (eventName in this.events) { - return -1 < this.events[eventName].indexOf(func); - } - return false; - }; - - /** - * Remove event callback - * @param {String} eventName - * @param {Function} func - * @public - */ - iSliderPrototype.off = function (eventName, func) { - if (eventName in this.events) { - var index = this.events[eventName].indexOf(func); - if (index > -1) { - delete this.events[eventName][index]; - } - } - }; - - /** - * Trigger event callbacks - * @param {String} eventName - * @param {*} args - * @public - */ - iSliderPrototype.fire = function (eventNames) { - var args = _A(arguments, 1); - eventNames.split(/\x20+/).forEach(function (eventName) { - this.log('[EVENT FIRE]:', eventName, args); - if (eventName in this.events) { - var funcs = this.events[eventName]; - for (var i = 0; i < funcs.length; i++) { - typeof funcs[i] === 'function' - && funcs[i].apply - && funcs[i].apply(this, args); - } - } - }.bind(this)); - }; - - /** - * reset & rerender - * @public - */ - iSliderPrototype.reset = function () { - this.pause(); - this._unWatchTransitionEnd(); - //this._setting(); - this.width = typeof this._opts.width === 'number' ? this._opts.width : this.wrap.offsetWidth; - this.height = typeof this._opts.height === 'number' ? this._opts.height : this.wrap.offsetHeight; - this.ratio = this.height / this.width; - this.scale = this.isVertical ? this.height : this.width; - this._renderWrapper(); - this._autoPlay(); - this.fire('reset slideRestored', this.slideIndex, this.currentEl, this); - }; - - /** - * Reload Data & render - * - * @param {Array} data - * @param {Number} initIndex - * @public - */ - iSliderPrototype.loadData = function (data, initIndex) { - this.pause(); - this._unWatchTransitionEnd(); - this.slideIndex = initIndex || 0; - this.data = data; - this._renderWrapper(); - this._autoPlay(); - this.fire('loadData slideChanged', this.slideIndex, this.currentEl, this); - }; - - /** - * Add scenes to the end of the data datasheets - * - * @param {Object|Array} sceneData - * @description - * Object: - * {content:...} - * Array: - * [{content:...}, {content:...}, ...] - */ - iSliderPrototype.pushData = function (sceneData) { - if (sceneData == null) { - return; - } - var len = this.data.length; - this.data = this.data.concat(sceneData); - if (this.isLooping && this.slideIndex === 0) { - this._renderItem(this.els[0], this.data.length - 1); - } else if (len - 1 === this.slideIndex) { - this._renderItem(this.els[2], len); - this._autoPlay(); // restart - } - }; - - /** - * Add scenes to the head of the data datasheets - * - * @param {Object|Array} sceneData - * @description - * Object: - * {content:...} - * Array: - * [{content:...}, {content:...}, ...] - */ - iSliderPrototype.unshiftData = function (sceneData) { - if (sceneData == null) { - return; - } - - if (!isArray(sceneData)) { - sceneData = [sceneData]; - } - - var n = sceneData.length; - this.data = sceneData.concat(this.data); - - if (this.slideIndex === 0) { - this._renderItem(this.els[0], n - 1); - } - this.slideIndex += n; - }; - - /** - * auto check to play and bind events - * @private - */ - iSliderPrototype._autoPlay = function () { - this.delay > 0 ? global.setTimeout(this.play.bind(this), this.delay) : this.play(); - }; - - /** - * Start autoplay - * @public - */ - iSliderPrototype.play = function () { - this.pause(); - // If not looping, stop playing when meet the end of data - if (this.isAutoplay && (this.isLooping || this.slideIndex < this.data.length - 1)) { - this._LSN.autoPlay = global.setTimeout(this.slideNext.bind(this), this.duration); - } - }; - - /** - * pause autoplay - * @public - */ - iSliderPrototype.pause = function () { - this._LSN.autoPlay && global.clearTimeout(this._LSN.autoPlay); - }; - - /** - * Maintaining the current scene - * Disable touch events, except for the native method. - * @public - */ - iSliderPrototype.hold = function () { - this._holding = true; - }; - - /** - * Release current scene - * unlock at same time - * @public - */ - iSliderPrototype.unhold = function () { - this._holding = false; - this.unlock(); - }; - - /** - * You can't do anything on this scene - * lock native method calls - * hold at same time - * @public - */ - iSliderPrototype.lock = function () { - this.hold(); - this._locking = true; - }; - - /** - * unlock native method calls - * @public - */ - iSliderPrototype.unlock = function () { - this._locking = false; - }; - - /** - * Fill the seam - * @param {HTMLElement} el - * @private - */ - iSliderPrototype.seamScale = function (el) { - var regex = /scale([XY]?)\(([^\)]+)\)/; - var transformStyle = iSlider.getStyle(el, 'transform'); - if (regex.test(transformStyle)) { - iSlider.setStyle(el, 'transform', transformStyle.replace(regex, function (res, axis, scale) { - var sc = {}; - if (axis) { - sc[axis] = parseFloat(scale); - return 'scale' + this.axis + '(' + (axis === this.axis ? 1.001 * sc[this.axis] : 1.001) + ')'; - } else { - if (scale.indexOf(',') > -1) { - scale = scale.split(','); - sc.X = parseFloat(scale[0]); - sc.Y = parseFloat(scale[1]); - } else { - sc.Y = sc.X = parseFloat(scale); - } - sc[this.axis] *= 1.001; - return 'scale(' + sc.X + ', ' + sc.Y + ')'; - } - }.bind(this))); - } else { - iSlider.setStyle(el, 'transform', transformStyle + ' scale' + this.axis + '(1.001)'); - } - }; - - /** - * @param {HTMLElement} el - * @private - */ - iSliderPrototype.originScale = function (el) { - var regex = /([\x20]?scale)([XY]?)\(([^\)]+)\)/; - iSlider.setStyle(el, 'transform', iSlider.getStyle(el, 'transform').replace(regex, function (sc, res, axis, scale) { - sc = {}; - if (axis) { - if (scale === '1.001') { - return ''; - } else { - sc[axis] = parseFloat(scale); - return 'scale' + this.axis + '(' + (axis === this.axis ? sc[this.axis] / 1.001 : 1) + ')'; - } - } else { - if (scale.indexOf(',') > -1) { - scale = scale.split(','); - sc.X = parseFloat(scale[0]); - sc.Y = parseFloat(scale[1]); - } else { - sc.Y = sc.X = parseFloat(scale); - } - sc[this.axis] /= 1.001; - return 'scale(' + sc.X + ', ' + sc.Y + ')'; - } - }.bind(this))); - }; - - - /** - * Whether this node in rule - * - * @param {HTMLElement} target - * @param {Array} rule - * @returns {boolean} - */ - iSliderPrototype._isItself = function (target) { - var rule = this.fixPage; - if (typeof rule === 'string') { - //get dom path - var path = [], parent = target, selector; - while (!hasClass(parent, 'islider-outer') && parent !== this.wrap) { - path.push(parent); - parent = parent.parentNode; - } - parent = path.pop(); - - if (path.length) { - try { - selector = Array.prototype.slice.call(parent.querySelectorAll(rule)); - if (selector.length) { - for (var i = 0; i < path.length; i++) { - if (selector.indexOf(path[i]) > -1) { - return true; - } - } - } - } catch (e) { - return false; - } - } - } - return false; - } - - /** - * Let target islider controls this one - * - * @param {iSlider} target - * @param {Object} how - * @public - */ - iSliderPrototype.subjectTo = function (target, how) { - if (!target instanceof iSlider) { - return; - } - - var self = this; - - self.animateTime = target.animateTime; - self.isLooping = target.isLooping; - self.isAutoplay = false; - - target.on('slideStart', function (evt) { - self.startHandler(evt); - }); - - target.on('slide', function (evt) { - self.moveHandler(evt); - }); - - target.on('slideEnd', function (evt) { - self.endHandler(evt); - }); - - target.on('slideChange', function (i) { - var l = self.data.length; - var d = self.direction; - if (d > 0 && (i - self.slideIndex + l) % l === 1) { - self.slideNext(); - } else if (d < 0 && (i - self.slideIndex - l) % l === -1) { - self.slidePrev(); - } - }); - - target.on('slideRestore', function (i) { - if (self.slideIndex !== i) { - self.slideTo(i); - } - }); - }; - - /* CommonJS */ - if ("function" === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) - module.exports = iSlider; - /* AMD */ - else if ("function" === 'function' && __webpack_require__(7)['amd']) - !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { - return iSlider; - }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - /* Global */ - else - global['iSlider'] = global['iSlider'] || iSlider; - - })(window || this); + var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {/** + * A simple, efficent mobile slider solution + * @file iSlider.js + * @author BE-FE Team + * qbaty qbaty.qi@gmail.com + * xieyu33333 xieyu33333@gmail.com + * shinate shine.wangrs@gmail.com + * + * @LICENSE https://github.com/BE-FE/iSlider/blob/master/LICENSE + */ - /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)(module))) + (function (global) { + 'use strict'; -/***/ }, -/* 6 */ -/***/ function(module, exports) { + /** + * noop function + */ + function noop() { + } - module.exports = function(module) { - if(!module.webpackPolyfill) { - module.deprecate = function() {}; - module.paths = []; - // module.parent = undefined by default - module.children = []; - module.webpackPolyfill = 1; - } - return module; - } + /** + * Check in array + * @param {*} o + * @param {Array} arr + * @returns {Boolean} + */ + function inArray(o, arr) { + return arr.indexOf(o) > -1; + } + /** + * Check is array + * @param {*} o + * @returns {Boolean} + */ + function isArray(o) { + return Object.prototype.toString.call(o) === '[object Array]'; + } -/***/ }, -/* 7 */ -/***/ function(module, exports) { + /** + * Check is object + * @param {*} o + * @returns {Boolean} + */ + function isObject(o) { + return Object.prototype.toString.call(o) === '[object Object]'; + } - module.exports = function() { throw new Error("define cannot be used indirect"); }; + /** + * @param {HTMLElement} el + * @param {String} cls + * @returns {Array|{index: number, input: string}} + */ + function hasClass(el, cls) { + return el.className.match(new RegExp('(\\s|^)(' + cls + ')(\\s|$)')); + } + /** + * @param {HTMLElement} el + * @param {String} cls + */ + function addClass(el, cls) { + if (!hasClass(el, cls)) { + el.className += ' ' + cls; + } + } -/***/ }, -/* 8 */ -/***/ function(module, exports, __webpack_require__) { + /** + * @param {HTMLElement} el + * @param {String} cls + */ + function removeClass(el, cls) { + if (hasClass(el, cls)) { + el.className = el.className.replace(RegExp('(\\s|^)(' + cls + ')(\\s|$)'), '$3'); + } + } - var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {/** - * More animations - * @file animate.js - * @author BE-FE Team - * xieyu33333 xieyu33333@gmail.com - * shinate shine.wangrs@gmail.com - */ - - (function (global, factory) { - /* CommonJS */ - if ("function" === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) - factory(__webpack_require__(5)); - /* AMD */ - else if ("function" === 'function' && __webpack_require__(7)['amd']) - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = function (iSlider) { - factory(iSlider); - }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - /* Global */ - else - factory(global['iSlider']); - - })(window ? window : this, function (iSlider) { - - 'use strict'; - - iSlider && iSlider.extend(iSlider._animateFuncs, { - // rotate - rotate: (function () { - function rotate(dom, axis, scale, i, offset, direct) { - var rotateDirect = (axis === 'X') ? 'Y' : 'X'; - - if (this.isVertical) { - offset = -offset; - if (Math.abs(direct) > 1) { - direct = -direct; - } - } - - var outer = dom.parentElement; - iSlider.setStyle(outer, 'perspective', scale * 4); - - dom.style.visibility = 'visible'; - if (direct > 0 && i === 2) { - dom.style.visibility = 'hidden'; - } - if (direct < 0 && i === 0) { - dom.style.visibility = 'hidden'; - } - dom.style.zIndex = i === 1 ? 1 : 0; - - dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;'; - - // TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective - iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)'); - } - - rotate.effect = iSlider.styleProp('transform'); - rotate.reverse = true; - return rotate; - })(), - // flip - flip: (function () { - function flip(dom, axis, scale, i, offset, direct) { - if (this.isVertical) { - offset = -offset; - } - - var outer = dom.parentElement; - iSlider.setStyle(outer, 'perspective', scale * 4); - - dom.style.visibility = 'visible'; - if (direct > 0 && i === 2) { - dom.style.visibility = 'hidden'; - } - if (direct < 0 && i === 0) { - dom.style.visibility = 'hidden'; - } - - dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden'; - iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'); - } - - flip.effect = iSlider.styleProp('transform'); - flip.reverse = true; - return flip; - })(), - depth: (function () { - - function depth(dom, axis, scale, i, offset, direct) { - var zoomScale = (4 - Math.abs(i - 1)) * 0.18; - var outer = dom.parentElement; - iSlider.setStyle(outer, 'perspective', scale * 4); - dom.style.zIndex = i === 1 ? 1 : 0; - iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'); - } - - depth.effect = iSlider.styleProp('transform'); - return depth; - })(), - flow: (function () { - function flow(dom, axis, scale, i, offset, direct) { - var absoluteOffset = Math.abs(offset); - var rotateDirect = (axis === 'X') ? 'Y' : 'X'; - var directAmend = (axis === 'X') ? 1 : -1; - var offsetRatio = Math.abs(offset / scale); - var outer = dom.parentElement; - - iSlider.setStyle(outer, 'perspective', scale * 4); - - if (i === 1) { - dom.style.zIndex = scale - absoluteOffset; - } - else { - dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset; - } - - iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)'); - } - - flow.effect = iSlider.styleProp('transform'); - return flow; - })(), - card: (function () { - function card(dom, axis, scale, i, offset, direct) { - var absoluteOffset = Math.abs(offset); - var zoomScale = 1; - var z = 1; - - if (absoluteOffset > 0) { - if (i === 1) { - zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6); - z = 0; - } - } else { - if (i !== 1) { - if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) { - zoomScale = 1 - 0.2 * Math.abs(i - 1); - } - z = 0; - } - } - dom.style.zIndex = z; - iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)'); - } - - card.effect = iSlider.styleProp('transform'); - return card; - })(), - fade: (function () { - function fade(dom, axis, scale, i, offset, direct) { - dom.style.zIndex = i === 1 ? 1 : 0; - offset = Math.abs(offset); - if (i === 1) { - dom.style.opacity = 1 - (offset / scale); - } else { - dom.style.opacity = offset / scale; - } - } - - fade.effect = 'opacity'; - return fade; - })(), - zoomout: (function () { - var lsn; - - function zoomout(dom, axis, scale, i, offset) { - var z, o, s; - - var oa = offset / scale; - switch (i) { - case 0: - lsn && window.clearTimeout(lsn); - o = oa < 1 ? oa : 1; - s = 2 - (0.5 * oa); - z = 2; - var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000; - if (at > 0) { - lsn = window.setTimeout(function () { - dom.style.zIndex = 0; - }, at); - } - break; - case 1: - o = 1 - oa; - s = 1 - (0.5 * oa); - z = 1; - break; - case 2: - o = oa > 0 ? oa : 0; - s = 0.5 - (0.5 * oa); - z = 0; - break; - } - dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');'; - } - - zoomout.reverse = true; - return zoomout; - })() - }); + /** + * Check is url + * @param {String} url + * @returns {Boolean} + */ + function isUrl(url) { + if (/<\/?[^>]*>/.test(url)) + return false; + return /^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(url); + } + + /** + * Check is dom object + * @param {object} dom + * @returns {Boolean} + */ + function isDom(obj) { + try { + return obj instanceof HTMLElement; + } + catch (e) { + return (typeof obj === "object") && + (obj.nodeType === 1) && (typeof obj.style === "object") && + (typeof obj.ownerDocument === "object"); + } + } + + /** + * Parse arguments to array + * + * @param {Arguments} a + * @param {Number|null} start + * @param {Number|null} end + * @returns {Array} + */ + function _A(a) { + return Array.prototype.slice.apply(a, Array.prototype.slice.call(arguments, 1)); + } + + function IU(word) { + return word.replace(/^[a-z]/, function (t) { + return t.toUpperCase(); + }); + } + + /** + * @constructor + * + * iSlider([[{HTMLElement} container,] {Array} datalist,] {Object} options) + * + * @param {HTMLElement} container + * @param {Array} datalist + * @param {Object} options + * + * @description + * options.dom > container + * options.data > datalist + */ + var iSlider = function () { + + var args = _A(arguments, 0, 3); + if (!args.length) { + throw new Error('Parameters required!'); + } + + var opts = isObject(args.slice(-1)[0]) ? args.pop() : {}; + + switch (args.length) { + case 2: + opts.data = opts.data || args[1]; + case 1: + opts.dom = opts.dom || args[0]; + } + + if (!opts.dom) { + throw new Error('Container can not be empty!'); + } + else if (!isDom(opts.dom)) { + throw new Error('Container must be a HTMLElement instance!'); + } + + if (!opts.data || !opts.data.length) { + throw new Error('Data must be an array and must have more than one element!'); + } + + /** + * Options + * @private + */ + this._opts = opts; + + opts = null, args = null; + + this._setting(); + + this.fire('initialize'); + + this._renderWrapper(); + this._initPlugins(); + this._bindHandler(); + + this.fire('initialized'); + + // Autoplay mode + this._autoPlay(); + }; + + /** + * version + * @type {string} + */ + iSlider.VERSION = '2.2.1'; + + /** + * Event white list + * @type {Array} + * @protected + */ + iSlider.EVENTS = [ + 'initialize', + 'initialized', + 'pluginInitialize', + 'pluginInitialized', + 'renderComplete', + 'slide', + 'slideStart', + 'slideEnd', + 'slideChange', + 'slideChanged', + 'slideRestore', + 'slideRestored', + 'loadData', + 'reset', + 'destroy' + ]; + + /** + * Easing white list + * @type [Array, RegExp[]] + * @protected + */ + iSlider.EASING = [ + ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'], + /cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/ + ]; + + /** + * TAGS whitelist on fixpage mode + * @type {Array} + * @protected + */ + iSlider.FIX_PAGE_TAGS = ['SELECT', 'INPUT', 'TEXTAREA', 'BUTTON', 'LABEL']; + + /** + * Scene node types + * @type {Object} + * @protected + * TODO Prepare for the migration Symbol ES6. + */ + iSlider.NODE_TYPE = { + unknown: 'unknown', + empty: 'empty', + pic: 'pic', + dom: 'dom', + html: 'html', + node: 'node', + element: 'element' + }; + + /** + * @returns {String} + * @private + */ + iSlider.TRANSITION_END_EVENT = null; + + iSlider.BROWSER_PREFIX = null; + + (function () { + var e = document.createElement('fakeElement'); + [ + ['WebkitTransition', 'webkitTransitionEnd', 'webkit'], + ['transition', 'transitionend', null], + ['MozTransition', 'transitionend', 'moz'], + ['OTransition', 'oTransitionEnd', 'o'] + ].some(function (t) { + if (e.style[t[0]] !== undefined) { + iSlider.TRANSITION_END_EVENT = t[1]; + iSlider.BROWSER_PREFIX = t[2]; + return true; + } + }); + })(); + + /** + * Event match depending on the browser supported + * @type {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}} + */ + iSlider.DEVICE_EVENTS = (function () { + // IOS desktop has touch events, make them busting + var hasTouch = !!(('ontouchstart' in global && !/Mac OS X /.test(global.navigator.userAgent)) || global.DocumentTouch && document instanceof global.DocumentTouch); + return { + hasTouch: hasTouch, + startEvt: hasTouch ? 'touchstart' : 'mousedown', + moveEvt: hasTouch ? 'touchmove' : 'mousemove', + endEvt: hasTouch ? 'touchend' : 'mouseup', + cancelEvt: hasTouch ? 'touchcancel' : 'mouseout', + resizeEvt: 'onorientationchange' in global ? 'orientationchange' : 'resize' + }; + })(); + + /** + * Extend + * @public + */ + iSlider.extend = function () { + var main, extend, args = arguments; + + switch (args.length) { + case 0: + return; + case 1: + main = iSlider.prototype; + extend = args[0]; + break; + case 2: + main = args[0]; + extend = args[1]; + break; + } + + for (var property in extend) { + if (extend.hasOwnProperty(property)) { + main[property] = extend[property]; + } + } + }; + + /** + * Plugins + * @type {{}} + * @protected + */ + iSlider.plugins = {}; + + /** + * @param name + * @param plugin + * @public + */ + iSlider.regPlugin = function (name, plugin) { + iSlider.plugins[name] = iSlider.plugins[name] || plugin; + }; + + /** + * @param {String} prop + * @param {String} value + * @returns {String} + * @public + */ + iSlider.styleProp = function (prop, isDP) { + if (iSlider.BROWSER_PREFIX) { + if (!!isDP) { + return iSlider.BROWSER_PREFIX + IU(prop); + } else { + return '-' + iSlider.BROWSER_PREFIX + '-' + prop; + } + } else { + return prop; + } + }; + + /** + * @param {String} prop + * @param {HTMLElement} dom + * @param {String} value + * @public + */ + iSlider.setStyle = function (dom, prop, value) { + dom.style[iSlider.styleProp(prop, 1)] = value; + }; + + /** + * @param {String} prop + * @param {HTMLElement} dom + * @param {String} value + * @public + */ + iSlider.getStyle = function (dom, prop) { + return dom.style[iSlider.styleProp(prop, 1)]; + }; + + /** + * @type {Object} + * + * @param {HTMLElement} dom The wrapper
  • element + * @param {String} axis Animate direction + * @param {Number} scale Outer wrapper + * @param {Number} i Wrapper's index + * @param {Number} offset Move distance + * @protected + */ + iSlider._animateFuncs = { + normal: (function () { + function normal(dom, axis, scale, i, offset) { + iSlider.setStyle(dom, 'transform', 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)'); + } + + normal.effect = iSlider.styleProp('transform'); + return normal; + })() + }; + + /** + * This is a alias, conducive to compression + * @type {Object} + */ + var iSliderPrototype = iSlider.prototype; + + /** + * & iSlider.extend + * @public + */ + iSliderPrototype.extend = iSlider.extend; + + /** + * setting parameters for slider + * @private + */ + iSliderPrototype._setting = function () { + + var self = this; + + // -------------------------------- + // - Status + // -------------------------------- + + /** + * The plugins + * @type {Array|{}|*} + * @private + */ + self._plugins = iSlider.plugins; + + /** + * Extend animations + * @type {{default: Function}|*} + * @private + */ + self._animateFuncs = iSlider._animateFuncs; + + /** + * @type {Boolean} + * @private + */ + self._holding = false; + + /** + * @type {Boolean} + * @private + */ + self._locking = false; + + /** + * @type {Array} + * @private + */ + self._intermediateScene = null; + + /** + * @type {null} + * @private + */ + self._transitionEndHandler = null; + + /** + * listener + * @type {{autoPlay: null, resize: null, transitionEnd: null}} + * @private + */ + self._LSN = { + autoPlay: null, + resize: null, + transitionEnd: null + }; + + /** + * current scene element: this.els[1] + * @type {null} + * @public + */ + self.currentEl = null; + + /** + * Event handle + * @type {Object} + * @private + */ + self._EventHandle = {}; + + /** + * is on Moving + * @type {Boolean} + * @private + */ + self.onMoving = false; + + /** + * is on Sliding + * @type {Boolean} + * @private + */ + self.onSliding = false; + + /** + * animate direction + * @type {Number|null} + * @private + */ + self.direction = null; + + // -------------------------------- + // - Set options + // -------------------------------- + + var opts = this._opts; + + /** + * dom element wrapping content + * @type {HTMLElement} + * @public + */ + self.wrap = opts.dom; + + /** + * Data list + * @type {Array} + * @public + */ + self.data = opts.data; + + /** + * default slide direction + * @type {Boolean} + * @public + */ + self.isVertical = !!opts.isVertical; + + /** + * Overspread mode + * @type {Boolean} + * @public + */ + self.isOverspread = !!opts.isOverspread; + + /** + * Play time gap + * @type {Number} + * @public + */ + self.duration = opts.duration || 2000; + + /** + * start from initIndex or 0 + * @type {Number} + * @public + */ + self.initIndex = opts.initIndex > 0 && opts.initIndex <= opts.data.length - 1 ? opts.initIndex : 0; + + /** + * touchstart prevent default to fixPage + * @type {Boolean} + * @public + */ + self.fixPage = (function () { + var fp = opts.fixPage; + if (fp === false || fp === 0) { + return false; + } + if (isArray(fp) && fp.length > 0 || typeof fp === 'string' && fp !== '') { + return [].concat(fp).toString(); + } + return true; + })(); + + /** + * Fill seam when render + * Default is false + * @type {Boolean} + * @public + */ + self.fillSeam = !!opts.fillSeam; + + /** + * slideIndex + * @type {Number} + * @private + */ + self.slideIndex = self.slideIndex || self.initIndex || 0; + + /** + * Axis + * @type {String} + * @public + */ + self.axis = self.isVertical ? 'Y' : 'X'; + + /** + * reverseAxis + * @type {String} + * @private + */ + self.reverseAxis = self.axis === 'Y' ? 'X' : 'Y'; + + /** + * Wrapper width + * @type {Number} + * @private + */ + self.width = typeof opts.width === 'number' ? opts.width : self.wrap.offsetWidth; + + /** + * Wrapper height + * @type {Number} + * @private + */ + self.height = typeof opts.height === 'number' ? opts.height : self.wrap.offsetHeight; + + /** + * Ratio height:width + * @type {Number} + * @private + */ + self.ratio = self.height / self.width; + + /** + * Scale, size rule + * @type {Number} + * @private + */ + self.scale = self.isVertical ? self.height : self.width; + + /** + * On slide offset position + * @type {{X: number, Y: number}} + * @private + */ + self.offset = self.offset || {X: 0, Y: 0}; + + /** + * Enable/disable touch events + * @type {Boolean} + * @private + */ + self.isTouchable = opts.isTouchable == null ? true : !!opts.isTouchable; + + /** + * looping logic adjust + * @type {Boolean} + * @private + */ + self.isLooping = opts.isLooping && self.data.length > 1 ? true : false; + + /** + * Damping force + * Effect in non-looping mode + * Range 0 ~ 1 + * @type {Number} + * @private + */ + self.dampingForce = Math.max(0, Math.min(1, parseFloat(opts.dampingForce) || 0)); + + /** + * AutoPlay waitting milsecond to start + * @type {Number} + * @private + */ + self.delay = opts.delay || 0; + + /** + * autoplay logic adjust + * @type {Boolean} + * @private + */ + self.isAutoplay = opts.isAutoplay && self.data.length > 1 ? true : false; + + /** + * When autoplay is enabled. + * User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay. + * This configuration will attempt to restart autoplay after N milliseconds. + * ! AutoPlay will be forced to wake up, even when the user fill in a form item + * ! It will be blocked by "lock()" + * @type {number} + */ + self.wakeupAutoplayDazetime = opts.wakeupAutoplayDazetime > -1 ? parseInt(opts.wakeupAutoplayDazetime) : -1; + + /** + * Animate type + * @type {String} + * @private + */ + self.animateType = opts.animateType in self._animateFuncs ? opts.animateType : 'normal'; + + /** + * @protected + */ + self._animateFunc = self._animateFuncs[self.animateType]; + + /** + * @private + */ + self._animateReverse = (function () { + var _ = []; + for (var type in self._animateFuncs) { + if (self._animateFuncs.hasOwnProperty(type) && self._animateFuncs[type].reverse) { + _.push(type); + } + } + return _; + })(); + + // little trick set, when you chooce tear & vertical same time + // iSlider overspread mode will be set true autometicly + if (self.isVertical && self.animateType === 'card') { + self.isOverspread = true; + } + + /** + * Debug mode + * @type {Function} + * @private + */ + self.log = opts.isDebug ? function () { + global.console.log.apply(global.console, arguments); + } : noop; + + /** + * Enable damping when slider meet the edge + * @param distance + * @returns {*} + * @private + */ + self._damping = (function () { + return function (distance) { + return Math.atan(Math.abs(distance) / self.scale) * 0.62 * (1 - self.dampingForce) * self.scale * (distance > 0 ? 1 : -1); + } + })(); + + /** + * animate process time (ms), default: 300ms + * @type {Number} + * @public + */ + self.animateTime = opts.animateTime != null && opts.animateTime > -1 ? opts.animateTime : 300; + + /** + * animate effects, default: ease + * @type {String} + * @public + */ + self.animateEasing = + inArray(opts.animateEasing, iSlider.EASING[0]) + || iSlider.EASING[1].test(opts.animateEasing) + ? opts.animateEasing + : 'ease'; + + /** + * Fix touch/mouse events + * @type {{hasTouch, startEvt, moveEvt, endEvt}} + * @private + */ + self.deviceEvents = iSlider.DEVICE_EVENTS; + + /** + * Finger recognition range, prevent inadvertently touch + * @type {Number} + * @private + */ + self.fingerRecognitionRange = opts.fingerRecognitionRange > -1 ? parseInt(opts.fingerRecognitionRange) : 10; + + /** + * Init events + * @type {{}} + * @private + */ + self.events = {}; + + // -------------------------------- + // - Register events + // -------------------------------- + + iSlider.EVENTS.forEach(function (eventName) { + // TODO callback name of All-Lower-Case will be discarded + var fn = opts['on' + eventName.replace(/^\w{1}/, function (m) { + return m.toUpperCase(); + })] || opts['on' + eventName.toLowerCase()]; + typeof fn === 'function' && self.on(eventName, fn, 1); + }); + + // -------------------------------- + // - Plugins + // -------------------------------- + + /** + * @type {Object} + * @private + */ + self.pluginConfig = (function () { + var config = {}; + if (isArray(opts.plugins)) { + opts.plugins.forEach(function pluginConfigEach(plugin) { + if (isArray(plugin)) { + config[plugin[0]] = plugin.slice(1); + } else if (typeof plugin === 'string') { + config[plugin] = []; + } + }); + } + return config; + })(); + }; + + /** + * Init plugins + * @private + */ + iSliderPrototype._initPlugins = function () { + var config = this.pluginConfig; + var plugins = this._plugins; + for (var i in config) { + if (config.hasOwnProperty(i) && plugins.hasOwnProperty(i)) { + this.log('[INIT PLUGIN]:', i, plugins[i]); + plugins[i] + && typeof plugins[i] === 'function' + && typeof plugins[i].apply + && plugins[i].apply(this, config[i]); + } + } + this.fire('pluginInitialized'); + }; + + /** + * Get item type + * @param {Number} index + * @returns {String} + * @private + */ + iSliderPrototype._itemType = function (item) { + if (!isNaN(item)) { + item = this.data[item]; + } + if (item.hasOwnProperty('type')) { + return item.type; + } + var content = item.content; + var _NT = iSlider.NODE_TYPE; + var type; + if (content == null) { + type = _NT.empty; + } else { + if (Boolean(content.nodeName) && Boolean(content.nodeType)) { + type = _NT.node; + } else if (typeof content === 'string') { + if (isUrl(content)) { + type = _NT.pic; + } else { + type = _NT.html; + } + } else { + type = _NT.unknown; + } + } + + item.type = type; + + return type; + }; + + /** + * render single item html by idx + * @param {HTMLElement} el .. + * @param {Number} dataIndex .. + * @private + */ + iSliderPrototype._renderItem = function (el, dataIndex) { + + var item, + self = this, + len = this.data.length; + + var insertImg = function renderItemInsertImg() { + var simg = ' src="' + item.content + '"'; + // auto scale to full screen + if (item.height / item.width > self.ratio) { + simg += ' height="100%"'; + } else { + simg += ' width="100%"'; + } + if (self.isOverspread) { + el.style.cssText += 'background-image:url(' + item.content + ');background-repeat:no-repeat;background-position:50% 50%;background-size:cover'; + simg += ' style="display:block;opacity:0;height:100%;width:100%;"'; + } + // for right button, save picture + el.innerHTML = ''; + }; + + // clean scene + el.innerHTML = ''; + el.style.background = ''; + + // get the right item of data + if (!this.isLooping && this.data[dataIndex] == null) { + // Stop slide when item is empty + return; + } + else { + dataIndex = (len /* * Math.ceil(Math.abs(dataIndex / len))*/ + dataIndex) % len; + item = this.data[dataIndex]; + } + + var type = this._itemType(item); + var _NT = iSlider.NODE_TYPE; + + this.log('[RENDER]:', type, dataIndex, item); + + addClass(el, 'islider-' + type); + + switch (type) { + case _NT.pic: + if (item.load === 2) { + insertImg(); + } + else { + var currentImg = new Image(); + currentImg.src = item.content; + currentImg.onload = function () { + item.height = currentImg.height; + item.width = currentImg.width; + insertImg(); + item.load = 2; + }; + } + break; + case _NT.dom: + case _NT.html: + el.innerHTML = item.content; + break; + case _NT.node: + case _NT.element: + // fragment, create container + if (item.content.nodeType === 11) { + var entity = document.createElement('div'); + entity.appendChild(item.content); + item.content = entity; + } + el.appendChild(item.content); + break; + default: + // do nothing + break; + } + }; + + /** + * Postponing the intermediate scene rendering + * until the target scene is completely rendered (render in event slideChanged) + * to avoid a jumpy feel when switching between scenes + * given that the distance of sliding is more than 1. + * e.g. ```this.slideTo(>+-1)``` + * + * @private + */ + iSliderPrototype._renderIntermediateScene = function () { + if (this._intermediateScene != null) { + this._renderItem.apply(this, this._intermediateScene); + this._intermediateScene = null; + } + }; + + /** + * Apply styles on changed + * @private + */ + iSliderPrototype._changedStyles = function () { + var slideStyles = ['islider-prev', 'islider-active', 'islider-next']; + this.els.forEach(function changeStypeEach(el, index) { + removeClass(el, slideStyles.join('|')); + addClass(el, slideStyles[index]); + this.fillSeam && this.originScale(el); + }.bind(this)); + }; + + /** + * render list html + * @private + */ + iSliderPrototype._renderWrapper = function () { + //this.wrap.style.overflow = 'hidden'; + // initail outer element + var outer; + if (this.outer) { + outer = this.outer; + outer.innerHTML = ''; + } else { + outer = document.createElement('ul'); + } + outer.className = 'islider-outer'; + + //outer.style.overflow = 'hidden'; + // no need... + // outer.style.cssText += 'width:' + this.width + 'px;height:' + this.height + 'px'; + + // storage li elements, only store 3 elements to reduce memory usage + /** + * Slider elements x3 + * @type {Array} + * @public + */ + this.els = []; + + for (var i = 0; i < 3; i++) { + var li = document.createElement('li'); + outer.appendChild(li); + this.els.push(li); + + // prepare style animation + this._animateFunc(li, this.axis, this.scale, i, 0); + + // auto overflow in none fixPage mode + if (!this.fixPage) { + li.style.overflow = 'auto'; + } + + this.isVertical && (this.animateType === 'rotate' || this.animateType === 'flip') + ? this._renderItem(li, 1 - i + this.slideIndex) + : this._renderItem(li, i - 1 + this.slideIndex); + } + + this._changedStyles(); + + if (this.fillSeam) { + this.els.forEach(function (el, i) { + addClass(el, 'islider-sliding' + (i === 1 ? '-focus' : '')); + }); + } + + // Preload picture [ may be pic :) ] + global.setTimeout(function () { + this._preloadImg(this.slideIndex); + }.bind(this), 200); + + // append ul to div#canvas + if (!this.outer) { + /** + * @type {HTMLElement} + * @public + */ + this.outer = outer; + this.wrap.appendChild(outer); + } + + this.currentEl = this.els[1]; + + this.fire('renderComplete', this.slideIndex, this.currentEl, this); + }; + + /** + * Preload img when slideChange + * From current index +2, -2 scene + * @param {Number} dataIndex means which image will be load + * @private + */ + iSliderPrototype._preloadImg = function (dataIndex) { + if (this.data.length > 3) { + var data = this.data; + var len = data.length; + var self = this; + var loadImg = function preloadImgLoadingProcess(index) { + var item = data[index]; + if (self._itemType(item) === 'pic' && !item.load) { + var preloadImg = new Image(); + preloadImg.src = item.content; + preloadImg.onload = function () { + item.width = preloadImg.width; + item.height = preloadImg.height; + item.load = 2; + }; + item.load = 1; + } + }; + + loadImg((dataIndex + 2) % len); + loadImg((dataIndex - 2 + len) % len); + } + }; + + /** + * watch transition end + * @private + */ + iSliderPrototype._watchTransitionEnd = function (squeezeTime, eventType) { + var cb = function () { + this._unWatchTransitionEnd(); + if (eventType === 'slideChanged') { + this._changedStyles(); + } + this.fire.call(this, eventType, this.slideIndex, this.currentEl, this); + this._renderIntermediateScene(); + this.play(); + this.onSliding = false; + this.direction = null; + }.bind(this); + + if (iSlider.TRANSITION_END_EVENT) { + this.currentEl.addEventListener(iSlider.TRANSITION_END_EVENT, cb); + // keep handler and element + this._transitionEndHandler = {el: this.currentEl, handler: cb}; + } + this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime); + }; + + /** + * unwatch transition end + * @private + */ + iSliderPrototype._unWatchTransitionEnd = function () { + if (this._LSN.transitionEnd) { + global.clearTimeout(this._LSN.transitionEnd); + } + if (this._transitionEndHandler !== null) { + this._transitionEndHandler.el.removeEventListener(iSlider.TRANSITION_END_EVENT, this._transitionEndHandler.handler); + this._transitionEndHandler = null; + } + + //this.onSliding = false; + }; + + /** + * bind all event handler, when on PC, disable drag event + * @private + */ + iSliderPrototype._bindHandler = function () { + var outer = this.outer; + var device = this.deviceEvents; + + if (this.isTouchable) { + if (!device.hasTouch) { + outer.style.cursor = 'pointer'; + // disable drag + outer.ondragstart = function (evt) { + if (evt) { + return false; + } + return true; + }; + } + outer.addEventListener(device.startEvt, this); + outer.addEventListener(device.moveEvt, this); + outer.addEventListener(device.endEvt, this); + + // Viscous drag adaptation + !device.hasTouch && outer.addEventListener('mouseout', this); + } + + global.addEventListener(device.resizeEvt, this); + + // Fix android device + global.addEventListener('focus', this, false); + global.addEventListener('blur', this, false); + }; + + /** + * Uniformity admin event + * Event router + * @param {Object} evt event object + * @protected + */ + iSliderPrototype.handleEvent = function (evt) { + var device = this.deviceEvents; + switch (evt.type) { + case 'mousedown': + // block mouse buttons except left + if (evt.button !== 0) break; + case 'touchstart': + this.startHandler(evt); + break; + case device.moveEvt: + this.moveHandler(evt); + break; + case device.endEvt: + case device.cancelEvt: // mouseout, touchcancel event, trigger endEvent + this.endHandler(evt); + break; + case device.resizeEvt: + this.resizeHandler(); + break; + case 'focus': + this.play(); + break; + case 'blur': + this.pause(); + this._tryToWakeupAutoplay(); + break; + } + }; + + /** + * touchstart callback + * @param {Object} evt event object + * @public + */ + iSliderPrototype.startHandler = function (evt) { + if (this.fixPage && iSlider.FIX_PAGE_TAGS.indexOf(evt.target.tagName.toUpperCase()) < 0 && !this._isItself(evt.target)) { + evt.preventDefault(); + } + if (this._holding || this._locking) { + return; + } + var device = this.deviceEvents; + this.onMoving = true; + this.pause(); + + this.log('[EVENT]: start'); + this.fire('slideStart', evt, this); + + /** + * @type {Number} + * @private + */ + this.startTime = new Date().getTime(); + + /** + * @type {Number} + * @private + */ + this.startX = device.hasTouch ? evt.targetTouches[0].pageX : evt.pageX; + + /** + * @type {Number} + * @private + */ + this.startY = device.hasTouch ? evt.targetTouches[0].pageY : evt.pageY; + }; + + /** + * touchmove callback + * @param {Object} evt event object + * @public + */ + iSliderPrototype.moveHandler = function (evt) { + if (!this.onMoving) { + return; + } + this.log('[EVENT]: moving'); + var device = this.deviceEvents; + var len = this.data.length; + var axis = this.axis; + var reverseAxis = this.reverseAxis; + var offset = {}; + + if (evt.hasOwnProperty('offsetRatio')) { + offset[axis] = evt.offsetRatio * this.scale; + offset[reverseAxis] = 0; + } else { + offset.X = device.hasTouch ? (evt.targetTouches[0].pageX - this.startX) : (evt.pageX - this.startX); + offset.Y = device.hasTouch ? (evt.targetTouches[0].pageY - this.startY) : (evt.pageY - this.startY); + } + + this.offset = offset; + evt.offsetRatio = offset[axis] / this.scale; + + if (Math.abs(offset[axis]) - Math.abs(offset[reverseAxis]) > 10) { + + evt.preventDefault(); + this._unWatchTransitionEnd(); + + if (!this.isLooping) { + if (offset[axis] > 0 && this.slideIndex === 0 || offset[axis] < 0 && this.slideIndex === len - 1) { + offset[axis] = this._damping(offset[axis]); + } + } + + this.els.forEach(function (item, i) { + item.style.visibility = 'visible'; + iSlider.setStyle(item, 'transition', 'none'); + this._animateFunc(item, axis, this.scale, i, offset[axis], offset[axis]); + this.fillSeam && this.seamScale(item); + }.bind(this)); + + this.fire('slide', evt, this); + } + }; + + /** + * touchend callback + * @param {Object} evt event object + * @public + */ + iSliderPrototype.endHandler = function (evt) { + if (!this.onMoving) { + return; + } + this.log('[EVENT]: end'); + this.onMoving = false; + var offset = this.offset; + var axis = this.axis; + var boundary = this.scale / 2; + var endTime = new Date().getTime(); + var FRR = this.fingerRecognitionRange; + + // a quick slide time must under 300ms + // a quick slide should also slide at least 14 px + boundary = endTime - this.startTime > 300 ? boundary : 14; + + var absOffset = Math.abs(offset[axis]); + var absReverseOffset = Math.abs(offset[this.reverseAxis]); + + function dispatchLink(el) { + if (el != null) { + if (el.tagName === 'A') { + if (el.href) { + if (el.getAttribute('target') === '_blank') { + global.open(el.href); + } else { + global.location.href = el.href; + } + evt.preventDefault(); + return false; + } + } + else if (el.tagName === 'LI' && el.className.search(/^islider\-/) > -1) { + return false; + } + else { + dispatchLink(el.parentNode); + } + } + } + + this.fire('slideEnd', evt, this); + + if (offset[axis] >= boundary && absReverseOffset < absOffset) { + this.slideTo(this.slideIndex - 1); + } + else if (offset[axis] < -boundary && absReverseOffset < absOffset) { + this.slideTo(this.slideIndex + 1); + } + else { + if (Math.abs(this.offset[axis]) >= FRR) { + this.slideTo(this.slideIndex); + } + } + + // create sim tap event if offset < this.fingerRecognitionRange + if (Math.abs(this.offset[axis]) < FRR && this.fixPage && evt.target) { + dispatchLink(evt.target); + } + + this.offset.X = this.offset.Y = 0; + + this._tryToWakeupAutoplay(); + }; + + /** + * resize callback + * @public + */ + iSliderPrototype.resizeHandler = function () { + var _L = this._LSN.resize; + var startTime = +new Date, _W, _H; + + if (this.deviceEvents.hasTouch) { + // Fuck Android + _L && global.clearInterval(_L); + _L = global.setInterval(function () { + if (this.height !== this.wrap.offsetHeight || this.width !== this.wrap.offsetWidth) { + _L && global.clearInterval(_L); + _L = global.setInterval(function () { + if (_W === this.wrap.offsetWidth && _H === this.wrap.offsetHeight) { + _L && global.clearInterval(_L); + this.reset(); + this.log('[EVENT]: resize'); + } else { + _W = this.wrap.offsetWidth, _H = this.wrap.offsetHeight; + } + }.bind(this), 12); + } else { + if (+new Date - startTime >= 1000) { + _L && global.clearInterval(_L); + } + } + }.bind(this), 12); + } else { + _L && global.clearTimeout(_L); + _L = global.setTimeout(function () { + if (this.height !== this.wrap.offsetHeight || this.width !== this.wrap.offsetWidth) { + _L && global.clearInterval(_L); + this.reset(); + this.log('[EVENT]: resize'); + } + }.bind(this), 200); + } + }; + + /** + * slide logical, goto data index + * @param {Number} dataIndex the goto index + * @public + */ + iSliderPrototype.slideTo = function (dataIndex, opts) { + // stop auto play + if (this.isAutoplay) { + this.pause(); + } + if (this._locking) { + return; + } + this.unhold(); + this.onSliding = true; + var animateTime = this.animateTime; + var animateType = this.animateType; + var animateFunc = this._animateFunc; + var data = this.data; + var els = this.els; + var axis = this.axis; + var idx = dataIndex; + var n = dataIndex - this.slideIndex; + var offset = this.offset; + var eventType; + var squeezeTime = 0; + + if (typeof opts === 'object') { + if (opts.animateTime > -1) { + animateTime = opts.animateTime; + } + if (typeof opts.animateType === 'string' && opts.animateType in this._animateFuncs) { + animateType = opts.animateType; + animateFunc = this._animateFuncs[animateType]; + } + } + + // In the slide process, animate time is squeezed + if (offset[axis] !== 0) { + squeezeTime = Math.abs(offset[axis]) / this.scale * animateTime; + } + + if (Math.abs(n) > 1) { + this._renderItem(n > 0 ? this.els[2] : this.els[0], idx); + } + + // preload when slide + this._preloadImg(idx); + + // get right item of data + if (data[idx]) { + this.slideIndex = idx; + } + else { + if (this.isLooping) { + this.slideIndex = n > 0 ? 0 : data.length - 1; + } + else { + n = 0; + } + } + + this.log('[SLIDE TO]: ' + this.slideIndex); + + // keep the right order of items + var headEl, tailEl, direction; + + // slidechange should render new item + // and change new item style to fit animation + if (n === 0) { + // Restore to current scene + eventType = 'slideRestore'; + } else { + + if ((this.isVertical && (inArray(animateType, this._animateReverse))) ^ (n > 0)) { + els.push(els.shift()); + headEl = els[2]; + tailEl = els[0]; + direction = 1; + } else { + els.unshift(els.pop()); + headEl = els[0]; + tailEl = els[2]; + direction = -1; + } + + this.currentEl = els[1]; + + if (Math.abs(n) === 1) { + this._renderIntermediateScene(); + this._renderItem(headEl, idx + n); + } else if (Math.abs(n) > 1) { + if ((this.isVertical && (inArray(animateType, this._animateReverse)))) { + this._renderItem(tailEl, idx + direction); + this._renderItem(els[1], idx); + this._intermediateScene = [headEl, idx - direction]; + } + else { + this._renderItem(headEl, idx + direction); + this._intermediateScene = [tailEl, idx - direction]; + } + } + + iSlider.setStyle(headEl, 'transition', 'none'); + + // Minus squeeze time + squeezeTime = animateTime - squeezeTime; + + eventType = 'slideChange'; + + // For seams + if (this.fillSeam) { + els.forEach(function (el) { + removeClass(el, 'islider-sliding|islider-sliding-focus'); + }); + addClass(this.currentEl, 'islider-sliding-focus'); + addClass(headEl, 'islider-sliding'); + } + + this.direction = direction; + } + + // do the trick animation + for (var i = 0; i < 3; i++) { + if (els[i] !== headEl) { + // Only applies their effects + iSlider.setStyle(els[i], 'transition', (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing); + } + animateFunc.call(this, els[i], axis, this.scale, i, 0, direction); + this.fillSeam && this.seamScale(els[i]); + } + + this._watchTransitionEnd(squeezeTime, eventType + 'd'); + this.fire(eventType, this.slideIndex, this.currentEl, this); + }; + + /** + * Slide to next scene + * @public + */ + iSliderPrototype.slideNext = function () { + this.slideTo.apply(this, [this.slideIndex + 1].concat(_A(arguments))); + }; + + /** + * Slide to previous scene + * @public + */ + iSliderPrototype.slidePrev = function () { + this.slideTo.apply(this, [this.slideIndex - 1].concat(_A(arguments))); + }; + + /** + * Register plugin (run time mode) + * @param {String} name + * @param {Function} plugin + * @param {...} + * @public + */ + iSliderPrototype.regPlugin = function () { + var args = _A(arguments); + var name = args.shift(), + plugin = args[0]; + + if (!this._plugins.hasOwnProperty(name) && typeof plugin !== 'function') { + return; + } + if (typeof plugin === 'function') { + this._plugins[name] = plugin; + args.shift(); + } + + // Auto enable and init plugin when at run time + if (!inArray(name, this._opts.plugins)) { + this._opts.plugins.push(args.length ? [].concat([name], args) : name); + typeof this._plugins[name] === 'function' && this._plugins[name].apply(this, args); + } + }; + + /** + * simple event delegate method + * + * @param {String} evtType event name + * @param {String} selector the simple css selector like jQuery + * @param {Function} callback event callback + * @public + * + * @alias iSliderPrototype.bind + */ + iSliderPrototype.bind = iSliderPrototype.delegate = function (evtType, selector, callback) { + + function delegatedEventCallbackHandle(e) { + var evt = global.event ? global.event : e; + var target = evt.target; + var eleArr = document.querySelectorAll(selector); + for (var i = 0; i < eleArr.length; i++) { + if (target === eleArr[i]) { + callback.call(target); + break; + } + } + } + + this.wrap.addEventListener(evtType, delegatedEventCallbackHandle, false); + + var key = evtType + ';' + selector; + if (!this._EventHandle.hasOwnProperty(key)) { + this._EventHandle[key] = [ + [callback], + [delegatedEventCallbackHandle] + ]; + } else { + this._EventHandle[key][0].push(callback); + this._EventHandle[key][1].push(delegatedEventCallbackHandle); + } + }; + + /** + * remove event delegate from wrap + * + * @param {String} evtType event name + * @param {String} selector the simple css selector like jQuery + * @param {Function} callback event callback + * @public + * + * @alias iSliderPrototype.unbind + */ + iSliderPrototype.unbind = iSliderPrototype.unDelegate = function (evtType, selector, callback) { + var key = evtType + ';' + selector; + if (this._EventHandle.hasOwnProperty(key)) { + var i = this._EventHandle[key][0].indexOf(callback); + if (i > -1) { + this.wrap.removeEventListener(evtType, this._EventHandle[key][1][i]); + this._EventHandle[key][0][i] = this._EventHandle[key][1][i] = null; + // delete this._EventHandle[key][0][i]; + // delete this._EventHandle[key][1][i]; + return true; + } + } + + return false; + }; + + /** + * removeEventListener to release the memory + * @public + */ + iSliderPrototype.destroy = function () { + var outer = this.outer; + var device = this.deviceEvents; + + this.fire('destroy'); + + // Clear events + if (this.isTouchable) { + outer.removeEventListener(device.startEvt, this); + outer.removeEventListener(device.moveEvt, this); + outer.removeEventListener(device.endEvt, this); + + // Viscous drag unbind + !device.hasTouch && outer.removeEventListener('mouseout', this); + } + global.removeEventListener(device.resizeEvt, this); + global.removeEventListener('focus', this); + global.removeEventListener('blur', this); + + var n; + + // Clear delegate events + for (n in this._EventHandle) { + var handList = this._EventHandle[n][1]; + for (var i = 0; i < handList.length; i++) { + if (typeof handList[i] === 'function') { + this.wrap.removeEventListener(n.substr(0, n.indexOf(';')), handList[i]); + } + } + } + this._EventHandle = null; + + // Clear timer + for (n in this._LSN) { + this._LSN.hasOwnProperty(n) && this._LSN[n] && global.clearTimeout(this._LSN[n]); + } + + this._LSN = null; + + this.wrap.innerHTML = ''; + }; + + /** + * Register event callback + * @param {String} eventName + * @param {Function} func + * @returns {Object} return this instance of iSlider + * @public + */ + iSliderPrototype.on = function (eventName, func, force) { + if (inArray(eventName, iSlider.EVENTS) && typeof func === 'function') { + !(eventName in this.events) && (this.events[eventName] = []); + if (!force) { + this.events[eventName].push(func); + } else { + this.events[eventName].unshift(func); + } + } + return this; + }; + + /** + * Find callback function position + * @param {String} eventName + * @param {Function} func + * @returns {Boolean} + * @public + */ + iSliderPrototype.has = function (eventName, func) { + if (eventName in this.events) { + return -1 < this.events[eventName].indexOf(func); + } + return false; + }; + + /** + * Remove event callback + * @param {String} eventName + * @param {Function} func + * @public + */ + iSliderPrototype.off = function (eventName, func) { + if (eventName in this.events) { + var index = this.events[eventName].indexOf(func); + if (index > -1) { + delete this.events[eventName][index]; + } + } + }; + + /** + * Trigger event callbacks + * @param {String} eventName + * @param {*} args + * @public + */ + iSliderPrototype.fire = function (eventNames) { + var args = _A(arguments, 1); + eventNames.split(/\x20+/).forEach(function (eventName) { + this.log('[EVENT FIRE]:', eventName, args); + if (eventName in this.events) { + var funcs = this.events[eventName]; + for (var i = 0; i < funcs.length; i++) { + typeof funcs[i] === 'function' + && funcs[i].apply + && funcs[i].apply(this, args); + } + } + }.bind(this)); + }; + + /** + * reset & rerender + * @public + */ + iSliderPrototype.reset = function () { + this.pause(); + this._unWatchTransitionEnd(); + //this._setting(); + this.width = typeof this._opts.width === 'number' ? this._opts.width : this.wrap.offsetWidth; + this.height = typeof this._opts.height === 'number' ? this._opts.height : this.wrap.offsetHeight; + this.ratio = this.height / this.width; + this.scale = this.isVertical ? this.height : this.width; + this._renderWrapper(); + this._autoPlay(); + this.fire('reset slideRestored', this.slideIndex, this.currentEl, this); + }; + + /** + * Reload Data & render + * + * @param {Array} data + * @param {Number} initIndex + * @public + */ + iSliderPrototype.loadData = function (data, initIndex) { + this.pause(); + this._unWatchTransitionEnd(); + this.slideIndex = initIndex || 0; + this.data = data; + this._renderWrapper(); + this._autoPlay(); + this.fire('loadData slideChanged', this.slideIndex, this.currentEl, this); + }; + + /** + * Add scenes to the end of the data datasheets + * + * @param {Object|Array} sceneData + * @description + * Object: + * {content:...} + * Array: + * [{content:...}, {content:...}, ...] + */ + iSliderPrototype.pushData = function (sceneData) { + if (sceneData == null) { + return; + } + var len = this.data.length; + this.data = this.data.concat(sceneData); + if (this.isLooping && this.slideIndex === 0) { + this._renderItem(this.els[0], this.data.length - 1); + } else if (len - 1 === this.slideIndex) { + this._renderItem(this.els[2], len); + this._autoPlay(); // restart + } + }; + + /** + * Add scenes to the head of the data datasheets + * + * @param {Object|Array} sceneData + * @description + * Object: + * {content:...} + * Array: + * [{content:...}, {content:...}, ...] + */ + iSliderPrototype.unshiftData = function (sceneData) { + if (sceneData == null) { + return; + } + + if (!isArray(sceneData)) { + sceneData = [sceneData]; + } + + var n = sceneData.length; + this.data = sceneData.concat(this.data); + + if (this.slideIndex === 0) { + this._renderItem(this.els[0], n - 1); + } + this.slideIndex += n; + }; + + /** + * auto check to play and bind events + * @private + */ + iSliderPrototype._autoPlay = function () { + this.delay > 0 ? global.setTimeout(this.play.bind(this), this.delay) : this.play(); + }; + + /** + * try to restart autoplay + * @private + */ + iSliderPrototype._tryToWakeupAutoplay = function () { + if (~this.wakeupAutoplayDazetime) { + this.wakeupAutoplayDazetime > 0 ? global.setTimeout(this.play.bind(this), this.wakeupAutoplayDazetime) : this.play(); + } + }; + + /** + * Start autoplay + * @public + */ + iSliderPrototype.play = function () { + this.pause(); + // If not looping, stop playing when meet the end of data + if (this.isAutoplay && (this.isLooping || this.slideIndex < this.data.length - 1)) { + this._LSN.autoPlay = global.setTimeout(this.slideNext.bind(this), this.duration); + } + }; + + /** + * pause autoplay + * @public + */ + iSliderPrototype.pause = function () { + this._LSN.autoPlay && global.clearTimeout(this._LSN.autoPlay); + }; + + /** + * Maintaining the current scene + * Disable touch events, except for the native method. + * @public + */ + iSliderPrototype.hold = function () { + this._holding = true; + }; + + /** + * Release current scene + * unlock at same time + * @public + */ + iSliderPrototype.unhold = function () { + this._holding = false; + this.unlock(); + }; + + /** + * You can't do anything on this scene + * lock native method calls + * hold at same time + * @public + */ + iSliderPrototype.lock = function () { + this.hold(); + this._locking = true; + }; + + /** + * unlock native method calls + * @public + */ + iSliderPrototype.unlock = function () { + this._locking = false; + }; + + /** + * Fill the seam + * @param {HTMLElement} el + * @private + */ + iSliderPrototype.seamScale = function (el) { + var regex = /scale([XY]?)\(([^\)]+)\)/; + var transformStyle = iSlider.getStyle(el, 'transform'); + if (regex.test(transformStyle)) { + iSlider.setStyle(el, 'transform', transformStyle.replace(regex, function (res, axis, scale) { + var sc = {}; + if (axis) { + sc[axis] = parseFloat(scale); + return 'scale' + this.axis + '(' + (axis === this.axis ? 1.001 * sc[this.axis] : 1.001) + ')'; + } else { + if (scale.indexOf(',') > -1) { + scale = scale.split(','); + sc.X = parseFloat(scale[0]); + sc.Y = parseFloat(scale[1]); + } else { + sc.Y = sc.X = parseFloat(scale); + } + sc[this.axis] *= 1.001; + return 'scale(' + sc.X + ', ' + sc.Y + ')'; + } + }.bind(this))); + } else { + iSlider.setStyle(el, 'transform', transformStyle + ' scale' + this.axis + '(1.001)'); + } + }; + + /** + * @param {HTMLElement} el + * @private + */ + iSliderPrototype.originScale = function (el) { + var regex = /([\x20]?scale)([XY]?)\(([^\)]+)\)/; + iSlider.setStyle(el, 'transform', iSlider.getStyle(el, 'transform').replace(regex, function (sc, res, axis, scale) { + sc = {}; + if (axis) { + if (scale === '1.001') { + return ''; + } else { + sc[axis] = parseFloat(scale); + return 'scale' + this.axis + '(' + (axis === this.axis ? sc[this.axis] / 1.001 : 1) + ')'; + } + } else { + if (scale.indexOf(',') > -1) { + scale = scale.split(','); + sc.X = parseFloat(scale[0]); + sc.Y = parseFloat(scale[1]); + } else { + sc.Y = sc.X = parseFloat(scale); + } + sc[this.axis] /= 1.001; + return 'scale(' + sc.X + ', ' + sc.Y + ')'; + } + }.bind(this))); + }; + + + /** + * Whether this node in rule + * + * @param {HTMLElement} target + * @param {Array} rule + * @returns {boolean} + */ + iSliderPrototype._isItself = function (target) { + var rule = this.fixPage; + if (typeof rule === 'string') { + //get dom path + var path = [], parent = target, selector; + while (!hasClass(parent, 'islider-outer') && parent !== this.wrap) { + path.push(parent); + parent = parent.parentNode; + } + parent = path.pop(); + + if (path.length) { + try { + selector = Array.prototype.slice.call(parent.querySelectorAll(rule)); + if (selector.length) { + for (var i = 0; i < path.length; i++) { + if (selector.indexOf(path[i]) > -1) { + return true; + } + } + } + } catch (e) { + return false; + } + } + } + return false; + } + + /** + * Let target islider controls this one + * + * @param {iSlider} target + * @param {Object} how + * @public + */ + iSliderPrototype.subjectTo = function (target, how) { + if (!target instanceof iSlider) { + return; + } + + var self = this; + + self.animateTime = target.animateTime; + self.isLooping = target.isLooping; + self.isAutoplay = false; + + target.on('slideStart', function (evt) { + self.startHandler(evt); + }); + + target.on('slide', function (evt) { + self.moveHandler(evt); + }); + + target.on('slideEnd', function (evt) { + self.endHandler(evt); + }); + + target.on('slideChange', function (i) { + var l = self.data.length; + var d = self.direction; + if (d > 0 && (i - self.slideIndex + l) % l === 1) { + self.slideNext(); + } else if (d < 0 && (i - self.slideIndex - l) % l === -1) { + self.slidePrev(); + } + }); + + target.on('slideRestore', function (i) { + if (self.slideIndex !== i) { + self.slideTo(i); + } + }); + }; + + /* CommonJS */ + if ("function" === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) + module.exports = iSlider; + /* AMD */ + else if ("function" === 'function' && __webpack_require__(7)['amd']) + !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { + return iSlider; + }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + /* Global */ + else + global['iSlider'] = global['iSlider'] || iSlider; + + })(window || this); + + /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)(module))) + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = function(module) { + if(!module.webpackPolyfill) { + module.deprecate = function() {}; + module.paths = []; + // module.parent = undefined by default + module.children = []; + module.webpackPolyfill = 1; + } + return module; + } + + +/***/ }, +/* 7 */ +/***/ function(module, exports) { + + module.exports = function() { throw new Error("define cannot be used indirect"); }; + + +/***/ }, +/* 8 */ +/***/ function(module, exports, __webpack_require__) { + + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {/** + * More animations + * @file animate.js + * @author BE-FE Team + * xieyu33333 xieyu33333@gmail.com + * shinate shine.wangrs@gmail.com + */ + + (function (global, factory) { + /* CommonJS */ + if ("function" === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports) + factory(__webpack_require__(5)); + /* AMD */ + else if ("function" === 'function' && __webpack_require__(7)['amd']) + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(5)], __WEBPACK_AMD_DEFINE_RESULT__ = function (iSlider) { + factory(iSlider); + }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + /* Global */ + else + factory(global['iSlider']); + + })(window ? window : this, function (iSlider) { + + 'use strict'; + + iSlider && iSlider.extend(iSlider._animateFuncs, { + // rotate + rotate: (function () { + function rotate(dom, axis, scale, i, offset, direct) { + var rotateDirect = (axis === 'X') ? 'Y' : 'X'; + + if (this.isVertical) { + offset = -offset; + if (Math.abs(direct) > 1) { + direct = -direct; + } + } + + var outer = dom.parentElement; + iSlider.setStyle(outer, 'perspective', scale * 4); + + dom.style.visibility = 'visible'; + if (direct > 0 && i === 2) { + dom.style.visibility = 'hidden'; + } + if (direct < 0 && i === 0) { + dom.style.visibility = 'hidden'; + } + dom.style.zIndex = i === 1 ? 1 : 0; + + dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;'; + + // TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective + iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)'); + } + + rotate.effect = iSlider.styleProp('transform'); + rotate.reverse = true; + return rotate; + })(), + // flip + flip: (function () { + function flip(dom, axis, scale, i, offset, direct) { + if (this.isVertical) { + offset = -offset; + } + + var outer = dom.parentElement; + iSlider.setStyle(outer, 'perspective', scale * 4); + + dom.style.visibility = 'visible'; + if (direct > 0 && i === 2) { + dom.style.visibility = 'hidden'; + } + if (direct < 0 && i === 0) { + dom.style.visibility = 'hidden'; + } + + dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden'; + iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)'); + } + + flip.effect = iSlider.styleProp('transform'); + flip.reverse = true; + return flip; + })(), + depth: (function () { + + function depth(dom, axis, scale, i, offset, direct) { + var zoomScale = (4 - Math.abs(i - 1)) * 0.18; + var outer = dom.parentElement; + iSlider.setStyle(outer, 'perspective', scale * 4); + dom.style.zIndex = i === 1 ? 1 : 0; + iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)'); + } + + depth.effect = iSlider.styleProp('transform'); + return depth; + })(), + flow: (function () { + function flow(dom, axis, scale, i, offset, direct) { + var absoluteOffset = Math.abs(offset); + var rotateDirect = (axis === 'X') ? 'Y' : 'X'; + var directAmend = (axis === 'X') ? 1 : -1; + var offsetRatio = Math.abs(offset / scale); + var outer = dom.parentElement; + + iSlider.setStyle(outer, 'perspective', scale * 4); + + if (i === 1) { + dom.style.zIndex = scale - absoluteOffset; + } + else { + dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset; + } + + iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)'); + } + + flow.effect = iSlider.styleProp('transform'); + return flow; + })(), + card: (function () { + function card(dom, axis, scale, i, offset, direct) { + var absoluteOffset = Math.abs(offset); + var zoomScale = 1; + var z = 1; + + if (absoluteOffset > 0) { + if (i === 1) { + zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6); + z = 0; + } + } else { + if (i !== 1) { + if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) { + zoomScale = 1 - 0.2 * Math.abs(i - 1); + } + z = 0; + } + } + dom.style.zIndex = z; + iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)'); + } + + card.effect = iSlider.styleProp('transform'); + return card; + })(), + fade: (function () { + function fade(dom, axis, scale, i, offset, direct) { + dom.style.zIndex = i === 1 ? 1 : 0; + offset = Math.abs(offset); + if (i === 1) { + dom.style.opacity = 1 - (offset / scale); + } else { + dom.style.opacity = offset / scale; + } + } + + fade.effect = 'opacity'; + return fade; + })(), + zoomout: (function () { + var lsn; + + function zoomout(dom, axis, scale, i, offset) { + var z, o, s; + + var oa = offset / scale; + switch (i) { + case 0: + lsn && window.clearTimeout(lsn); + o = oa < 1 ? oa : 1; + s = 2 - (0.5 * oa); + z = 2; + var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000; + if (at > 0) { + lsn = window.setTimeout(function () { + dom.style.zIndex = 0; + }, at); + } + break; + case 1: + o = 1 - oa; + s = 1 - (0.5 * oa); + z = 1; + break; + case 2: + o = oa > 0 ? oa : 0; + s = 0.5 - (0.5 * oa); + z = 0; + break; + } + dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');'; + } + + zoomout.reverse = true; + return zoomout; + })() + }); }); /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)(module))) diff --git a/change_log.md b/change_log.md index 569c085b..2ee54da0 100644 --- a/change_log.md +++ b/change_log.md @@ -1,3 +1,6 @@ +### iSlider 2.2.1 +- [New]Add configuration wakeupAutoplayDazetime, this configuration will attempt to restart autoplay after N milliseconds. + ### iSlider 2.1.8 - [Optimization]Compatible the callback parameter camelCasing on initialization. All-Lower-Case nomenclature will be discarded. Currently coexistence, Camel-Case priority. diff --git a/demo/public/js/iSlider.animate.min.js b/demo/public/js/iSlider.animate.min.js index 1e1a1eab..2f553026 100644 --- a/demo/public/js/iSlider.animate.min.js +++ b/demo/public/js/iSlider.animate.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),a<0&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||a<0&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=f<1?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); \ No newline at end of file +!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.extend(e._animateFuncs,{rotate:function(){function t(t,s,i,n,r,a){var o="X"===s?"Y":"X";this.isVertical&&(r=-r,Math.abs(a)>1&&(a=-a));var l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),0>a&&0===n&&(t.style.visibility="hidden"),t.style.zIndex=1===n?1:0,t.style.cssText+=e.styleProp("backface-visibility")+":hidden;"+e.styleProp("transform-style")+":preserve-3d;position:absolute;",e.setStyle(t,"transform","rotate"+o+"("+90*(r/i+n-1)+"deg) translateZ("+.889*i/2+"px) scale(0.889)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),flip:function(){function t(t,s,i,n,r,a){this.isVertical&&(r=-r);var o=t.parentElement;e.setStyle(o,"perspective",4*i),t.style.visibility="visible",a>0&&2===n&&(t.style.visibility="hidden"),0>a&&0===n&&(t.style.visibility="hidden"),t.style.cssText+="position:absolute;"+e.styleProp("backface-visibility")+":hidden",e.setStyle(t,"transform","translateZ("+i/2+"px) rotate"+("X"===s?"Y":"X")+"("+180*(r/i+n-1)+"deg) scale(0.875)")}return t.effect=e.styleProp("transform"),t.reverse=!0,t}(),depth:function(){function t(t,s,i,n,r,a){var o=.18*(4-Math.abs(n-1)),l=t.parentElement;e.setStyle(l,"perspective",4*i),t.style.zIndex=1===n?1:0,e.setStyle(t,"transform","scale("+o+") translateZ(0) translate"+s+"("+(r+1.3*i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),flow:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l="X"===s?"Y":"X",c="X"===s?1:-1,f=Math.abs(r/i),y=t.parentElement;e.setStyle(y,"perspective",4*i),1===n?t.style.zIndex=i-o:t.style.zIndex=r>0?(1-n)*o:(n-1)*o,e.setStyle(t,"transform","scale(0.7, 0.7) translateZ("+(150*f-150)*Math.abs(n-1)+"px)translate"+s+"("+(r+i*(n-1))+"px)rotate"+l+"("+c*(30-30*f)*(1-n)+"deg)")}return t.effect=e.styleProp("transform"),t}(),card:function(){function t(t,s,i,n,r,a){var o=Math.abs(r),l=1,c=1;o>0?1===n&&(l=1-.2*Math.abs(n-1)-Math.abs(.2*r/i).toFixed(6),c=0):1!==n&&((a>0&&0===n||0>a&&2===n)&&(l=1-.2*Math.abs(n-1)),c=0),t.style.zIndex=c,e.setStyle(t,"transform","scale("+l+") translateZ(0) translate"+s+"("+((1+.2*Math.abs(n-1))*r+i*(n-1))+"px)")}return t.effect=e.styleProp("transform"),t}(),fade:function(){function e(e,t,s,i,n,r){e.style.zIndex=1===i?1:0,n=Math.abs(n),1===i?e.style.opacity=1-n/s:e.style.opacity=n/s}return e.effect="opacity",e}(),zoomout:function(){function t(t,i,n,r,a){var o,l,c,f=a/n;switch(r){case 0:s&&window.clearTimeout(s),l=1>f?f:1,c=2-.5*f,o=2;var y=1e3*parseInt(window.getComputedStyle(t)[e.styleProp("transitionDuration",1)]);y>0&&(s=window.setTimeout(function(){t.style.zIndex=0},y));break;case 1:l=1-f,c=1-.5*f,o=1;break;case 2:l=f>0?f:0,c=.5-.5*f,o=0}t.style.cssText+="z-index:"+o+";opacity:"+l+";"+e.styleProp("transform")+":scale("+c+");"}var s;return t.reverse=!0,t}()})}); \ No newline at end of file diff --git a/demo/public/js/iSlider.js b/demo/public/js/iSlider.js index 70c3dc01..3aa6387d 100644 --- a/demo/public/js/iSlider.js +++ b/demo/public/js/iSlider.js @@ -95,10 +95,10 @@ try { return obj instanceof HTMLElement; } - catch(e){ - return (typeof obj==="object") && - (obj.nodeType===1) && (typeof obj.style === "object") && - (typeof obj.ownerDocument ==="object"); + catch (e) { + return (typeof obj === "object") && + (obj.nodeType === 1) && (typeof obj.style === "object") && + (typeof obj.ownerDocument === "object"); } } @@ -152,7 +152,7 @@ if (!opts.dom) { throw new Error('Container can not be empty!'); } - else if (!isDom(opts.dom)){ + else if (!isDom(opts.dom)) { throw new Error('Container must be a HTMLElement instance!'); } @@ -186,7 +186,7 @@ * version * @type {string} */ - iSlider.VERSION = '2.2.0'; + iSlider.VERSION = '2.2.1'; /** * Event white list @@ -660,6 +660,16 @@ */ self.isAutoplay = opts.isAutoplay && self.data.length > 1 ? true : false; + /** + * When autoplay is enabled. + * User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay. + * This configuration will attempt to restart autoplay after N milliseconds. + * ! AutoPlay will be forced to wake up, even when the user fill in a form item + * ! It will be blocked by "lock()" + * @type {number} + */ + self.wakeupAutoplayDazetime = opts.wakeupAutoplayDazetime > -1 ? parseInt(opts.wakeupAutoplayDazetime) : -1; + /** * Animate type * @type {String} @@ -1165,6 +1175,7 @@ break; case 'blur': this.pause(); + this._tryToWakeupAutoplay(); break; } }; @@ -1322,6 +1333,8 @@ } this.offset.X = this.offset.Y = 0; + + this._tryToWakeupAutoplay(); }; /** @@ -1817,6 +1830,16 @@ this.delay > 0 ? global.setTimeout(this.play.bind(this), this.delay) : this.play(); }; + /** + * try to restart autoplay + * @private + */ + iSliderPrototype._tryToWakeupAutoplay = function () { + if (~this.wakeupAutoplayDazetime) { + this.wakeupAutoplayDazetime > 0 ? global.setTimeout(this.play.bind(this), this.wakeupAutoplayDazetime) : this.play(); + } + }; + /** * Start autoplay * @public diff --git a/demo/public/js/iSlider.min.js b/demo/public/js/iSlider.min.js index e6eef941..9f2a4365 100644 --- a/demo/public/js/iSlider.min.js +++ b/demo/public/js/iSlider.min.js @@ -1 +1 @@ -!function(t){"use strict";function e(){}function i(t,e){return e.indexOf(t)>-1}function n(t){return"[object Array]"===Object.prototype.toString.call(t)}function s(t){return"[object Object]"===Object.prototype.toString.call(t)}function a(t,e){return t.className.match(new RegExp("(\\s|^)("+e+")(\\s|$)"))}function r(t,e){a(t,e)||(t.className+=" "+e)}function o(t,e){a(t,e)&&(t.className=t.className.replace(RegExp("(\\s|^)("+e+")(\\s|$)"),"$3"))}function h(t){return!/<\/?[^>]*>/.test(t)&&/^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(t)}function l(t){try{return t instanceof HTMLElement}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}}function d(t){return Array.prototype.slice.apply(t,Array.prototype.slice.call(arguments,1))}function c(t){return t.replace(/^[a-z]/,function(t){return t.toUpperCase()})}var u=function(){var t=d(arguments,0,3);if(!t.length)throw new Error("Parameters required!");var e=s(t.slice(-1)[0])?t.pop():{};switch(t.length){case 2:e.data=e.data||t[1];case 1:e.dom=e.dom||t[0]}if(!e.dom)throw new Error("Container can not be empty!");if(!l(e.dom))throw new Error("Container must be a HTMLElement instance!");if(!e.data||!e.data.length)throw new Error("Data must be an array and must have more than one element!");this._opts=e,e=null,t=null,this._setting(),this.fire("initialize"),this._renderWrapper(),this._initPlugins(),this._bindHandler(),this.fire("initialized"),this._autoPlay()};u.VERSION="2.2.0",u.EVENTS=["initialize","initialized","pluginInitialize","pluginInitialized","renderComplete","slide","slideStart","slideEnd","slideChange","slideChanged","slideRestore","slideRestored","loadData","reset","destroy"],u.EASING=[["linear","ease","ease-in","ease-out","ease-in-out"],/cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/],u.FIX_PAGE_TAGS=["SELECT","INPUT","TEXTAREA","BUTTON","LABEL"],u.NODE_TYPE={unknown:"unknown",empty:"empty",pic:"pic",dom:"dom",html:"html",node:"node",element:"element"},u.TRANSITION_END_EVENT=null,u.BROWSER_PREFIX=null,function(){var t=document.createElement("fakeElement");[["WebkitTransition","webkitTransitionEnd","webkit"],["transition","transitionend",null],["MozTransition","transitionend","moz"],["OTransition","oTransitionEnd","o"]].some(function(e){if(void 0!==t.style[e[0]])return u.TRANSITION_END_EVENT=e[1],u.BROWSER_PREFIX=e[2],!0})}(),u.DEVICE_EVENTS=function(){var e=!!("ontouchstart"in t&&!/Mac OS X /.test(t.navigator.userAgent)||t.DocumentTouch&&document instanceof t.DocumentTouch);return{hasTouch:e,startEvt:e?"touchstart":"mousedown",moveEvt:e?"touchmove":"mousemove",endEvt:e?"touchend":"mouseup",cancelEvt:e?"touchcancel":"mouseout",resizeEvt:"onorientationchange"in t?"orientationchange":"resize"}}(),u.extend=function(){var t,e,i=arguments;switch(i.length){case 0:return;case 1:t=u.prototype,e=i[0];break;case 2:t=i[0],e=i[1]}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},u.plugins={},u.regPlugin=function(t,e){u.plugins[t]=u.plugins[t]||e},u.styleProp=function(t,e){return u.BROWSER_PREFIX?e?u.BROWSER_PREFIX+c(t):"-"+u.BROWSER_PREFIX+"-"+t:t},u.setStyle=function(t,e,i){t.style[u.styleProp(e,1)]=i},u.getStyle=function(t,e){return t.style[u.styleProp(e,1)]},u._animateFuncs={normal:function(){function t(t,e,i,n,s){u.setStyle(t,"transform","translateZ(0) translate"+e+"("+(s+i*(n-1))+"px)")}return t.effect=u.styleProp("transform"),t}()};var f=u.prototype;f.extend=u.extend,f._setting=function(){var s=this;s._plugins=u.plugins,s._animateFuncs=u._animateFuncs,s._holding=!1,s._locking=!1,s._intermediateScene=null,s._transitionEndHandler=null,s._LSN={autoPlay:null,resize:null,transitionEnd:null},s.currentEl=null,s._EventHandle={},s.onMoving=!1,s.onSliding=!1,s.direction=null;var a=this._opts;s.wrap=a.dom,s.data=a.data,s.isVertical=!!a.isVertical,s.isOverspread=!!a.isOverspread,s.duration=a.duration||2e3,s.initIndex=a.initIndex>0&&a.initIndex<=a.data.length-1?a.initIndex:0,s.fixPage=function(){var t=a.fixPage;return t!==!1&&0!==t&&(!(n(t)&&t.length>0||"string"==typeof t&&""!==t)||[].concat(t).toString())}(),s.fillSeam=!!a.fillSeam,s.slideIndex=s.slideIndex||s.initIndex||0,s.axis=s.isVertical?"Y":"X",s.reverseAxis="Y"===s.axis?"X":"Y",s.width="number"==typeof a.width?a.width:s.wrap.offsetWidth,s.height="number"==typeof a.height?a.height:s.wrap.offsetHeight,s.ratio=s.height/s.width,s.scale=s.isVertical?s.height:s.width,s.offset=s.offset||{X:0,Y:0},s.isTouchable=null==a.isTouchable||!!a.isTouchable,s.isLooping=!!(a.isLooping&&s.data.length>1),s.dampingForce=Math.max(0,Math.min(1,parseFloat(a.dampingForce)||0)),s.delay=a.delay||0,s.isAutoplay=!!(a.isAutoplay&&s.data.length>1),s.animateType=a.animateType in s._animateFuncs?a.animateType:"normal",s._animateFunc=s._animateFuncs[s.animateType],s._animateReverse=function(){var t=[];for(var e in s._animateFuncs)s._animateFuncs.hasOwnProperty(e)&&s._animateFuncs[e].reverse&&t.push(e);return t}(),s.isVertical&&"card"===s.animateType&&(s.isOverspread=!0),s.log=a.isDebug?function(){t.console.log.apply(t.console,arguments)}:e,s._damping=function(){return function(t){return.62*Math.atan(Math.abs(t)/s.scale)*(1-s.dampingForce)*s.scale*(t>0?1:-1)}}(),s.animateTime=null!=a.animateTime&&a.animateTime>-1?a.animateTime:300,s.animateEasing=i(a.animateEasing,u.EASING[0])||u.EASING[1].test(a.animateEasing)?a.animateEasing:"ease",s.deviceEvents=u.DEVICE_EVENTS,s.fingerRecognitionRange=a.fingerRecognitionRange>-1?parseInt(a.fingerRecognitionRange):10,s.events={},u.EVENTS.forEach(function(t){var e=a["on"+t.replace(/^\w{1}/,function(t){return t.toUpperCase()})]||a["on"+t.toLowerCase()];"function"==typeof e&&s.on(t,e,1)}),s.pluginConfig=function(){var t={};return n(a.plugins)&&a.plugins.forEach(function(e){n(e)?t[e[0]]=e.slice(1):"string"==typeof e&&(t[e]=[])}),t}()},f._initPlugins=function(){var t=this.pluginConfig,e=this._plugins;for(var i in t)t.hasOwnProperty(i)&&e.hasOwnProperty(i)&&(this.log("[INIT PLUGIN]:",i,e[i]),e[i]&&"function"==typeof e[i]&&typeof e[i].apply&&e[i].apply(this,t[i]));this.fire("pluginInitialized")},f._itemType=function(t){if(isNaN(t)||(t=this.data[t]),t.hasOwnProperty("type"))return t.type;var e,i=t.content,n=u.NODE_TYPE;return e=null==i?n.empty:Boolean(i.nodeName)&&Boolean(i.nodeType)?n.node:"string"==typeof i?h(i)?n.pic:n.html:n.unknown,t.type=e,e},f._renderItem=function(t,e){var i,n=this,s=this.data.length,a=function(){var e=' src="'+i.content+'"';e+=i.height/i.width>n.ratio?' height="100%"':' width="100%"',n.isOverspread&&(t.style.cssText+="background-image:url("+i.content+");background-repeat:no-repeat;background-position:50% 50%;background-size:cover",e+=' style="display:block;opacity:0;height:100%;width:100%;"'),t.innerHTML=""};if(t.innerHTML="",t.style.background="",this.isLooping||null!=this.data[e]){e=(s+e)%s,i=this.data[e];var o=this._itemType(i),h=u.NODE_TYPE;switch(this.log("[RENDER]:",o,e,i),r(t,"islider-"+o),o){case h.pic:if(2===i.load)a();else{var l=new Image;l.src=i.content,l.onload=function(){i.height=l.height,i.width=l.width,a(),i.load=2}}break;case h.dom:case h.html:t.innerHTML=i.content;break;case h.node:case h.element:if(11===i.content.nodeType){var d=document.createElement("div");d.appendChild(i.content),i.content=d}t.appendChild(i.content)}}},f._renderIntermediateScene=function(){null!=this._intermediateScene&&(this._renderItem.apply(this,this._intermediateScene),this._intermediateScene=null)},f._changedStyles=function(){var t=["islider-prev","islider-active","islider-next"];this.els.forEach(function(e,i){o(e,t.join("|")),r(e,t[i]),this.fillSeam&&this.originScale(e)}.bind(this))},f._renderWrapper=function(){var e;this.outer?(e=this.outer,e.innerHTML=""):e=document.createElement("ul"),e.className="islider-outer",this.els=[];for(var i=0;i<3;i++){var n=document.createElement("li");e.appendChild(n),this.els.push(n),this._animateFunc(n,this.axis,this.scale,i,0),this.fixPage||(n.style.overflow="auto"),!this.isVertical||"rotate"!==this.animateType&&"flip"!==this.animateType?this._renderItem(n,i-1+this.slideIndex):this._renderItem(n,1-i+this.slideIndex)}this._changedStyles(),this.fillSeam&&this.els.forEach(function(t,e){r(t,"islider-sliding"+(1===e?"-focus":""))}),t.setTimeout(function(){this._preloadImg(this.slideIndex)}.bind(this),200),this.outer||(this.outer=e,this.wrap.appendChild(e)),this.currentEl=this.els[1],this.fire("renderComplete",this.slideIndex,this.currentEl,this)},f._preloadImg=function(t){if(this.data.length>3){var e=this.data,i=e.length,n=this,s=function(t){var i=e[t];if("pic"===n._itemType(i)&&!i.load){var s=new Image;s.src=i.content,s.onload=function(){i.width=s.width,i.height=s.height,i.load=2},i.load=1}};s((t+2)%i),s((t-2+i)%i)}},f._watchTransitionEnd=function(e,i){var n=function(){this._unWatchTransitionEnd(),"slideChanged"===i&&this._changedStyles(),this.fire.call(this,i,this.slideIndex,this.currentEl,this),this._renderIntermediateScene(),this.play(),this.onSliding=!1,this.direction=null}.bind(this);u.TRANSITION_END_EVENT&&(this.currentEl.addEventListener(u.TRANSITION_END_EVENT,n),this._transitionEndHandler={el:this.currentEl,handler:n}),this._LSN.transitionEnd=t.setTimeout(n,e)},f._unWatchTransitionEnd=function(){this._LSN.transitionEnd&&t.clearTimeout(this._LSN.transitionEnd),null!==this._transitionEndHandler&&(this._transitionEndHandler.el.removeEventListener(u.TRANSITION_END_EVENT,this._transitionEndHandler.handler),this._transitionEndHandler=null)},f._bindHandler=function(){var e=this.outer,i=this.deviceEvents;this.isTouchable&&(i.hasTouch||(e.style.cursor="pointer",e.ondragstart=function(t){return!t}),e.addEventListener(i.startEvt,this),e.addEventListener(i.moveEvt,this),e.addEventListener(i.endEvt,this),!i.hasTouch&&e.addEventListener("mouseout",this)),t.addEventListener(i.resizeEvt,this),t.addEventListener("focus",this,!1),t.addEventListener("blur",this,!1)},f.handleEvent=function(t){var e=this.deviceEvents;switch(t.type){case"mousedown":if(0!==t.button)break;case"touchstart":this.startHandler(t);break;case e.moveEvt:this.moveHandler(t);break;case e.endEvt:case e.cancelEvt:this.endHandler(t);break;case e.resizeEvt:this.resizeHandler();break;case"focus":this.play();break;case"blur":this.pause()}},f.startHandler=function(t){if(this.fixPage&&u.FIX_PAGE_TAGS.indexOf(t.target.tagName.toUpperCase())<0&&!this._isItself(t.target)&&t.preventDefault(),!this._holding&&!this._locking){var e=this.deviceEvents;this.onMoving=!0,this.pause(),this.log("[EVENT]: start"),this.fire("slideStart",t,this),this.startTime=(new Date).getTime(),this.startX=e.hasTouch?t.targetTouches[0].pageX:t.pageX,this.startY=e.hasTouch?t.targetTouches[0].pageY:t.pageY}},f.moveHandler=function(t){if(this.onMoving){this.log("[EVENT]: moving");var e=this.deviceEvents,i=this.data.length,n=this.axis,s=this.reverseAxis,a={};t.hasOwnProperty("offsetRatio")?(a[n]=t.offsetRatio*this.scale,a[s]=0):(a.X=e.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,a.Y=e.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY),this.offset=a,t.offsetRatio=a[n]/this.scale,Math.abs(a[n])-Math.abs(a[s])>10&&(t.preventDefault(),this._unWatchTransitionEnd(),this.isLooping||(a[n]>0&&0===this.slideIndex||a[n]<0&&this.slideIndex===i-1)&&(a[n]=this._damping(a[n])),this.els.forEach(function(t,e){t.style.visibility="visible",u.setStyle(t,"transition","none"),this._animateFunc(t,n,this.scale,e,a[n],a[n]),this.fillSeam&&this.seamScale(t)}.bind(this)),this.fire("slide",t,this))}},f.endHandler=function(e){function i(n){if(null!=n)if("A"===n.tagName){if(n.href)return"_blank"===n.getAttribute("target")?t.open(n.href):t.location.href=n.href,e.preventDefault(),!1}else{if("LI"===n.tagName&&n.className.search(/^islider\-/)>-1)return!1;i(n.parentNode)}}if(this.onMoving){this.log("[EVENT]: end"),this.onMoving=!1;var n=this.offset,s=this.axis,a=this.scale/2,r=(new Date).getTime(),o=this.fingerRecognitionRange;a=r-this.startTime>300?a:14;var h=Math.abs(n[s]),l=Math.abs(n[this.reverseAxis]);this.fire("slideEnd",e,this),n[s]>=a&&l=o&&this.slideTo(this.slideIndex),Math.abs(this.offset[s])=1e3&&n&&t.clearInterval(n)}.bind(this),12)):(n&&t.clearTimeout(n),n=t.setTimeout(function(){this.height===this.wrap.offsetHeight&&this.width===this.wrap.offsetWidth||(n&&t.clearInterval(n),this.reset(),this.log("[EVENT]: resize"))}.bind(this),200))},f.slideTo=function(t,e){if(this.isAutoplay&&this.pause(),!this._locking){this.unhold(),this.onSliding=!0;var n,s=this.animateTime,a=this.animateType,h=this._animateFunc,l=this.data,d=this.els,c=this.axis,f=t,p=t-this.slideIndex,g=this.offset,m=0;"object"==typeof e&&(e.animateTime>-1&&(s=e.animateTime),"string"==typeof e.animateType&&e.animateType in this._animateFuncs&&(a=e.animateType,h=this._animateFuncs[a])),0!==g[c]&&(m=Math.abs(g[c])/this.scale*s),Math.abs(p)>1&&this._renderItem(p>0?this.els[2]:this.els[0],f),this._preloadImg(f),l[f]?this.slideIndex=f:this.isLooping?this.slideIndex=p>0?0:l.length-1:p=0,this.log("[SLIDE TO]: "+this.slideIndex);var v,E,_;0===p?n="slideRestore":((this.isVertical&&i(a,this._animateReverse))^p>0?(d.push(d.shift()),v=d[2],E=d[0],_=1):(d.unshift(d.pop()),v=d[0],E=d[2],_=-1),this.currentEl=d[1],1===Math.abs(p)?(this._renderIntermediateScene(),this._renderItem(v,f+p)):Math.abs(p)>1&&(this.isVertical&&i(a,this._animateReverse)?(this._renderItem(E,f+_),this._renderItem(d[1],f),this._intermediateScene=[v,f-_]):(this._renderItem(v,f+_),this._intermediateScene=[E,f-_])),u.setStyle(v,"transition","none"),m=s-m,n="slideChange",this.fillSeam&&(d.forEach(function(t){o(t,"islider-sliding|islider-sliding-focus")}),r(this.currentEl,"islider-sliding-focus"),r(v,"islider-sliding")),this.direction=_);for(var y=0;y<3;y++)d[y]!==v&&u.setStyle(d[y],"transition",(h.effect||"all")+" "+m+"ms "+this.animateEasing),h.call(this,d[y],c,this.scale,y,0,_),this.fillSeam&&this.seamScale(d[y]);this._watchTransitionEnd(m,n+"d"),this.fire(n,this.slideIndex,this.currentEl,this)}},f.slideNext=function(){this.slideTo.apply(this,[this.slideIndex+1].concat(d(arguments)))},f.slidePrev=function(){this.slideTo.apply(this,[this.slideIndex-1].concat(d(arguments)))},f.regPlugin=function(){var t=d(arguments),e=t.shift(),n=t[0];(this._plugins.hasOwnProperty(e)||"function"==typeof n)&&("function"==typeof n&&(this._plugins[e]=n,t.shift()),i(e,this._opts.plugins)||(this._opts.plugins.push(t.length?[].concat([e],t):e),"function"==typeof this._plugins[e]&&this._plugins[e].apply(this,t)))},f.bind=f.delegate=function(e,i,n){function s(e){for(var s=t.event?t.event:e,a=s.target,r=document.querySelectorAll(i),o=0;o-1)return this.wrap.removeEventListener(t,this._EventHandle[n][1][s]),this._EventHandle[n][0][s]=this._EventHandle[n][1][s]=null,!0}return!1},f.destroy=function(){var e=this.outer,i=this.deviceEvents;this.fire("destroy"),this.isTouchable&&(e.removeEventListener(i.startEvt,this),e.removeEventListener(i.moveEvt,this),e.removeEventListener(i.endEvt,this),!i.hasTouch&&e.removeEventListener("mouseout",this)),t.removeEventListener(i.resizeEvt,this),t.removeEventListener("focus",this),t.removeEventListener("blur",this);var n;for(n in this._EventHandle)for(var s=this._EventHandle[n][1],a=0;a-1&&delete this.events[t][i]}},f.fire=function(t){var e=d(arguments,1);t.split(/\x20+/).forEach(function(t){if(this.log("[EVENT FIRE]:",t,e),t in this.events)for(var i=this.events[t],n=0;n0?t.setTimeout(this.play.bind(this),this.delay):this.play()},f.play=function(){this.pause(),this.isAutoplay&&(this.isLooping||this.slideIndex-1?(i=i.split(","),n.X=parseFloat(i[0]),n.Y=parseFloat(i[1])):n.Y=n.X=parseFloat(i),n[this.axis]*=1.001,"scale("+n.X+", "+n.Y+")")}.bind(this))):u.setStyle(t,"transform",i+" scale"+this.axis+"(1.001)")},f.originScale=function(t){var e=/([\x20]?scale)([XY]?)\(([^\)]+)\)/;u.setStyle(t,"transform",u.getStyle(t,"transform").replace(e,function(t,e,i,n){return t={},i?"1.001"===n?"":(t[i]=parseFloat(n),"scale"+this.axis+"("+(i===this.axis?t[this.axis]/1.001:1)+")"):(n.indexOf(",")>-1?(n=n.split(","),t.X=parseFloat(n[0]),t.Y=parseFloat(n[1])):t.Y=t.X=parseFloat(n),t[this.axis]/=1.001,"scale("+t.X+", "+t.Y+")")}.bind(this)))},f._isItself=function(t){var e=this.fixPage;if("string"==typeof e){for(var i,n=[],s=t;!a(s,"islider-outer")&&s!==this.wrap;)n.push(s),s=s.parentNode;if(s=n.pop(),n.length)try{if(i=Array.prototype.slice.call(s.querySelectorAll(e)),i.length)for(var r=0;r-1)return!0}catch(o){return!1}}return!1},f.subjectTo=function(t,e){if(!(!t instanceof u)){var i=this;i.animateTime=t.animateTime,i.isLooping=t.isLooping,i.isAutoplay=!1,t.on("slideStart",function(t){i.startHandler(t)}),t.on("slide",function(t){i.moveHandler(t)}),t.on("slideEnd",function(t){i.endHandler(t)}),t.on("slideChange",function(t){var e=i.data.length,n=i.direction;n>0&&(t-i.slideIndex+e)%e===1?i.slideNext():n<0&&(t-i.slideIndex-e)%e===-1&&i.slidePrev()}),t.on("slideRestore",function(t){i.slideIndex!==t&&i.slideTo(t)})}},"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?module.exports=u:"function"==typeof define&&define.amd?define(function(){return u}):t.iSlider=t.iSlider||u}(window||this); \ No newline at end of file +!function(t){"use strict";function e(){}function i(t,e){return e.indexOf(t)>-1}function n(t){return"[object Array]"===Object.prototype.toString.call(t)}function s(t){return"[object Object]"===Object.prototype.toString.call(t)}function a(t,e){return t.className.match(new RegExp("(\\s|^)("+e+")(\\s|$)"))}function r(t,e){a(t,e)||(t.className+=" "+e)}function o(t,e){a(t,e)&&(t.className=t.className.replace(RegExp("(\\s|^)("+e+")(\\s|$)"),"$3"))}function h(t){return/<\/?[^>]*>/.test(t)?!1:/^(?:(https|http|ftp|rtsp|mms):)?(\/\/)?(\w+:{0,1}\w*@)?([^\?#:\/]+\.[a-z]+|\d+\.\d+\.\d+\.\d+)?(:[0-9]+)?((?:\.?\/)?([^\?#]*)?(\?[^#]+)?(#.+)?)?$/.test(t)}function l(t){try{return t instanceof HTMLElement}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}}function d(t){return Array.prototype.slice.apply(t,Array.prototype.slice.call(arguments,1))}function u(t){return t.replace(/^[a-z]/,function(t){return t.toUpperCase()})}var c=function(){var t=d(arguments,0,3);if(!t.length)throw new Error("Parameters required!");var e=s(t.slice(-1)[0])?t.pop():{};switch(t.length){case 2:e.data=e.data||t[1];case 1:e.dom=e.dom||t[0]}if(!e.dom)throw new Error("Container can not be empty!");if(!l(e.dom))throw new Error("Container must be a HTMLElement instance!");if(!e.data||!e.data.length)throw new Error("Data must be an array and must have more than one element!");this._opts=e,e=null,t=null,this._setting(),this.fire("initialize"),this._renderWrapper(),this._initPlugins(),this._bindHandler(),this.fire("initialized"),this._autoPlay()};c.VERSION="2.2.1",c.EVENTS=["initialize","initialized","pluginInitialize","pluginInitialized","renderComplete","slide","slideStart","slideEnd","slideChange","slideChanged","slideRestore","slideRestored","loadData","reset","destroy"],c.EASING=[["linear","ease","ease-in","ease-out","ease-in-out"],/cubic-bezier\(([^\d]*(\d+.?\d*)[^\,]*\,?){4}\)/],c.FIX_PAGE_TAGS=["SELECT","INPUT","TEXTAREA","BUTTON","LABEL"],c.NODE_TYPE={unknown:"unknown",empty:"empty",pic:"pic",dom:"dom",html:"html",node:"node",element:"element"},c.TRANSITION_END_EVENT=null,c.BROWSER_PREFIX=null,function(){var t=document.createElement("fakeElement");[["WebkitTransition","webkitTransitionEnd","webkit"],["transition","transitionend",null],["MozTransition","transitionend","moz"],["OTransition","oTransitionEnd","o"]].some(function(e){return void 0!==t.style[e[0]]?(c.TRANSITION_END_EVENT=e[1],c.BROWSER_PREFIX=e[2],!0):void 0})}(),c.DEVICE_EVENTS=function(){var e=!!("ontouchstart"in t&&!/Mac OS X /.test(t.navigator.userAgent)||t.DocumentTouch&&document instanceof t.DocumentTouch);return{hasTouch:e,startEvt:e?"touchstart":"mousedown",moveEvt:e?"touchmove":"mousemove",endEvt:e?"touchend":"mouseup",cancelEvt:e?"touchcancel":"mouseout",resizeEvt:"onorientationchange"in t?"orientationchange":"resize"}}(),c.extend=function(){var t,e,i=arguments;switch(i.length){case 0:return;case 1:t=c.prototype,e=i[0];break;case 2:t=i[0],e=i[1]}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},c.plugins={},c.regPlugin=function(t,e){c.plugins[t]=c.plugins[t]||e},c.styleProp=function(t,e){return c.BROWSER_PREFIX?e?c.BROWSER_PREFIX+u(t):"-"+c.BROWSER_PREFIX+"-"+t:t},c.setStyle=function(t,e,i){t.style[c.styleProp(e,1)]=i},c.getStyle=function(t,e){return t.style[c.styleProp(e,1)]},c._animateFuncs={normal:function(){function t(t,e,i,n,s){c.setStyle(t,"transform","translateZ(0) translate"+e+"("+(s+i*(n-1))+"px)")}return t.effect=c.styleProp("transform"),t}()};var f=c.prototype;f.extend=c.extend,f._setting=function(){var s=this;s._plugins=c.plugins,s._animateFuncs=c._animateFuncs,s._holding=!1,s._locking=!1,s._intermediateScene=null,s._transitionEndHandler=null,s._LSN={autoPlay:null,resize:null,transitionEnd:null},s.currentEl=null,s._EventHandle={},s.onMoving=!1,s.onSliding=!1,s.direction=null;var a=this._opts;s.wrap=a.dom,s.data=a.data,s.isVertical=!!a.isVertical,s.isOverspread=!!a.isOverspread,s.duration=a.duration||2e3,s.initIndex=a.initIndex>0&&a.initIndex<=a.data.length-1?a.initIndex:0,s.fixPage=function(){var t=a.fixPage;return t===!1||0===t?!1:n(t)&&t.length>0||"string"==typeof t&&""!==t?[].concat(t).toString():!0}(),s.fillSeam=!!a.fillSeam,s.slideIndex=s.slideIndex||s.initIndex||0,s.axis=s.isVertical?"Y":"X",s.reverseAxis="Y"===s.axis?"X":"Y",s.width="number"==typeof a.width?a.width:s.wrap.offsetWidth,s.height="number"==typeof a.height?a.height:s.wrap.offsetHeight,s.ratio=s.height/s.width,s.scale=s.isVertical?s.height:s.width,s.offset=s.offset||{X:0,Y:0},s.isTouchable=null==a.isTouchable?!0:!!a.isTouchable,s.isLooping=a.isLooping&&s.data.length>1?!0:!1,s.dampingForce=Math.max(0,Math.min(1,parseFloat(a.dampingForce)||0)),s.delay=a.delay||0,s.isAutoplay=a.isAutoplay&&s.data.length>1?!0:!1,s.wakeupAutoplayDazetime=a.wakeupAutoplayDazetime>-1?parseInt(a.wakeupAutoplayDazetime):-1,s.animateType=a.animateType in s._animateFuncs?a.animateType:"normal",s._animateFunc=s._animateFuncs[s.animateType],s._animateReverse=function(){var t=[];for(var e in s._animateFuncs)s._animateFuncs.hasOwnProperty(e)&&s._animateFuncs[e].reverse&&t.push(e);return t}(),s.isVertical&&"card"===s.animateType&&(s.isOverspread=!0),s.log=a.isDebug?function(){t.console.log.apply(t.console,arguments)}:e,s._damping=function(){return function(t){return.62*Math.atan(Math.abs(t)/s.scale)*(1-s.dampingForce)*s.scale*(t>0?1:-1)}}(),s.animateTime=null!=a.animateTime&&a.animateTime>-1?a.animateTime:300,s.animateEasing=i(a.animateEasing,c.EASING[0])||c.EASING[1].test(a.animateEasing)?a.animateEasing:"ease",s.deviceEvents=c.DEVICE_EVENTS,s.fingerRecognitionRange=a.fingerRecognitionRange>-1?parseInt(a.fingerRecognitionRange):10,s.events={},c.EVENTS.forEach(function(t){var e=a["on"+t.replace(/^\w{1}/,function(t){return t.toUpperCase()})]||a["on"+t.toLowerCase()];"function"==typeof e&&s.on(t,e,1)}),s.pluginConfig=function(){var t={};return n(a.plugins)&&a.plugins.forEach(function(e){n(e)?t[e[0]]=e.slice(1):"string"==typeof e&&(t[e]=[])}),t}()},f._initPlugins=function(){var t=this.pluginConfig,e=this._plugins;for(var i in t)t.hasOwnProperty(i)&&e.hasOwnProperty(i)&&e[i]&&"function"==typeof e[i]&&typeof e[i].apply&&e[i].apply(this,t[i]);this.fire("pluginInitialized")},f._itemType=function(t){if(isNaN(t)||(t=this.data[t]),t.hasOwnProperty("type"))return t.type;var e,i=t.content,n=c.NODE_TYPE;return e=null==i?n.empty:Boolean(i.nodeName)&&Boolean(i.nodeType)?n.node:"string"==typeof i?h(i)?n.pic:n.html:n.unknown,t.type=e,e},f._renderItem=function(t,e){var i,n=this,s=this.data.length,a=function(){var e=' src="'+i.content+'"';e+=i.height/i.width>n.ratio?' height="100%"':' width="100%"',n.isOverspread&&(t.style.cssText+="background-image:url("+i.content+");background-repeat:no-repeat;background-position:50% 50%;background-size:cover",e+=' style="display:block;opacity:0;height:100%;width:100%;"'),t.innerHTML=""};if(t.innerHTML="",t.style.background="",this.isLooping||null!=this.data[e]){e=(s+e)%s,i=this.data[e];var o=this._itemType(i),h=c.NODE_TYPE;switch(r(t,"islider-"+o),o){case h.pic:if(2===i.load)a();else{var l=new Image;l.src=i.content,l.onload=function(){i.height=l.height,i.width=l.width,a(),i.load=2}}break;case h.dom:case h.html:t.innerHTML=i.content;break;case h.node:case h.element:if(11===i.content.nodeType){var d=document.createElement("div");d.appendChild(i.content),i.content=d}t.appendChild(i.content)}}},f._renderIntermediateScene=function(){null!=this._intermediateScene&&(this._renderItem.apply(this,this._intermediateScene),this._intermediateScene=null)},f._changedStyles=function(){var t=["islider-prev","islider-active","islider-next"];this.els.forEach(function(e,i){o(e,t.join("|")),r(e,t[i]),this.fillSeam&&this.originScale(e)}.bind(this))},f._renderWrapper=function(){var e;this.outer?(e=this.outer,e.innerHTML=""):e=document.createElement("ul"),e.className="islider-outer",this.els=[];for(var i=0;3>i;i++){var n=document.createElement("li");e.appendChild(n),this.els.push(n),this._animateFunc(n,this.axis,this.scale,i,0),this.fixPage||(n.style.overflow="auto"),!this.isVertical||"rotate"!==this.animateType&&"flip"!==this.animateType?this._renderItem(n,i-1+this.slideIndex):this._renderItem(n,1-i+this.slideIndex)}this._changedStyles(),this.fillSeam&&this.els.forEach(function(t,e){r(t,"islider-sliding"+(1===e?"-focus":""))}),t.setTimeout(function(){this._preloadImg(this.slideIndex)}.bind(this),200),this.outer||(this.outer=e,this.wrap.appendChild(e)),this.currentEl=this.els[1],this.fire("renderComplete",this.slideIndex,this.currentEl,this)},f._preloadImg=function(t){if(this.data.length>3){var e=this.data,i=e.length,n=this,s=function(t){var i=e[t];if("pic"===n._itemType(i)&&!i.load){var s=new Image;s.src=i.content,s.onload=function(){i.width=s.width,i.height=s.height,i.load=2},i.load=1}};s((t+2)%i),s((t-2+i)%i)}},f._watchTransitionEnd=function(e,i){var n=function(){this._unWatchTransitionEnd(),"slideChanged"===i&&this._changedStyles(),this.fire.call(this,i,this.slideIndex,this.currentEl,this),this._renderIntermediateScene(),this.play(),this.onSliding=!1,this.direction=null}.bind(this);c.TRANSITION_END_EVENT&&(this.currentEl.addEventListener(c.TRANSITION_END_EVENT,n),this._transitionEndHandler={el:this.currentEl,handler:n}),this._LSN.transitionEnd=t.setTimeout(n,e)},f._unWatchTransitionEnd=function(){this._LSN.transitionEnd&&t.clearTimeout(this._LSN.transitionEnd),null!==this._transitionEndHandler&&(this._transitionEndHandler.el.removeEventListener(c.TRANSITION_END_EVENT,this._transitionEndHandler.handler),this._transitionEndHandler=null)},f._bindHandler=function(){var e=this.outer,i=this.deviceEvents;this.isTouchable&&(i.hasTouch||(e.style.cursor="pointer",e.ondragstart=function(t){return t?!1:!0}),e.addEventListener(i.startEvt,this),e.addEventListener(i.moveEvt,this),e.addEventListener(i.endEvt,this),!i.hasTouch&&e.addEventListener("mouseout",this)),t.addEventListener(i.resizeEvt,this),t.addEventListener("focus",this,!1),t.addEventListener("blur",this,!1)},f.handleEvent=function(t){var e=this.deviceEvents;switch(t.type){case"mousedown":if(0!==t.button)break;case"touchstart":this.startHandler(t);break;case e.moveEvt:this.moveHandler(t);break;case e.endEvt:case e.cancelEvt:this.endHandler(t);break;case e.resizeEvt:this.resizeHandler();break;case"focus":this.play();break;case"blur":this.pause(),this._tryToWakeupAutoplay()}},f.startHandler=function(t){if(this.fixPage&&c.FIX_PAGE_TAGS.indexOf(t.target.tagName.toUpperCase())<0&&!this._isItself(t.target)&&t.preventDefault(),!this._holding&&!this._locking){var e=this.deviceEvents;this.onMoving=!0,this.pause(),this.fire("slideStart",t,this),this.startTime=(new Date).getTime(),this.startX=e.hasTouch?t.targetTouches[0].pageX:t.pageX,this.startY=e.hasTouch?t.targetTouches[0].pageY:t.pageY}},f.moveHandler=function(t){if(this.onMoving){var e=this.deviceEvents,i=this.data.length,n=this.axis,s=this.reverseAxis,a={};t.hasOwnProperty("offsetRatio")?(a[n]=t.offsetRatio*this.scale,a[s]=0):(a.X=e.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,a.Y=e.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY),this.offset=a,t.offsetRatio=a[n]/this.scale,Math.abs(a[n])-Math.abs(a[s])>10&&(t.preventDefault(),this._unWatchTransitionEnd(),this.isLooping||(a[n]>0&&0===this.slideIndex||a[n]<0&&this.slideIndex===i-1)&&(a[n]=this._damping(a[n])),this.els.forEach(function(t,e){t.style.visibility="visible",c.setStyle(t,"transition","none"),this._animateFunc(t,n,this.scale,e,a[n],a[n]),this.fillSeam&&this.seamScale(t)}.bind(this)),this.fire("slide",t,this))}},f.endHandler=function(e){function i(n){if(null!=n)if("A"===n.tagName){if(n.href)return"_blank"===n.getAttribute("target")?t.open(n.href):t.location.href=n.href,e.preventDefault(),!1}else{if("LI"===n.tagName&&n.className.search(/^islider\-/)>-1)return!1;i(n.parentNode)}}if(this.onMoving){this.onMoving=!1;var n=this.offset,s=this.axis,a=this.scale/2,r=(new Date).getTime(),o=this.fingerRecognitionRange;a=r-this.startTime>300?a:14;var h=Math.abs(n[s]),l=Math.abs(n[this.reverseAxis]);this.fire("slideEnd",e,this),n[s]>=a&&h>l?this.slideTo(this.slideIndex-1):n[s]<-a&&h>l?this.slideTo(this.slideIndex+1):Math.abs(this.offset[s])>=o&&this.slideTo(this.slideIndex),Math.abs(this.offset[s])=1e3&&n&&t.clearInterval(n)}.bind(this),12)):(n&&t.clearTimeout(n),n=t.setTimeout(function(){(this.height!==this.wrap.offsetHeight||this.width!==this.wrap.offsetWidth)&&(n&&t.clearInterval(n),this.reset())}.bind(this),200))},f.slideTo=function(t,e){if(this.isAutoplay&&this.pause(),!this._locking){this.unhold(),this.onSliding=!0;var n,s=this.animateTime,a=this.animateType,h=this._animateFunc,l=this.data,d=this.els,u=this.axis,f=t,p=t-this.slideIndex,m=this.offset,g=0;"object"==typeof e&&(e.animateTime>-1&&(s=e.animateTime),"string"==typeof e.animateType&&e.animateType in this._animateFuncs&&(a=e.animateType,h=this._animateFuncs[a])),0!==m[u]&&(g=Math.abs(m[u])/this.scale*s),Math.abs(p)>1&&this._renderItem(p>0?this.els[2]:this.els[0],f),this._preloadImg(f),l[f]?this.slideIndex=f:this.isLooping?this.slideIndex=p>0?0:l.length-1:p=0;var v,E,y;0===p?n="slideRestore":((this.isVertical&&i(a,this._animateReverse))^p>0?(d.push(d.shift()),v=d[2],E=d[0],y=1):(d.unshift(d.pop()),v=d[0],E=d[2],y=-1),this.currentEl=d[1],1===Math.abs(p)?(this._renderIntermediateScene(),this._renderItem(v,f+p)):Math.abs(p)>1&&(this.isVertical&&i(a,this._animateReverse)?(this._renderItem(E,f+y),this._renderItem(d[1],f),this._intermediateScene=[v,f-y]):(this._renderItem(v,f+y),this._intermediateScene=[E,f-y])),c.setStyle(v,"transition","none"),g=s-g,n="slideChange",this.fillSeam&&(d.forEach(function(t){o(t,"islider-sliding|islider-sliding-focus")}),r(this.currentEl,"islider-sliding-focus"),r(v,"islider-sliding")),this.direction=y);for(var _=0;3>_;_++)d[_]!==v&&c.setStyle(d[_],"transition",(h.effect||"all")+" "+g+"ms "+this.animateEasing),h.call(this,d[_],u,this.scale,_,0,y),this.fillSeam&&this.seamScale(d[_]);this._watchTransitionEnd(g,n+"d"),this.fire(n,this.slideIndex,this.currentEl,this)}},f.slideNext=function(){this.slideTo.apply(this,[this.slideIndex+1].concat(d(arguments)))},f.slidePrev=function(){this.slideTo.apply(this,[this.slideIndex-1].concat(d(arguments)))},f.regPlugin=function(){var t=d(arguments),e=t.shift(),n=t[0];(this._plugins.hasOwnProperty(e)||"function"==typeof n)&&("function"==typeof n&&(this._plugins[e]=n,t.shift()),i(e,this._opts.plugins)||(this._opts.plugins.push(t.length?[].concat([e],t):e),"function"==typeof this._plugins[e]&&this._plugins[e].apply(this,t)))},f.bind=f.delegate=function(e,i,n){function s(e){for(var s=t.event?t.event:e,a=s.target,r=document.querySelectorAll(i),o=0;o-1)return this.wrap.removeEventListener(t,this._EventHandle[n][1][s]),this._EventHandle[n][0][s]=this._EventHandle[n][1][s]=null,!0}return!1},f.destroy=function(){var e=this.outer,i=this.deviceEvents;this.fire("destroy"),this.isTouchable&&(e.removeEventListener(i.startEvt,this),e.removeEventListener(i.moveEvt,this),e.removeEventListener(i.endEvt,this),!i.hasTouch&&e.removeEventListener("mouseout",this)),t.removeEventListener(i.resizeEvt,this),t.removeEventListener("focus",this),t.removeEventListener("blur",this);var n;for(n in this._EventHandle)for(var s=this._EventHandle[n][1],a=0;a-1&&delete this.events[t][i]}},f.fire=function(t){var e=d(arguments,1);t.split(/\x20+/).forEach(function(t){if(t in this.events)for(var i=this.events[t],n=0;n0?t.setTimeout(this.play.bind(this),this.delay):this.play()},f._tryToWakeupAutoplay=function(){~this.wakeupAutoplayDazetime&&(this.wakeupAutoplayDazetime>0?t.setTimeout(this.play.bind(this),this.wakeupAutoplayDazetime):this.play())},f.play=function(){this.pause(),this.isAutoplay&&(this.isLooping||this.slideIndex-1?(i=i.split(","),n.X=parseFloat(i[0]),n.Y=parseFloat(i[1])):n.Y=n.X=parseFloat(i),n[this.axis]*=1.001,"scale("+n.X+", "+n.Y+")")}.bind(this))):c.setStyle(t,"transform",i+" scale"+this.axis+"(1.001)")},f.originScale=function(t){var e=/([\x20]?scale)([XY]?)\(([^\)]+)\)/;c.setStyle(t,"transform",c.getStyle(t,"transform").replace(e,function(t,e,i,n){return t={},i?"1.001"===n?"":(t[i]=parseFloat(n),"scale"+this.axis+"("+(i===this.axis?t[this.axis]/1.001:1)+")"):(n.indexOf(",")>-1?(n=n.split(","),t.X=parseFloat(n[0]),t.Y=parseFloat(n[1])):t.Y=t.X=parseFloat(n),t[this.axis]/=1.001,"scale("+t.X+", "+t.Y+")")}.bind(this)))},f._isItself=function(t){var e=this.fixPage;if("string"==typeof e){for(var i,n=[],s=t;!a(s,"islider-outer")&&s!==this.wrap;)n.push(s),s=s.parentNode;if(s=n.pop(),n.length)try{if(i=Array.prototype.slice.call(s.querySelectorAll(e)),i.length)for(var r=0;r-1)return!0}catch(o){return!1}}return!1},f.subjectTo=function(t,e){if(!(!t instanceof c)){var i=this;i.animateTime=t.animateTime,i.isLooping=t.isLooping,i.isAutoplay=!1,t.on("slideStart",function(t){i.startHandler(t)}),t.on("slide",function(t){i.moveHandler(t)}),t.on("slideEnd",function(t){i.endHandler(t)}),t.on("slideChange",function(t){var e=i.data.length,n=i.direction;n>0&&(t-i.slideIndex+e)%e===1?i.slideNext():0>n&&(t-i.slideIndex-e)%e===-1&&i.slidePrev()}),t.on("slideRestore",function(t){i.slideIndex!==t&&i.slideTo(t)})}},"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t.iSlider=t.iSlider||c}(window||this); \ No newline at end of file diff --git a/demo/public/js/iSlider.plugin.BIZone.min.js b/demo/public/js/iSlider.plugin.BIZone.min.js index a31fa793..f7ea02c3 100644 --- a/demo/public/js/iSlider.plugin.BIZone.min.js +++ b/demo/public/js/iSlider.plugin.BIZone.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("BIZone",function(e){function t(e){if("number"==typeof e)return e<0&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;i<4;i++)if(Math.abs(n[i]-u[i])e&&(e=0),[e,e,e,e];if(e instanceof Array)switch(e.length){case 4:return e;case 3:return[e[0],e[1],e[2],e[1]];case 2:return[e[0],e[1],e[0],e[1]];case 1:return[e[0],e[0],e[0],e[0]]}return[0,0,0,0]}function n(){var e=f.ownerDocument.documentElement,t={top:0,left:0};"undefined"!=typeof f.getBoundingClientRect&&(t=f.getBoundingClientRect());var n=t.top+(window.pageYOffset||e.scrollTop)-(e.clientTop||0),i=t.left+(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0);return[n,i+f.offsetWidth,n+f.offsetHeight,i]}var i=this,o=t(e.size||0),r=this.deviceEvents,f=i.outer,u=n();o.filter(function(e){return e>0}).length>0&&i.on("slide",function(e){for(var t=r.hasTouch?e.targetTouches[0]:e,n=[t.pageY,t.pageX,t.pageY,t.pageX],i=0;4>i;i++)if(Math.abs(n[i]-u[i])n;n++)i[n]=document.createElement("div"),i[n].className="islider-btn-outer",t[n]=document.createElement("div"),t[n].className="islider-btn-inner",0===n?(i[n].className+=" left",i[n].dir=-1):(i[n].className+=" right",i[n].dir=1),i[n].addEventListener("click",function(){var i=parseInt(this.getAttribute("dir"),10);e.slideTo(e.slideIndex+i)}),i[n].appendChild(t[n]),e.wrap.appendChild(i[n],e.wrap.nextSibling)})}); \ No newline at end of file diff --git a/demo/public/js/iSlider.plugin.dot.min.js b/demo/public/js/iSlider.plugin.dot.min.js index af12e8d6..b5d52332 100644 --- a/demo/public/js/iSlider.plugin.dot.min.js +++ b/demo/public/js/iSlider.plugin.dot.min.js @@ -1 +1 @@ -!function(e,t){"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?t(require("./iSlider")):"function"==typeof define&&define.amd?define(["./iSlider"],function(e){t(e)}):t(e.iSlider)}(window?window:this,function(e){"use strict";e&&e.regPlugin("dot",function(e){function t(){var e=document.createDocumentFragment();a.forEach(function(e,t){e.removeEventListener(r,d[t],!1)}),a=[],d=[],l.innerHTML="";for(var t=0;t1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){E=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,p-H<300&&(t.preventDefault(),S=3),H=p}}}function p(t){if(E){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}q.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=T*r0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);O={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=O.start[o],n=O.end[o],e>=r&&e<=n}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=O.start.left,e=O.end.top-s;break;case 2:t=O.start.left,e=O.start.top;break;case 3:t=O.end.left-n,e=O.end.top-s;break;case 4:t=O.end.left-n,e=O.start.top;break;case 5:e=O.end.top-s;break;case 6:e=O.start.top;break;case 7:t=O.end.left-n;break;case 8:t=O.start.left}n1&&(r=l[1]-0,n=l[2]-0),"none"===s)return a;var f,c=s.match(/^matrix3d\((.+)\)$/),p=s.match(/^matrix\((.+)\)$/);return c?(f=c[1].split(", "),a={translateX:f[12]-0,translateY:f[13]-0,translateZ:f[14]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[5]-0,scaleZ:f[10]-0}):p&&(f=p[1].split(", "),a={translateX:f[4]-0,translateY:f[5]-0,offsetX:r-0,offsetY:n-0,scaleX:f[0]-0,scaleY:f[3]-0}),a}function l(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}function f(t){T=1,x=t&&t.zoomFactor||2}function c(t){D.call(this,t);var e=this.els[1].querySelector("img:first-child"),a=this.deviceEvents;if(a.hasTouch&&null!==e){E=!0;var r=i(e);b=s(t.targetTouches),w=r.translateX-0,k=r.translateY-0,T=r.scaleX,Y=e;var o=v(e);if(2==t.targetTouches.length){H=null;var f=t.touches,c=l({x:f[0].pageX,y:f[0].pageY},{x:f[1].pageX,y:f[1].pageY});e.style.webkitTransformOrigin=n(c.x-o.left,c.y-o.top)}else if(1===t.targetTouches.length){var p=(new Date).getTime();S=0,300>p-H&&(t.preventDefault(),S=3),H=p}}}function p(t){if(E){var e=0,a=Y,r=this.deviceEvents;if(r.hasTouch&&(2===t.targetTouches.length?(a.style.webkitTransitionDuration="0",t.preventDefault(),h(t),e=2):1===t.targetTouches.length&&T>1&&(a.style.webkitTransitionDuration="0",t.preventDefault(),g.call(this,t),e=1),S=e,e>0))return}q.call(this,t)}function u(t){var e=e||2,r=Y,s=v(r);T=1==T?e:1,r.style.webkitTransform=a(0,0,0,T),1!=T&&(r.style.webkitTransformOrigin=n(t.touches[0].pageX-s.left,t.touches[0].pageY-s.top))}function h(t){var e=s(t.targetTouches),r=o(b,e),n=Y;r=C>T*r?C:T*r,n.style.webkitTransform=a(0,0,0,r)}function d(t){if(E){var e=0;if(2===S?(y(t),e=2):1==S?(y(t),e=1):3===S&&(u(t),y(t),E=!1),e>0)return}W.call(this,t)}function g(t){var e=Y,r=this.deviceEvents,n={X:r.hasTouch?t.targetTouches[0].pageX-this.startX:t.pageX-this.startX,Y:r.hasTouch?t.targetTouches[0].pageY-this.startY:t.pageY-this.startY},s={x:w+n.X-0,y:k+n.Y-0};e.style.webkitTransform=a(s.x,s.y,0,T)}function v(t){var e={left:0,top:0};do e.top+=t.offsetTop||0,e.left+=t.offsetLeft||0,t=t.offsetParent;while(t);return e}function m(t,e,a){var r,n,s=v(t);O={start:{left:s.left,top:s.top},end:{left:s.left+t.clientWidth,top:s.top+t.clientHeight}};var o=1==a?"left":"top";return r=O.start[o],n=O.end[o],e>=r&&n>=e}function X(t,e){var a=0,r=m(t,e.start.left,1),n=m(t,e.end.left,1),s=m(t,e.start.top,0),o=m(t,e.end.top,0);return r!=n&&s!=o?a=r&&o?1:r&&s?2:n&&o?3:4:r==n?!s&&o?a=5:!o&&s&&(a=6):s==o?!r&&n?a=7:r&&!n&&(a=8):s==o==r==n&&(a=9),a}function y(){if(1!=T){var t,e,r,n,s,o,l,f,c,p,u=Y;switch(r=i(u),c=u.parentNode,n=u.clientWidth*r.scaleX,s=u.clientHeight*r.scaleX,o=v(u),l={left:(1-r.scaleX)*r.offsetX+o.left+r.translateX,top:(1-r.scaleX)*r.offsetY+o.top+r.translateY},f={left:l.left+n,top:l.top+s},t=l.left,e=l.top,p=X(c,{start:l,end:f})){case 1:t=O.start.left,e=O.end.top-s;break;case 2:t=O.start.left,e=O.start.top;break;case 3:t=O.end.left-n,e=O.end.top-s;break;case 4:t=O.end.left-n,e=O.start.top;break;case 5:e=O.end.top-s;break;case 6:e=O.start.top;break;case 7:t=O.end.left-n;break;case 8:t=O.start.left}n 1 ? true : false; + /** + * When autoplay is enabled. + * User click/tap behavior(eg: active a link), or if the page loses focus will stop autoplay. + * This configuration will attempt to restart autoplay after N milliseconds. + * ! AutoPlay will be forced to wake up, even when the user fill in a form item + * ! It will be blocked by "lock()" + * @type {number} + */ + self.wakeupAutoplayDazetime = opts.wakeupAutoplayDazetime > -1 ? parseInt(opts.wakeupAutoplayDazetime) : -1; + /** * Animate type * @type {String} @@ -1165,6 +1175,7 @@ break; case 'blur': this.pause(); + this._tryToWakeupAutoplay(); break; } }; @@ -1322,6 +1333,8 @@ } this.offset.X = this.offset.Y = 0; + + this._tryToWakeupAutoplay(); }; /** @@ -1817,6 +1830,16 @@ this.delay > 0 ? global.setTimeout(this.play.bind(this), this.delay) : this.play(); }; + /** + * try to restart autoplay + * @private + */ + iSliderPrototype._tryToWakeupAutoplay = function () { + if (~this.wakeupAutoplayDazetime) { + this.wakeupAutoplayDazetime > 0 ? global.setTimeout(this.play.bind(this), this.wakeupAutoplayDazetime) : this.play(); + } + }; + /** * Start autoplay * @public