Changeset 22262

Timestamp:

10/19/2012 06:31:21 PM (12 years ago)

Author:

azaozz

Message:

Make the admin menu and toolbar work well on mobile devices, props georgestephanis, see #20614

Location:

trunk

Files:

• wp-admin/js/common.js (modified) (1 diff)
• wp-includes/js/admin-bar.js (modified) (6 diffs)

trunk/wp-admin/js/common.js

@@ -196 +196 @@
     });
 
-    $('li.wp-has-submenu', menu).hoverIntent({
-        over: function(e){
-            var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
-
-            if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
-                return;
-
-            menutop = $(this).offset().top;
-            wintop = $(window).scrollTop();
-            maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
-
-            b = menutop + m.height() + 1; // Bottom offset of the menu
-            h = $('#wpwrap').height(); // Height of the entire page
-            o = 60 + b - h;
-            f = $(window).height() + wintop - 15; // The fold
-
-            if ( f < (b - o) )
-                o = b - f;
-
-            if ( o > maxtop )
-                o = maxtop;
-
-            if ( o > 1 )
-                m.css('margin-top', '-'+o+'px');
-            else
-                m.css('margin-top', '');
-
-            menu.find('li.menu-top').removeClass('opensub');
-            $(this).addClass('opensub');
-        },
-        out: function(){
-            $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
-        },
-        timeout: 200,
-        sensitivity: 7,
-        interval: 90
-    });
-
-    menu.on('focus.adminmenu', '.wp-submenu a', function(e){
-        $(e.target).closest('li.menu-top').addClass('opensub');
-    }).on('blur.adminmenu', '.wp-submenu a', function(e){
-        $(e.target).closest('li.menu-top').removeClass('opensub');
-    });
+    if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
+        // close any open submenus when touch/click is not on the menu
+        $(document.body).on('click.wp-mobile-hover', function(e) {
+            if ( !$(e.target).closest('#adminmenu').length )
+                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
+        });
+
+        menu.find('li.wp-has-submenu').on('click.wp-mobile-hover', function(e) {
+            var el = $(this);
+
+            if ( !el.hasClass('opensub') ) {
+                e.preventDefault();
+                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
+                el.addClass('opensub');
+            }
+        });
+    } else {
+        menu.find('li.wp-has-submenu').hoverIntent({
+            over: function(e){
+                var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
+
+                if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
+                    return;
+
+                menutop = $(this).offset().top;
+                wintop = $(window).scrollTop();
+                maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
+
+                b = menutop + m.height() + 1; // Bottom offset of the menu
+                h = $('#wpwrap').height(); // Height of the entire page
+                o = 60 + b - h;
+                f = $(window).height() + wintop - 15; // The fold
+
+                if ( f < (b - o) )
+                    o = b - f;
+
+                if ( o > maxtop )
+                    o = maxtop;
+
+                if ( o > 1 )
+                    m.css('margin-top', '-'+o+'px');
+                else
+                    m.css('margin-top', '');
+
+                menu.find('li.menu-top').removeClass('opensub');
+                $(this).addClass('opensub');
+            },
+            out: function(){
+                $(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
+            },
+            timeout: 200,
+            sensitivity: 7,
+            interval: 90
+        });
+        
+        menu.on('focus.adminmenu', '.wp-submenu a', function(e){
+            $(e.target).closest('li.menu-top').addClass('opensub');
+        }).on('blur.adminmenu', '.wp-submenu a', function(e){
+            $(e.target).closest('li.menu-top').removeClass('opensub');
+        });
+    }
 
     // Move .updated and .error alert boxes. Don't move boxes designed to be inline.

trunk/wp-includes/js/admin-bar.js

@@ -5 +5 @@
 
     jQuery(document).ready(function($){
-        var refresh = function(i, el){ // force the browser to refresh the tabbing index
+        var adminbar = $('#wpadminbar'), refresh;
+
+        refresh = function(i, el){ // force the browser to refresh the tabbing index
             var node = $(el), tab = node.attr('tabindex');
             if ( tab )
@@ -11 +13 @@
         };
 
-        $('#wpadminbar').removeClass('nojq').removeClass('nojs').find('li.menupop').hoverIntent({
-            over: function(e){
-                $(this).addClass('hover');
-            },
-            out: function(e){
-                $(this).removeClass('hover');
-            },
-            timeout: 180,
-            sensitivity: 7,
-            interval: 100
-        });
+        adminbar.removeClass('nojq').removeClass('nojs');
+        
+        if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
+            // close any open drop-downs when the click/touch is not on the toolbar
+            $(document.body).on('click.wp-mobile-hover', function(e) {
+                if ( !$(e.target).closest('#wpadminbar').length )
+                    adminbar.find('li.menupop.hover').removeClass('hover');
+            });
+
+            adminbar.find('li.menupop').on('click.wp-mobile-hover', function(e) {
+                var el = $(this);
+
+                if ( !el.hasClass('hover') ) {
+                    e.preventDefault();
+                    adminbar.find('li.menupop.hover').removeClass('hover');
+                    el.addClass('hover');
+                }
+            });
+        } else {
+            adminbar.find('li.menupop').hoverIntent({
+                over: function(e){
+                    $(this).addClass('hover');
+                },
+                out: function(e){
+                    $(this).removeClass('hover');
+                },
+                timeout: 180,
+                sensitivity: 7,
+                interval: 100
+            });
+        }
 
         $('#wp-admin-bar-get-shortlink').click(function(e){
@@ -85 +107 @@
     (function(d, w) {
         var addEvent = function( obj, type, fn ) {
-            if (obj.addEventListener)
+            if ( obj.addEventListener )
                 obj.addEventListener(type, fn, false);
-            else if (obj.attachEvent)
+            else if ( obj.attachEvent )
                 obj.attachEvent('on' + type, function() { return fn.call(obj, window.event);});
         },
@@ -99 +121 @@
         getTOID = function(el) {
             var i = q.length;
-            while( i-- )
+            while ( i-- ) {
                 if ( q[i] && el == q[i][1] )
                     return q[i][0];
+            }
             return false;
         },
@@ -111 +134 @@
 
             while ( t && t != aB && t != d ) {
-                if( 'LI' == t.nodeName.toUpperCase() ) {
+                if ( 'LI' == t.nodeName.toUpperCase() ) {
                     ancestors[ ancestors.length ] = t;
                     id = getTOID(t);
@@ -152 +175 @@
         removeHoverClass = function(t) {
             while ( t && t != aB && t != d ) {
-                if( 'LI' == t.nodeName.toUpperCase() ) {
+                if ( 'LI' == t.nodeName.toUpperCase() ) {
                     (function(t) {
                         var to = setTimeout(function() {