Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Feature ie touch #761

Merged
merged 17 commits into from

4 participants

@mattyza
Owner

No description provided.

@mattyza mattyza merged commit 5ec3b74 into develop
@mattyza mattyza deleted the feature-ie-touch branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 16, 2013
  1. @NoiseEee
  2. @NoiseEee

    Of course, separate thumbnail captions would be most 'Flex'ible, so t…

    NoiseEee authored
    …hey are now coming from the data-thumbcaptionattribute
Commits on Jan 22, 2013
  1. @mattclements
Commits on Jan 28, 2013
  1. @mattyza

    Merge pull request #516 from mattclements/documentation-correction

    mattyza authored
    Fixed Documentation useCCS to useCSS
Commits on Feb 15, 2013
  1. @mattyza

    Merge pull request #507 from NoiseEee/master

    mattyza authored
    Adds support for thumbnail captions on the "thumbnails" pagination option.
  2. @mattyza

    Reverts merge of #516.

    mattyza authored
  3. @mattyza

    Manually reverts #516.

    mattyza authored
Commits on May 7, 2013
  1. @sarvaje

    add mspointers and MSGestures

    sarvaje authored
Commits on May 8, 2013
  1. @sarvaje
  2. @sarvaje

    clear index.html

    sarvaje authored
  3. @sarvaje

    Merge branch 'refs/heads/master' into develop

    sarvaje authored
    Conflicts:
    	demo/index.html
    	jquery.flexslider-min.js
    	jquery.flexslider.js
  4. @sarvaje

    Revert "Merge branch 'refs/heads/master' into develop"

    sarvaje authored
    This reverts commit 45ab003, reversing
    changes made to f4197a0.
  5. @sarvaje

    add IE10 Touch support

    sarvaje authored
Commits on May 20, 2013
  1. @sarvaje
  2. @sarvaje

    Improve IE10 touch experience.

    sarvaje authored
Commits on May 21, 2013
  1. @sarvaje
Commits on Jul 2, 2013
  1. @mattyza

    Merge pull request #683 from sarvaje/feature-ie-touch

    mattyza authored
    Improve IE10 touch experience. issue #215
This page is out of date. Refresh to see the latest.
Showing with 193 additions and 111 deletions.
  1. +1 −1  demo/video.html
  2. +192 −110 jquery.flexslider.js
View
2  demo/video.html
@@ -134,7 +134,7 @@ <h3 class="nav-header">Other Examples</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 -->
View
302 jquery.flexslider.js
@@ -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",
@@ -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
@@ -77,9 +78,6 @@
slider.doMath();
- // ASNAV:
- if (asNav) methods.asNav.setup();
-
// INIT
slider.setup("init");
@@ -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(){
@@ -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: {
@@ -352,112 +377,169 @@
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;
- dx = (vertical) ? startX - localY : startX - localX;
- scrolling = (vertical) ? (Math.abs(dx) < Math.abs(localX - startY)) : (Math.abs(dx) < Math.abs(localY - startY));
+ 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");
+ }
+ }
+ }
- if ( window.navigator.msPointerEnabled ) {
- var fxms = 100;
- } else {
- var fxms = 500;
- }
+ function onTouchEnd(e) {
+ // finish the touch by undoing the touch session
+ el.removeEventListener('touchmove', onTouchMove, false);
+
+ 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){
+ setImmediate(function (){
+ el._gesture.stop();
+ });
+
+ return;
+ }
+
+ 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() {
Something went wrong with that request. Please try again.