diff --git a/slideshow.js b/slideshow.js index f083c25..c0fafc4 100755 --- a/slideshow.js +++ b/slideshow.js @@ -96,7 +96,7 @@ var self = window.SlideShow = function(slide) { body.removeEventListener('click', arguments.callee); }, false); } - } + }; // Order of the slides this.order = []; @@ -152,6 +152,11 @@ var self = window.SlideShow = function(slide) { document.addEventListener('keyup', this, false); document.addEventListener('keydown', this, false); + document.addEventListener('touchstart', this, false); + document.addEventListener('touchmove', this, false); + document.addEventListener('touchend', this, false); + document.addEventListener('touchcancel', this, false); + // Process iframe slides $$('.slide[data-src]:empty').forEach(function(slide) { var iframe = document.createElement('iframe'); @@ -186,16 +191,20 @@ var self = window.SlideShow = function(slide) { b.className = 'onscreen-nav next'; b.textContent = 'Next ▶'; b.type = 'button'; - b.onclick = function() { me.next(); } + b.onclick = function() { me.next(); }; slide.appendChild(b); } }); }; +var horizontalDistanceThreshold = 20, // Swipe horizontal displacement must be more than this. + verticalDistanceThreshold = 80, // Swipe vertical displacement must be less than this. + startTouch, + stopTouch; + self.prototype = { handleEvent: function(evt) { - var me = this; // Prevent script from hijacking the user’s navigation if (evt.metaKey && evt.keyCode) { @@ -215,10 +224,10 @@ self.prototype = { switch(evt.keyCode) { case 71: // G var slide = prompt('Which slide?'); - me.goto(+slide? slide - 1 : slide); + this.goto(+slide? slide - 1 : slide); break; case 72: // H - me.overview(evt); + this.overview(evt); break; case 74: // J if(body.classList.contains('hide-elements')) { @@ -281,6 +290,29 @@ self.prototype = { } } break; + case 'touchstart': + evt.preventDefault(); // prevent image drag + data = evt.touches ? evt.touches[0] : evt; + startTouch = { X: data.pageX, Y: data.pageY }; + break; + case 'touchmove': + data = evt.touches ? evt.touches[0] : evt; + stopTouch = { X: data.pageX, Y: data.pageY }; + break; + case 'touchend': + if (!startTouch || !stopTouch) break; + if (Math.abs(startTouch.X - stopTouch.X) < horizontalDistanceThreshold) break; + if (Math.abs(startTouch.Y - stopTouch.Y) > verticalDistanceThreshold) break; + if (startTouch.X > stopTouch.X) { + this.previous(); + } else { + this.next(); + } + startTouch = stopTouch = null; + break; + case 'touchcancel': + startTouch = stopTouch = null; + break; case 'load': case 'resize': this.adjustFontSize(); @@ -379,12 +411,10 @@ self.prototype = { // our current item (and there's no point either, so we save on performance) window.removeEventListener('hashchange', this, false); - var id; - if(which + 0 === which && which in this.slides) { // Argument is a valid slide number this.index = which; - this.slide = this.order[which] + this.slide = this.order[which]; slide = this.slides[this.slide]; @@ -418,7 +448,7 @@ self.prototype = { // Update items collection this.items = $$('.delayed, .delayed-children > *', this.slides[this.slide]); this.items.sort(function(a, b){ - return (a.getAttribute('data-index') || 0) - (b.getAttribute('data-index') || 0) + return (a.getAttribute('data-index') || 0) - (b.getAttribute('data-index') || 0); }); this.item = 0; @@ -547,7 +577,7 @@ self.getSlide = function(element) { } return slide; -} +}; })(document.head || document.getElementsByTagName('head')[0], document.body, document.documentElement); @@ -559,7 +589,7 @@ addEventListener('load', function(){ // no idea why the timeout is needed for(var j=rulez.length; j--;) { var selector = rulez[j].selectorText.replace(/^|,/g, function($0) { - return '#' + parentid + ' ' + $0 + return '#' + parentid + ' ' + $0; }); var cssText = rulez[j].cssText.replace(/^.+?{/, selector + '{');