diff --git a/bower.json b/bower.json index 51df028..79367f7 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pagePiling.js", - "version": "1.0", + "version": "1.2", "homepage": "https://github.com/alvarotrigo/pagePiling.js", "authors": [ "Alvaro Trigo https://github.com/alvarotrigo" diff --git a/jquery.pagepiling.js b/jquery.pagepiling.js index ea4d1fa..644a67c 100644 --- a/jquery.pagepiling.js +++ b/jquery.pagepiling.js @@ -1,5 +1,5 @@ /* =========================================================== - * pagepiling.js 1.0 + * pagepiling.js 1.2 * * https://github.com/alvarotrigo/pagePiling.js * MIT licensed @@ -9,7 +9,7 @@ * ========================================================== */ (function ($) { - $.fn.pagepiling = function (options) { + $.fn.pagepiling = function (custom) { var container = $(this); var lastScrolledDestiny; var lastAnimation = 0; @@ -22,7 +22,7 @@ var scrollDelay = 600; // Create some defaults, extending them with any options that were provided - options = $.extend({ + options = $.extend(true, { direction: 'vertical', menu: null, verticalCentered: true, @@ -34,10 +34,10 @@ loopTop: false, css3: true, navigation: { - 'textColor': '#000', - 'bulletsColor': '#000', - 'position': 'right', - 'tooltips': ['section1', 'section2', 'section3', 'section4'] + textColor: '#000', + bulletsColor: '#000', + position: 'right', + tooltips: null }, normalScrollElements: null, normalScrollElementTouchThreshold: 5, @@ -50,7 +50,7 @@ afterLoad: null, onLeave: null, afterRender: null - }, options); + }, custom); //easeInQuart animation included in the plugin @@ -709,15 +709,26 @@ return events; } + /** + * As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen + * this way we make sure that is really a touch event what IE is detecting. + */ + function isReallyTouch(e){ + //if is not IE || IE is detecting `touch` or `pen` + return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse'; + } + /** * Getting the starting possitions of the touch event */ function touchStartHandler(event){ - var e = event.originalEvent; - var touchEvents = getEventsPage(e); - touchStartY = touchEvents['y']; - touchStartX = touchEvents['x']; + + if(isReallyTouch(e)){ + var touchEvents = getEventsPage(e); + touchStartY = touchEvents['y']; + touchStartX = touchEvents['x']; + } } /* Detecting touch events @@ -726,7 +737,7 @@ var e = event.originalEvent; // additional: if one of the normalScrollElements isn't within options.normalScrollElementTouchThreshold hops up the DOM chain - if (!checkParentForNormalScrollElement(event.target)) { + if ( !checkParentForNormalScrollElement(event.target) && isReallyTouch(e) ) { event.preventDefault(); var activeSection = $('.pp-section.active'); diff --git a/jquery.pagepiling.min.js b/jquery.pagepiling.min.js index 8a7070a..7a472c9 100644 --- a/jquery.pagepiling.min.js +++ b/jquery.pagepiling.min.js @@ -1,5 +1,5 @@ /* =========================================================== - * pagepiling.js 1.0 + * pagepiling.js 1.2 * * https://github.com/alvarotrigo/pagePiling.js * MIT licensed @@ -8,22 +8,23 @@ * * ========================================================== */ -(function(b){b.fn.pagepiling=function(c){function B(a){var f=b(".pp-section.active").index(".pp-section");a=a.index(".pp-section");return f>a?"up":"down"}function g(a,f){var d={destination:a,animated:f,activeSection:b(".pp-section.active"),anchorLink:a.data("anchor"),sectionIndex:a.index(".pp-section"),toMove:a,yMovement:B(a),leavingSection:b(".pp-section.active").index(".pp-section")+1};d.activeSection.is(a)||("undefined"===typeof d.animated&&(d.animated=!0),"undefined"!==typeof d.anchorLink&&C(d.anchorLink, -d.sectionIndex),d.destination.addClass("active").siblings().removeClass("active"),d.sectionsToMove=D(d),"down"===d.yMovement?(d.translate3d="vertical"!==c.direction?"translate3d(-100%, 0px, 0px)":"translate3d(0px, -100%, 0px)",d.scrolling="-100%",c.css3||d.sectionsToMove.each(function(a){a!=d.activeSection.index(".pp-section")&&b(this).css(m(d.scrolling))}),d.animateSection=d.activeSection):(d.translate3d="translate3d(0px, 0px, 0px)",d.scrolling="0",d.animateSection=a),b.isFunction(c.onLeave)&&c.onLeave.call(this, -d.leavingSection,d.sectionIndex+1,d.yMovement),E(d),F(d.anchorLink),G(d.anchorLink,d.sectionIndex),r=d.anchorLink,s=(new Date).getTime())}function E(a){c.css3?(t(a.animateSection,a.translate3d,a.animated),a.sectionsToMove.each(function(){t(b(this),a.translate3d,a.animated)}),setTimeout(function(){n(a)},c.scrollingSpeed)):(a.scrollOptions=m(a.scrolling),a.animated?a.animateSection.animate(a.scrollOptions,c.scrollingSpeed,c.easing,function(){u(a);n(a)}):(a.animateSection.css(m(a.scrolling)),setTimeout(function(){u(a); -n(a)},400)))}function n(a){b.isFunction(c.afterLoad)&&c.afterLoad.call(this,a.anchorLink,a.sectionIndex+1)}function D(a){return"down"===a.yMovement?b(".pp-section").map(function(f){if(fa.destination.index(".pp-section"))return b(this)})}function u(a){"up"===a.yMovement&&a.sectionsToMove.each(function(f){b(this).css(m(a.scrolling))})}function m(a){return"vertical"===c.direction?{top:a}:{left:a}}function C(a, -b){c.anchors.length?(location.hash=a,v(location.hash)):v(String(b))}function v(a){a=a.replace("#","");b("body")[0].className=b("body")[0].className.replace(/\b\s?pp-viewing-[^\s]+\b/g,"");b("body").addClass("pp-viewing-"+a)}function p(){return(new Date).getTime()-s<600+c.scrollingSpeed?!0:!1}function t(a,b,c){a.toggleClass("pp-easing",c);a.css({"-webkit-transform":b,"-moz-transform":b,"-ms-transform":b,transform:b})}function h(a){if(!p()){a=window.event||a;a=Math.max(-1,Math.min(1,a.wheelDelta||-a.deltaY|| --a.detail));var c=b(".pp-section.active"),c=w(c);0>a?k("down",c):k("up",c);return!1}}function k(a,c){if("down"==a)var d="bottom",e=b.fn.pagepiling.moveSectionDown;else d="top",e=b.fn.pagepiling.moveSectionUp;if(0Math.abs(l-touchEndY)?Math.abs(touchStartX-touchEndX)>e.width()/100*c.touchSensitivity&& -(touchStartX>touchEndX?k("down",a):touchEndX>touchStartX&&k("up",a)):Math.abs(l-touchEndY)>e.height()/100*c.touchSensitivity&&(l>touchEndY?k("down",a):touchEndY>l&&k("up",a))))}function z(a,f){f=f||0;var d=b(a).parent();return f
    ');var a=b("#pp-nav");a.css("color",c.navigation.textColor);a.addClass(c.navigation.position); -for(var f=0;f')}a.find("span").css("border-color",c.navigation.bulletsColor)}function G(a,f){c.navigation&&(b("#pp-nav").find(".active").removeClass("active"),a?b("#pp-nav").find('a[href="#'+a+'"]').addClass("active"):b("#pp-nav").find("li").eq(f).find("a").addClass("active"))} -function F(a){c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}function K(){var a=document.createElement("p"),b,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var e in c)void 0!==a.style[e]&&(a.style[e]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[e]));document.body.removeChild(a); -return void 0!==b&&0');--q}).promise().done(function(){c.navigation&&(b("#pp-nav").css("margin-top","-"+b("#pp-nav").height()/2+"px"),b("#pp-nav").find("li").eq(b(".pp-section.active").index(".pp-section")).find("a").addClass("active"));b(window).on("load",function(){var a=window.location.hash.replace("#", -""),a=b('.pp-section[data-anchor="'+a+'"]');0'+a+"").hide().appendTo(b(this)).fadeIn(200)},mouseleave:function(){b(this).find(".pp-tooltip").fadeOut(200,function(){b(this).remove()})}},"#pp-nav li")}})(jQuery); \ No newline at end of file +(function(b){b.fn.pagepiling=function(C){function D(a){var d=b(".pp-section.active").index(".pp-section");a=a.index(".pp-section");return d>a?"up":"down"}function f(a,d){var c={destination:a,animated:d,activeSection:b(".pp-section.active"),anchorLink:a.data("anchor"),sectionIndex:a.index(".pp-section"),toMove:a,yMovement:D(a),leavingSection:b(".pp-section.active").index(".pp-section")+1};c.activeSection.is(a)||("undefined"===typeof c.animated&&(c.animated=!0),"undefined"!==typeof c.anchorLink&&E(c.anchorLink, +c.sectionIndex),c.destination.addClass("active").siblings().removeClass("active"),c.sectionsToMove=F(c),"down"===c.yMovement?(c.translate3d="vertical"!==options.direction?"translate3d(-100%, 0px, 0px)":"translate3d(0px, -100%, 0px)",c.scrolling="-100%",options.css3||c.sectionsToMove.each(function(a){a!=c.activeSection.index(".pp-section")&&b(this).css(l(c.scrolling))}),c.animateSection=c.activeSection):(c.translate3d="translate3d(0px, 0px, 0px)",c.scrolling="0",c.animateSection=a),b.isFunction(options.onLeave)&& +options.onLeave.call(this,c.leavingSection,c.sectionIndex+1,c.yMovement),G(c),H(c.anchorLink),I(c.anchorLink,c.sectionIndex),q=c.anchorLink,r=(new Date).getTime())}function G(a){options.css3?(t(a.animateSection,a.translate3d,a.animated),a.sectionsToMove.each(function(){t(b(this),a.translate3d,a.animated)}),setTimeout(function(){m(a)},options.scrollingSpeed)):(a.scrollOptions=l(a.scrolling),a.animated?a.animateSection.animate(a.scrollOptions,options.scrollingSpeed,options.easing,function(){u(a);m(a)}): +(a.animateSection.css(l(a.scrolling)),setTimeout(function(){u(a);m(a)},400)))}function m(a){b.isFunction(options.afterLoad)&&options.afterLoad.call(this,a.anchorLink,a.sectionIndex+1)}function F(a){return"down"===a.yMovement?b(".pp-section").map(function(d){if(da.destination.index(".pp-section"))return b(this)})}function u(a){"up"===a.yMovement&&a.sectionsToMove.each(function(d){b(this).css(l(a.scrolling))})} +function l(a){return"vertical"===options.direction?{top:a}:{left:a}}function E(a,b){options.anchors.length?(location.hash=a,v(location.hash)):v(String(b))}function v(a){a=a.replace("#","");b("body")[0].className=b("body")[0].className.replace(/\b\s?pp-viewing-[^\s]+\b/g,"");b("body").addClass("pp-viewing-"+a)}function n(){return(new Date).getTime()-r<600+options.scrollingSpeed?!0:!1}function t(a,b,c){a.toggleClass("pp-easing",c);a.css({"-webkit-transform":b,"-moz-transform":b,"-ms-transform":b,transform:b})} +function g(a){if(!n()){a=window.event||a;a=Math.max(-1,Math.min(1,a.wheelDelta||-a.deltaY||-a.detail));var d=b(".pp-section.active"),d=w(d);0>a?h("down",d):h("up",d);return!1}}function h(a,d){if("down"==a)var c="bottom",e=b.fn.pagepiling.moveSectionDown;else c="top",e=b.fn.pagepiling.moveSectionUp;if(0Math.abs(k-touchEndY)?Math.abs(touchStartX-touchEndX)>e.width()/100*options.touchSensitivity&&(touchStartX>touchEndX?h("down",a):touchEndX>touchStartX&&h("up",a)):Math.abs(k-touchEndY)>e.height()/100*options.touchSensitivity&&(k>touchEndY?h("down",a):touchEndY>k&&h("up",a))))}function A(a,d){d=d||0;var c=b(a).parent();return d
      ');var a=b("#pp-nav");a.css("color",options.navigation.textColor);a.addClass(options.navigation.position);for(var d=0;d')}a.find("span").css("border-color",options.navigation.bulletsColor)}function I(a,d){options.navigation&&(b("#pp-nav").find(".active").removeClass("active"),a?b("#pp-nav").find('a[href="#'+a+'"]').addClass("active"):b("#pp-nav").find("li").eq(d).find("a").addClass("active"))}function H(a){options.menu&&(b(options.menu).find(".active").removeClass("active"),b(options.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}function M(){var a=document.createElement("p"), +b,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var e in c)void 0!==a.style[e]&&(a.style[e]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[e]));document.body.removeChild(a);return void 0!==b&&0');--p}).promise().done(function(){options.navigation&&(b("#pp-nav").css("margin-top","-"+b("#pp-nav").height()/2+"px"),b("#pp-nav").find("li").eq(b(".pp-section.active").index(".pp-section")).find("a").addClass("active"));b(window).on("load",function(){var a=window.location.hash.replace("#",""),a=b('.pp-section[data-anchor="'+a+'"]');0'+a+"").hide().appendTo(b(this)).fadeIn(200)},mouseleave:function(){b(this).find(".pp-tooltip").fadeOut(200,function(){b(this).remove()})}},"#pp-nav li")}})(jQuery); \ No newline at end of file