edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

Fix broken mobile gestures

Browse Source 
When mobile gestures were enabled they would steal the normal
input from the browser. This prevented zooming in and out as well
as horizontal panning. Hammer didn't have a good configuration
system and so I swapped to using ZingTouch which is much more
simple, and offers better configuration. This allowed for easy
integration of gestures without stealing all input from the
browser.
This commit is contained in:
Kira 2019-11-09 12:29:46 -08:00
parent a5910b20c9
commit 259bb87304
3 changed files with 29 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/javascript/src/javascripts/posts.js.erb
View File

@ -1,5 +1,5 @@
import Utility from './utility'
import Hammer from 'hammerjs'
import ZingTouch from 'zingtouch'
import LS from './local_storage'
import Note from './notes'
import { SendQueue } from './send_queue'
@ -165,36 +165,29 @@ Post.initialize_gestures = function() {
}
if (!(('ontouchstart' in window) || (navigator.maxTouchPoints > 0)))
return;
var $body = $("body");
if ($body.data("hammer")) {
const zing = new ZingTouch.Region(document.body, false, false);
zing.bind(document.body, 'swipe', function(e) {
console.log(e);
const angle = e.detail.data[0].currentDirection + 90.0;
const hasPrev = Post.has_prev_target();
const hasNext = Post.has_next_target();
if (hasPrev && angle > 90-35 && angle < 90+35) { // right swipe
$("body").css({"transition-timing-function": "ease", "transition-duration": "0.2s", "opacity": "0", "transform": "translateX(150%)"});
Utility.delay(200).then(function() { Post.nav_prev(e); });
}
if (hasNext && angle > 270-35 && angle < 270+35) { // Left swipe
$("body").css({"transition-timing-function": "ease", "transition-duration": "0.2s", "opacity": "0", "transform": "translateX(-150%)"});
Utility.delay(200).then(function() { Post.nav_next(e); });
}
});
const $body = $("body");
if($body.data('zing'))
return;
}
// if (!Utility.test_max_width(660)) {
// return;
// }
$body.data("zing", zing);
$("#image-container").css({overflow: "visible"});
var hasPrev = Post.has_prev_target();
var hasNext = Post.has_next_target();
delete Hammer.defaults.cssProps.userSelect;
var hammer = new Hammer($body[0], {touchAction: 'pan-y', recognizers: [[Hammer.Swipe, { threshold: 20, velocity: 0.4, direction: Hammer.DIRECTION_HORIZONTAL }]], inputClass: Hammer.TouchInput});
$body.data("hammer", hammer);
if (hasPrev) {
hammer.on("swiperight", async function(e) {
$("body").css({"transition-timing-function": "ease", "transition-duration": "0.2s", "opacity": "0", "transform": "translateX(150%)"});
await Utility.delay(200);
Post.nav_prev(e);
});
}
if (hasNext) {
hammer.on("swipeleft", async function(e) {
$("body").css({"transition-timing-function": "ease", "transition-duration": "0.2s", "opacity": "0", "transform": "translateX(-150%)"});
await Utility.delay(200);
Post.nav_next(e);
});
}
}
Post.nav_prev = function(e) {

4
package.json
View File

@ -4,7 +4,6 @@
"@rails/webpacker": "^4.0.7",
"debug-loader": "^0.0.1",
"expose-loader": "^0.7.5",
"hammerjs": "^2.0.8",
"jquery-ui": "^1.12.1",
"jquery-ujs": "^1.2.2",
"qtip2": "^3.0.3",
@ -13,7 +12,8 @@
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack-cli": "^3.0.8"
"webpack-cli": "^3.0.8",
"zingtouch": "^1.0.6"
},
"devDependencies": {
"eslint": "^5.3.0",

10
yarn.lock
View File

@ -3231,11 +3231,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b"
integrity sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
handle-thing@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@ -7791,3 +7786,8 @@ yargs@^7.0.0:
which-module "^1.0.0"
y18n "^3.2.1"
yargs-parser "^5.0.0"
zingtouch@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/zingtouch/-/zingtouch-1.0.6.tgz#456cf2b0a69f91a5ffbd8a83b18033c671f1096d"
integrity sha512-S7jcR7cSRy28VmQBO0Tq7ZJV4pzfvvrTU9FrrL0K1QPpfBal9wm0oKhoCuifc+PPCq+hQMTJr5E9XKUQDm00VA==