On a mobile, I can not find a way to handle just the left/right swipe.
The following (sudo/python) code works but is not what I want :
Tags
People
Badges
Help
def doSwipe_hd_image_div(self, event):
real_event = Events.getRealOrigin(event)
if real_event.getSwipeDirection() == "right":
self.doClick_left()
elif real_event.getSwipeDirection() == "left":
self.doClick_right()
elif real_event.getSwipeDirection() == "up":
print "propo", real_event.isPropagatable()
Clients.scrollBy(0, +100)
else:
print "propo", real_event.isPropagatable()
Clients.scrollBy(0, -100)
I do not want to do the "Clients.scrollBy" I want the default browser behavior to occur (i.e. smooth scroll up/down).
In theory the event should propagate as isPropagatable is True.
I have tried to utilize client side w:onSwipe, w:onSwipe_ and w:doSwipe but without success.
It appears that as soon as you handle "swipe" (server side or client side) you have to do it all.
Any suggestions?
ok good job in finding something that handles the gritty details:
I took the freedom to make a few more "ZK idiomatic" changes to make the initialization process more robust:
<?script ?> so it will load in the page head element avoiding load timing issues. also the defer attibute at the inline script element becomes obsolete, since the method doesn't get called until the DOM element is availablewgt) and the fire function just for a shorter syntaxhttps://zkfiddle.org/sample/20juvng/7-test-swipe-touchSwipe
maybe those tips help.
What I mentioned earlier, are those JS errors in the console when it comes to scroll events ... just keep an eye on those, in case browsers decide to react differently on this, your script might just be blocked/stopped somehow one day chrome decides to do so. Maybe there's an updated version of the touch-swipe extension on day that solves those.
FYI and anyone else interested there seems to be a fix for touchSwipe and the "attempt to cancel ..." message logged.
See https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/pull/362/files
But the fix does not seem to be committed to the master yet.
Bobzk ( 2021-03-24 21:45:23 +0800 )editThe challenge with onSwipe is that the swipe direction is determined after the user finished the touch action. Since all the default scrolling is prevented during that time, this doesn't happen.
With onSwipe you can't have both at the same time, you either use onSwipe waiting for the user to release the touch and determine the direction suppressing scrolling. Or not use onSwipe and have native scrolling. A similar conflict occurs when using drag and drop.
Do you have a good example where both methods are combined in a non confusing way?
Thanks cor3000,
I'll stick to the swipe problem.
It seems you have answered the question -
swipe direction is determined after the user finished the touch action
So it is never going to be possible at the Java level.
It would appear that the only way is if ZK could (and it may not be possible) do it down at the Javascript level and have onSwipeHorizontal and onSwipeVertical events.
Unless anyone can see a Javascript way of doing this, I will have to live with it.
I did think my sudo/python example was pretty clear. The purpose is to trap left/right and change image accordingly but ignore up/down. Yes, I know there are other ways to skin a cat and the left/right could be done in CSS to scroll left/right images but there are reasons to do it via the server.
I was trying to do this down at the javascript level but still problems.
The "click" event works on the following :
link texthttps://zkfiddle.org/sample/20juvng/3-test-swipe](https://zkfiddle.org/sample/20juvng/3-test-swipe)
But the "swipeleft" does not.
Any ideas?
Removed superfluous code/zul in fiddle :
to me it looks like the swipeleft event doesn't exist could be somerthing from jquery-mobile but that doesn't get included by ZK, I tried adding it manually and it gave me a JS error, so not sure whether this should be working
cor3000 ( 2021-03-23 10:41:42 +0800 )editthere are certainly ways doing this in JS.
The main idea is to capture the touchstart event.
Then continue with touchmove, if the user moves horizontally:
swipeleft/-right event on touchend. If the user starts moving vertically:
Now there's this complexity with browsers giving warnings about passive events and preventing scrolling. You'll have to deal with.
I'd say it's all possible, just not a nice area to work in, and browsers really get angry when you interfere with their "smooooooth" scrolling, so observe the browser JS console for warnings/errors, which often contain useful extra information.
Here the MDN on touch events: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
Thanks cor3000,
I have fixed it.
Ended up using some jquery plugin called touchSwipe :
You can see working version in :
Took some time but seems (so far to do what I need)
Cor3000,
A much neater and nicer version. I will do as per your version.
I don't get the console error message you get but that is on Firefox 86.0.1 on desktop and using the mouse to simulate a swipe (touchSwipe allows that).
Not got around to using remote debugging for a real Android mobile yet.
I would suggest that ZK should think about adding onSwipeLeft, onSwipeRight etc to the basic onSwipe currently available in ZK. Users could then only handle the events they require and the browser handles the rest.
However with your help we have a workable solution.
I think this thread and the Fiddles will be helpful to many people. I would have thought in this day and age of mobile usage many developers would like to handle swipe left/right (say to change an image or swipe to delete) but don't want to stop the default scroll up/down behavior.
Thanks again,
Bob.
p.s. changed everything as per this thread and the invalidate thread (swipe, onBind after invalidate) and everything works nicely!
Asked: 2021-03-21 03:09:01 +0800
Seen: 15 times
Last updated: Mar 24 '21
providing a runnable/working/failing java example will widen the target audience being able to help. E.g. on https://zkfiddle.org
cor3000 ( 2021-03-22 10:33:20 +0800 )editFYI and anyone else interested there seems to be a fix for touchSwipe and the "attempt to cancel ..." message logged.
See https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/pull/362/files
But the fix does not seem to be committed to the master yet.
Bobzk ( 2021-03-24 21:43:09 +0800 )edit