From c34a8956e1cd07498457f3211898e8de6d794de3 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Sat, 7 Mar 2015 23:59:27 +0100 Subject: implement swipe gestures on mobile to go to next and previous articles --- .../_global/js/jquery.mobile.events.touch.min.js | 3 +++ themes/_global/js/keyboard.js | 30 +++++++++++----------- themes/baggy/_head.twig | 1 + themes/baggy/view.twig | 11 ++++++++ themes/default/_head.twig | 1 + themes/default/view.twig | 11 ++++++++ 6 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 themes/_global/js/jquery.mobile.events.touch.min.js (limited to 'themes') diff --git a/themes/_global/js/jquery.mobile.events.touch.min.js b/themes/_global/js/jquery.mobile.events.touch.min.js new file mode 100644 index 00000000..058c3453 --- /dev/null +++ b/themes/_global/js/jquery.mobile.events.touch.min.js @@ -0,0 +1,3 @@ +/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */ + +(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;di||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;xMath.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(se.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)}); \ No newline at end of file diff --git a/themes/_global/js/keyboard.js b/themes/_global/js/keyboard.js index 26978cb2..ec20d3f2 100644 --- a/themes/_global/js/keyboard.js +++ b/themes/_global/js/keyboard.js @@ -1,27 +1,27 @@ function navigateKeyboard(leftURL, rightURL) { window.addEventListener("keypress", function (event) { var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions - console.log("key pressed : " + key); switch (key) { case 37: - // left arrow - if (leftURL != "?view=view&id=") { - window.location = window.location.origin + window.location.pathname + leftURL; - } + goLeft(leftURL); break; - /* - case 38: - // top arrow - window.location = window.location.origin + window.location.pathname + window.location.search + "#top"; - break; - */ + case 39: - //right arrow - if (rightURL != "?view=view&id=") { - window.location = window.location.origin + window.location.pathname + rightURL; - } + goRight(rightURL); break; } }, false); +} + +function goLeft(leftURL) { + if (leftURL != "?view=view&id=") { + window.location = window.location.origin + window.location.pathname + leftURL; + } +} + +function goRight(rightURL) { + if (rightURL != "?view=view&id=") { + window.location = window.location.origin + window.location.pathname + rightURL; + } } \ No newline at end of file diff --git a/themes/baggy/_head.twig b/themes/baggy/_head.twig index 3799f8fb..b9f1e5d9 100755 --- a/themes/baggy/_head.twig +++ b/themes/baggy/_head.twig @@ -31,6 +31,7 @@ + diff --git a/themes/baggy/view.twig b/themes/baggy/view.twig index 68af03f5..a6da85d5 100755 --- a/themes/baggy/view.twig +++ b/themes/baggy/view.twig @@ -103,6 +103,17 @@ retrievePercent({{ entry.id|e }}); }); }); + + // Use left and right arrow to navigate on with keyboard navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}'); + + // swipe to right or left on mobile to navigate + $('article').on("swiperight", function(){ + goLeft('?view=view&id={{ navigate.nextid|e }}'); + }); + $('article').on("swipeleft", function(){ + goRight('?view=view&id={{ navigate.previousid|e }}'); + }); + {% endblock %} diff --git a/themes/default/_head.twig b/themes/default/_head.twig index f3c9d886..ce1bbdcc 100755 --- a/themes/default/_head.twig +++ b/themes/default/_head.twig @@ -30,6 +30,7 @@ + diff --git a/themes/default/view.twig b/themes/default/view.twig index 9c9d1561..57d25965 100755 --- a/themes/default/view.twig +++ b/themes/default/view.twig @@ -125,6 +125,17 @@ $('#article_toolbar .tool.top').parent().hide(); } }); + + // Use left and right arrow to navigate on with keyboard navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}'); + + // swipe to right or left on mobile to navigate + $('article').on("swiperight", function(){ + goLeft('?view=view&id={{ navigate.nextid|e }}'); + }); + $('article').on("swipeleft", function(){ + goRight('?view=view&id={{ navigate.previousid|e }}'); + }); + {% endblock %} -- cgit v1.2.3