Erforschen von Implementierungen/Erweiterungen in MooTools

Question

Ich arbeite an einigen Effekten und Dingen, um Klassen/Implementierungen/Erweiterungen in den Griff zu bekommen. Die Beispiele hier sind für die Basisklassen (MooSlidesFx, MooSlidesFx.Elements), aus denen viele Effekte mit einem Projekt, an dem ich arbeite, und zwei untergeordnete Klasse (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, erweitert MooSlidesFx, um ebenfalls implementiert zu werden, aber anstatt nur das übergebene Element zu animieren, animiert es seine Kinder in der richtigen Reihenfolge (nicht nach einer Lektionskette, sondern nach der nächsten.) Meine Liste!), und so werden einige der Methoden neu definiert.

Die dritte Klasse, MooSlidesFx.Fade funktioniert super. Es implementiert MooSlidesFx, definiert zwei kleine Methoden und wir gehen zu den Rennen.

Dann das Problem. Es scheint wie ich nur beide MooSlidesFx.Elements und MooSlidesFx.Fade und POW implementieren kann !! Ich habe einen neuen Effekt, der das Element nicht verblasst, sondern eher die Kinder ins Schwanken bringt.

Nicht so, danke 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 MooSlidesFx zu erweitern versucht. Ich weiß immer noch nicht warum, aber das ist mir jetzt egal.

Ich erkannte, dass ich MooSlidesFx in MooSlidesFx.Elements erweitert und jede der Methoden neu geschrieben habe. Die einzige Wiederverwendung, die ich herausbekam, war diese .el und ein paar Optionen.

Also ... Ich habe sie in MooSlidesFx.Element und MooSlidesFx.Elements getrennt.

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

Jetzt kann ich nur:

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 an der Zeit, die Bibliothek mit mehr Effektklassen aufzubauen!