Reverse direction for CardSlideInArranger

edited June 2013 in Enyo 2
Hi, everybody!

I have a Panels container with CardSlideInArranger specified and two views. I also have a toolbar with two buttons, each of the two changes the panel to show the according view (one of the views controlled by the Panels component).

Now when I press the second button I want the first view slide out to the left and the second view to slide in from the right, this is how my views behave right now. When I press the first button I want the exact opposite animation, the second view has to slide out to the right and the first view has to slide in from the left.

Right now, both buttons lead to the same animation. How can I control in which direction the views slide?

Comments

  • It might be easier to use LeftRightArranger with {margin: 0} That should give you a full-sized panel that will navigate the way you want.
  • edited June 2013
    Yes, I've tried it (although without margin=0), our customer wants us to use the slide effect, not the card exchange effect like it's provided by the LeftRightArranger.

    I would consider implementing my own version of CardSlideInArranger if I would understand how the code works. I've tried to understand how CardSlideInArranger works but I gave up on understanding what

    this.container.transitionPoints

    array contains (which is set in the

    start()

    method of this kind) and what parts the architecture for animations is composed of.
  • I am confused, I guess. When I load up the Sampler, the CardSlideInArranger seems to do the same transition as LeftRightArranger. If you watch closely, you can see the panel content (large number) being pushed to the left as the new panel comes in.

    You could also try the CarouselArranger with full-size panels, but it's going to look the same as the other 2.
  • LeftRightArranger should do the job for you, I'm not sure which card exchange effect you're talking about.

    Anyways, I did modified CardSlideInArranger yo do what you want, I will post it as soon as I reach home.
  • Here it is:
    /**
    _enyo.CardSlideInOutArranger_ is an enyo.Arranger that displays only one active control. The non-active controls are hidden with _setShowing(false)_. Transitions between arrangements are handled by sliding the new control over the current one. Transitions between arrangements are handled by sliding the new control in from the right and sliding the active control out to the left. For more information, see the documentation on [Arrangers](https://github.com/enyojs/enyo/wiki/Arrangers) in the Enyo Developer Guide. */ enyo.kind({ name: "enyo.CardSlideInOutArranger", kind: "enyo.CardSlideInArranger", //* @protected arrange: function(inC, inName) { var p = inName.split("."); var f = p[0], s= p[1], starting = (p[2] == "s"); var b = this.containerBounds.width; for (var i=0, c$=this.container.getPanels(), c, v; (c=c$[i]); i++) { v = b; if (s == i) { v = starting ? 0 : (f > s ? -b : b); } if (f == i) { v = starting ? (f > s ? b : -b) : 0; } if (s == i && s == f) { v = 0; } this.arrangeControl(c, {left: v}); } } });
  • use this arrangerKind: {name: "CollapsingArranger", arrangerKind: "CollapsingArranger", classes: "panels-sample-collapsible"}

    but without "panels-sample-collapsible" class; then you will get the desired effect:
    {name: "CollapsingArranger", arrangerKind: "CollapsingArranger"}
Sign In or Register to comment.