0

handle swipeleft and swiperight ignoring swipeUp and swipeDown

asked 2021-03-21 03:09:01 +0800

Bobzk gravatar image Bobzk
442 1 7

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 :

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?

delete flag offensive retag edit

Comments

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 )edit

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:43:09 +0800 )edit

8 Answers

Sort by ยป oldest newest most voted
0

answered 2021-03-24 11:22:37 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

updated 2021-03-24 11:26:12 +0800

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:

  • I moved the script-element into a processing instruction <?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 available
  • w:onBind is a zk client side listener that fires after the dom element was created (or re-created) so you can add the div dynamically (on demand) and it will still initialize the swipe code reliably, not just once during initial page loading
  • I use the zk widget object (wgt) and the fire function just for a shorter syntax

https://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.

image description

link publish delete flag offensive edit

Comments

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 )edit
0

answered 2021-03-22 10:42:35 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

The 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?

link publish delete flag offensive edit
0

answered 2021-03-22 19:20:02 +0800

Bobzk gravatar image Bobzk
442 1 7

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.

link publish delete flag offensive edit

Comments

yes at java side you ideally handle the event's after the fact, otherwise the usability won't be nice due to network latency. So JS is the direction to go.

cor3000 ( 2021-03-23 10:34:27 +0800 )edit

yes the example was clear, still only very few ppl will be able to run it ... most zk users use java as the server side language. If an example is not runnable instantly many people won't have the time to try to make it runnable in their spare time.

cor3000 ( 2021-03-23 10:43:43 +0800 )edit
0

answered 2021-03-23 01:38:34 +0800

Bobzk gravatar image Bobzk
442 1 7

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?

link publish delete flag offensive edit
0

answered 2021-03-23 01:58:17 +0800

Bobzk gravatar image Bobzk
442 1 7

Removed superfluous code/zul in fiddle :

Test Swipe Fiddle

link publish delete flag offensive edit

Comments

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 )edit
0

answered 2021-03-23 10:55:47 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

there 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:

  • stop further scrolling vertical scrolling and
  • track the horizontal movement in order
  • to send the swipeleft/-right event on touchend.

If the user starts moving vertically:

  • don't track events and
  • keep scrolling in the default way

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

link publish delete flag offensive edit
0

answered 2021-03-23 21:09:35 +0800

Bobzk gravatar image Bobzk
442 1 7

Thanks cor3000,

I have fixed it.

Ended up using some jquery plugin called touchSwipe :

TouchSwipe

You can see working version in :

Fiddle

Took some time but seems (so far to do what I need)

link publish delete flag offensive edit
0

answered 2021-03-24 19:31:17 +0800

Bobzk gravatar image Bobzk
442 1 7

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!

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-03-21 03:09:01 +0800

Seen: 15 times

Last updated: Mar 24

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More