How to chain an array in mootools?

Question

Say you have an array in mootools:

// get the elements and set them as slide
var slideElements = $$('.mySlideElements');
slideElements.set('slide');

// and fire the event -> would slide all elements out at the same time
slideElements.slide('out');

How could I put this into a chain to slide them one at a time?

So far I've only succeeded in chaining if I know the exact number of actions I will be performing. Thanks for your help.

Answer 1

I ended up putting a lot of work into this one, chaining was a lot trickier than I thought at first glance. I've never used it in quite this manner before :D

You can definitely loop through the slideElements array. Chaining the element events to each other is the tricky part. I ended up with a loop closure function that loops through each slideElement and chains the previous item in the list to the current item:

<!-- Working example of chained sliding divs  -->
<div class="mySlideElements" style="background: red" id="slide1">Slide 1</div>
<div class="mySlideElements" style="background: yellow">Slide 2</div>
<div class="mySlideElements" style="background: green">Slide 3</div>
<div class="mySlideElements" style="background: purple">Slide 4</div>
<script type="text/javascript">
    var slideElements = $$('.mySlideElements');
    slideElements.set('slide');

    for(var i = 1; i < slideElements.length; i++) (function(c1,c2){
        c1.get('slide').chain(function(){c2.slide()});
    })(slideElements[i-1],slideElements[i]);

</script>

<input type="button" onclick="$('slide1').slide()" value="slide"/>

Calling get('slide') returns the Fx.Slide object that was set on each element, which you can then chain to a function. My Mootools-fu wasn't strong enough to figure out how to chain it directly to the slide property of the next element (which should be a function, but it didn't seem to work), so I ended up with the anonymous function you see inside the chain() call, which is almost as good. The loop closure function(c1,c2) was necessary to prevent the local i loop variable from being out of scope by the time the chained anonymous function got called.

It's set up as a chain reaction for when the first element's slide function gets triggered. If you needed the whole thing to cascade whenever any element is clicked, you'd probably want to set every element's onClick event to fire the first element's slide() and not their own.

Anyway, the code above is a working example. I hope the results are what you were looking for.

Answer 2

in my opinion, this is a better / "mootoolsy" way of doing it. the FX instance provides two possible things that can be used: link: "chain" and onComplete: function. so something like this:

var slideEls = function(els) {
    if (!els.length)
        return;

    var lastEl = els.getLast();    
    lastEl.set("slide", {
        duration: "long",
        link: "chain",
        onComplete: function() {
            els.erase(lastEl);
            slideEls(els);
        }
    }).slide("out");
};

slideEls($$('div.mySlideElements'));

working example here: http://mootools.net/shell/GmUpM/

this will work with an infinite array length of elements to slide out

Answer 3

Try this:

$$('.mySlideElements')
    .set('slide', {
        onComplete: function (el) 
        {
            if (el = el.getParent().getNext ('.mySlideElements'))
                el.slide ('out');
        }
    })
    [0].slide ('out');

It just requires that .mySlideElements be immediate siblings