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);