Question

I’m working on some effects and things to get a handle on Classes/Implements/Extends. The examples here are for the base classes (MooSlidesFx, MooSlidesFx.Elements) from which to create many effects with a project I’m working on, and two child class (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade) that actually do something.

http://paste.mootools.net/m6afc7746

The first Class, MooSlidesFx, sets things up for others, designed to just be Implemented.

The second class, MooSlidesFx.Elements, extends MooSlidesFx to likewise be implemented, but rather than just animate the element passed in, it will animate it’s children in order (not looking for a lesson Chain right now, but it’s next on my list!), and so some of the methods are redefined.

The third class, MooSlidesFx.Fade works great. It implements MooSlidesFx, defines two little methods, and we’re off to the races.

Then the problem. It seems like I can just implement both MooSlidesFx.Elements and MooSlidesFx.Fade and POW!! I’ve got a new effect that doesn’t fade in the element, but rather fade in it’s children staggered.

Not so, thanks for any help!

Here comes a mother-load of code:

var MooSlidesFx = new Class({

    Implements: Options,

        options: {
            delay: 0,
            duration: 500,
            how: 'in',
            transition: 'sine:in:out'
        },

    initialize: function(el,options){
        this.setOptions(options);
        this.el=$(el);
        this.animation = this.setAnimation(el);
    },

    animate: function(){

        this.animation.set($clear);
        var calculations = this.calculate(this.el);
        this.animation.set(calculations[0]);

        var delayed = function(){ 
            this.animation.start(calculations[1]) 
        }.bind(this).delay(this.options.delay);

    },

    getDuration: function(){
        return this.options.delay+this.options.duration
    }

});

MooSlidesFx.Elements = new Class({

    Extends: MooSlidesFx,

        options: {
            selector: false,
            elementDelay: 200,
            order: 'normal'
        },

    animations: [],

    initialize: function(el,options){
        console.log('Elements initialize');
        this.parent(options);

        this.elements=this.el.getElements(this.options.selector);

        this.elements.each(function(el,index){
            this.animations.include(this.setAnimation(el,index));
        }.bind(this));

    },

    animate: function(){

        var eachDelay = this.options.elementDelay;
        var calculations=[];

        this.animations.each(function(animation,index){
            animation.set($clear);
            calculations.include(this.calculate(index));
            animation.set(calculations[0]);
        }.bind(this));

        var delayed = function(){
            this.elements.each(function(el,i){
                var go = function(){
                    console.log('going '+i)
                    this.animations[i].start(calculations[i][1]);
                }.bind(this).delay(d);
                eachDelay = eachDelay + this.options.elementDelay;
            }.bind(this));
        }.bind(this).delay(this.options.delay);

    },

    getDuration: function(){
        return this.options.delay+this.options.duration+((this.elements.length-1)*this.options.elementDelay);
    }

});

MooSlidesFx.Fade = new Class({

    Implements: MooSlidesFx,

    setAnimation: function(el){
        var animation = new Fx.Tween(el,{ 
            property: 'opacity',
            duration: this.options.duration,
            transition: this.options.transition,
        });
        return animation;
    },

    calculate: function(el){
        return (this.options.how=='in') ? [0,1] : [1,0];
    }

});

MooSlidesFx.Elements.Fade = new Class({

    Implements: [MooSlidesFx.Fade,MooSlidesFx.Elements]

    // TypeError: Result of expression 'this.caller._owner.parent' [undefined] is not an object.
    // mootools-core.js (line 1173) 
});


MooSlidesFx.Elements.Fade = new Class({

    Implements: MooSlidesFx.Fade,
    Extends: MooSlidesFx.Elements

    // TypeError: Result of expression 'this.setAnimation' [undefined] is not a function.
    // MooSlides.Fx.js (line 15)
});


MooSlidesFx.Elements.Fade = new Class({

    Implements: [MooSlides.Fx.Fade, MooSlidesFx.Elements]

    // line 49 is never logged, so Elements isn't ever initialized, acts just like MooSlidesFx.Fade
});


/***** usage *****/

var fx = new MooSlidesFx.Elements.Fade('test',{ selector: 'li'}).animate();


/* 

HTML

<ul id="test">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

*/

Answer 1

The problem was when MooSlidesFx.Elements tried to Extend MooSlidesFx. Still don’t know why, but I don’t care now.

I realized I extended MooSlidesFx in MooSlidesFx.Elements and re-wrote every one of the methods. The only reuse I got out of it was this.el and a few options.

So … I separated them into MooSlidesFx.Element, and MooSlidesFx.Elements.

Then I created a library MooSlidesFx.lib and stored the Fade class there (MooSlidesFx.lib.Fade).

Now I can just:

MooSlidesFx.Fade = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Element]
});

MooSlidesFx.Fade.Elements = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Elements]
});

And it’s amazing. I <3 MooTools. Now it’s time to build up the library with more effect classes!