Multi-View Hover Monitor

gistfile1.js

describe('Given an array of view instances', function(){

    var views = Ember.A([
        Ember.View.create(),
        Ember.View.create() ]);

    var monitor = HauteLook.MultiViewHoverMonitor.create({ views: views });

    it( 'should start with isHovering==false', function(){
        expect( monitor.get('isHovering') ).to.equal( false );
    });

    it( 'should change isHovering when a view is hovered', function( done ){
        var aView = views.objectAt( 0 );
        Ember.run(function(){
            aView.trigger('mouseEnter');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        Ember.run(function(){
            aView.trigger('mouseLeave');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        Ember.run.later(function(){
            expect( monitor.get('isHovering') ).to.equal( false );
            done();
        }, monitor.get('toleranceInMilliseconds'));
    });

    it( 'should debounce hover messages between views', function(done){
        var aView = views.objectAt( 0 );
        Ember.run(function(){
            aView.trigger('mouseEnter');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        Ember.run(function(){
            aView.trigger('mouseLeave');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        var anotherView = views.objectAt( 1 );
        Ember.run(function(){
            anotherView.trigger('mouseEnter');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        Ember.run(function(){
            anotherView.trigger('mouseLeave');
        });
        expect( monitor.get('isHovering') ).to.equal( true );
        Ember.run.later(function(){
            expect( monitor.get('isHovering') ).to.equal( false );
            done();
        }, monitor.get('toleranceInMilliseconds'));
    });

});

HauteLook.MultiViewHoverMonitor.js

HauteLook.MultiViewHoverMonitor = Ember.Object.extend({

    toleranceInMilliseconds : 500,

    init : function(){
        this._super();
        this.set( 'isHovering', false );
        this.onViewsChanged();
    },

    onViewsChanging : function(){
        var views = this.get( 'views' );
        if( views ){
            views.forEach(function( view ){
                view.off( 'mouseEnter', this, 'mouseEnteredAnyView' );
                view.off( 'mouseLeave', this, 'mouseLeftAnyView' );
            }.bind( this ));
        }
    }.observesBefore( 'views' ),

    onViewsChanged : function(){
        var views = this.get( 'views' );
        if( views ){
            views.forEach(function( view ){
                view.on( 'mouseEnter', this, 'mouseEnteredAnyView' );
                view.on( 'mouseLeave', this, 'mouseLeftAnyView' );
            }.bind( this ));
        }
    }.observes( 'views' ),

    mouseEnteredAnyView : function(){
        var isHovering = this.get( 'isHovering' );
        if( ! isHovering ){
            this.set( 'isHovering', true );
        }

        if( this._timer ){
            Ember.run.cancel( this._timer );
            this._timer = null;
        }
    },

    mouseLeftAnyView : function(){
        var t = this.get( 'toleranceInMilliseconds' );
        Ember.run.later( this, 'onTimerExpired', t );
    },

    onTimerExpired : function(){
        this._timer = null;
        this.set( 'isHovering', false );
    }

});