Menu
Sites
Language
[Wearable] Is it possible to add swipe event listener to Section Changer

Hello,

I try to add vertical swipe event listener for horisontal section changer, but after adding swipe listener navigation between sections doesn`t works.

 

List

Responses

9 Replies
colin Rao

Not enough information for issue analyze. Could you more detail, or share the related code here? :)

devapp

Please see my comment below

Stephan König

Vertical swipe in a horizontal section changer should work fine.

Can you please post a snippet of your code how you create section changer, add swipe listener and what you do in the swipe listener callback ?

devapp

Please see my comment below

devapp

Hello,

I using following code:

index.html

<div class="ui-page ui-page-active" id="main">
        <header class="ui-header">
            <h2 class="ui-title">Wearable UI</h2>
        </header>
            <div id="sectionchanger" class="ui-content content-padding">
            <div>
                <section class="ui-section-active" id="imageSection">
                page1
                </section>
                <section id="videoSection">
                page2
                </section>
            </div>
        </div>
    </div>

app.js

 

document.getElementById("main").addEventListener("pageshow", function() {
    sectionChanger = new tau.SectionChanger(document.getElementById("sectionchanger"),
            {
                circular: false,
                orientation: "horizontal",
                useBouncingEffect: true,
                scrollbar: "bar"
        });
    var element = document.getElementById("imageSection");
    tau.event.enableGesture(element, new tau.event.gesture.Swipe(
    {
       orientation: "vertical"
    }));

    element.addEventListener("swipe", function(e)
    {
       console.log("swipe  = " + e.detail.direction);
    });
    });

 

After this, when i try switches between sections, i receive following error in console:

 

lib/tau/wearable/js/tau.min.js (7) :TypeError: 'undefined' is not an object (evaluating 'a[e]=b[e]')

But vertical swipe event is triggered normaly.

Stephan König

Try to add swipe listener to the section like:

document.getElementById('videoSection').addEventListener("swipe", onSwipeGesture);




 function onSwipeGesture(ev) {
     var direction = ev.detail.direction;
     
     if (direction === tau.event.gesture.Direction.UP) {
         /* do something */
     } else if (direction === tau.event.gesture.Direction.DOWN){
         /* do something else*/
     }
 }

This way it should work without interfrencing the section changer.

AVSukhov

Hello,

The Tizen Advanced UI (TAU) provides gesture events that triggered only on  gesture-enabled element.

Accordingly, we need call enableGesture() method for section element. But after this section changer navigation doesn`t works.

Without enableGesture() "swipe" event isn`t triggered.

 

On which device you have checked your code?

Stephan König

Yes, you're right. My  code snipped was not complete at all.
So I uploaded a demo thats working on Gear S: http://www.share-online.biz/dl/IF1DS9KNDF6

Another thing is we had to "fix" a bug in the tau.js. There is a merge function and in line 1430 we had to add  "|| {}" after args.shift(), otherwise the section changer didn't work. Don't know why Samsung didn't see this bug yet...

daniel kim

Hi,

When I ran your code, I could see same phenomenon. Switching to second page didn't work.