Ticket #47069: admin-bar-hoverintent.diff

src/js/_enqueues/lib/admin-bar.js

@@ -282 +282 @@
                 }
         });
 } else {
+
+// No Jquery hoverIntent v2.2.0 - https://github.com/tristen/hoverintent
+var myHoverIntent = function(el, onOver, onOut) {
+        var x, y, pX, pY;
+        var mouseOver = false;
+        var focused = false;
+        var h = {},
+                state = 0,
+                timer = 0;
+
+        var options = {
+                sensitivity: 7,
+                interval: 100,
+                timeout: 0,
+                handleFocus: false
+        };
+
+        function delay(el, e) {
+                if (timer) timer = clearTimeout(timer);
+                state = 0;
+                return focused ? undefined : onOut.call(el, e);
+        }
+
+        function tracker(e) {
+                x = e.clientX;
+                y = e.clientY;
+        }
+
+        function compare(el, e) {
+                if (timer) timer = clearTimeout(timer);
+                if ((Math.abs(pX - x) + Math.abs(pY - y)) < options.sensitivity) {
+                        state = 1;
+                        return focused ? undefined : onOver.call(el, e);
+                } else {
+                        pX = x;
+                        pY = y;
+                        timer = setTimeout(function() {
+                                compare(el, e);
+                        }, options.interval);
+                }
+        }
+
+        // Public methods
+        h.options = function(opt) {
+                var focusOptionChanged = opt.handleFocus !== options.handleFocus;
+                options = Object.assign({}, options, opt);
+                if (focusOptionChanged) {
+                        options.handleFocus ? addFocus() : removeFocus();
+                }
+                return h;
+        };
+
+        function dispatchOver(e) {
+                mouseOver = true;
+                if (timer) timer = clearTimeout(timer);
+                el.removeEventListener('mousemove', tracker, false);
+
+                if (state !== 1) {
+                        pX = e.clientX;
+                        pY = e.clientY;
+
+                        el.addEventListener('mousemove', tracker, false);
+
+                        timer = setTimeout(function() {
+                                compare(el, e);
+                        }, options.interval);
+                }
+
+                return this;
+        }
+
+        function dispatchOut(e) {
+                mouseOver = false;
+                if (timer) timer = clearTimeout(timer);
+                el.removeEventListener('mousemove', tracker, false);
+
+                if (state === 1) {
+                        timer = setTimeout(function() {
+                                delay(el, e);
+                        }, options.timeout);
+                }
+
+                return this;
+        }
+
+        function dispatchFocus(e) {
+                if (!mouseOver) {
+                        focused = true;
+                        onOver.call(el, e);
+                }
+        }
+
+        function dispatchBlur(e) {
+                if (!mouseOver && focused) {
+                        focused = false;
+                        onOut.call(el, e);
+                }
+        }
+
+        function addFocus() {
+                el.addEventListener('focus', dispatchFocus, false);
+                el.addEventListener('blur', dispatchBlur, false);
+        }
+
+        function removeFocus() {
+                el.removeEventListener('focus', dispatchFocus, false);
+                el.removeEventListener('blur', dispatchBlur, false);
+        }
+
+        h.remove = function() {
+                if (!el) return;
+                el.removeEventListener('mouseover', dispatchOver, false);
+                el.removeEventListener('mouseout', dispatchOut, false);
+                removeFocus();
+        };
+
+        if (el) {
+                el.addEventListener('mouseover', dispatchOver, false);
+                el.addEventListener('mouseout', dispatchOut, false);
+        }
+
+        return h;
+};
+
         /**
          * Wrapper function for the adminbar that's used if jQuery isn't available.
          *
@@ -312 +436 @@
                         }
                 },
 
-                aB, hc = new RegExp('\\bhover\\b', 'g'), q = [],
+                aB, adminBarMenus,
+                hc = new RegExp('\\bhover\\b', 'g'), q = [],
                 rselected = new RegExp('\\bselected\\b', 'g'),
 
                 /**
@@ -403 +528 @@
                                         (function(t) {
                                                 var to = setTimeout(function() {
                                                         t.className = t.className ? t.className.replace(hc, '') : '';
-                                                }, 500);
+                                                }, 180);
                                                 q[q.length] = [to, t];
                                         })(t);
                                 }
@@ -502 +627 @@
                 };
 
                 addEvent(w, 'load', function() {
+                        var i;
                         aB = d.getElementById('wpadminbar');
+                        adminBarMenus = aB.querySelectorAll( 'li.menupop' );
 
                         if ( d.body && aB ) {
                                 d.body.appendChild( aB );
@@ -510 +637 @@
                                 if ( aB.className )
                                         aB.className = aB.className.replace(/nojs/, '');
 
-                                addEvent(aB, 'mouseover', function(e) {
-                                        addHoverClass( e.target || e.srcElement );
-                                });
+                                for ( i = 0; i < adminBarMenus.length; i++ ) {
+                                        myHoverIntent( adminBarMenus[ i ],
+                                                function( e ) {
+                                                        addHoverClass( e.target || e.srcElement );
+                                                }, function( e ) {
+                                                        removeHoverClass( e.target || e.srcElement );
+                                        } ).options( {
+                                                timeout: 0,
+                                                sensitivity: 7,
+                                                interval: 100
+                                        } );
+                                }
 
-                                addEvent(aB, 'mouseout', function(e) {
-                                        removeHoverClass( e.target || e.srcElement );
-                                });
-
                                 addEvent(aB, 'click', clickShortlink );
 
                                 addEvent(aB, 'click', function(e) {