Transition system + Stack container + ImageGallery component

[aW4KeNiNG]

Initial implementation for Stack container.

It adds a transition system. A transition is a collection of "in" animations and "out" animations.

An example with a video here:

https://www.dropbox.com/s/5y2h5pffyr62hu6/stack-component.mp4?dl=0

The code (it requires the PR #94 and #91):
feature_stack.zip

<?xml version="1.0" encoding="utf-8"?>
<vbox id="main">
    <style source="../css/main.css" />

    <script>

        function onTransitionModeChange() {
            stack.transitionMode = transitionMode.selectedItem.value;
        }

    </script>

    <stack id="stack">

        <image resource="img/1.jpg" styleNames="imageStack"/>
        <image resource="img/2.jpg" styleNames="imageStack"/>
        <image resource="img/3.jpg" styleNames="imageStack"/>
        <image resource="img/4.jpg" styleNames="imageStack"/>
        <image resource="img/5.jpg" styleNames="imageStack"/>
        <image resource="img/6.jpg" styleNames="imageStack"/>
        <image resource="img/7.jpg" styleNames="imageStack"/>
        <image resource="img/8.jpg" styleNames="imageStack"/>

    </stack>

    <hbuttonbar id="bar"
                styleNames="buttonSelector"/>

    <spacer height="20"/>

    <hbox>
        <label text="Transition Mode:"
               styleNames="infoLabel"/>
        <dropdown id="transitionMode"
                  requireSelection="true"
                  onchange="onTransitionModeChange()"
                  styleNames="infoDropdown">
            <data>
                <item value="none"/>
                <item value="horizontal-slide"/>
                <item value="horizontal-slide-from-left"/>
                <item value="horizontal-slide-from-right"/>
                <item value="vertical-slide"/>
                <item value="vertical-slide-from-top"/>
                <item value="vertical-slide-from-bottom"/>
                <item value="fade"/>
            </data>
        </dropdown>
    </hbox>

</vbox>

#main {
    padding: 0.6rem;
}

.buttonSelector {
    horizontal-align: center;
    spacing: 1rem;
}

.buttonSelector .buttonbar-button {
    background-color: #939393;
    border: none;
    border-radius: 1rem;
    margin: 0;
    padding: 0;
    spacing: 0;
    height: 1rem;
    width: 1rem;
}

.buttonSelector .buttonbar-button:down {
    background-color: #237eac;
}

.infoLabel {
    text-align: right;
    vertical-align: center;
    width: 150px;
}

.infoDropdown {
    width: 200px;
}

.imageStack {
    scale-mode: fit-outside;
    height: 100%;
    width: 100%;
}

.stack {
    border: 1px solid #CCCCCC;
    padding: 0.6rem;
    height: 400px;
    width: 400px;
}

[aW4KeNiNG]

Added ImageGallery component based in the Stack. You can touch/move to change the current image. It needs a 20% of size to change, but you can configure it with percentToChange.
It works in horizontal and vertical (it depends of transitionMode).

Here the example:

https://www.dropbox.com/s/a5tcv7mbla6baqx/imagegallery.mp4?dl=0

feature_gallery.zip

[ianharrigan]

Hey Pablo - i really like this component - however, i do wonder if it should go in haxeui core? Ive been toying with the idea of an "extended" component lib. Something like "haxeui-ext" (different name suggestions more that welcome!), that would have things like this in it, as well as a property grid (used in the builder), and things like that. Thoughts?

[aW4KeNiNG]

Yes, maybe the ImageGallery component, but Transition system and the Stack component I think that it should go in the core.