Complex.Transitional

A view manager for MooTools that enables a "complex" yet beautiful and enjoyable user experience.

by Xunnamius

HTML

<script src="https://raw.github.com/Xunnamius/Complex.Transitional/master/Source/Complex.Transitional.js"></script>
<div id="outer_container1">
    <div id="inner_container1">
        <div style="background-color: blue" id="state_splash1" class="view-state">
            <h1>Splash</h1>
        </div>
    </div>
    <div id="state_container1">
        <div style="background-color: purple" id="state_one1" class="view-state">
            <h1>State One</h1>
        </div>
        <div style="background-color: orange" id="state_two1" class="view-state">
            <h1>State Two</h1>
        </div>
        <div style="background-color: yellow" id="state_three1" class="view-state">
            <h1>State Three</h1>
        </div>
    </div>
</div> <!-- /outer_container1 -->

<div id="outer_container2">
    <div id="inner_container2">
        <div style="background-color: gold" id="state_splash2" class="view-state">
            <h1>Splash</h1>
        </div>
    </div>
    <div id="state_container2">
        <div style="background-color: red" id="state_one2" class="view-state">
            <h1>State One</h1>
        </div>
        <div style="background-color: green" id="state_two2" class="view-state">
            <h1>State Two</h1>
        </div>
        <div style="background-color: blue" id="state_three2" class="view-state">
            <h1>State Three</h1>
        </div>
    </div>
</div> <!-- /outer_container2 -->
<div id="controls"><button id="shift1" type="button">Shift View 1</button><button id="shift2" type="button">Shift View 2</button></div>

CSS

#outer_container1, #outer_container2, #inner_container1, #inner_container2, .view-state {
    width: 400px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

#inner_container1, #inner_container2 {
    top: 0;
    left: 0;
}

.view-state { float: left; }
#state_container1, #state_container2 { display: none; }

#outer_container1, #outer_container2 { clear: both; margin-bottom: 75px; text-align: center; border: solid black 5px; }

JavaScript

// The meat and potatoes

var vm1 = new Fx.Transitional({
    innerContainer: $('inner_container1'),
    stateContainer: $('state_container1')
});

var vm2 = new Fx.Transitional({
    innerContainer: $('inner_container2'),
    stateContainer: $('state_container2'),
    tweenSettings: { duration: 5000 }
});

// ~End delicious things

// Start button code
$('shift1').addEvent('click', function()
{
    // Extra code in here accounts for you fast clickers you ;)
    if(this.retrieve('count') < 2)
    {
        this.store('count', (this.retrieve('count')||0)+1);
        
        vm1.chain(function()
        {
            this.store('count', this.retrieve('count')-1);
        }.bind(this)).shift($('state_container1').getChildren()[0]);
    }
});

$('shift2').addEvent('click', function()
{
    // Extra code in here accounts for you fast clickers you ;)
    if(this.retrieve('count') < 2)
    {
        this.store('count', (this.retrieve('count')||0)+1);
        
        vm2.chain(function()
        {
            this.store('count', this.retrieve('count')-1);
        }.bind(this)).shift($('state_container2').getChildren()[0]);
    }
});