Stack Open

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js"></script>
[<a onclick="openMenu();" href="#">open</a>][<a onclick="closeMenu();" href="#">close</a>][<a onclick="twiddle();" href="#">direction</a> : <span id="direction" >left</span>]
<div class="why_u_no_synchronize">
    <div class="filter_list a"></div>
    <div class="filter_list b"></div>
    <div class="filter_list c"></div>
</div>

CSS

.why_u_no_synchronize{
    width: 500px;
    height: 500px;
}
.filter_list{
    height: 300px;
    display: block;
    position: absolute;
    margin-left:-200px;
    margin-top:20px;
}
.a{
    background-color : red;
    width: 100px;
}

.b{
    background-color : blue;
    width: 120px;
}

.c{
    background-color : yellow;
    width: 140px;
}

JavaScript

var M8R = {};
M8R.horizontalStack = function(from, elements, options){
    //if(from != 'left') throw('unsupported direction:'+from);
    var lastEffect = false;
    var sizes = [];
    var anchor = {};
    var pos = 0;
    elements.each(function(el, index){
        sizes.push(pos);
        el.setStyle('z-index', elements.length-index);
        pos += el.getSize().x;
    });
    var parent = elements[0].getParent();
    parent.setStyle('overflow', 'hidden');
    var opts = options;
    while(elements.length > 0){
        (function(){
            var options = Object.clone(opts);
            var element = elements.pop();
            var size = sizes[elements.length+1];
            var callbackEffect = lastEffect;
            var position;
            if(!options.duration) options.duration = 200;
            if(!options.transition) options.transition = Fx.Transitions.Elastic.bounceIn;
            options.property = 'margin-left';
            switch(from){
                case 'left':
                    position = size;
                    break;
                case 'right':
                    var containerWidth = element.getParent().getSize().x;
                    position = containerWidth - size;
                    break;
            }
            if(options.onComplete){
                var cb = options.onComplete;
                options.onComplete = function(){
                    if(callbackEffect) callbackEffect.start(position);
                    else{
                        if(anchor.callback) anchor.callback();
                        cb();
                    }
                };
            }else{
                options.onComplete = function(){
                    if(callbackEffect) callbackEffect.start(position);
                    else if(anchor.callback) anchor.callback();
                };
            }
            var effect = new Fx.Tween(element, options);
            lastEffect = effect;
        })();
    }
    return {
        animate :...