diff --git a/README.md b/README.md index b2bc04a..59fb9bb 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +## Windows 8 IE include +Now you can use the swipeJS in Windows8. (Support MSPointer events) ## Usage Swipe only needs to follow a simple pattern. Here is an example: @@ -88,19 +90,17 @@ Swipe exposes a few functions that can be useful for script control of your slid `getNumSlides()` returns the total amount of slides `slide(index, duration)` slide to set index position (duration: speed of transition in milliseconds) - ## Browser Support -Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly. - -## Who's using Swipe - - - - - - - -Shoot me a [note](mailto:brad@birdsall.co) if you want your logo here - + Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly. + + ## Who's using Swipe + + + + + + + + Shoot me a [note](mailto:brad@birdsall.co) if you want your logo here ## License Copyright (c) 2013 Brad Birdsall Licensed under the [The MIT License (MIT)](http://opensource.org/licenses/MIT). diff --git a/swipe.js b/swipe.js index 8b29717..446cfa9 100644 --- a/swipe.js +++ b/swipe.js @@ -1,7 +1,7 @@ /* * Swipe 2.0 * - * Brad Birdsall + * Original by:Brad Birdsall * Copyright 2013, MIT License * */ @@ -13,11 +13,11 @@ function Swipe(container, options) { // utilities var noop = function() {}; // simple no operation function var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution - - // check browser capabilities + + // check browser capabilities include IE with msPointerEnabled var browser = { addEventListener: !!window.addEventListener, - touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, + touch: ('ontouchstart' in window) || window.navigator.msPointerEnabled || 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; @@ -28,6 +28,8 @@ function Swipe(container, options) { // quit if no root element if (!container) return; var element = container.children[0]; + //Update style -ms-touch-action for work in IE W8 + element.style['-ms-touch-action'] = 'pan-y'; var slides, slidePos, width, length; options = options || {}; var index = parseInt(options.startSlide, 10) || 0; @@ -111,7 +113,7 @@ function Swipe(container, options) { // 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 @@ -131,16 +133,16 @@ function Swipe(container, options) { // 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 { - + + } else { + to = circle(to); animate(index * -width, to * -width, slideSpeed || speed); //no fallback for a circular continuous if the browser does not accept transitions @@ -164,15 +166,15 @@ function Swipe(container, options) { if (!style) return; - style.webkitTransitionDuration = - style.MozTransitionDuration = - style.msTransitionDuration = - style.OTransitionDuration = + 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.msTransform = + style.MozTransform = style.OTransform = 'translateX(' + dist + 'px)'; } @@ -186,13 +188,13 @@ function Swipe(container, options) { return; } - + var start = +new Date; - + var timer = setInterval(function() { var timeElap = +new Date - start; - + if (timeElap > speed) { element.style.left = to + 'px'; @@ -228,37 +230,58 @@ function Swipe(container, options) { clearTimeout(interval); } + /** + Return the pageX and pageY (Normal case, Normal with Jquery case, IE case, IE with Jquery case) + **/ + function getGesturePointFromEvent(evt) { + var point = {}; + + if (evt.targetTouches) { + point.pageX = evt.targetTouches[0].clientX; + point.pageY = evt.targetTouches[0].clientY; + } else if (evt.originalEvent && evt.originalEvent.targetTouches) { + //#Jquery CASE + point.pageX = evt.originalEvent.targetTouches[0].clientX; + point.pageY = evt.originalEvent.targetTouches[0].clientY; + } else if (window.navigator.msPointerEnabled) { + //#IE CASE + point.pageX = evt.clientX || evt.originalEvent.clientX; + point.pageY = evt.clientY || evt.originalEvent.clientY; + } + return point; + } // setup initial vars var start = {}; var delta = {}; - var isScrolling; + 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 'MSPointerDown': this.start(event); break;//IE Events + case 'MSPointerMove': this.move(event); break; + case 'MSPointerUp': 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; + case 'resize': offloadFn(setup.call()); break; } if (options.stopPropagation) event.stopPropagation(); }, - start: function(event) { - - var touches = event.touches[0]; + start: function (event) { + var touches = getGesturePointFromEvent(event); // measure start values start = { @@ -270,26 +293,26 @@ function Swipe(container, options) { 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); + // attach touchmove and touchend listeners or MSPointerMove and MSPointerUp listeners(IE case) + element.addEventListener(window.navigator.msPointerEnabled ? 'MSPointerMove' : 'touchmove', this, false); + element.addEventListener(window.navigator.msPointerEnabled ? 'MSPointerUp' : '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 (!window.navigator.msPointerEnabled &&(event.touches.length > 1 || event.scale && event.scale !== 1)) return if (options.disableScroll) event.preventDefault(); - var touches = event.touches[0]; + var touches = getGesturePointFromEvent(event) // measure change in x and y delta = { @@ -305,7 +328,7 @@ function Swipe(container, options) { // if user is not trying to scroll vertically if (!isScrolling) { - // prevent native scrolling + // prevent native scrolling event.preventDefault(); // stop slideshow @@ -320,15 +343,15 @@ function Swipe(container, options) { } else { - delta.x = - delta.x / + 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); @@ -344,18 +367,18 @@ function Swipe(container, options) { var duration = +new Date - start.time; // determine if slide attempt triggers next/prev slide - var isValidSlide = + 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 = + 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; @@ -377,8 +400,8 @@ function Swipe(container, options) { move(index, slidePos[index]-width, speed); move(circle(index+1), slidePos[circle(index+1)]-width, speed); - index = circle(index+1); - + index = circle(index+1); + } else { if (options.continuous) { // we need to get the next in this direction in place @@ -416,15 +439,15 @@ function Swipe(container, options) { } - // kill touchmove and touchend event listeners until touchstart called again - element.removeEventListener('touchmove', events, false) - element.removeEventListener('touchend', events, false) + // kill (touchmove or MSPointerMove) and (touchend or MSPointerUp) event listeners until (touchstart or MSPointerDown) called again + element.removeEventListener(window.navigator.msPointerEnabled ? 'MSPointerMove' : 'touchmove', events, false) + element.removeEventListener(window.navigator.msPointerEnabled ? 'MSPointerUp' : '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]); @@ -444,9 +467,9 @@ function Swipe(container, options) { // add event listeners if (browser.addEventListener) { - - // set touchstart event on element - if (browser.touch) element.addEventListener('touchstart', events, false); + + // set touchstart event on element + if (browser.touch) element.addEventListener(window.navigator.msPointerEnabled ? 'MSPointerDown' : 'touchstart', events, false); if (browser.transitions) { element.addEventListener('webkitTransitionEnd', events, false); @@ -473,10 +496,10 @@ function Swipe(container, options) { }, slide: function(to, speed) { - + // cancel slideshow stop(); - + slide(to, speed); }, @@ -495,12 +518,6 @@ function Swipe(container, options) { next(); - }, - stop: function() { - - // cancel slideshow - stop(); - }, getPos: function() { @@ -509,7 +526,7 @@ function Swipe(container, options) { }, getNumSlides: function() { - + // return total number of slides return length; }, @@ -519,16 +536,16 @@ function Swipe(container, options) { stop(); // reset element - element.style.width = ''; - element.style.left = ''; + element.style.width = 'auto'; + element.style.left = 0; // reset slides var pos = slides.length; while(pos--) { var slide = slides[pos]; - slide.style.width = ''; - slide.style.left = ''; + slide.style.width = '100%'; + slide.style.left = 0; if (browser.transitions) translate(pos, 0, 0); @@ -538,7 +555,7 @@ function Swipe(container, options) { if (browser.addEventListener) { // remove current event listeners - element.removeEventListener('touchstart', events, false); + element.removeEventListener(window.navigator.msPointerEnabled ? 'MSPointerDown' : 'touchstart', events, false); element.removeEventListener('webkitTransitionEnd', events, false); element.removeEventListener('msTransitionEnd', events, false); element.removeEventListener('oTransitionEnd', events, false);