Explo Implementiert / Erweitert in MooTools

Question

ich auf einige Effekte und Dinge bin auf Klassen einen Griff zu bekommen / Implementiert / Erweitert. Die Beispiele sind für die Basisklassen (MooSlidesFx, MooSlidesFx.Elements), von denen viele Effekte mit einem Projekt erstellen arbeite ich an, und zwei Kinderklasse (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade), die tatsächlich etwas tun.

http://paste.mootools.net/m6afc7746

Die erste Klasse, MooSlidesFx setzt Dinge für andere nach oben, entworfen, um einfach implementiert werden.

Die zweite Klasse, MooSlidesFx.Elements erstreckt sich MooSlidesFx ebenfalls umgesetzt werden, sondern als nur das Element in vergangen animieren, wird es animieren Kinder um ist (nicht für eine Lektion Kette suchen gerade jetzt, aber es ist nächste auf meiner Liste!), und so sind einige der Methoden neu definiert.

Die dritte Klasse, arbeitet MooSlidesFx.Fade groß. Es implementiert MooSlidesFx, definiert zwei kleine Methoden, und wir sind aus dem Rennen.

Dann wird das Problem. Es scheint wie ich beide nur MooSlidesFx.Elements und MooSlidesFx.Fade und POW umsetzen kann !! Ich habe einen neuen Effekt bekam, die nicht in dem Element nicht verblassen, sondern verblassen in sie Kinder versetzt.

Nicht so, vielen Dank für jede Hilfe!

Hier kommt eine Mutter-Last von 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

Das Problem war, als MooSlidesFx.Elements versucht MooSlidesFx zu verlängern. Sie wissen immer noch nicht, warum, aber ich weiß nicht jetzt kümmern.

ich merkte, ich MooSlidesFx in MooSlidesFx.Elements erweitert und neu schrieb jeder von den Methoden. Die einzige Wiederverwendung ich davon bekam, war this.el und ein paar Optionen.

So ... Ich trennte sie in MooSlidesFx.Element und MooSlidesFx.Elements.

Dann habe ich eine Bibliothek MooSlidesFx.lib und die Fade-Klasse dort (MooSlidesFx.lib.Fade) gespeichert.

Jetzt kann ich einfach:

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

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

Und es ist erstaunlich. I <3 MooTools. Jetzt ist es Zeit, um die Bibliothek mit mehr Effekt Klassen aufzubauen!