Explorer Met en œuvre / augment dans MooTools

Question

Je travaille sur des effets et des choses pour obtenir une poignée sur les classes / Met en œuvre / augment. Les exemples donnés sont pour les classes de base (MooSlidesFx, MooSlidesFx.Elements) à partir duquel créer de nombreux effets avec un projet sur lequel je travaille, et deux classes d'enfants (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade) qui font en fait quelque chose.

http://paste.mootools.net/m6afc7746

La première classe, MooSlidesFx, met les choses pour les autres, conçues pour être tout mis en œuvre.

La deuxième classe, MooSlidesFx.Elements, étend MooSlidesFx à même mis en œuvre, mais plutôt que d'animer tout l'élément transmis, il va animer des enfants dans l'ordre (pas à la recherche d'une leçon chaîne en ce moment, mais il est à côté de mon Liste!), et donc quelques-unes des méthodes sont redéfinis.

La troisième classe, MooSlidesFx.Fade fonctionne très bien. Elle met en œuvre MooSlidesFx, définit deux méthodes peu, et nous sommes hors de la course.

Alors le problème. Il semble comme je peux mettre en œuvre les deux MooSlidesFx.Elements et MooSlidesFx.Fade et prisonniers de guerre !! J'ai un nouvel effet qui ne se fane pas dans l'élément, mais plutôt fondu chez les enfants de il chancela.

Non, merci pour toute aide!

Voici une mère charge de 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

Le problème était quand MooSlidesFx.Elements essayé d'étendre MooSlidesFx. Je ne sais toujours pas pourquoi, mais je ne me soucie pas maintenant.

Je réalisé que je tendis MooSlidesFx dans MooSlidesFx.Elements et re-écrit chacune des méthodes. La réutilisation que je suis sorti de c'était this.el et quelques options.

Alors ... Je les ai séparé en MooSlidesFx.Element et MooSlidesFx.Elements.

Je créé une bibliothèque MooSlidesFx.lib et stockée la classe Fade il (MooSlidesFx.lib.Fade).

Maintenant, je peux simplement:

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

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

Et il est incroyable. I <3 MooTools. Maintenant, il est temps de construire la bibliothèque plusieurs classes d'effet!