Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A set of additional cross-platform arrangers for enyo.Panels. Supports hardware-accellerated 3D CSS transitions and falls back to 2D where required.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
source
README.md
package.js

README.md

More Arrangers

More Arrangers is a set of additional cross-platform arrangers for enyo.Panels.

Features:

  • Autodetects the host browser's CSS prefix.
  • Supports hardware-accellerated 3D CSS transitions and falls back to 2D where required.

So what are they?

The available arrangers are as follows:

  • SladeArranger - A combination slide/fade transition.
  • PushPopArranger - A scale/fade transition, akin to moving between scenes in the Mojo framework.
  • HFlipArranger - Rotates the current panel 180 degrees, revealing the target panel in it's backface.
  • BoxTurnArranger - Rotate between panels as if they were the sides of a cube.
  • PageTurnArranger - Turn between panels like the pages of a book.
  • PageSpinArranger - Like PageTurn, but the back page turns as well as the front one.

Example

Using More Arrangers is easy, just create a Panels kind and choose an arranger from the above list:

            {kind: "Panels",
            classes: "panels enyo-unselectable",
            style: "margin:5%; overflow:visible;",
            arrangerKind: "HFlipArranger",
            components: [
                {name: "left", style: "background: beige;", components: [
                    {content: "Left"}
                ]},
                {name: "middle", style: "background: tomato;", components: [
                    {content: "Middle"}
                ]},
                {name: "body", style: "background: lightblue;", components: [
                    {content: "Body"}
                ]},
            ]}

To-Do

High-Resolution Variants with multiple panels viewable at once. Toggleable.

  • Slade: Don't fade between visible, moving panels.
  • PushPop: No, just no.
  • HFlip: Erm..?
  • BoxTurn: Conveyor belt.
  • PageTurn: Book display, two panels instead of one. Variable widths.
  • PageSpin: Rolodex? Might be difficult to make it look good.

Modify PageTurn to flip 180 degrees, doesn't look quite right atm.

Known Issues

  • PageTurn has Z-Sorting issues, causing it to flicker near the start/end of transitions.
  • PushPop will sometimes flicker near the end of transitions. Only seems to effect going left/back from the last item.
Something went wrong with that request. Please try again.