/* * 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 = ['transformproperty', 'webkittransform', 'moztransform', 'otransform', 'mstransform']; 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; options = options || {}; var index = parseint(options.startslide, 10) || 0; var speed = options.speed || 300; function setup() { // cache slides 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'; var div = document.createelement("div"); div.id = "diandiv"; var i=1; var html=''; // stack elements var pos = slides.length; var classname=''; if(pos < 2) div.style.display='none'; 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); } classname=i==1?'active':''; html+=''+i+''; i++; } div.innerhtml = html; container.appendchild(div); if (!browser.transitions) element.style.left = (index * -width) + 'px'; container.style.visibility = 'visible'; } function prev() { if (index) slide(index-1); else if (options.continuous) slide(slides.length-1); } function next() { if (index < slides.length - 1) slide(index+1); else if (options.continuous) slide(0); } function slide(to, slidespeed) { // do nothing if already on requested slide if (index == to) return; if (browser.transitions) { var diff = math.abs(index-to) - 1; var direction = math.abs(index-to) / (index-to); // 1:right -1:left while (diff--) move((to > index ? to : index) - diff - 1, width * direction, 0); move(index, width * direction, slidespeed || speed); move(to, 0, slidespeed || speed); } else { animate(index * -width, to * -width, slidespeed || speed); } $('#diandiv span').removeclass('active'); $('#diandiv span').eq(to).addclass('active'); 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.call()); 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 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 // determine direction of swipe (true:right, false:left) var direction = delta.x < 0; // if not scrolling vertically if (!isscrolling) { if (isvalidslide && !ispastbounds) { if (direction) { move(index-1, -width, 0); move(index, slidepos[index]-width, speed); move(index+1, slidepos[index+1]-width, speed); index += 1; } else { move(index+1, width, 0); move(index, slidepos[index]+width, speed); move(index-1, slidepos[index-1]+width, speed); index += -1; } options.callback && options.callback(index, slides[index]); } else { move(index-1, -width, speed); move(index, 0, speed); move(index+1, width, speed); } $('#diandiv span').removeclass('active'); $('#diandiv span').eq(index).addclass('active'); } // 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) { slide(to, speed); }, to: function(to, speed) { stop(); slide(to, speed); }, prev: function() { // cancel slideshow stop(); prev(); }, next: function() { stop(); next(); }, getpos: function() { // return current index position return index; }, kill: function() { // cancel slideshow stop(); // reset element element.style.width = 'auto'; element.style.left = 0; // reset slides var pos = slides.length; while(pos--) { var slide = slides[pos]; slide.style.width = '100%'; slide.style.left = 0; 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 ) }