Esplorare Implementa / estende in MooTools

Question

Sto lavorando su alcuni effetti e le cose per ottenere una maniglia su Corsi / Utensili / Estende. Gli esempi qui sono per le classi di base (MooSlidesFx, MooSlidesFx.Elements) da cui creare molti effetti con un progetto su cui sto lavorando, e due classe figlia (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade) che in realtà fare qualcosa.

http://paste.mootools.net/m6afc7746

La prima classe, MooSlidesFx, imposta le cose per gli altri, progettati per essere appena implementato.

La seconda classe, MooSlidesFx.Elements, si estende MooSlidesFx da altrettanto implementato, ma piuttosto che animano l'elemento passato in, si animerà è bambini in ordine (non in cerca di una catena di lezione in questo momento, ma è prossimo sul mio lista!), e così alcuni dei metodi vengono ridefiniti.

La terza classe, MooSlidesFx.Fade grandi opere. Implementa MooSlidesFx, definisce due piccoli metodi, e siamo fuori per le gare.

Allora il problema. E ' sembra come io posso solo implementare entrambe MooSlidesFx.Elements e MooSlidesFx.Fade e POW !! Ho un nuovo effetto che non sbiadisce nell'elemento, ma piuttosto dissolvenza in esso i figli barcollando.

Non è così, grazie per qualsiasi aiuto!

Ecco che arriva una madre-carico di codice:

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

Il problema è stato quando MooSlidesFx.Elements cercato di estendere MooSlidesFx. Ancora non so perché, ma non mi interessa ora.

mi sono reso conto ho esteso MooSlidesFx in MooSlidesFx.Elements e ri-scritto ognuno dei metodi. L'unica riutilizzo ho ottenuto fuori di esso era this.el e alcune opzioni.

Quindi ... li ho separato in MooSlidesFx.Element e MooSlidesFx.Elements.

Poi ho creato una biblioteca MooSlidesFx.lib e conservato la classe Fade lì (MooSlidesFx.lib.Fade).

Ora posso solo:

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

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

Ed è sorprendente. I <3 MooTools. Ora è il momento di costruire biblioteca più classi effetto!