استكشاف تنفذ / تمتد في Mootools

Question

أنا أعمل على بعض الآثار والأشياء للحصول على مقبض على الفصول / الأدوات / تمتد. الأمثلة هنا هي بالنسبة للفصول الأساسية (MooslidesFX، Mooslidesfx.elements) التي يمكنك من خلالها إنشاء العديد من التأثيرات مع مشروع أعمل عليه، واثنين من فئة طفل (Mooslidesfx.fade، MooslideseFecks.elements.fade) الذي تفعل شيئا فعليا.

http://paste.mootools.net/m6afc7746.

الطبقة الأولى، Mooslidesfx، تحدد الأمور للآخرين، مصممة ليتم تنفيذها للتو.

الطبقة الثانية، mooslidesfx.elements، تمدد mooslidesfx بالمثل، ولكن بدلا من تحريك فقط العنصر الذي تم تمريره، وسوف يقوم بتحريك أطفاله من أجل (لا تبحث عن سلسلة درس الآن، ولكنه التالي في قائمتي!) ، وبالتالي يتم إعادة تعريف بعض الأساليب.

الطبقة الثالثة، mooslidesfx.fade يعمل بشكل رائع. إنه ينفذ MooslidesFX، يحدد طريقتين صغيرتين، ونحن خارج السباقات.

ثم المشكلة. هو - هي يبدو مثل يمكنني فقط تنفيذ كل من mooslidesfx.elements و mooslidesfx.fade و power !! لدي تأثير جديد لا يتلاشى في العنصر، بل يتلاشى في أطفاله متداخلا.

ليس كذلك، شكرا لأي مساعدة!

هنا يأتي حمولة الأم من التعليمات البرمجية:

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

كانت المشكلة عندما حاول mooslidesfx.elements توسيع mooslidesfx. ما زلت لا أعرف لماذا، لكنني لا أهتم الآن.

أدركت أنني مددت mooslidesfx في mooslidesfx.elements وإعادة صياغة كل واحدة من الأساليب. إعادة الاستخدام الوحيد الذي خرجت منه كان هذا. ويل وعدد قليل من الخيارات.

لذلك ... انفصلت بهم إلى Mooslidesfx.element، و mooslidesfx.elements.

ثم قمت بإنشاء مكتبة Mooslidesfx.lib وتخزين فئة Fade هناك (Mooslidesfx.lib.fade).

الآن يمكنني فقط:

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

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

وهو مذهل. أنا <3 mootools. الآن حان الوقت لبناء المكتبة بأكثر من فئات التأثير!