diff --git a/zepto.onepagescroll.js b/zepto.onepagescroll.js index 58b266c..f631cea 100644 --- a/zepto.onepagescroll.js +++ b/zepto.onepagescroll.js @@ -9,9 +9,9 @@ * * Credit: Eike Send for the awesome swipe event * https://github.com/peachananr/zepto-onepage-scroll - * * - * Zepto Modules Required: + * + * Zepto Modules Required: * - touch.js * - fx.js * @@ -23,12 +23,13 @@ ;(function($){ $.extend($.fn, { onePageScroll: function(options){ - + var defaults = { sectionContainer: "section", easing: "ease", animationTime: 1000, - pagination: true, + threshold: 100, + pagination: true, updateURL: false, keyboard: true, beforeMove: null, @@ -36,7 +37,7 @@ loop: false, responsiveFallback: false }; - + var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectionContainer), @@ -48,21 +49,21 @@ quietPeriod = 300, paginationList = "", body = $("body"); - - + + /*------------------------------------------------*/ - /* Credit: Eike Send for the awesome swipe event */ + /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ - + $.fn.swipeEvents = function() { return this.each(function() { - + var startX, startY, $this = $(this); - + $this.on('touchstart', touchstart); - + function touchstart(event) { var touches = event.touches; if (touches && touches.length) { @@ -71,14 +72,14 @@ $this.on('touchmove', touchmove); } } - + function touchmove(event) { var touches = event.touches; if (touches && touches.length) { event.preventDefault(); var deltaX = startX - touches[0].pageX; var deltaY = startY - touches[0].pageY; - + if (deltaX >= 50) { $this.trigger("swipeLeft"); } @@ -96,45 +97,45 @@ } } } - + }); }; - + /*---------------------------------*/ /* Function to transform the page */ /*---------------------------------*/ - + $.fn.transformPage = function(settings, pos, index, next_el) { var el2 = $(this); - + if (typeof settings.beforeMove == 'function') settings.beforeMove(index, next_el); - + el2.animate({ translate3d: "0, " + pos + "%, 0" }, settings.animationTime, settings.easing, function() { if (typeof settings.afterMove == 'function') settings.afterMove(index); }); } - + /*---------------------------------*/ /* Function to move down section */ /*---------------------------------*/ $.fn.moveDown = function() { var timeNow = new Date().getTime(); - + // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); return; } - + var index = $(settings.sectionContainer +".active").data("index"), current = $(settings.sectionContainer + "[data-index='" + index + "']"), next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) + 1) + "']"), el3 = $(this); - + if(next.length < 1) { if (settings.loop == true) { pos = 0; @@ -165,7 +166,7 @@ el3.transformPage(settings, pos, next_index, next); lastAnimation = timeNow; } - + /*---------------------------------*/ /* Function to move up section */ /*---------------------------------*/ @@ -178,7 +179,7 @@ event.preventDefault(); return; } - + var index = $(settings.sectionContainer +".active").data("index"), current = $(settings.sectionContainer + "[data-index='" + index + "']"), next = $(settings.sectionContainer + "[data-index='" + (parseInt(index) - 1) + "']"), @@ -212,14 +213,14 @@ el4.transformPage(settings, pos, next_index, next); lastAnimation = timeNow; } - + /*-------------------------------------------*/ /* Function to move to specified section */ /*-------------------------------------------*/ $.fn.moveTo = function(page_index) { var timeNow = new Date().getTime(); - + // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); @@ -249,7 +250,7 @@ lastAnimation = timeNow; } } - + /*-------------------------------------------*/ /* Responsive Fallback trigger */ /*-------------------------------------------*/ @@ -268,11 +269,11 @@ bodyremoveClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } - - $(document).swipeEvents().on("swipeDown", function(event){ + + $(document).swipeEvents().on("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); - }).on("swipeUp", function(event){ + }).on("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); @@ -282,22 +283,22 @@ } } - + /*-------------------------------------------*/ /* Initialize scroll detection */ /*-------------------------------------------*/ function init_scroll(event, delta) { var deltaOfInterest = delta; - + if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } } - - + + /*-------------------------------------------*/ /* Prepare Everything */ /*-------------------------------------------*/ @@ -313,10 +314,10 @@ } }); - $(document).swipeEvents().on("swipeDown", function(event){ + $(document).swipeEvents().on("swipeDown", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); - }).on("swipeUp", function(event){ + }).on("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); @@ -342,7 +343,7 @@ if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); document.body.className = document.body.className.replace(/\bviewing-page-\d.*?\b/g, ''); - + body.addClass("viewing-page-" + next_index) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); @@ -372,9 +373,14 @@ } function mouseWheelHandler(event) { - event.preventDefault(); - var delta = event.wheelDelta || -event.detail; - if(!body.hasClass("disabled-onepage-scroll")) init_scroll(event, delta); + if (!($(event.target).hasClass('disabled-scroll'))) { + event.preventDefault(); + var delta = event.wheelDelta || -event.detail; + if (Math.abs(event.wheelDelta) < settings.threshold) { + return; + } + if(!body.hasClass("disabled-onepage-scroll")) init_scroll(event, delta); + } } $(document).on('mousewheel DOMMouseScroll', mouseWheelHandler); @@ -409,7 +415,7 @@ } return false; } - - + + }) })(Zepto) \ No newline at end of file diff --git a/zepto.onepagescroll.min.js b/zepto.onepagescroll.min.js index 995d86c..9020df8 100644 --- a/zepto.onepagescroll.min.js +++ b/zepto.onepagescroll.min.js @@ -1 +1 @@ -(function(e){e.extend(e.fn,{onePageScroll:function(t){function d(e,t){var n=t;if(n<0){i.moveDown()}else{i.moveUp()}}function w(){var e=this.dataset.index;i.moveTo(e)}function E(e){e.preventDefault();var t=e.wheelDelta||-e.detail;if(!h.hasClass("disabled-onepage-scroll"))d(e,t)}function S(e){var t=e.target.tagName.toLowerCase();if(!h.hasClass("disabled-onepage-scroll")){switch(e.which){case 38:if(t!="input"&&t!="textarea")i.moveUp();break;case 40:if(t!="input"&&t!="textarea")i.moveDown();break;default:return}}return false}var n={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:false,responsiveFallback:false};var r=e.extend({},n,t),i=e(this),s=e(r.sectionContainer),o=s.length,u="off",a=0,f=0,f=0,l=300,c="",h=e("body");e.fn.swipeEvents=function(){return this.each(function(){function i(e){var i=e.touches;if(i&&i.length){t=i[0].pageX;n=i[0].pageY;r.on("touchmove",s)}}function s(e){var i=e.touches;if(i&&i.length){e.preventDefault();var o=t-i[0].pageX;var u=n-i[0].pageY;if(o>=50){r.trigger("swipeLeft")}if(o<=-50){r.trigger("swipeRight")}if(u>=50){r.trigger("swipeUp")}if(u<=-50){r.trigger("swipeDown")}if(Math.abs(o)>=50||Math.abs(u)>=50){r.off("touchmove",s)}}}var t,n,r=e(this);r.on("touchstart",i)})};e.fn.transformPage=function(t,n,r,i){var s=e(this);if(typeof t.beforeMove=="function")t.beforeMove(r,i);s.animate({translate3d:"0, "+n+"%, 0"},t.animationTime,t.easing,function(){if(typeof t.afterMove=="function")t.afterMove(r)})};e.fn.moveDown=function(){var t=(new Date).getTime();if(t-f0){var u=s.data("index");i.removeClass("active");s.addClass("active");e(".onepage-pagination li a"+".active").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");document.body.className=document.body.className.replace(/\bviewing-page-\d.*?\b/g,"");h.addClass("viewing-page-"+u);b=(t-1)*100*-1;if(history.replaceState&&r.updateURL==true){var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(parseInt(t)-1);history.pushState({},document.title,a)}o.transformPage(r,b,t,s);f=n}};var p=function(){if(e(document).width()"}});e(document).swipeEvents().on("swipeDown",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveUp()}).on("swipeUp",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveDown()});if(r.pagination==true){e("").prependTo("body");posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}if(window.location.hash!=""&&window.location.hash!="#1"){var v=window.location.hash.replace("#",""),m=e(r.sectionContainer+"[data-index='"+v+"']"),g=m.data("index");e(r.sectionContainer+"[data-index='"+v+"']").addClass("active");h.addClass("viewing-page-"+v);if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+v+"']").addClass("active");if(m){m.addClass("active");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+v+"']").addClass("active");document.body.className=document.body.className.replace(/\bviewing-page-\d.*?\b/g,"");h.addClass("viewing-page-"+g);if(history.replaceState&&r.updateURL==true){var y=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+v;history.pushState({},document.title,y)}}var b=(v-1)*100*-1;i.transformPage(r,b,v)}else{e(r.sectionContainer+"[data-index='1']").addClass("active");h.addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a[data-index='1']").addClass("active")}if(r.pagination==true){e(".onepage-pagination li a").click(function(){var t=e(this).data("index");i.moveTo(t)})}e(document).on("mousewheel DOMMouseScroll",E);if(r.responsiveFallback!=false){window.onresize=function(){p()};p()}if(r.keyboard==true){document.onkeydown=S}return false}})})(Zepto) \ No newline at end of file +!function(a){a.extend(a.fn,{onePageScroll:function(b){function c(a,b){var c=b;0>c?h.moveDown():h.moveUp()}function d(b){if(!a(b.target).hasClass("disabled-scroll")){b.preventDefault();var d=b.wheelDelta||-b.detail;if(Math.abs(b.wheelDelta)=50&&f.trigger("swipeLeft"),-50>=g&&f.trigger("swipeRight"),h>=50&&f.trigger("swipeUp"),-50>=h&&f.trigger("swipeDown"),(Math.abs(g)>=50||Math.abs(h)>=50)&&f.off("touchmove",c)}}var d,e,f=a(this);f.on("touchstart",b)})},a.fn.transformPage=function(b,c,d,e){var f=a(this);"function"==typeof b.beforeMove&&b.beforeMove(d,e),f.animate({translate3d:"0, "+c+"%, 0"},b.animationTime,b.easing,function(){"function"==typeof b.afterMove&&b.afterMove(d)})},a.fn.moveDown=function(){var b=(new Date).getTime();if(b-l0){var h=e.data("index");if(d.removeClass("active"),e.addClass("active"),a(".onepage-pagination li a.active").removeClass("active"),a(".onepage-pagination li a[data-index='"+b+"']").addClass("active"),document.body.className=document.body.className.replace(/\bviewing-page-\d.*?\b/g,""),o.addClass("viewing-page-"+h),u=100*(b-1)*-1,history.replaceState&&1==g.updateURL){var i=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(parseInt(b)-1);history.pushState({},document.title,i)}f.transformPage(g,u,b,e),l=c}};var p=function(){a(document).width()")}),a(document).swipeEvents().on("swipeDown",function(b){a("body").hasClass("disabled-onepage-scroll")||b.preventDefault(),h.moveUp()}).on("swipeUp",function(b){a("body").hasClass("disabled-onepage-scroll")||b.preventDefault(),h.moveDown()}),1==g.pagination&&(a("
    "+n+"
").prependTo("body"),posTop=h.find(".onepage-pagination").height()/2*-1,h.find(".onepage-pagination").css("margin-top",posTop)),""!=window.location.hash&&"#1"!=window.location.hash){var q=window.location.hash.replace("#",""),r=a(g.sectionContainer+"[data-index='"+q+"']"),s=r.data("index");if(a(g.sectionContainer+"[data-index='"+q+"']").addClass("active"),o.addClass("viewing-page-"+q),1==g.pagination&&a(".onepage-pagination li a[data-index='"+q+"']").addClass("active"),r&&(r.addClass("active"),1==g.pagination&&a(".onepage-pagination li a[data-index='"+q+"']").addClass("active"),document.body.className=document.body.className.replace(/\bviewing-page-\d.*?\b/g,""),o.addClass("viewing-page-"+s),history.replaceState&&1==g.updateURL)){var t=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+q;history.pushState({},document.title,t)}var u=100*(q-1)*-1;h.transformPage(g,u,q)}else a(g.sectionContainer+"[data-index='1']").addClass("active"),o.addClass("viewing-page-1"),1==g.pagination&&a(".onepage-pagination li a[data-index='1']").addClass("active");return 1==g.pagination&&a(".onepage-pagination li a").click(function(){var b=a(this).data("index");h.moveTo(b)}),a(document).on("mousewheel DOMMouseScroll",d),0!=g.responsiveFallback&&(window.onresize=function(){p()},p()),1==g.keyboard&&(document.onkeydown=e),!1}})}(Zepto); \ No newline at end of file