Hover intent directive

[marklagendijk]

Hey guys, I just wrote an 'hoverIntent' directive. This is an 'hover' eventhandler which fires after the user has hovered an element for a given amount of time (and doesn't fire if the user stops hovering that element within that time). Since this is an quite common feature, I was wondering if you would be interested in adding this to ui-utils. If you are I can write an pull request for it (including tests).

Code of the directive:

angular.module('MyApp.directives')
    .directive('hoverIntent', ['$timeout', function($timeout){
        return {
            restrict: 'A',
            link: function(scope, element, attributes){
                var hoverIntentPromise;
                element.bind('mouseenter', function(event){
                    var delay = scope.$eval(attributes.hoverIntentDelay);
                    if(delay === undefined){
                        delay = 500;
                    }

                    hoverIntentPromise = $timeout(function(){
                        scope.$eval(attributes.hoverIntent, { $event: event });
                    }, delay);
                });
                element.bind('mouseleave', function(){
                    $timeout.cancel(hoverIntentPromise);
                });
            }
        };
    }]);

Usage example (an menu which opens after an intended hover):

<ul id="mainMenu" ng-class="{ open: mainMenuOpen }" hover-intent="mainMenuOpen = true" ng-mouseleave="mainMenuOpen = false">

[ProLoser]

This might be a viable directive. Feel free to open a PR. I'd like to learn more about how much demand there is for such a directive. I prefer not to code 1-off utilities (if that makes sense). If there way a way to support [whatever]-intent, etc, it would be cool. Or like a deferred evaluation directive.

[thebravedave]

I think this is a great idea. Anything farther on this?

[marklagendijk]

The reason that I didn't commit this yet, was that my tests rely on a newer version of angular-mocks (1.2.x) than which ui-utils currently uses. Now that 1.2 has been officially released (and is at 1.2.2 already) it would make sense to upgrade the AngularJs version of this repo. I will look into this, and see if it can be upgraded easily.

[ProLoser]

@marklagendijk one thing I'm discovering is that the post-linking order has now been reversed. What this means is that increasing a priority of a directive might fix things in some situations (such as assigning the ngModelController.$render property)

[olsonpm]

Just for future readers - the above may be exactly what you're looking for, but if you feel comfortable using jquery plugins with angular then I suggest taking a look at a more comprehensive "hover intent" library:

https://github.com/tristen/hoverintent

[PowerKiKi]

UI.Utils modules was split in individuals repositories. If still valid, please consider re-submitting the issue on its dedicated issue tracker.

See the README for details.

[ghost]

When using this directive, I include the following lines in the appropriate places: element.addClass('hover') element.removeClass('hover')

It allows elements to be easily styled in CSS using the hoverIntent directive: .class:hover { } becomes .class.hover { }