Skip to content

Commit

Permalink
add IE10 Touch support
Browse files Browse the repository at this point in the history
  • Loading branch information
jdgarcia committed May 8, 2013
1 parent fbe77d5 commit ca0575c
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 111 deletions.
2 changes: 1 addition & 1 deletion demo/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ <h3>Video</h3>
</div>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
Expand Down
298 changes: 188 additions & 110 deletions jquery.flexslider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
slider.vars = $.extend({}, $.flexslider.defaults, options);

var namespace = slider.vars.namespace,
touch = (( "ontouchstart" in window ) || ( window.navigator.msPointerEnabled ) || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch,
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touch = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch,
// depricating this idea, as devices are being released with both of these events
//eventType = (touch) ? "touchend" : "click",
eventType = "click touchend MSPointerUp",
Expand All @@ -25,7 +26,7 @@
carousel = (slider.vars.itemWidth > 0),
fade = slider.vars.animation === "fade",
asNav = slider.vars.asNavFor !== "",
methods = {};
methods = {},
focused = true;

// Store a reference to the slider object
Expand Down Expand Up @@ -77,9 +78,6 @@

slider.doMath();

// ASNAV:
if (asNav) methods.asNav.setup();

// INIT
slider.setup("init");

Expand Down Expand Up @@ -125,12 +123,16 @@
(slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play();
}

// ASNAV:
if (asNav) methods.asNav.setup();

// TOUCH
if (touch && slider.vars.touch) methods.touch();

// FADE&&SMOOTHHEIGHT || SLIDE:
if (!fade || (fade && slider.vars.smoothHeight)) $(window).bind("resize orientationchange focus", methods.resize);

slider.find("img").attr("draggable", "false");

// API: start() Callback
setTimeout(function(){
Expand All @@ -143,18 +145,41 @@
slider.animatingTo = Math.floor(slider.currentSlide/slider.move);
slider.currentItem = slider.currentSlide;
slider.slides.removeClass(namespace + "active-slide").eq(slider.currentItem).addClass(namespace + "active-slide");
slider.slides.click(function(e){
e.preventDefault();
var $slide = $(this),
target = $slide.index();
var posFromLeft = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
if( posFromLeft <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) {
slider.flexAnimate(slider.getTarget("prev"), true);
} else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) {
slider.direction = (slider.currentItem < target) ? "next" : "prev";
slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true);
}
});
if(!msGesture){
slider.slides.click(function(e){
e.preventDefault();
var $slide = $(this),
target = $slide.index();
var posFromLeft = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
if( posFromLeft <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) {
slider.flexAnimate(slider.getTarget("prev"), true);
} else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) {
slider.direction = (slider.currentItem < target) ? "next" : "prev";
slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true);
}
});
}else{
el._slider = slider;
slider.slides.each(function (){
var that = this;
that._gesture = new MSGesture();
that._gesture.target = that;
that.addEventListener("MSPointerDown", function (e){
e.preventDefault();
if(e.currentTarget._gesture)
e.currentTarget._gesture.addPointer(e.pointerId);
}, false);
that.addEventListener("MSGestureTap", function (e){
e.preventDefault();
var $slide = $(this),
target = $slide.index();
if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass('active')) {
slider.direction = (slider.currentItem < target) ? "next" : "prev";
slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true);
}
});
});
}
}
},
controlNav: {
Expand Down Expand Up @@ -352,112 +377,165 @@
cwidth,
dx,
startT,
scrolling = false;
scrolling = false,
localX = 0,
localY = 0,
accDx = 0;

if(!msGesture){
el.addEventListener('touchstart', onTouchStart, false);

function onTouchStart(e) {
if (slider.animating) {
e.preventDefault();
} else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
slider.pause();
// CAROUSEL:
cwidth = (vertical) ? slider.h : slider. w;
startT = Number(new Date());
// CAROUSEL:

// Local vars for X and Y points.
localX = e.touches[0].pageX;
localY = e.touches[0].pageY;

offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 :
(carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
(carousel && slider.currentSlide === slider.last) ? slider.limit :
(carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide :
(reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth;
startX = (vertical) ? localY : localX;
startY = (vertical) ? localX : localY;

el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
}
}

var localX = 0;
var localY = 0;
function onTouchMove(e) {
// Local vars for X and Y points.

el.addEventListener('touchstart', onTouchStart, false);
// Cater for Windows-device touch events.
if (window.navigator.msPointerEnabled) {
el.addEventListener('MSPointerDown', onTouchStart, false);
}
function onTouchStart(e) {
if (slider.animating) {
e.preventDefault();
} else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
slider.pause();
// CAROUSEL:
cwidth = (vertical) ? slider.h : slider. w;
startT = Number(new Date());
// CAROUSEL:

// Local vars for X and Y points.
localX = e.touches[0].pageX;
localY = e.touches[0].pageY;
// Cater for Windows-device touch events.
if (window.navigator.msPointerEnabled) {
localX = e.pageX;
localY = e.pageY;
}
localX = e.touches[0].pageX;
localY = e.touches[0].pageY;

offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 :
(carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
(carousel && slider.currentSlide === slider.last) ? slider.limit :
(carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide :
(reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth;
startX = (vertical) ? localY : localX;
startY = (vertical) ? localX : localY;

el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);

// Cater for Windows-device touch events.
if (window.navigator.msPointerEnabled) {
el.addEventListener('MSPointerMove', onTouchMove, false);
el.addEventListener('MSPointerOut', onTouchEnd, false);
}
}
}
dx = (vertical) ? startX - localY : startX - localX;
scrolling = (vertical) ? (Math.abs(dx) < Math.abs(localX - startY)) : (Math.abs(dx) < Math.abs(localY - startY));

function onTouchMove(e) {
// Local vars for X and Y points.
// Cater for Windows-device touch events.
if ( window.navigator.msPointerEnabled ) {
localX = e.pageX;
localY = e.pageY;
} else {
localX = e.touches[0].pageX;
localY = e.touches[0].pageY;
}
var fxms = 500;

if ( ! scrolling || Number( new Date() ) - startT > fxms ) {
e.preventDefault();
if (!fade && slider.transitions) {
if (!slider.vars.animationLoop) {
dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
}
slider.setProps(offset + dx, "setTouch");
}
}
}

dx = (vertical) ? startX - localY : startX - localX;
scrolling = (vertical) ? (Math.abs(dx) < Math.abs(localX - startY)) : (Math.abs(dx) < Math.abs(localY - startY));
function onTouchEnd(e) {
// finish the touch by undoing the touch session
el.removeEventListener('touchmove', onTouchMove, false);

if ( window.navigator.msPointerEnabled ) {
var fxms = 100;
} else {
var fxms = 500;
}
if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) {
var updateDx = (reverse) ? -dx : dx,
target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev');

if ( ! scrolling || Number( new Date() ) - startT > fxms ) {
e.preventDefault();
if (!fade && slider.transitions) {
if (!slider.vars.animationLoop) {
dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
} else {
if (!fade) slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true);
}
}
slider.setProps(offset + dx, "setTouch");
el.removeEventListener('touchend', onTouchEnd, false);

startX = null;
startY = null;
dx = null;
offset = null;
}
}else{
el.style.msTouchAction = "none";
el._gesture = new MSGesture();
el._gesture.target = el;
el.addEventListener("MSPointerDown", onMSPointerDown, false);
el._slider = slider;
el.addEventListener("MSGestureChange", onMSGestureChange, false);
el.addEventListener("MSGestureEnd", onMSGestureEnd, false);

function onMSPointerDown(e){
e.stopPropagation();
if (slider.animating) {
e.preventDefault();
}else{
slider.pause();
el._gesture.addPointer(e.pointerId);
accDx = 0;
cwidth = (vertical) ? slider.h : slider. w;
startT = Number(new Date());
// CAROUSEL:

offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 :
(carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
(carousel && slider.currentSlide === slider.last) ? slider.limit :
(carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide :
(reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth;
}
}
}
}

function onTouchEnd(e) {
// finish the touch by undoing the touch session
el.removeEventListener('touchmove', onTouchMove, false);
// Cater for Windows-device touch events.
if (window.navigator.msPointerEnabled) {
el.removeEventListener('MSPointerMove', onTouchMove, false);
}
function onMSGestureChange(e) {
e.stopPropagation();
var slider = e.target._slider;
if(!slider){
return;
}
var transX = -e.translationX,
transY = -e.translationY;

if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) {
var updateDx = (reverse) ? -dx : dx,
target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
//Accumulate translations.
accDx = accDx + ((vertical) ? transY : transX);
dx = accDx;
scrolling = (vertical) ? (Math.abs(accDx) < Math.abs(-transX)) : (Math.abs(accDx) < Math.abs(-transY));

if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
} else {
if (!fade) slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true);
if(e.detail === e.MSGESTURE_FLAG_INERTIA){
el._gesture.stop();
}

if (!scrolling || Number(new Date()) - startT > 500) {
e.preventDefault();
if (!fade && slider.transitions) {
if (!slider.vars.animationLoop) {
dx = accDx / ((slider.currentSlide === 0 && accDx < 0 || slider.currentSlide === slider.last && accDx > 0) ? (Math.abs(accDx) / cwidth + 2) : 1);
}
slider.setProps(offset + dx, "setTouch");
}
}
}

function onMSGestureEnd(e) {
e.stopPropagation();
var slider = e.target._slider;
if(!slider){
return;
}
if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) {
var updateDx = (reverse) ? -dx : dx,
target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev');

if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) {
slider.flexAnimate(target, slider.vars.pauseOnAction);
} else {
if (!fade) slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true);
}
}

startX = null;
startY = null;
dx = null;
offset = null;
accDx = 0;
}
}
el.removeEventListener('touchend', onTouchEnd, false);
// Cater for Windows-device touch events.
if (window.navigator.msPointerEnabled) {
el.removeEventListener('MSPointerOut', onTouchEnd, false);
}
startX = null;
startY = null;
dx = null;
offset = null;
}
},
resize: function() {
Expand Down

0 comments on commit ca0575c

Please sign in to comment.