kennethdavidbuck · October 6, 2013 19:10 · ahmed1490 · Feb 12, 2015
diff --git a/menu-speech-bubble-link-view.js b/menu-speech-bubble-link-view.js
 /**
 * Extend Embers LinkView such that it can be animated
 * @type {*}
 */
 App.MenuSpeechBubbleLinkView = Em.LinkView.extend(JQ.Transition,{
    //
    cssProperties: ['backgroundColor','color'],
    //
    durationIn:100,
    //
    durationOut:300,
    //
    activeClass: 'foo',
    //
    mouseEnterColor: function(){
        "use strict";
        return this.$().parent().find('a.mouse-enter').css('background-color');
    }.property(),
    //
    mouseLeaveColor:function(){
        "use strict";
        return this.$().parent().find('a.mouse-leave').css('background-color');
    }.property(),
    //
    activeColor:function(){
        "use strict";
        return this.$().parent().find('a.active').css('background-color');
    }.property(),
    //
    activeTextColor:function(){
        "use strict";
        return this.$().parent().find('a.mouse-enter').css('color');
    }.property(),
    //
    inactiveTextColor:function(){
        "use strict";
        return this.$().parent().find('a.mouse-leave').css('color');
    }.property(),
    // Observers
    _isActiveObserver:function() {
        "use strict";
        Em.run.next(this,function(){
            if (this.get('active')) {
                this.setBackgroundColor(
                    this.get('activeColor'),
                    this.get('activeTextColor'),
                    this.get('durationIn')
                );
            }
            else
            {
                this.setBackgroundColor(
                    this.get('mouseLeaveColor'),
                    this.get('inactiveTextColor'),
                    this.get('durationOut')
                );
            }
        });
    }.observes('active').on('didInsertElement'),
    // Event Handlers
    mouseEnter: function() {
        "use strict";
        if(!this.get('active')) {
            this.setBackgroundColor(
                this.get('mouseEnterColor'),
                this.get('activeTextColor'),
                this.get('durationIn')
            );
        }
    },
    //
    mouseLeave: function() {
        "use strict";
        if(!this.get('active')) {
            this.setBackgroundColor(
                this.get('mouseLeaveColor'),
                this.get('inactiveTextColor'),
                this.get('durationOut')
            );
        }
    },
    // Custom Getter/Setters
    setBackgroundColor: function(backgroundColor,textColor,duration) {
        "use strict";
        this.setProperties({
            'duration': parseInt(duration,10),
            'color':textColor,
            'backgroundColor': backgroundColor
        });
    }
 });