enyo.Panels & CarouselArranger prevent Tap when dragging.

edited February 2014 in Enyo 2.4
Hey all,

I'm trying to create a carousel with Panels and CarouselArranger. Each panel in the carousel contains an enyo.Anchor to link to a different page on tap.

The interaction I'm looking for is as follows:
- If the user drags the carousel (either with the mouse or by touch) all tap events on enyo.Anchor should be ignored.
- If the user taps the active carousel item, the enyo.Anchor should be used to navigate to another route (or a new url).
- If the user taps on a non-active carousel item, the tapped item should be moved into 'active' position. All tap events on enyo.Anchor should be ignored.

In my attempts at working towards this end-goal, I created a basic carousel and an attempt at interrupting the enyo.Anchor's ontap/onclick behaviour. Ignoring the fact that this snippet doesn't actually fetch any data into any collection, this is basically what I've got going on:
    enyo.kind({
        name: "vod.views.HighlightsCarousel",
        collection: someCollection,
        components: [{
            name: "repeater",
            kind: "DataRepeater",
            containerOptions: {
                kind: "Panels",
                arrangerKind: "CarouselArranger",
                wrap: true,
                margin: 0,
                classes: "enyo-fit"
            },
            components: [{
                name: "panel",
                components: [{
                    name: "anchor",
                    kind: "enyo.Anchor",
                    ontap: "onPanelTapped"
                }]
                bindings: [{
                    from: ".model.link",
                    to: ".$.anchor.href"
                }]
            }]
        }],
        bindings: [{
            from: ".collection",
            to: ".$.repeater.collection"
        }],
        onPanelTapped: function(inSender, inEvent) {
            inEvent.preventDefault();
        }
    });
So far, I'm having big trouble controlling the tap event on enyo.Anchor. I've determined the following interactions are currently taking place:

- If I click any panel in the carousel, an ontap handler on enyo.Anchor gets called as expected. But if I call "inEvent.preventDefault()" on the ontap event, the browser still navigates to the anchor's url.

- If I slowly drag any panel in the carousel, the ontap handler on enyo.Anchor does not get called. (yay!)

- If I quickly drag any panel in the carousel, the ontap handler on enyo.Anchor does not get called, yet the browser still navigates to the anchor's url. Why is this?

Also, I noticed the "dragfinish" method on the panels kind gets triggered twice when I stop dragging. I'm not sure why or if this is happening or if it has something to do with the problems I'm experiencing.

I realize this is a bit of a complicated question, but maybe someone can shed some light on what I should do to control when my enyo.Anchor is or isn't tappable?

Comments

  • To prevent the enyo.Anchor from navigating to the href URL, I believe you can use the onclick handler instead of ontap. Also, have you tried calling inEvent.preventTap() in the ondragfinish handler? This should prevent a tap event being sent to enyo.Anchor when you're dragging panels in the carousel.
  • Wouldn't using return true; to prevent event propagation be helpful too?
  • edited February 2014
    Edit: Sorry, misunderstood your comment.

    Yes it'll prevent propagation of the tap, but the click event will still be sent in that case, which is what triggers the navigation.
  • edited March 2014
    Thanx for the feedback guys, the onclick handler solved the problem:

    enyo.kind({
    name: "vod.views.HighlightsCarousel",
    collection: someCollection,
    components: [{
    name: "repeater",
    kind: "DataRepeater",
    containerOptions: {
    kind: "Panels",
    arrangerKind: "CarouselArranger",
    wrap: true,
    margin: 0,
    classes: "enyo-fit"
    },
    components: [{
    name: "panel",
    components: [{
    name: "anchor",
    kind: "enyo.Anchor",
    onclock: "onPanelClicked"
    }]
    bindings: [{
    from: ".model.link",
    to: ".$.anchor.href"
    }]
    }]
    }],
    bindings: [{
    from: ".collection",
    to: ".$.repeater.collection"
    }],
    onPanelClicked: function(inSender, inEvent) {
    inEvent.preventDefault();
    }
    });
Sign In or Register to comment.