From a65ef300a1dba702a1504d402a43e92d3e0f3ddc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 5 Mar 2015 09:43:37 +0100 Subject: [PATCH 1/8] Added some logs and initial organization --- index.html | 3 +-- swipe.js | 30 +++++++++++++++++++++++++----- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c0a152e..1a9386d 100644 --- a/index.html +++ b/index.html @@ -98,8 +98,7 @@

Swipe 2

var element = document.getElementById('mySwipe'); window.mySwipe = new Swipe(element, { startSlide: 0, - auto: 3000, - autoRestart: true, + autoRestart: false, continuous: true, disableScroll: true, stopPropagation: true, diff --git a/swipe.js b/swipe.js index 55a45de..84b5119 100644 --- a/swipe.js +++ b/swipe.js @@ -35,7 +35,7 @@ function Swipe(container, options) { } var element = container.children[0]; - var slides, slidePos, width, length; + var slides, slidePos, width, length, partialPos, containerWidth; options = options || {}; var index = parseInt(options.startSlide, 10) || 0; var speed = options.speed || 300; @@ -44,6 +44,9 @@ function Swipe(container, options) { // AutoRestart option: auto restart slideshow after user's touch event options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : true; + // Partial option: show partially prev and next slides + options.partial = options.partial !== undefined ? options.partial : true; + function setup() { // cache slides @@ -66,10 +69,17 @@ function Swipe(container, options) { slidePos = new Array(slides.length); // determine width of each slide - width = container.getBoundingClientRect().width || container.offsetWidth; + containerWidth = container.getBoundingClientRect().width || container.offsetWidth; + width = options.partial ? containerWidth*0.9 : containerWidth; element.style.width = (slides.length * width) + 'px'; + partialPos = { + hidden: containerWidth, + prev: -width*0.9, + middle: width*0.05, + next: width + }; // stack elements var pos = slides.length; while(pos--) { @@ -81,7 +91,11 @@ function Swipe(container, options) { if (browser.transitions) { slide.style.left = (pos * -width) + 'px'; - move(pos, index > pos ? -width : (index < pos ? width : 0), 0); + if (options.partial) { + move(pos, partialPos.hidden, 0); + } else { + move(pos, index > pos ? -width : (index < pos ? width : 0), 0); + } } } @@ -92,12 +106,18 @@ function Swipe(container, options) { move(circle(index+1), width, 0); } + if (options.partial) { + move(circle(index-2), -partialPos.hidden, 0); + move(circle(index-1), partialPos.prev, 0); + move(index, partialPos.middle, 0); + move(circle(index+1), partialPos.next, 0); + } if (!browser.transitions) { element.style.left = (index * -width) + 'px'; } container.style.visibility = 'visible'; - + console.info(slidePos); } function prev() { @@ -476,7 +496,7 @@ function Swipe(container, options) { } } - + console.info(slidePos); } // kill touchmove and touchend event listeners until touchstart called again From e67f9ba81c3283120c5506e80cbfa280a92dddd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 5 Mar 2015 09:52:29 +0100 Subject: [PATCH 2/8] Organize slides correctly after move --- swipe.js | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/swipe.js b/swipe.js index 84b5119..ab6b2ba 100644 --- a/swipe.js +++ b/swipe.js @@ -455,9 +455,20 @@ function Swipe(container, options) { } else { move(index-1, -width, 0); } + if (options.partial) { + move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0); + move(circle(index-2), partialPos.hidden, 0); + move(circle(index+2), slides.length > 3 ? partialPos.hidden : -partialPos.hidden, 0); + } - move(index, slidePos[index]-width, speed); - move(circle(index+1), slidePos[circle(index+1)]-width, speed); + if (!options.partial) { + move(index, slidePos[index]-width, speed); + move(circle(index+1), slidePos[circle(index+1)]-width, speed); + } else { + move(index, partialPos.prev, speed); + move(circle(index+1), partialPos.middle, speed); + move(circle(index+2), partialPos.next, slides.length > 3 ? speed : 0); + } index = circle(index+1); } else { @@ -469,9 +480,19 @@ function Swipe(container, options) { } else { move(index+1, width, 0); } - - move(index, slidePos[index]+width, speed); - move(circle(index-1), slidePos[circle(index-1)]+width, speed); + if (options.partial) { + move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0); + move(circle(index-2), slides.length > 3 ? -partialPos.hidden : partialPos.hidden, 0); + move(circle(index-3), -partialPos.hidden, 0); + } + if(!options.partial) { + move(index, slidePos[index]+width, speed); + move(circle(index-1), slidePos[circle(index-1)]+width, speed); + } else { + move(index, partialPos.next, speed); + move(circle(index-2), partialPos.prev, slides.length > 3 ? speed : 0 ); + move(circle(index-1), partialPos.middle, speed); + } index = circle(index-1); } @@ -482,12 +503,16 @@ function Swipe(container, options) { } else { - if (options.continuous) { + if (options.continuous && !options.partial) { move(circle(index-1), -width, speed); move(index, 0, speed); move(circle(index+1), width, speed); + } else if (options.partial) { + move(circle(index-1), partialPos.prev, speed); + move(index, partialPos.middle, speed); + move(circle(index+1), partialPos.next, speed); } else { move(index-1, -width, speed); From 8c735161bf2c9478a06e2d36fb2e159891f16046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 5 Mar 2015 10:19:29 +0100 Subject: [PATCH 3/8] added partial support on slide function --- swipe.js | 43 ++++++++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/swipe.js b/swipe.js index ab6b2ba..8164588 100644 --- a/swipe.js +++ b/swipe.js @@ -161,12 +161,11 @@ function Swipe(container, options) { } function slide(to, slideSpeed) { - + console.assert(to>0); // do nothing if already on requested slide if (index === to) { return; } - if (browser.transitions) { var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward @@ -178,25 +177,41 @@ function Swipe(container, options) { // if going forward but to < index, use to = slides.length + to // if going backward but to > index, use to = -slides.length + to - if (direction !== natural_direction) { + if (direction !== natural_direction && !options.partial) { to = -direction * slides.length + to; } } - var diff = Math.abs(index-to) - 1; - - // move all the slides between index and to in the right direction - while (diff--) { - move( circle((to > index ? to : index) - diff - 1), width * direction, 0); + if(!options.partial) { + var diff = Math.abs(index-to) - 1; + // move all the slides between index and to in the right direction + while (diff--) { + move( circle((to > index ? to : index) - diff - 1), width * direction, 0); + } } to = circle(to); - move(index, width * direction, slideSpeed || speed); - move(to, 0, slideSpeed || speed); - - if (options.continuous) { // we need to get the next in place + if (options.partial) { + if (direction === -1) { + move(circle(index-2), partialPos.hidden, 0); + move(circle(index-1), -partialPos.hidden, 0); + move(index, partialPos.prev, slideSpeed || speed); + move(circle(to), partialPos.middle, slideSpeed || speed); + move(circle(to+1), partialPos.next, slideSpeed || speed); + } else { + move(circle(to-2), -partialPos.hidden, 0); + move(circle(index+1), partialPos.hidden, 0); + move(index, partialPos.next, slideSpeed || speed); + move(circle(to), partialPos.middle, slideSpeed || speed); + move(circle(to-1), partialPos.prev, slideSpeed || speed); + } + } else { + move(index, width * direction, slideSpeed || speed); + move(to, 0, slideSpeed || speed); + } + if (options.continuous && !options.partial) { // we need to get the next in place move(circle(to - direction), -(width * direction), 0); } @@ -209,6 +224,7 @@ function Swipe(container, options) { index = to; offloadFn(options.callback && options.callback(getPos(), slides[index])); + console.info(slidePos); } function move(index, dist, speed) { @@ -504,17 +520,14 @@ function Swipe(container, options) { } else { if (options.continuous && !options.partial) { - move(circle(index-1), -width, speed); move(index, 0, speed); move(circle(index+1), width, speed); - } else if (options.partial) { move(circle(index-1), partialPos.prev, speed); move(index, partialPos.middle, speed); move(circle(index+1), partialPos.next, speed); } else { - move(index-1, -width, speed); move(index, 0, speed); move(index+1, width, speed); From 59daa2f282d9ce24413343710d91c813a437cbf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 5 Mar 2015 10:39:35 +0100 Subject: [PATCH 4/8] :boom: Added the partial options to html and remove default value on javascript --- index.html | 9 ++++++--- swipe.js | 7 ++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 1a9386d..9cb24cd 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,10 @@ /* END required styles */ +em { + background: tomato; +} - @@ -72,8 +74,8 @@

Swipe 2

var element = document.getElementById('mySwipe'); window.mySwipe = new Swipe(element, { startSlide: 0, - auto: 3000, - autoRestart: true, + autoRestart: false, + partial: true, continuous: true, disableScroll: true, stopPropagation: true, @@ -99,6 +101,7 @@

Swipe 2

window.mySwipe = new Swipe(element, { startSlide: 0, autoRestart: false, + partial: true, continuous: true, disableScroll: true, stopPropagation: true, diff --git a/swipe.js b/swipe.js index 8164588..1a6e099 100644 --- a/swipe.js +++ b/swipe.js @@ -45,7 +45,7 @@ function Swipe(container, options) { options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : true; // Partial option: show partially prev and next slides - options.partial = options.partial !== undefined ? options.partial : true; + options.partial = options.partial !== undefined ? options.partial : false; function setup() { @@ -68,12 +68,17 @@ function Swipe(container, options) { // create an array to store current positions of each slide slidePos = new Array(slides.length); + if (length < 3) + options.partial = false; + // determine width of each slide containerWidth = container.getBoundingClientRect().width || container.offsetWidth; width = options.partial ? containerWidth*0.9 : containerWidth; element.style.width = (slides.length * width) + 'px'; + + partialPos = { hidden: containerWidth, prev: -width*0.9, From 709483ea5c100b3b390ce711f83a8ed735b8cc99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 12 Mar 2015 13:38:35 +0100 Subject: [PATCH 5/8] Merge from lyfeyaj/master --- build/swipe.min.js | 4 +- swipe.js | 1030 +++++++++++++++++++++++--------------------- 2 files changed, 532 insertions(+), 502 deletions(-) diff --git a/build/swipe.min.js b/build/swipe.min.js index 5901fb3..e8d92f6 100644 --- a/build/swipe.min.js +++ b/build/swipe.min.js @@ -1,8 +1,8 @@ /*! - * Swipe 2.0.2 + * Swipe 2.0.4 * * Brad Birdsall & Felix Liu * Copyright 2015, MIT License * */ -function Swipe(a,b){"use strict";function c(){r=v.children,u=r.length,r.length<2&&(b.continuous=!1),q.transitions&&b.continuous&&r.length<3&&(v.appendChild(r[0].cloneNode(!0)),v.appendChild(v.children[1].cloneNode(!0)),r=v.children),s=new Array(r.length),t=a.getBoundingClientRect().width||a.offsetWidth,v.style.width=r.length*t+"px";for(var c=r.length;c--;){var d=r[c];d.style.width=t+"px",d.setAttribute("data-index",c),q.transitions&&(d.style.left=c*-t+"px",i(c,w>c?-t:c>w?t:0,0))}b.continuous&&q.transitions&&(i(f(w-1),-t,0),i(f(w+1),t,0)),q.transitions||(v.style.left=w*-t+"px"),a.style.visibility="visible"}function d(){b.continuous?h(w-1):w&&h(w-1)}function e(){b.continuous?h(w+1):w=u&&(a-=u),a}function h(a,c){if(w!==a){if(q.transitions){var d=Math.abs(w-a)/(w-a);if(b.continuous){var e=d;d=-s[f(a)]/t,d!==e&&(a=-d*r.length+a)}for(var h=Math.abs(w-a)-1;h--;)i(f((a>w?a:w)-h-1),t*d,0);a=f(a),i(w,t*d,c||x),i(a,0,c||x),b.continuous&&i(f(a-d),-(t*d),0)}else a=f(a),k(w*-t,a*-t,c||x);w=a,p(b.callback&&b.callback(g(),r[w]))}}function i(a,b,c){j(a,b,c),s[a]=b}function j(a,b,c){var d=r[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function k(a,c,d){if(!d)return void(v.style.left=c+"px");var e=+new Date,f=setInterval(function(){var h=+new Date-e;return h>d?(v.style.left=c+"px",A&&l(),b.transitionEnd&&b.transitionEnd.call(event,g(),r[w]),void clearInterval(f)):void(v.style.left=(c-a)*(Math.floor(h/d*100)/100)+a+"px")},4)}function l(){y=setTimeout(e,A)}function m(){A=0,clearTimeout(y)}function n(){m(),A=b.auto||0,l()}var o=function(){},p=function(a){setTimeout(a||o,0)},q={addEventListener:!!window.addEventListener,touch:"ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(document.createElement("swipe"))};if(a){var r,s,t,u,v=a.children[0];b=b||{};var w=parseInt(b.startSlide,10)||0,x=b.speed||300;b.continuous=void 0!==b.continuous?b.continuous:!0,b.autoRestart=void 0!==b.autoRestart?b.autoRestart:!0;var y,z,A=b.auto||0,B={},C={},D={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":p(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":p(this.transitionEnd(a));break;case"resize":p(c)}b.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];B={x:b.pageX,y:b.pageY,time:+new Date},z=void 0,C={},v.addEventListener("touchmove",this,!1),v.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){b.disableScroll&&a.preventDefault();var c=a.touches[0];C={x:c.pageX-B.x,y:c.pageY-B.y},"undefined"==typeof z&&(z=!!(z||Math.abs(C.x)0||w===r.length-1&&C.x<0?Math.abs(C.x)/t+1:1),j(w-1,C.x+s[w-1],0),j(w,C.x+s[w],0),j(w+1,C.x+s[w+1],0)))}},end:function(){var a=+new Date-B.time,c=Number(a)<250&&Math.abs(C.x)>20||Math.abs(C.x)>t/2,d=!w&&C.x>0||w===r.length-1&&C.x<0;b.continuous&&(d=!1);var e=C.x<0;z||(c&&!d?(e?(b.continuous?(i(f(w-1),-t,0),i(f(w+2),t,0)):i(w-1,-t,0),i(w,s[w]-t,x),i(f(w+1),s[f(w+1)]-t,x),w=f(w+1)):(b.continuous?(i(f(w+1),t,0),i(f(w-2),-t,0)):i(w+1,t,0),i(w,s[w]+t,x),i(f(w-1),s[f(w-1)]+t,x),w=f(w-1)),b.callback&&b.callback(g(),r[w])):b.continuous?(i(f(w-1),-t,x),i(w,0,x),i(f(w+1),t,x)):(i(w-1,-t,x),i(w,0,x),i(w+1,t,x))),v.removeEventListener("touchmove",D,!1),v.removeEventListener("touchend",D,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===w&&((A||b.autoRestart)&&n(),b.transitionEnd&&b.transitionEnd.call(a,g(),r[w]))}};return c(),A&&l(),q.addEventListener?(q.touch&&v.addEventListener("touchstart",D,!1),q.transitions&&(v.addEventListener("webkitTransitionEnd",D,!1),v.addEventListener("msTransitionEnd",D,!1),v.addEventListener("oTransitionEnd",D,!1),v.addEventListener("otransitionend",D,!1),v.addEventListener("transitionend",D,!1)),window.addEventListener("resize",D,!1)):window.onresize=function(){c()},{setup:function(){c()},slide:function(a,b){m(),h(a,b)},prev:function(){m(),d()},next:function(){m(),e()},restart:function(){n()},stop:function(){m()},getPos:function(){return g()},getNumSlides:function(){return u},kill:function(){m(),v.style.width="",v.style.left="";for(var a=r.length;a--;){var b=r[a];b.style.width="",b.style.left="",q.transitions&&j(a,0,0)}q.addEventListener?(v.removeEventListener("touchstart",D,!1),v.removeEventListener("webkitTransitionEnd",D,!1),v.removeEventListener("msTransitionEnd",D,!1),v.removeEventListener("oTransitionEnd",D,!1),v.removeEventListener("otransitionend",D,!1),v.removeEventListener("transitionend",D,!1),window.removeEventListener("resize",D,!1)):window.onresize=null}}}}(window.jQuery||window.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(window.jQuery||window.Zepto); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.Swipe=b()}):"object"==typeof exports?module.exports=b():a.Swipe=b()}(this,function(){function Swipe(c,d){"use strict";function e(){t=z.children,w=t.length,t.length<2&&(d.continuous=!1),s.transitions&&d.continuous&&t.length<3&&(z.appendChild(t[0].cloneNode(!0)),z.appendChild(z.children[1].cloneNode(!0)),t=z.children),u=new Array(t.length),3>w&&(d.partial=!1),y=c.getBoundingClientRect().width||c.offsetWidth,v=d.partial?.9*y:y,z.style.width=t.length*v+"px",x={hidden:y,prev:.9*-v,middle:.05*v,next:v};for(var a=t.length;a--;){var b=t[a];b.style.width=v+"px",b.setAttribute("data-index",a),s.transitions&&(b.style.left=a*-v+"px",d.partial?k(a,x.hidden,0):k(a,A>a?-v:a>A?v:0,0))}d.continuous&&s.transitions&&(k(h(A-1),-v,0),k(h(A+1),v,0)),d.partial&&(k(h(A-2),-x.hidden,0),k(h(A-1),x.prev,0),k(A,x.middle,0),k(h(A+1),x.next,0)),s.transitions||(z.style.left=A*-v+"px"),c.style.visibility="visible",console.info(u)}function f(){d.continuous?j(A-1):A&&j(A-1)}function g(){d.continuous?j(A+1):A=w&&(a-=w),a}function j(a,b){if(console.assert(a>0),A!==a){if(s.transitions){var c=Math.abs(A-a)/(A-a);if(d.continuous){var e=c;c=-u[h(a)]/v,c===e||d.partial||(a=-c*t.length+a)}if(!d.partial)for(var f=Math.abs(A-a)-1;f--;)k(h((a>A?a:A)-f-1),v*c,0);a=h(a),k(A,v*c,b||B),k(a,0,b||B),d.partial?-1===c?(k(h(A-2),x.hidden,0),k(h(A-1),-x.hidden,0),k(A,x.prev,b||B),k(h(a),x.middle,b||B),k(h(a+1),x.next,b||B)):(k(h(a-2),-x.hidden,0),k(h(A+1),x.hidden,0),k(A,x.next,b||B),k(h(a),x.middle,b||B),k(h(a-1),x.prev,b||B)):(d.continuous&&k(h(a-c),-(v*c),0),k(A,v*c,b||B),k(a,0,b||B))}else a=h(a),m(A*-v,a*-v,b||B);A=a,r(d.callback&&d.callback(i(),t[A])),console.info(u)}}function k(a,b,c){l(a,b,c),u[a]=b}function l(a,b,c){var d=t[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function m(a,b,c){if(!c)return void(z.style.left=b+"px");var e=+new Date,f=setInterval(function(){var g=+new Date-e;return g>c?(z.style.left=b+"px",E&&n(),d.transitionEnd&&d.transitionEnd.call(event,i(),t[A]),void clearInterval(f)):void(z.style.left=(b-a)*(Math.floor(g/c*100)/100)+a+"px")},4)}function n(){C=setTimeout(g,E)}function o(){E=0,clearTimeout(C)}function p(){o(),E=d.auto||0,n()}var q=function(){},r=function(a){setTimeout(a||q,0)},s={addEventListener:!!a.addEventListener,touch:"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(b.createElement("swipe"))};if(c){var t,u,v,w,x,y,z=c.children[0];d=d||{};var A=parseInt(d.startSlide,10)||0,B=d.speed||300;d.continuous=void 0!==d.continuous?d.continuous:!0,d.autoRestart=void 0!==d.autoRestart?d.autoRestart:!0,d.partial=void 0!==d.partial?d.partial:!1;var C,D,E=d.auto||0,F={},G={},H={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":r(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(a));break;case"resize":r(e)}d.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];F={x:b.pageX,y:b.pageY,time:+new Date},D=void 0,G={},z.addEventListener("touchmove",this,!1),z.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){d.disableScroll&&a.preventDefault();var b=a.touches[0];G={x:b.pageX-F.x,y:b.pageY-F.y},"undefined"==typeof D&&(D=!!(D||Math.abs(G.x)0||A===t.length-1&&G.x<0?Math.abs(G.x)/v+1:1),l(A-1,G.x+u[A-1],0),l(A,G.x+u[A],0),l(A+1,G.x+u[A+1],0)))}},end:function(){var a=+new Date-F.time,b=Number(a)<250&&Math.abs(G.x)>20||Math.abs(G.x)>v/2,c=!A&&G.x>0||A===t.length-1&&G.x<0;d.continuous&&(c=!1);var e=G.x<0;D||(b&&!c?(e?(d.continuous?(k(h(A-1),-v,0),k(h(A+2),v,0)):k(A-1,-v,0),d.partial?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),k(h(A-2),x.hidden,0),k(h(A+2),t.length>3?x.hidden:-x.hidden,0),k(A,x.prev,B),k(h(A+1),x.middle,B),k(h(A+2),x.next,t.length>3?B:0)):(k(A,u[A]-v,B),k(h(A+1),u[h(A+1)]-v,B)),A=h(A+1)):(d.continuous?(k(h(A+1),v,0),k(h(A-2),-v,0)):k(A+1,v,0),d.partial?(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),k(h(A-2),t.length>3?-x.hidden:x.hidden,0),k(h(A-3),-x.hidden,0),k(A,x.next,B),k(h(A-2),x.prev,t.length>3?B:0),k(h(A-1),x.middle,B)):(k(A,u[A]+v,B),k(h(A-1),u[h(A-1)]+v,B)),A=h(A-1)),d.callback&&d.callback(i(),t[A])):d.continuous&&!d.partial?(k(h(A-1),-v,B),k(A,0,B),k(h(A+1),v,B)):d.partial?(k(h(A-1),x.prev,B),k(A,x.middle,B),k(h(A+1),x.next,B)):(k(A-1,-v,B),k(A,0,B),k(A+1,v,B)),console.info(u)),z.removeEventListener("touchmove",H,!1),z.removeEventListener("touchend",H,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===A&&((E||d.autoRestart)&&p(),d.transitionEnd&&d.transitionEnd.call(a,i(),t[A]))}};return e(),E&&n(),s.addEventListener?(s.touch&&z.addEventListener("touchstart",H,!1),s.transitions&&(z.addEventListener("webkitTransitionEnd",H,!1),z.addEventListener("msTransitionEnd",H,!1),z.addEventListener("oTransitionEnd",H,!1),z.addEventListener("otransitionend",H,!1),z.addEventListener("transitionend",H,!1)),a.addEventListener("resize",H,!1)):a.onresize=function(){e()},{setup:function(){e()},slide:function(a,b){o(),j(a,b)},prev:function(){o(),f()},next:function(){o(),g()},restart:function(){p()},stop:function(){o()},getPos:function(){return i()},getNumSlides:function(){return w},kill:function(){o(),z.style.width="",z.style.left="";for(var b=t.length;b--;){var c=t[b];c.style.width="",c.style.left="",s.transitions&&l(b,0,0)}s.addEventListener?(z.removeEventListener("touchstart",H,!1),z.removeEventListener("webkitTransitionEnd",H,!1),z.removeEventListener("msTransitionEnd",H,!1),z.removeEventListener("oTransitionEnd",H,!1),z.removeEventListener("otransitionend",H,!1),z.removeEventListener("transitionend",H,!1),a.removeEventListener("resize",H,!1)):a.onresize=null}}}}var a=this,b=a.document;return(a.jQuery||a.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(a.jQuery||a.Zepto),Swipe}); \ No newline at end of file diff --git a/swipe.js b/swipe.js index 1a6e099..a3e365b 100644 --- a/swipe.js +++ b/swipe.js @@ -1,713 +1,743 @@ /*! - * Swipe 2.0.2 + * Swipe 2.0.4 * * Brad Birdsall & Felix Liu * Copyright 2015, MIT License * */ -function Swipe(container, options) { +// if the module has no dependencies, the above pattern can be simplified to +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], function(){ + return (root.Swipe = factory()); + }); + } else if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals + root.Swipe = factory(); + } +}(this, function () { - "use strict"; + var root = this; + var _document = root.document; - // utilities - var noop = function() {}; // simple no operation function - var offloadFn = function(fn) { setTimeout(fn || noop, 0); }; // offload a functions execution + function Swipe(container, options) { - // check browser capabilities - var browser = { - addEventListener: !!window.addEventListener, - touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, - transitions: (function(temp) { - var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition']; - for ( var i in props ) { - if (temp.style[ props[i] ] !== undefined){ - return true; - } - } - return false; - })(document.createElement('swipe')) - }; + "use strict"; - // quit if no root element - if (!container) { - return; - } + // utilities + var noop = function() {}; // simple no operation function + var offloadFn = function(fn) { setTimeout(fn || noop, 0); }; // offload a functions execution - var element = container.children[0]; - var slides, slidePos, width, length, partialPos, containerWidth; - options = options || {}; - var index = parseInt(options.startSlide, 10) || 0; - var speed = options.speed || 300; - options.continuous = options.continuous !== undefined ? options.continuous : true; + // check browser capabilities + var browser = { + addEventListener: !!root.addEventListener, + touch: ('ontouchstart' in root) || root.DocumentTouch && _document instanceof DocumentTouch, + transitions: (function(temp) { + var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition']; + for ( var i in props ) { + if (temp.style[ props[i] ] !== undefined){ + return true; + } + } + return false; + })(_document.createElement('swipe')) + }; - // AutoRestart option: auto restart slideshow after user's touch event - options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : true; + // quit if no root element + if (!container) { + return; + } - // Partial option: show partially prev and next slides - options.partial = options.partial !== undefined ? options.partial : false; + var element = container.children[0]; + var slides, slidePos, width, length, partialPos, containerWidth;; + options = options || {}; + var index = parseInt(options.startSlide, 10) || 0; + var speed = options.speed || 300; + options.continuous = options.continuous !== undefined ? options.continuous : true; - function setup() { + // AutoRestart option: auto restart slideshow after user's touch event + options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : true; - // cache slides - slides = element.children; - length = slides.length; + // Partial option: show partially prev and next slides + options.partial = options.partial !== undefined ? options.partial : false; - // set continuous to false if only one slide - if (slides.length < 2) { - options.continuous = false; - } + function setup() { - //special case if two slides - if (browser.transitions && options.continuous && slides.length < 3) { - element.appendChild(slides[0].cloneNode(true)); - element.appendChild(element.children[1].cloneNode(true)); + // cache slides slides = element.children; - } + length = slides.length; - // create an array to store current positions of each slide - slidePos = new Array(slides.length); - - if (length < 3) - options.partial = false; + // set continuous to false if only one slide + if (slides.length < 2) { + options.continuous = false; + } - // determine width of each slide - containerWidth = container.getBoundingClientRect().width || container.offsetWidth; - width = options.partial ? containerWidth*0.9 : containerWidth; + //special case if two slides + if (browser.transitions && options.continuous && slides.length < 3) { + element.appendChild(slides[0].cloneNode(true)); + element.appendChild(element.children[1].cloneNode(true)); + slides = element.children; + } - element.style.width = (slides.length * width) + 'px'; + // create an array to store current positions of each slide + slidePos = new Array(slides.length); + if (length < 3) + options.partial = false; + // determine width of each slide + containerWidth = container.getBoundingClientRect().width || container.offsetWidth; + width = options.partial ? containerWidth*0.9 : containerWidth; - partialPos = { - hidden: containerWidth, - prev: -width*0.9, - middle: width*0.05, - next: width - }; - // stack elements - var pos = slides.length; - while(pos--) { + element.style.width = (slides.length * width) + 'px'; + partialPos = { + hidden: containerWidth, + prev: -width*0.9, + middle: width*0.05, + next: width + }; + // stack elements + var pos = slides.length; + while(pos--) { - var slide = slides[pos]; + var slide = slides[pos]; - slide.style.width = width + 'px'; - slide.setAttribute('data-index', pos); + slide.style.width = width + 'px'; + slide.setAttribute('data-index', pos); - if (browser.transitions) { - slide.style.left = (pos * -width) + 'px'; - if (options.partial) { - move(pos, partialPos.hidden, 0); - } else { - move(pos, index > pos ? -width : (index < pos ? width : 0), 0); + if (browser.transitions) { + slide.style.left = (pos * -width) + 'px'; + if (options.partial) { + move(pos, partialPos.hidden, 0); + } else { + move(pos, index > pos ? -width : (index < pos ? width : 0), 0); + } } + } - } + // reposition elements before and after index + if (options.continuous && browser.transitions) { + move(circle(index-1), -width, 0); + move(circle(index+1), width, 0); + } - // reposition elements before and after index - if (options.continuous && browser.transitions) { - move(circle(index-1), -width, 0); - move(circle(index+1), width, 0); - } + if (options.partial) { + move(circle(index-2), -partialPos.hidden, 0); + move(circle(index-1), partialPos.prev, 0); + move(index, partialPos.middle, 0); + move(circle(index+1), partialPos.next, 0); + } - if (options.partial) { - move(circle(index-2), -partialPos.hidden, 0); - move(circle(index-1), partialPos.prev, 0); - move(index, partialPos.middle, 0); - move(circle(index+1), partialPos.next, 0); - } - if (!browser.transitions) { - element.style.left = (index * -width) + 'px'; + if (!browser.transitions) { + element.style.left = (index * -width) + 'px'; + } + + container.style.visibility = 'visible'; + + console.info(slidePos); } - container.style.visibility = 'visible'; - console.info(slidePos); - } + function prev() { - function prev() { + if (options.continuous) { + slide(index-1); + } + else if (index) { + slide(index-1); + } - if (options.continuous) { - slide(index-1); - } - else if (index) { - slide(index-1); } - } + function next() { - function next() { + if (options.continuous) { + slide(index+1); + } + else if (index < slides.length - 1) { + slide(index+1); + } - if (options.continuous) { - slide(index+1); - } - else if (index < slides.length - 1) { - slide(index+1); } - } + function circle(index) { - function circle(index) { + // a simple positive modulo using slides.length + return (slides.length + (index % slides.length)) % slides.length; - // a simple positive modulo using slides.length - return (slides.length + (index % slides.length)) % slides.length; + } - } + function getPos() { + // Fix for the clone issue in the event of 2 slides + var currentIndex = index; - function getPos() { - // Fix for the clone issue in the event of 2 slides - var currentIndex = index; + if (currentIndex >= length) { + currentIndex = currentIndex - length; + } - if (currentIndex >= length) { - currentIndex = currentIndex - length; + return currentIndex; } - return currentIndex; - } + function slide(to, slideSpeed) { + console.assert(to>0); + // do nothing if already on requested slide + if (index === to) { + return; + } - function slide(to, slideSpeed) { - console.assert(to>0); - // do nothing if already on requested slide - if (index === to) { - return; - } - if (browser.transitions) { + if (browser.transitions) { - var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward + var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward - // get the actual position of the slide - if (options.continuous) { - var natural_direction = direction; - direction = -slidePos[circle(to)] / width; + // get the actual position of the slide + if (options.continuous) { + var natural_direction = direction; + direction = -slidePos[circle(to)] / width; - // if going forward but to < index, use to = slides.length + to - // if going backward but to > index, use to = -slides.length + to - if (direction !== natural_direction && !options.partial) { - to = -direction * slides.length + to; - } + // if going forward but to < index, use to = slides.length + to + // if going backward but to > index, use to = -slides.length + to + if (direction !== natural_direction && !options.partial) { + to = -direction * slides.length + to; + } - } + } + if(!options.partial) { + var diff = Math.abs(index-to) - 1; - if(!options.partial) { - var diff = Math.abs(index-to) - 1; - // move all the slides between index and to in the right direction - while (diff--) { - move( circle((to > index ? to : index) - diff - 1), width * direction, 0); + // move all the slides between index and to in the right direction + while (diff--) { + move( circle((to > index ? to : index) - diff - 1), width * direction, 0); + } } - } - to = circle(to); + to = circle(to); - if (options.partial) { - if (direction === -1) { - move(circle(index-2), partialPos.hidden, 0); - move(circle(index-1), -partialPos.hidden, 0); - move(index, partialPos.prev, slideSpeed || speed); - move(circle(to), partialPos.middle, slideSpeed || speed); - move(circle(to+1), partialPos.next, slideSpeed || speed); + move(index, width * direction, slideSpeed || speed); + move(to, 0, slideSpeed || speed); + if (options.partial) { + if (direction === -1) { + move(circle(index-2), partialPos.hidden, 0); + move(circle(index-1), -partialPos.hidden, 0); + move(index, partialPos.prev, slideSpeed || speed); + move(circle(to), partialPos.middle, slideSpeed || speed); + move(circle(to+1), partialPos.next, slideSpeed || speed); + } else { + move(circle(to-2), -partialPos.hidden, 0); + move(circle(index+1), partialPos.hidden, 0); + move(index, partialPos.next, slideSpeed || speed); + move(circle(to), partialPos.middle, slideSpeed || speed); + move(circle(to-1), partialPos.prev, slideSpeed || speed); + } } else { - move(circle(to-2), -partialPos.hidden, 0); - move(circle(index+1), partialPos.hidden, 0); - move(index, partialPos.next, slideSpeed || speed); - move(circle(to), partialPos.middle, slideSpeed || speed); - move(circle(to-1), partialPos.prev, slideSpeed || speed); + if (options.continuous) { // we need to get the next in place + move(circle(to - direction), -(width * direction), 0); + } + move(index, width * direction, slideSpeed || speed); + move(to, 0, slideSpeed || speed); } + + } else { - move(index, width * direction, slideSpeed || speed); - move(to, 0, slideSpeed || speed); - } - if (options.continuous && !options.partial) { // we need to get the next in place - move(circle(to - direction), -(width * direction), 0); + + to = circle(to); + animate(index * -width, to * -width, slideSpeed || speed); + //no fallback for a circular continuous if the browser does not accept transitions } - } else { + index = to; + offloadFn(options.callback && options.callback(getPos(), slides[index])); - to = circle(to); - animate(index * -width, to * -width, slideSpeed || speed); - //no fallback for a circular continuous if the browser does not accept transitions + console.info(slidePos); } - index = to; - offloadFn(options.callback && options.callback(getPos(), slides[index])); - console.info(slidePos); - } + function move(index, dist, speed) { + + translate(index, dist, speed); + slidePos[index] = dist; - function move(index, dist, speed) { + } - translate(index, dist, speed); - slidePos[index] = dist; + function translate(index, dist, speed) { - } + var slide = slides[index]; + var style = slide && slide.style; + + if (!style) { + return; + } - function translate(index, dist, speed) { + style.webkitTransitionDuration = + style.MozTransitionDuration = + style.msTransitionDuration = + style.OTransitionDuration = + style.transitionDuration = speed + 'ms'; - var slide = slides[index]; - var style = slide && slide.style; + style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; + style.msTransform = + style.MozTransform = + style.OTransform = 'translateX(' + dist + 'px)'; - if (!style) { - return; } - style.webkitTransitionDuration = - style.MozTransitionDuration = - style.msTransitionDuration = - style.OTransitionDuration = - style.transitionDuration = speed + 'ms'; + function animate(from, to, speed) { - style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; - style.msTransform = - style.MozTransform = - style.OTransform = 'translateX(' + dist + 'px)'; + // if not an animation, just reposition + if (!speed) { - } + element.style.left = to + 'px'; + return; - function animate(from, to, speed) { + } - // if not an animation, just reposition - if (!speed) { + var start = +new Date(); - element.style.left = to + 'px'; - return; + var timer = setInterval(function() { - } + var timeElap = +new Date() - start; - var start = +new Date(); + if (timeElap > speed) { - var timer = setInterval(function() { + element.style.left = to + 'px'; - var timeElap = +new Date() - start; + if (delay) { + begin(); + } - if (timeElap > speed) { + if (options.transitionEnd) { + options.transitionEnd.call(event, getPos(), slides[index]); + } - element.style.left = to + 'px'; + clearInterval(timer); + return; - if (delay) { - begin(); } - if (options.transitionEnd) { - options.transitionEnd.call(event, getPos(), slides[index]); - } + element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px'; - clearInterval(timer); - return; + }, 4); - } + } - element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px'; + // setup auto slideshow + var delay = options.auto || 0; + var interval; - }, 4); + function begin() { - } + interval = setTimeout(next, delay); - // setup auto slideshow - var delay = options.auto || 0; - var interval; + } - function begin() { + function stop() { - interval = setTimeout(next, delay); + delay = 0; + clearTimeout(interval); - } + } - function stop() { + function restart() { + stop(); + delay = options.auto || 0; + begin(); + } - delay = 0; - clearTimeout(interval); - } + // setup initial vars + var start = {}; + var delta = {}; + var isScrolling; - function restart() { - stop(); - delay = options.auto || 0; - begin(); - } + // setup event capturing + var events = { + handleEvent: function(event) { - // setup initial vars - var start = {}; - var delta = {}; - var isScrolling; + switch (event.type) { + case 'touchstart': this.start(event); break; + case 'touchmove': this.move(event); break; + case 'touchend': offloadFn(this.end(event)); break; + case 'webkitTransitionEnd': + case 'msTransitionEnd': + case 'oTransitionEnd': + case 'otransitionend': + case 'transitionend': offloadFn(this.transitionEnd(event)); break; + case 'resize': offloadFn(setup); break; + } - // setup event capturing - var events = { + if (options.stopPropagation) { + event.stopPropagation(); + } - handleEvent: function(event) { + }, + start: function(event) { - switch (event.type) { - case 'touchstart': this.start(event); break; - case 'touchmove': this.move(event); break; - case 'touchend': offloadFn(this.end(event)); break; - case 'webkitTransitionEnd': - case 'msTransitionEnd': - case 'oTransitionEnd': - case 'otransitionend': - case 'transitionend': offloadFn(this.transitionEnd(event)); break; - case 'resize': offloadFn(setup); break; - } + var touches = event.touches[0]; - if (options.stopPropagation) { - event.stopPropagation(); - } + // measure start values + start = { - }, - start: function(event) { + // get initial touch coords + x: touches.pageX, + y: touches.pageY, - var touches = event.touches[0]; + // store time to determine touch duration + time: +new Date() - // measure start values - start = { + }; - // get initial touch coords - x: touches.pageX, - y: touches.pageY, + // used for testing first move event + isScrolling = undefined; - // store time to determine touch duration - time: +new Date() + // reset delta and end measurements + delta = {}; - }; + // attach touchmove and touchend listeners + element.addEventListener('touchmove', this, false); + element.addEventListener('touchend', this, false); - // used for testing first move event - isScrolling = undefined; + }, + move: function(event) { - // reset delta and end measurements - delta = {}; + // ensure swiping with one touch and not pinching + if ( event.touches.length > 1 || event.scale && event.scale !== 1) { + return; + } - // attach touchmove and touchend listeners - element.addEventListener('touchmove', this, false); - element.addEventListener('touchend', this, false); + if (options.disableScroll) { + event.preventDefault(); + } - }, - move: function(event) { + var touches = event.touches[0]; - // ensure swiping with one touch and not pinching - if ( event.touches.length > 1 || event.scale && event.scale !== 1) { - return; - } + // measure change in x and y + delta = { + x: touches.pageX - start.x, + y: touches.pageY - start.y + }; - if (options.disableScroll) { - event.preventDefault(); - } + // determine if scrolling test has run - one time test + if ( typeof isScrolling === 'undefined') { + isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) ); + } - var touches = event.touches[0]; + // if user is not trying to scroll vertically + if (!isScrolling) { - // measure change in x and y - delta = { - x: touches.pageX - start.x, - y: touches.pageY - start.y - }; + // prevent native scrolling + event.preventDefault(); - // determine if scrolling test has run - one time test - if ( typeof isScrolling === 'undefined') { - isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) ); - } + // stop slideshow + stop(); - // if user is not trying to scroll vertically - if (!isScrolling) { + // increase resistance if first or last slide + if (options.continuous) { // we don't add resistance at the end - // prevent native scrolling - event.preventDefault(); + translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0); + translate(index, delta.x + slidePos[index], 0); + translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0); - // stop slideshow - stop(); + } else { - // increase resistance if first or last slide - if (options.continuous) { // we don't add resistance at the end + delta.x = + delta.x / + ( (!index && delta.x > 0 || // if first slide and sliding left + index === slides.length - 1 && // or if last slide and sliding right + delta.x < 0 // and if sliding at all + ) ? + ( Math.abs(delta.x) / width + 1 ) // determine resistance level + : 1 ); // no resistance if false + + // translate 1:1 + translate(index-1, delta.x + slidePos[index-1], 0); + translate(index, delta.x + slidePos[index], 0); + translate(index+1, delta.x + slidePos[index+1], 0); + } - translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0); - translate(index, delta.x + slidePos[index], 0); - translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0); + } - } else { + }, + end: function(event) { - delta.x = - delta.x / - ( (!index && delta.x > 0 || // if first slide and sliding left - index === slides.length - 1 && // or if last slide and sliding right - delta.x < 0 // and if sliding at all - ) ? - ( Math.abs(delta.x) / width + 1 ) // determine resistance level - : 1 ); // no resistance if false - - // translate 1:1 - translate(index-1, delta.x + slidePos[index-1], 0); - translate(index, delta.x + slidePos[index], 0); - translate(index+1, delta.x + slidePos[index+1], 0); - } + // measure duration + var duration = +new Date() - start.time; - } + // determine if slide attempt triggers next/prev slide + var isValidSlide = + Number(duration) < 250 && // if slide duration is less than 250ms + Math.abs(delta.x) > 20 || // and if slide amt is greater than 20px + Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width - }, - end: function(event) { + // determine if slide attempt is past start and end + var isPastBounds = + !index && delta.x > 0 || // if first slide and slide amt is greater than 0 + index === slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0 - // measure duration - var duration = +new Date() - start.time; + if (options.continuous) { + isPastBounds = false; + } - // determine if slide attempt triggers next/prev slide - var isValidSlide = - Number(duration) < 250 && // if slide duration is less than 250ms - Math.abs(delta.x) > 20 || // and if slide amt is greater than 20px - Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width + // determine direction of swipe (true:right, false:left) + var direction = delta.x < 0; - // determine if slide attempt is past start and end - var isPastBounds = - !index && delta.x > 0 || // if first slide and slide amt is greater than 0 - index === slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0 + // if not scrolling vertically + if (!isScrolling) { - if (options.continuous) { - isPastBounds = false; - } + if (isValidSlide && !isPastBounds) { - // determine direction of swipe (true:right, false:left) - var direction = delta.x < 0; + if (direction) { - // if not scrolling vertically - if (!isScrolling) { + if (options.continuous) { // we need to get the next in this direction in place - if (isValidSlide && !isPastBounds) { + move(circle(index-1), -width, 0); + move(circle(index+2), width, 0); - if (direction) { + } else { + move(index-1, -width, 0); + } + if (options.partial) { + move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0); + move(circle(index-2), partialPos.hidden, 0); + move(circle(index+2), slides.length > 3 ? partialPos.hidden : -partialPos.hidden, 0); - if (options.continuous) { // we need to get the next in this direction in place + move(index, partialPos.prev, speed); + move(circle(index+1), partialPos.middle, speed); + move(circle(index+2), partialPos.next, slides.length > 3 ? speed : 0); + } else { + move(index, slidePos[index]-width, speed); + move(circle(index+1), slidePos[circle(index+1)]-width, speed); + } - move(circle(index-1), -width, 0); - move(circle(index+2), width, 0); + index = circle(index+1); } else { - move(index-1, -width, 0); - } - if (options.partial) { - move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0); - move(circle(index-2), partialPos.hidden, 0); - move(circle(index+2), slides.length > 3 ? partialPos.hidden : -partialPos.hidden, 0); - } + if (options.continuous) { // we need to get the next in this direction in place - if (!options.partial) { - move(index, slidePos[index]-width, speed); - move(circle(index+1), slidePos[circle(index+1)]-width, speed); - } else { - move(index, partialPos.prev, speed); - move(circle(index+1), partialPos.middle, speed); - move(circle(index+2), partialPos.next, slides.length > 3 ? speed : 0); - } - index = circle(index+1); + move(circle(index+1), width, 0); + move(circle(index-2), -width, 0); - } else { - if (options.continuous) { // we need to get the next in this direction in place + } else { + move(index+1, width, 0); + } - move(circle(index+1), width, 0); - move(circle(index-2), -width, 0); + if (options.partial) { + move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0); + move(circle(index-2), slides.length > 3 ? -partialPos.hidden : partialPos.hidden, 0); + move(circle(index-3), -partialPos.hidden, 0); + + move(index, partialPos.next, speed); + move(circle(index-2), partialPos.prev, slides.length > 3 ? speed : 0 ); + move(circle(index-1), partialPos.middle, speed); + } else { + move(index, slidePos[index]+width, speed); + move(circle(index-1), slidePos[circle(index-1)]+width, speed); + } + + + index = circle(index-1); - } else { - move(index+1, width, 0); } - if (options.partial) { - move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0); - move(circle(index-2), slides.length > 3 ? -partialPos.hidden : partialPos.hidden, 0); - move(circle(index-3), -partialPos.hidden, 0); + + if (options.callback) { + options.callback(getPos(), slides[index]); } - if(!options.partial) { - move(index, slidePos[index]+width, speed); - move(circle(index-1), slidePos[circle(index-1)]+width, speed); + + } else { + + if (options.continuous && !options.partial) { + move(circle(index-1), -width, speed); + move(index, 0, speed); + move(circle(index+1), width, speed); + } else if (options.partial) { + move(circle(index-1), partialPos.prev, speed); + move(index, partialPos.middle, speed); + move(circle(index+1), partialPos.next, speed); } else { - move(index, partialPos.next, speed); - move(circle(index-2), partialPos.prev, slides.length > 3 ? speed : 0 ); - move(circle(index-1), partialPos.middle, speed); + move(index-1, -width, speed); + move(index, 0, speed); + move(index+1, width, speed); } - index = circle(index-1); } + console.info(slidePos); + } - if (options.callback) { - options.callback(getPos(), slides[index]); - } + // kill touchmove and touchend event listeners until touchstart called again + element.removeEventListener('touchmove', events, false); + element.removeEventListener('touchend', events, false); - } else { + }, + transitionEnd: function(event) { - if (options.continuous && !options.partial) { - move(circle(index-1), -width, speed); - move(index, 0, speed); - move(circle(index+1), width, speed); - } else if (options.partial) { - move(circle(index-1), partialPos.prev, speed); - move(index, partialPos.middle, speed); - move(circle(index+1), partialPos.next, speed); - } else { - move(index-1, -width, speed); - move(index, 0, speed); - move(index+1, width, speed); + if (parseInt(event.target.getAttribute('data-index'), 10) === index) { + + if (delay || options.autoRestart) { + restart(); + } + + if (options.transitionEnd) { + options.transitionEnd.call(event, getPos(), slides[index]); } } - console.info(slidePos); + } - // kill touchmove and touchend event listeners until touchstart called again - element.removeEventListener('touchmove', events, false); - element.removeEventListener('touchend', events, false); + }; - }, - transitionEnd: function(event) { + // trigger setup + setup(); - if (parseInt(event.target.getAttribute('data-index'), 10) === index) { + // start auto slideshow if applicable + if (delay) { + begin(); + } - if (delay || options.autoRestart) { - restart(); - } - if (options.transitionEnd) { - options.transitionEnd.call(event, getPos(), slides[index]); - } + // add event listeners + if (browser.addEventListener) { + // set touchstart event on element + if (browser.touch) { + element.addEventListener('touchstart', events, false); } - } - - }; - - // trigger setup - setup(); - - // start auto slideshow if applicable - if (delay) { - begin(); - } + if (browser.transitions) { + element.addEventListener('webkitTransitionEnd', events, false); + element.addEventListener('msTransitionEnd', events, false); + element.addEventListener('oTransitionEnd', events, false); + element.addEventListener('otransitionend', events, false); + element.addEventListener('transitionend', events, false); + } + // set resize event on window + root.addEventListener('resize', events, false); - // add event listeners - if (browser.addEventListener) { + } else { - // set touchstart event on element - if (browser.touch) { - element.addEventListener('touchstart', events, false); - } + root.onresize = function () { setup(); }; // to play nice with old IE - if (browser.transitions) { - element.addEventListener('webkitTransitionEnd', events, false); - element.addEventListener('msTransitionEnd', events, false); - element.addEventListener('oTransitionEnd', events, false); - element.addEventListener('otransitionend', events, false); - element.addEventListener('transitionend', events, false); } - // set resize event on window - window.addEventListener('resize', events, false); + // expose the Swipe API + return { + setup: function() { - } else { + setup(); - window.onresize = function () { setup(); }; // to play nice with old IE + }, + slide: function(to, speed) { - } + // cancel slideshow + stop(); - // expose the Swipe API - return { - setup: function() { + slide(to, speed); - setup(); + }, + prev: function() { - }, - slide: function(to, speed) { + // cancel slideshow + stop(); - // cancel slideshow - stop(); + prev(); - slide(to, speed); + }, + next: function() { - }, - prev: function() { + // cancel slideshow + stop(); - // cancel slideshow - stop(); + next(); - prev(); + }, + restart: function() { - }, - next: function() { + // Restart slideshow + restart(); - // cancel slideshow - stop(); + }, - next(); + stop: function() { - }, - restart: function() { + // cancel slideshow + stop(); - // Restart slideshow - restart(); + }, + getPos: function() { - }, + // return current index position + return getPos(); - stop: function() { + }, + getNumSlides: function() { - // cancel slideshow - stop(); + // return total number of slides + return length; + }, + kill: function() { - }, - getPos: function() { + // cancel slideshow + stop(); - // return current index position - return getPos(); + // reset element + element.style.width = ''; + element.style.left = ''; - }, - getNumSlides: function() { + // reset slides + var pos = slides.length; + while (pos--) { - // return total number of slides - return length; - }, - kill: function() { + var slide = slides[pos]; + slide.style.width = ''; + slide.style.left = ''; - // cancel slideshow - stop(); + if (browser.transitions) { + translate(pos, 0, 0); + } - // reset element - element.style.width = ''; - element.style.left = ''; + } - // reset slides - var pos = slides.length; - while (pos--) { + // removed event listeners + if (browser.addEventListener) { - var slide = slides[pos]; - slide.style.width = ''; - slide.style.left = ''; + // remove current event listeners + element.removeEventListener('touchstart', events, false); + element.removeEventListener('webkitTransitionEnd', events, false); + element.removeEventListener('msTransitionEnd', events, false); + element.removeEventListener('oTransitionEnd', events, false); + element.removeEventListener('otransitionend', events, false); + element.removeEventListener('transitionend', events, false); + root.removeEventListener('resize', events, false); - if (browser.transitions) { - translate(pos, 0, 0); } + else { - } - - // removed event listeners - if (browser.addEventListener) { + root.onresize = null; - // remove current event listeners - element.removeEventListener('touchstart', events, false); - element.removeEventListener('webkitTransitionEnd', events, false); - element.removeEventListener('msTransitionEnd', events, false); - element.removeEventListener('oTransitionEnd', events, false); - element.removeEventListener('otransitionend', events, false); - element.removeEventListener('transitionend', events, false); - window.removeEventListener('resize', events, false); + } } - else { - - window.onresize = null; + }; - } + } - } - }; -} + if ( root.jQuery || root.Zepto ) { + (function($) { + $.fn.Swipe = function(params) { + return this.each(function() { + $(this).data('Swipe', new Swipe($(this)[0], params)); + }); + }; + })( root.jQuery || root.Zepto ); + } + return Swipe; -if ( window.jQuery || window.Zepto ) { - (function($) { - $.fn.Swipe = function(params) { - return this.each(function() { - $(this).data('Swipe', new Swipe($(this)[0], params)); - }); - }; - })( window.jQuery || window.Zepto ); -} +})); From 5920eda5f82e7a2b77aa6b3d31de3434b784cb81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 12 Mar 2015 13:57:16 +0100 Subject: [PATCH 6/8] Fix odd position bug on slide function --- build/swipe.min.js | 2 +- swipe.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/build/swipe.min.js b/build/swipe.min.js index e8d92f6..a88dc46 100644 --- a/build/swipe.min.js +++ b/build/swipe.min.js @@ -5,4 +5,4 @@ * Copyright 2015, MIT License * */ -!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.Swipe=b()}):"object"==typeof exports?module.exports=b():a.Swipe=b()}(this,function(){function Swipe(c,d){"use strict";function e(){t=z.children,w=t.length,t.length<2&&(d.continuous=!1),s.transitions&&d.continuous&&t.length<3&&(z.appendChild(t[0].cloneNode(!0)),z.appendChild(z.children[1].cloneNode(!0)),t=z.children),u=new Array(t.length),3>w&&(d.partial=!1),y=c.getBoundingClientRect().width||c.offsetWidth,v=d.partial?.9*y:y,z.style.width=t.length*v+"px",x={hidden:y,prev:.9*-v,middle:.05*v,next:v};for(var a=t.length;a--;){var b=t[a];b.style.width=v+"px",b.setAttribute("data-index",a),s.transitions&&(b.style.left=a*-v+"px",d.partial?k(a,x.hidden,0):k(a,A>a?-v:a>A?v:0,0))}d.continuous&&s.transitions&&(k(h(A-1),-v,0),k(h(A+1),v,0)),d.partial&&(k(h(A-2),-x.hidden,0),k(h(A-1),x.prev,0),k(A,x.middle,0),k(h(A+1),x.next,0)),s.transitions||(z.style.left=A*-v+"px"),c.style.visibility="visible",console.info(u)}function f(){d.continuous?j(A-1):A&&j(A-1)}function g(){d.continuous?j(A+1):A=w&&(a-=w),a}function j(a,b){if(console.assert(a>0),A!==a){if(s.transitions){var c=Math.abs(A-a)/(A-a);if(d.continuous){var e=c;c=-u[h(a)]/v,c===e||d.partial||(a=-c*t.length+a)}if(!d.partial)for(var f=Math.abs(A-a)-1;f--;)k(h((a>A?a:A)-f-1),v*c,0);a=h(a),k(A,v*c,b||B),k(a,0,b||B),d.partial?-1===c?(k(h(A-2),x.hidden,0),k(h(A-1),-x.hidden,0),k(A,x.prev,b||B),k(h(a),x.middle,b||B),k(h(a+1),x.next,b||B)):(k(h(a-2),-x.hidden,0),k(h(A+1),x.hidden,0),k(A,x.next,b||B),k(h(a),x.middle,b||B),k(h(a-1),x.prev,b||B)):(d.continuous&&k(h(a-c),-(v*c),0),k(A,v*c,b||B),k(a,0,b||B))}else a=h(a),m(A*-v,a*-v,b||B);A=a,r(d.callback&&d.callback(i(),t[A])),console.info(u)}}function k(a,b,c){l(a,b,c),u[a]=b}function l(a,b,c){var d=t[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function m(a,b,c){if(!c)return void(z.style.left=b+"px");var e=+new Date,f=setInterval(function(){var g=+new Date-e;return g>c?(z.style.left=b+"px",E&&n(),d.transitionEnd&&d.transitionEnd.call(event,i(),t[A]),void clearInterval(f)):void(z.style.left=(b-a)*(Math.floor(g/c*100)/100)+a+"px")},4)}function n(){C=setTimeout(g,E)}function o(){E=0,clearTimeout(C)}function p(){o(),E=d.auto||0,n()}var q=function(){},r=function(a){setTimeout(a||q,0)},s={addEventListener:!!a.addEventListener,touch:"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(b.createElement("swipe"))};if(c){var t,u,v,w,x,y,z=c.children[0];d=d||{};var A=parseInt(d.startSlide,10)||0,B=d.speed||300;d.continuous=void 0!==d.continuous?d.continuous:!0,d.autoRestart=void 0!==d.autoRestart?d.autoRestart:!0,d.partial=void 0!==d.partial?d.partial:!1;var C,D,E=d.auto||0,F={},G={},H={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":r(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(a));break;case"resize":r(e)}d.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];F={x:b.pageX,y:b.pageY,time:+new Date},D=void 0,G={},z.addEventListener("touchmove",this,!1),z.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){d.disableScroll&&a.preventDefault();var b=a.touches[0];G={x:b.pageX-F.x,y:b.pageY-F.y},"undefined"==typeof D&&(D=!!(D||Math.abs(G.x)0||A===t.length-1&&G.x<0?Math.abs(G.x)/v+1:1),l(A-1,G.x+u[A-1],0),l(A,G.x+u[A],0),l(A+1,G.x+u[A+1],0)))}},end:function(){var a=+new Date-F.time,b=Number(a)<250&&Math.abs(G.x)>20||Math.abs(G.x)>v/2,c=!A&&G.x>0||A===t.length-1&&G.x<0;d.continuous&&(c=!1);var e=G.x<0;D||(b&&!c?(e?(d.continuous?(k(h(A-1),-v,0),k(h(A+2),v,0)):k(A-1,-v,0),d.partial?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),k(h(A-2),x.hidden,0),k(h(A+2),t.length>3?x.hidden:-x.hidden,0),k(A,x.prev,B),k(h(A+1),x.middle,B),k(h(A+2),x.next,t.length>3?B:0)):(k(A,u[A]-v,B),k(h(A+1),u[h(A+1)]-v,B)),A=h(A+1)):(d.continuous?(k(h(A+1),v,0),k(h(A-2),-v,0)):k(A+1,v,0),d.partial?(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),k(h(A-2),t.length>3?-x.hidden:x.hidden,0),k(h(A-3),-x.hidden,0),k(A,x.next,B),k(h(A-2),x.prev,t.length>3?B:0),k(h(A-1),x.middle,B)):(k(A,u[A]+v,B),k(h(A-1),u[h(A-1)]+v,B)),A=h(A-1)),d.callback&&d.callback(i(),t[A])):d.continuous&&!d.partial?(k(h(A-1),-v,B),k(A,0,B),k(h(A+1),v,B)):d.partial?(k(h(A-1),x.prev,B),k(A,x.middle,B),k(h(A+1),x.next,B)):(k(A-1,-v,B),k(A,0,B),k(A+1,v,B)),console.info(u)),z.removeEventListener("touchmove",H,!1),z.removeEventListener("touchend",H,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===A&&((E||d.autoRestart)&&p(),d.transitionEnd&&d.transitionEnd.call(a,i(),t[A]))}};return e(),E&&n(),s.addEventListener?(s.touch&&z.addEventListener("touchstart",H,!1),s.transitions&&(z.addEventListener("webkitTransitionEnd",H,!1),z.addEventListener("msTransitionEnd",H,!1),z.addEventListener("oTransitionEnd",H,!1),z.addEventListener("otransitionend",H,!1),z.addEventListener("transitionend",H,!1)),a.addEventListener("resize",H,!1)):a.onresize=function(){e()},{setup:function(){e()},slide:function(a,b){o(),j(a,b)},prev:function(){o(),f()},next:function(){o(),g()},restart:function(){p()},stop:function(){o()},getPos:function(){return i()},getNumSlides:function(){return w},kill:function(){o(),z.style.width="",z.style.left="";for(var b=t.length;b--;){var c=t[b];c.style.width="",c.style.left="",s.transitions&&l(b,0,0)}s.addEventListener?(z.removeEventListener("touchstart",H,!1),z.removeEventListener("webkitTransitionEnd",H,!1),z.removeEventListener("msTransitionEnd",H,!1),z.removeEventListener("oTransitionEnd",H,!1),z.removeEventListener("otransitionend",H,!1),z.removeEventListener("transitionend",H,!1),a.removeEventListener("resize",H,!1)):a.onresize=null}}}}var a=this,b=a.document;return(a.jQuery||a.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(a.jQuery||a.Zepto),Swipe}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.Swipe=b()}):"object"==typeof exports?module.exports=b():a.Swipe=b()}(this,function(){function Swipe(c,d){"use strict";function e(){t=z.children,w=t.length,t.length<2&&(d.continuous=!1),s.transitions&&d.continuous&&t.length<3&&(z.appendChild(t[0].cloneNode(!0)),z.appendChild(z.children[1].cloneNode(!0)),t=z.children),u=new Array(t.length),3>w&&(d.partial=!1),y=c.getBoundingClientRect().width||c.offsetWidth,v=d.partial?.9*y:y,z.style.width=t.length*v+"px",x={hidden:y,prev:.9*-v,middle:.05*v,next:v};for(var a=t.length;a--;){var b=t[a];b.style.width=v+"px",b.setAttribute("data-index",a),s.transitions&&(b.style.left=a*-v+"px",d.partial?k(a,x.hidden,0):k(a,A>a?-v:a>A?v:0,0))}d.continuous&&s.transitions&&(k(h(A-1),-v,0),k(h(A+1),v,0)),d.partial&&(k(h(A-2),-x.hidden,0),k(h(A-1),x.prev,0),k(A,x.middle,0),k(h(A+1),x.next,0)),s.transitions||(z.style.left=A*-v+"px"),c.style.visibility="visible",console.info(u)}function f(){d.continuous?j(A-1):A&&j(A-1)}function g(){d.continuous?j(A+1):A=w&&(a-=w),a}function j(a,b){if(console.assert(a>0),A!==a){if(s.transitions){var c=Math.abs(A-a)/(A-a);if(d.continuous){var e=c;c=-u[h(a)]/v,c===e||d.partial||(a=-c*t.length+a)}if(!d.partial)for(var f=Math.abs(A-a)-1;f--;)k(h((a>A?a:A)-f-1),v*c,0);a=h(a),d.partial?-1===c?(k(h(A-2),x.hidden,0),k(h(A-1),-x.hidden,0),k(A,x.prev,b||B),k(h(a),x.middle,b||B),k(h(a+1),x.next,b||B)):(k(h(a-2),-x.hidden,0),k(h(A+1),x.hidden,0),k(A,x.next,b||B),k(h(a),x.middle,b||B),k(h(a-1),x.prev,b||B)):(k(A,v*c,b||B),k(a,0,b||B),d.continuous&&k(h(a-c),-(v*c),0),k(A,v*c,b||B),k(a,0,b||B))}else a=h(a),m(A*-v,a*-v,b||B);A=a,r(d.callback&&d.callback(i(),t[A])),console.info(u)}}function k(a,b,c){l(a,b,c),u[a]=b}function l(a,b,c){var d=t[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function m(a,b,c){if(!c)return void(z.style.left=b+"px");var e=+new Date,f=setInterval(function(){var g=+new Date-e;return g>c?(z.style.left=b+"px",E&&n(),d.transitionEnd&&d.transitionEnd.call(event,i(),t[A]),void clearInterval(f)):void(z.style.left=(b-a)*(Math.floor(g/c*100)/100)+a+"px")},4)}function n(){C=setTimeout(g,E)}function o(){E=0,clearTimeout(C)}function p(){o(),E=d.auto||0,n()}var q=function(){},r=function(a){setTimeout(a||q,0)},s={addEventListener:!!a.addEventListener,touch:"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(b.createElement("swipe"))};if(c){var t,u,v,w,x,y,z=c.children[0];d=d||{};var A=parseInt(d.startSlide,10)||0,B=d.speed||300;d.continuous=void 0!==d.continuous?d.continuous:!0,d.autoRestart=void 0!==d.autoRestart?d.autoRestart:!0,d.partial=void 0!==d.partial?d.partial:!1;var C,D,E=d.auto||0,F={},G={},H={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":r(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(a));break;case"resize":r(e)}d.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];F={x:b.pageX,y:b.pageY,time:+new Date},D=void 0,G={},z.addEventListener("touchmove",this,!1),z.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){d.disableScroll&&a.preventDefault();var b=a.touches[0];G={x:b.pageX-F.x,y:b.pageY-F.y},"undefined"==typeof D&&(D=!!(D||Math.abs(G.x)0||A===t.length-1&&G.x<0?Math.abs(G.x)/v+1:1),l(A-1,G.x+u[A-1],0),l(A,G.x+u[A],0),l(A+1,G.x+u[A+1],0)))}},end:function(){var a=+new Date-F.time,b=Number(a)<250&&Math.abs(G.x)>20||Math.abs(G.x)>v/2,c=!A&&G.x>0||A===t.length-1&&G.x<0;d.continuous&&(c=!1);var e=G.x<0;D||(b&&!c?(e?(d.continuous?(k(h(A-1),-v,0),k(h(A+2),v,0)):k(A-1,-v,0),d.partial?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),k(h(A-2),x.hidden,0),k(h(A+2),t.length>3?x.hidden:-x.hidden,0),k(A,x.prev,B),k(h(A+1),x.middle,B),k(h(A+2),x.next,t.length>3?B:0)):(k(A,u[A]-v,B),k(h(A+1),u[h(A+1)]-v,B)),A=h(A+1)):(d.continuous?(k(h(A+1),v,0),k(h(A-2),-v,0)):k(A+1,v,0),d.partial?(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),k(h(A-2),t.length>3?-x.hidden:x.hidden,0),k(h(A-3),-x.hidden,0),k(A,x.next,B),k(h(A-2),x.prev,t.length>3?B:0),k(h(A-1),x.middle,B)):(k(A,u[A]+v,B),k(h(A-1),u[h(A-1)]+v,B)),A=h(A-1)),d.callback&&d.callback(i(),t[A])):d.continuous&&!d.partial?(k(h(A-1),-v,B),k(A,0,B),k(h(A+1),v,B)):d.partial?(k(h(A-1),x.prev,B),k(A,x.middle,B),k(h(A+1),x.next,B)):(k(A-1,-v,B),k(A,0,B),k(A+1,v,B)),console.info(u)),z.removeEventListener("touchmove",H,!1),z.removeEventListener("touchend",H,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===A&&((E||d.autoRestart)&&p(),d.transitionEnd&&d.transitionEnd.call(a,i(),t[A]))}};return e(),E&&n(),s.addEventListener?(s.touch&&z.addEventListener("touchstart",H,!1),s.transitions&&(z.addEventListener("webkitTransitionEnd",H,!1),z.addEventListener("msTransitionEnd",H,!1),z.addEventListener("oTransitionEnd",H,!1),z.addEventListener("otransitionend",H,!1),z.addEventListener("transitionend",H,!1)),a.addEventListener("resize",H,!1)):a.onresize=function(){e()},{setup:function(){e()},slide:function(a,b){o(),j(a,b)},prev:function(){o(),f()},next:function(){o(),g()},restart:function(){p()},stop:function(){o()},getPos:function(){return i()},getNumSlides:function(){return w},kill:function(){o(),z.style.width="",z.style.left="";for(var b=t.length;b--;){var c=t[b];c.style.width="",c.style.left="",s.transitions&&l(b,0,0)}s.addEventListener?(z.removeEventListener("touchstart",H,!1),z.removeEventListener("webkitTransitionEnd",H,!1),z.removeEventListener("msTransitionEnd",H,!1),z.removeEventListener("oTransitionEnd",H,!1),z.removeEventListener("otransitionend",H,!1),z.removeEventListener("transitionend",H,!1),a.removeEventListener("resize",H,!1)):a.onresize=null}}}}var a=this,b=a.document;return(a.jQuery||a.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(a.jQuery||a.Zepto),Swipe}); \ No newline at end of file diff --git a/swipe.js b/swipe.js index a3e365b..5f771b0 100644 --- a/swipe.js +++ b/swipe.js @@ -219,8 +219,6 @@ to = circle(to); - move(index, width * direction, slideSpeed || speed); - move(to, 0, slideSpeed || speed); if (options.partial) { if (direction === -1) { move(circle(index-2), partialPos.hidden, 0); @@ -236,6 +234,8 @@ move(circle(to-1), partialPos.prev, slideSpeed || speed); } } else { + move(index, width * direction, slideSpeed || speed); + move(to, 0, slideSpeed || speed); if (options.continuous) { // we need to get the next in place move(circle(to - direction), -(width * direction), 0); } From 39681a52c5543724ad88854ac7981f49fa7eb15b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 12 Mar 2015 17:43:37 +0100 Subject: [PATCH 7/8] Fixed weird positions on slide function --- swipe.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/swipe.js b/swipe.js index 5f771b0..3bef920 100644 --- a/swipe.js +++ b/swipe.js @@ -130,7 +130,7 @@ } if (options.partial) { - move(circle(index-2), -partialPos.hidden, 0); + move(circle(index-2), length > 4 ? -partialPos.hidden : partialPos.hidden, 0); move(circle(index-1), partialPos.prev, 0); move(index, partialPos.middle, 0); move(circle(index+1), partialPos.next, 0); @@ -221,17 +221,23 @@ if (options.partial) { if (direction === -1) { - move(circle(index-2), partialPos.hidden, 0); - move(circle(index-1), -partialPos.hidden, 0); + move(circle(index-1), slides.length > 4 ? -partialPos.hidden : partialPos.hidden, 0); + if(length>3) { + move(circle(index-2), partialPos.hidden, 0); + move(circle(index+2), partialPos.hidden, 0); + } move(index, partialPos.prev, slideSpeed || speed); - move(circle(to), partialPos.middle, slideSpeed || speed); - move(circle(to+1), partialPos.next, slideSpeed || speed); + move(to, partialPos.middle, slideSpeed || speed); + move(circle(index+2), partialPos.next, length > 4 ? slideSpeed || speed : 0); } else { - move(circle(to-2), -partialPos.hidden, 0); - move(circle(index+1), partialPos.hidden, 0); + move(circle(index+1), slides.length > 4 ? partialPos.hidden : -partialPos.hidden, 0); + if(length>3) { + move(circle(index-2), -partialPos.hidden, 0); + move(circle(index-3), -partialPos.hidden, 0); + } move(index, partialPos.next, slideSpeed || speed); - move(circle(to), partialPos.middle, slideSpeed || speed); - move(circle(to-1), partialPos.prev, slideSpeed || speed); + move(to, partialPos.middle, slideSpeed || speed); + move(circle(to-1), partialPos.prev, length > 4 ? slideSpeed || speed : 0); } } else { move(index, width * direction, slideSpeed || speed); From 1087a64d29ac90c97db35f91bea28e675a8541d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Rodr=C3=ADguez?= Date: Thu, 12 Mar 2015 17:45:21 +0100 Subject: [PATCH 8/8] Compiled --- build/swipe.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/swipe.min.js b/build/swipe.min.js index a88dc46..4276cbc 100644 --- a/build/swipe.min.js +++ b/build/swipe.min.js @@ -5,4 +5,4 @@ * Copyright 2015, MIT License * */ -!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.Swipe=b()}):"object"==typeof exports?module.exports=b():a.Swipe=b()}(this,function(){function Swipe(c,d){"use strict";function e(){t=z.children,w=t.length,t.length<2&&(d.continuous=!1),s.transitions&&d.continuous&&t.length<3&&(z.appendChild(t[0].cloneNode(!0)),z.appendChild(z.children[1].cloneNode(!0)),t=z.children),u=new Array(t.length),3>w&&(d.partial=!1),y=c.getBoundingClientRect().width||c.offsetWidth,v=d.partial?.9*y:y,z.style.width=t.length*v+"px",x={hidden:y,prev:.9*-v,middle:.05*v,next:v};for(var a=t.length;a--;){var b=t[a];b.style.width=v+"px",b.setAttribute("data-index",a),s.transitions&&(b.style.left=a*-v+"px",d.partial?k(a,x.hidden,0):k(a,A>a?-v:a>A?v:0,0))}d.continuous&&s.transitions&&(k(h(A-1),-v,0),k(h(A+1),v,0)),d.partial&&(k(h(A-2),-x.hidden,0),k(h(A-1),x.prev,0),k(A,x.middle,0),k(h(A+1),x.next,0)),s.transitions||(z.style.left=A*-v+"px"),c.style.visibility="visible",console.info(u)}function f(){d.continuous?j(A-1):A&&j(A-1)}function g(){d.continuous?j(A+1):A=w&&(a-=w),a}function j(a,b){if(console.assert(a>0),A!==a){if(s.transitions){var c=Math.abs(A-a)/(A-a);if(d.continuous){var e=c;c=-u[h(a)]/v,c===e||d.partial||(a=-c*t.length+a)}if(!d.partial)for(var f=Math.abs(A-a)-1;f--;)k(h((a>A?a:A)-f-1),v*c,0);a=h(a),d.partial?-1===c?(k(h(A-2),x.hidden,0),k(h(A-1),-x.hidden,0),k(A,x.prev,b||B),k(h(a),x.middle,b||B),k(h(a+1),x.next,b||B)):(k(h(a-2),-x.hidden,0),k(h(A+1),x.hidden,0),k(A,x.next,b||B),k(h(a),x.middle,b||B),k(h(a-1),x.prev,b||B)):(k(A,v*c,b||B),k(a,0,b||B),d.continuous&&k(h(a-c),-(v*c),0),k(A,v*c,b||B),k(a,0,b||B))}else a=h(a),m(A*-v,a*-v,b||B);A=a,r(d.callback&&d.callback(i(),t[A])),console.info(u)}}function k(a,b,c){l(a,b,c),u[a]=b}function l(a,b,c){var d=t[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function m(a,b,c){if(!c)return void(z.style.left=b+"px");var e=+new Date,f=setInterval(function(){var g=+new Date-e;return g>c?(z.style.left=b+"px",E&&n(),d.transitionEnd&&d.transitionEnd.call(event,i(),t[A]),void clearInterval(f)):void(z.style.left=(b-a)*(Math.floor(g/c*100)/100)+a+"px")},4)}function n(){C=setTimeout(g,E)}function o(){E=0,clearTimeout(C)}function p(){o(),E=d.auto||0,n()}var q=function(){},r=function(a){setTimeout(a||q,0)},s={addEventListener:!!a.addEventListener,touch:"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(b.createElement("swipe"))};if(c){var t,u,v,w,x,y,z=c.children[0];d=d||{};var A=parseInt(d.startSlide,10)||0,B=d.speed||300;d.continuous=void 0!==d.continuous?d.continuous:!0,d.autoRestart=void 0!==d.autoRestart?d.autoRestart:!0,d.partial=void 0!==d.partial?d.partial:!1;var C,D,E=d.auto||0,F={},G={},H={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":r(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(a));break;case"resize":r(e)}d.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];F={x:b.pageX,y:b.pageY,time:+new Date},D=void 0,G={},z.addEventListener("touchmove",this,!1),z.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){d.disableScroll&&a.preventDefault();var b=a.touches[0];G={x:b.pageX-F.x,y:b.pageY-F.y},"undefined"==typeof D&&(D=!!(D||Math.abs(G.x)0||A===t.length-1&&G.x<0?Math.abs(G.x)/v+1:1),l(A-1,G.x+u[A-1],0),l(A,G.x+u[A],0),l(A+1,G.x+u[A+1],0)))}},end:function(){var a=+new Date-F.time,b=Number(a)<250&&Math.abs(G.x)>20||Math.abs(G.x)>v/2,c=!A&&G.x>0||A===t.length-1&&G.x<0;d.continuous&&(c=!1);var e=G.x<0;D||(b&&!c?(e?(d.continuous?(k(h(A-1),-v,0),k(h(A+2),v,0)):k(A-1,-v,0),d.partial?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),k(h(A-2),x.hidden,0),k(h(A+2),t.length>3?x.hidden:-x.hidden,0),k(A,x.prev,B),k(h(A+1),x.middle,B),k(h(A+2),x.next,t.length>3?B:0)):(k(A,u[A]-v,B),k(h(A+1),u[h(A+1)]-v,B)),A=h(A+1)):(d.continuous?(k(h(A+1),v,0),k(h(A-2),-v,0)):k(A+1,v,0),d.partial?(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),k(h(A-2),t.length>3?-x.hidden:x.hidden,0),k(h(A-3),-x.hidden,0),k(A,x.next,B),k(h(A-2),x.prev,t.length>3?B:0),k(h(A-1),x.middle,B)):(k(A,u[A]+v,B),k(h(A-1),u[h(A-1)]+v,B)),A=h(A-1)),d.callback&&d.callback(i(),t[A])):d.continuous&&!d.partial?(k(h(A-1),-v,B),k(A,0,B),k(h(A+1),v,B)):d.partial?(k(h(A-1),x.prev,B),k(A,x.middle,B),k(h(A+1),x.next,B)):(k(A-1,-v,B),k(A,0,B),k(A+1,v,B)),console.info(u)),z.removeEventListener("touchmove",H,!1),z.removeEventListener("touchend",H,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===A&&((E||d.autoRestart)&&p(),d.transitionEnd&&d.transitionEnd.call(a,i(),t[A]))}};return e(),E&&n(),s.addEventListener?(s.touch&&z.addEventListener("touchstart",H,!1),s.transitions&&(z.addEventListener("webkitTransitionEnd",H,!1),z.addEventListener("msTransitionEnd",H,!1),z.addEventListener("oTransitionEnd",H,!1),z.addEventListener("otransitionend",H,!1),z.addEventListener("transitionend",H,!1)),a.addEventListener("resize",H,!1)):a.onresize=function(){e()},{setup:function(){e()},slide:function(a,b){o(),j(a,b)},prev:function(){o(),f()},next:function(){o(),g()},restart:function(){p()},stop:function(){o()},getPos:function(){return i()},getNumSlides:function(){return w},kill:function(){o(),z.style.width="",z.style.left="";for(var b=t.length;b--;){var c=t[b];c.style.width="",c.style.left="",s.transitions&&l(b,0,0)}s.addEventListener?(z.removeEventListener("touchstart",H,!1),z.removeEventListener("webkitTransitionEnd",H,!1),z.removeEventListener("msTransitionEnd",H,!1),z.removeEventListener("oTransitionEnd",H,!1),z.removeEventListener("otransitionend",H,!1),z.removeEventListener("transitionend",H,!1),a.removeEventListener("resize",H,!1)):a.onresize=null}}}}var a=this,b=a.document;return(a.jQuery||a.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(a.jQuery||a.Zepto),Swipe}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.Swipe=b()}):"object"==typeof exports?module.exports=b():a.Swipe=b()}(this,function(){function Swipe(c,d){"use strict";function e(){t=z.children,w=t.length,t.length<2&&(d.continuous=!1),s.transitions&&d.continuous&&t.length<3&&(z.appendChild(t[0].cloneNode(!0)),z.appendChild(z.children[1].cloneNode(!0)),t=z.children),u=new Array(t.length),3>w&&(d.partial=!1),y=c.getBoundingClientRect().width||c.offsetWidth,v=d.partial?.9*y:y,z.style.width=t.length*v+"px",x={hidden:y,prev:.9*-v,middle:.05*v,next:v};for(var a=t.length;a--;){var b=t[a];b.style.width=v+"px",b.setAttribute("data-index",a),s.transitions&&(b.style.left=a*-v+"px",d.partial?k(a,x.hidden,0):k(a,A>a?-v:a>A?v:0,0))}d.continuous&&s.transitions&&(k(h(A-1),-v,0),k(h(A+1),v,0)),d.partial&&(k(h(A-2),w>4?-x.hidden:x.hidden,0),k(h(A-1),x.prev,0),k(A,x.middle,0),k(h(A+1),x.next,0)),s.transitions||(z.style.left=A*-v+"px"),c.style.visibility="visible",console.info(u)}function f(){d.continuous?j(A-1):A&&j(A-1)}function g(){d.continuous?j(A+1):A=w&&(a-=w),a}function j(a,b){if(console.assert(a>0),A!==a){if(s.transitions){var c=Math.abs(A-a)/(A-a);if(d.continuous){var e=c;c=-u[h(a)]/v,c===e||d.partial||(a=-c*t.length+a)}if(!d.partial)for(var f=Math.abs(A-a)-1;f--;)k(h((a>A?a:A)-f-1),v*c,0);a=h(a),d.partial?-1===c?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),w>3&&(k(h(A-2),x.hidden,0),k(h(A+2),x.hidden,0)),k(A,x.prev,b||B),k(a,x.middle,b||B),k(h(A+2),x.next,w>4?b||B:0)):(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),w>3&&(k(h(A-2),-x.hidden,0),k(h(A-3),-x.hidden,0)),k(A,x.next,b||B),k(a,x.middle,b||B),k(h(a-1),x.prev,w>4?b||B:0)):(k(A,v*c,b||B),k(a,0,b||B),d.continuous&&k(h(a-c),-(v*c),0),k(A,v*c,b||B),k(a,0,b||B))}else a=h(a),m(A*-v,a*-v,b||B);A=a,r(d.callback&&d.callback(i(),t[A])),console.info(u)}}function k(a,b,c){l(a,b,c),u[a]=b}function l(a,b,c){var d=t[a],e=d&&d.style;e&&(e.webkitTransitionDuration=e.MozTransitionDuration=e.msTransitionDuration=e.OTransitionDuration=e.transitionDuration=c+"ms",e.webkitTransform="translate("+b+"px,0)translateZ(0)",e.msTransform=e.MozTransform=e.OTransform="translateX("+b+"px)")}function m(a,b,c){if(!c)return void(z.style.left=b+"px");var e=+new Date,f=setInterval(function(){var g=+new Date-e;return g>c?(z.style.left=b+"px",E&&n(),d.transitionEnd&&d.transitionEnd.call(event,i(),t[A]),void clearInterval(f)):void(z.style.left=(b-a)*(Math.floor(g/c*100)/100)+a+"px")},4)}function n(){C=setTimeout(g,E)}function o(){E=0,clearTimeout(C)}function p(){o(),E=d.auto||0,n()}var q=function(){},r=function(a){setTimeout(a||q,0)},s={addEventListener:!!a.addEventListener,touch:"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch,transitions:function(a){var b=["transitionProperty","WebkitTransition","MozTransition","OTransition","msTransition"];for(var c in b)if(void 0!==a.style[b[c]])return!0;return!1}(b.createElement("swipe"))};if(c){var t,u,v,w,x,y,z=c.children[0];d=d||{};var A=parseInt(d.startSlide,10)||0,B=d.speed||300;d.continuous=void 0!==d.continuous?d.continuous:!0,d.autoRestart=void 0!==d.autoRestart?d.autoRestart:!0,d.partial=void 0!==d.partial?d.partial:!1;var C,D,E=d.auto||0,F={},G={},H={handleEvent:function(a){switch(a.type){case"touchstart":this.start(a);break;case"touchmove":this.move(a);break;case"touchend":r(this.end(a));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(a));break;case"resize":r(e)}d.stopPropagation&&a.stopPropagation()},start:function(a){var b=a.touches[0];F={x:b.pageX,y:b.pageY,time:+new Date},D=void 0,G={},z.addEventListener("touchmove",this,!1),z.addEventListener("touchend",this,!1)},move:function(a){if(!(a.touches.length>1||a.scale&&1!==a.scale)){d.disableScroll&&a.preventDefault();var b=a.touches[0];G={x:b.pageX-F.x,y:b.pageY-F.y},"undefined"==typeof D&&(D=!!(D||Math.abs(G.x)0||A===t.length-1&&G.x<0?Math.abs(G.x)/v+1:1),l(A-1,G.x+u[A-1],0),l(A,G.x+u[A],0),l(A+1,G.x+u[A+1],0)))}},end:function(){var a=+new Date-F.time,b=Number(a)<250&&Math.abs(G.x)>20||Math.abs(G.x)>v/2,c=!A&&G.x>0||A===t.length-1&&G.x<0;d.continuous&&(c=!1);var e=G.x<0;D||(b&&!c?(e?(d.continuous?(k(h(A-1),-v,0),k(h(A+2),v,0)):k(A-1,-v,0),d.partial?(k(h(A-1),t.length>4?-x.hidden:x.hidden,0),k(h(A-2),x.hidden,0),k(h(A+2),t.length>3?x.hidden:-x.hidden,0),k(A,x.prev,B),k(h(A+1),x.middle,B),k(h(A+2),x.next,t.length>3?B:0)):(k(A,u[A]-v,B),k(h(A+1),u[h(A+1)]-v,B)),A=h(A+1)):(d.continuous?(k(h(A+1),v,0),k(h(A-2),-v,0)):k(A+1,v,0),d.partial?(k(h(A+1),t.length>4?x.hidden:-x.hidden,0),k(h(A-2),t.length>3?-x.hidden:x.hidden,0),k(h(A-3),-x.hidden,0),k(A,x.next,B),k(h(A-2),x.prev,t.length>3?B:0),k(h(A-1),x.middle,B)):(k(A,u[A]+v,B),k(h(A-1),u[h(A-1)]+v,B)),A=h(A-1)),d.callback&&d.callback(i(),t[A])):d.continuous&&!d.partial?(k(h(A-1),-v,B),k(A,0,B),k(h(A+1),v,B)):d.partial?(k(h(A-1),x.prev,B),k(A,x.middle,B),k(h(A+1),x.next,B)):(k(A-1,-v,B),k(A,0,B),k(A+1,v,B)),console.info(u)),z.removeEventListener("touchmove",H,!1),z.removeEventListener("touchend",H,!1)},transitionEnd:function(a){parseInt(a.target.getAttribute("data-index"),10)===A&&((E||d.autoRestart)&&p(),d.transitionEnd&&d.transitionEnd.call(a,i(),t[A]))}};return e(),E&&n(),s.addEventListener?(s.touch&&z.addEventListener("touchstart",H,!1),s.transitions&&(z.addEventListener("webkitTransitionEnd",H,!1),z.addEventListener("msTransitionEnd",H,!1),z.addEventListener("oTransitionEnd",H,!1),z.addEventListener("otransitionend",H,!1),z.addEventListener("transitionend",H,!1)),a.addEventListener("resize",H,!1)):a.onresize=function(){e()},{setup:function(){e()},slide:function(a,b){o(),j(a,b)},prev:function(){o(),f()},next:function(){o(),g()},restart:function(){p()},stop:function(){o()},getPos:function(){return i()},getNumSlides:function(){return w},kill:function(){o(),z.style.width="",z.style.left="";for(var b=t.length;b--;){var c=t[b];c.style.width="",c.style.left="",s.transitions&&l(b,0,0)}s.addEventListener?(z.removeEventListener("touchstart",H,!1),z.removeEventListener("webkitTransitionEnd",H,!1),z.removeEventListener("msTransitionEnd",H,!1),z.removeEventListener("oTransitionEnd",H,!1),z.removeEventListener("otransitionend",H,!1),z.removeEventListener("transitionend",H,!1),a.removeEventListener("resize",H,!1)):a.onresize=null}}}}var a=this,b=a.document;return(a.jQuery||a.Zepto)&&!function(a){a.fn.Swipe=function(b){return this.each(function(){a(this).data("Swipe",new Swipe(a(this)[0],b))})}}(a.jQuery||a.Zepto),Swipe}); \ No newline at end of file