/* * swipe 2.0 * * brad birdsall * copyright 2013, mit license * */ function swipe(container, options) { "use strict"; // utilities var noop = function() {}; // simple no operation function var offloadfn = function(fn) { settimeout(fn || noop, 0) }; // offload a functions execution // 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')) }; // quit if no root element if (!container) return; var element = container.children[0]; var slides, slidepos, width, length; options = options || {}; var index = parseint(options.startslide, 10) || 0; var speed = options.speed || 300; options.continuous = options.continuous !== undefined ? options.continuous : true; function setup() { // cache slides slides = element.children; length = slides.length; // set continuous to false if only one slide if (slides.length < 2) options.continuous = false; //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; } // create an array to store current positions of each slide slidepos = new array(slides.length); // determine width of each slide width = container.getboundingclientrect().width || container.offsetwidth; element.style.width = (slides.length * width) + 'px'; // stack elements var pos = slides.length; while(pos--) { var slide = slides[pos]; slide.style.width = width + 'px'; slide.setattribute('data-index', pos); if (browser.transitions) { slide.style.left = (pos * -width) + 'px'; 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); } if (!browser.transitions) element.style.left = (index * -width) + 'px'; container.style.visibility = 'visible'; } function prev() { if (options.continuous) slide(index-1); else if (index) slide(index-1); } function next() { if (options.continuous) slide(index+1); else if (index < slides.length - 1) slide(index+1); } function circle(index) { // a simple positive modulo using slides.length return (slides.length + (index % slides.length)) % slides.length; } function slide(to, slidespeed) { // 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 // 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) 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); to = circle(to); move(index, width * direction, slidespeed || speed); move(to, 0, slidespeed || speed); if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place } else { to = circle(to); animate(index * -width, to * -width, slidespeed || speed); //no fallback for a circular continuous if the browser does not accept transitions } index = to; offloadfn(options.callback && options.callback(index, slides[index])); } 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; style.webkittransitionduration = style.moztransitionduration = style.mstransitionduration = style.otransitionduration = style.transitionduration = speed + 'ms'; style.webkittransform = 'translate(' + dist + 'px,0)' + 'translatez(0)'; style.mstransform = style.moztransform = style.otransform = 'translatex(' + dist + 'px)'; } function animate(from, to, speed) { // if not an animation, just reposition if (!speed) { element.style.left = to + 'px'; return; } var start = +new date; var timer = setinterval(function() { var timeelap = +new date - start; if (timeelap > speed) { element.style.left = to + 'px'; if (delay) begin(); options.transitionend && options.transitionend.call(event, index, slides[index]); clearinterval(timer); return; } element.style.left = (( (to - from) * (math.floor((timeelap / speed) * 100) / 100) ) + from) + 'px'; }, 4); } // setup auto slideshow var delay = options.auto || 0; var interval; function begin() { interval = settimeout(next, delay); } function stop() { delay = 0; cleartimeout(interval); } // setup initial vars var start = {}; var delta = {}; var isscrolling; // setup event capturing var events = { handleevent: 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; } if (options.stoppropagation) event.stoppropagation(); }, start: function(event) { var touches = event.touches[0]; // measure start values start = { // get initial touch coords x: touches.pagex, y: touches.pagey, // store time to determine touch duration time: +new date }; // used for testing first move event isscrolling = undefined; // reset delta and end measurements delta = {}; // attach touchmove and touchend listeners element.addeventlistener('touchmove', this, false); element.addeventlistener('touchend', this, false); }, move: function(event) { // ensure swiping with one touch and not pinching if ( event.touches.length > 1 || event.scale && event.scale !== 1) return if (options.disablescroll) event.preventdefault(); var touches = event.touches[0]; // measure change in x and y delta = { x: touches.pagex - start.x, y: touches.pagey - start.y } // determine if scrolling test has run - one time test if ( typeof isscrolling == 'undefined') { isscrolling = !!( isscrolling || math.abs(delta.x) < math.abs(delta.y) ); } // if user is not trying to scroll vertically if (!isscrolling) { // prevent native scrolling event.preventdefault(); // stop slideshow stop(); // increase resistance if first or last slide if (options.continuous) { // we don't add resistance at the end 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 { 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); } } }, end: function(event) { // 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 // 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 (options.continuous) ispastbounds = false; // determine direction of swipe (true:right, false:left) var direction = delta.x < 0; // if not scrolling vertically if (!isscrolling) { if (isvalidslide && !ispastbounds) { if (direction) { if (options.continuous) { // we need to get the next in this direction in place move(circle(index-1), -width, 0); move(circle(index+2), width, 0); } else { move(index-1, -width, 0); } move(index, slidepos[index]-width, speed); move(circle(index+1), slidepos[circle(index+1)]-width, speed); index = circle(index+1); } else { if (options.continuous) { // we need to get the next in this direction in place move(circle(index+1), width, 0); move(circle(index-2), -width, 0); } else { move(index+1, width, 0); } move(index, slidepos[index]+width, speed); move(circle(index-1), slidepos[circle(index-1)]+width, speed); index = circle(index-1); } options.callback && options.callback(index, slides[index]); } else { if (options.continuous) { move(circle(index-1), -width, speed); move(index, 0, speed); move(circle(index+1), width, speed); } else { move(index-1, -width, speed); move(index, 0, speed); move(index+1, width, speed); } } } // kill touchmove and touchend event listeners until touchstart called again element.removeeventlistener('touchmove', events, false) element.removeeventlistener('touchend', events, false) }, transitionend: function(event) { if (parseint(event.target.getattribute('data-index'), 10) == index) { if (delay) begin(); options.transitionend && options.transitionend.call(event, index, slides[index]); } } } // trigger setup setup(); // start auto slideshow if applicable if (delay) begin(); // add event listeners if (browser.addeventlistener) { // set touchstart event on element if (browser.touch) element.addeventlistener('touchstart', events, false); 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); } else { window.onresize = function () { setup() }; // to play nice with old ie } // expose the swipe api return { setup: function() { setup(); }, slide: function(to, speed) { // cancel slideshow stop(); slide(to, speed); }, prev: function() { // cancel slideshow stop(); prev(); }, next: function() { // cancel slideshow stop(); next(); }, stop: function() { // cancel slideshow stop(); }, getpos: function() { // return current index position return index; }, getnumslides: function() { // return total number of slides return length; }, kill: function() { // cancel slideshow stop(); // reset element element.style.width = ''; element.style.left = ''; // reset slides var pos = slides.length; while(pos--) { var slide = slides[pos]; slide.style.width = ''; slide.style.left = ''; if (browser.transitions) translate(pos, 0, 0); } // removed event listeners if (browser.addeventlistener) { // 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 ( 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 ) }