Changeset 22636

Timestamp:

11/17/2012 08:14:17 PM (12 years ago)

Author:

azaozz

Message:

Make the admin menu and toolbar work well on mobile devices (take 2), props georgestephanis, fixes #20614, fixes #22382

Location:

trunk

Files:

• wp-admin/js/common.js (modified) (2 diffs)
• wp-includes/js/admin-bar.js (modified) (3 diffs)

trunk/wp-admin/js/common.js

@@ -161 +161 @@
 
 $(document).ready( function() {
-    var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
+    var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'), mobileEvent,
         pageInput = $('input.current-page'), currentPage = pageInput.val();
 
@@ -197 +197 @@
 
     if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
+        // iOS Safari works with touchstart, the rest work with click
+        mobileEvent = /Mobile\/.+Safari/.test(navigator.userAgent) ? 'touchstart' : 'click';
+
         // close any open submenus when touch/click is not on the menu
-        $(document.body).on('click.wp-mobile-hover', function(e) {
+        $(document.body).on( mobileEvent+'.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') ) {
+        menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) {
+            var el = $(this), parent = el.parent();
+
+            // Show the sub instead of following the link if:
+            //  - the submenu is not open
+            //  - the submenu is not shown inline or the menu is not folded
+            if ( !parent.hasClass('opensub') && ( !parent.hasClass('wp-menu-open') || parent.width() < 40 ) ) {
                 e.preventDefault();
-                menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
-                el.addClass('opensub');
+                menu.find('li.opensub').removeClass('opensub');
+                parent.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');
-        });
     }
+
+    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 adminbar = $('#wpadminbar'), refresh;
+        var adminbar = $('#wpadminbar'), refresh, touchOpen, touchClose, disableHoverIntent = false;
 
         refresh = function(i, el){ // force the browser to refresh the tabbing index
@@ -13 +13 @@
         };
 
-        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');
-            });
-
+        touchOpen = function(unbind) {
             adminbar.find('li.menupop').on('click.wp-mobile-hover', function(e) {
                 var el = $(this);
@@ -30 +22 @@
                     el.addClass('hover');
                 }
+
+                if ( unbind ) {
+                    $('li.menupop').off('click.wp-mobile-hover');
+                    disableHoverIntent = false;
+                }
             });
-        } else {
-            adminbar.find('li.menupop').hoverIntent({
-                over: function(e){
-                    $(this).addClass('hover');
-                },
-                out: function(e){
-                    $(this).removeClass('hover');
-                },
-                timeout: 180,
-                sensitivity: 7,
-                interval: 100
+        };
+
+        touchClose = function() {
+            var mobileEvent = /Mobile\/.+Safari/.test(navigator.userAgent) ? 'touchstart' : 'click';
+            // close any open drop-downs when the click/touch is not on the toolbar
+            $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
+                if ( !$(e.target).closest('#wpadminbar').length )
+                    adminbar.find('li.menupop.hover').removeClass('hover');
             });
+        };
+
+        adminbar.removeClass('nojq').removeClass('nojs');
+
+        if ( 'ontouchstart' in window ) {
+            adminbar.on('touchstart', function(){
+                touchOpen(true);
+                disableHoverIntent = true;
+            });
+            touchClose();
+        } else if ( /IEMobile\/[1-9]/.test(navigator.userAgent) ) {
+            touchOpen();
+            touchClose();
         }
+
+        adminbar.find('li.menupop').hoverIntent({
+            over: function(e){
+                if ( disableHoverIntent )
+                    return;
+
+                $(this).addClass('hover');
+            },
+            out: function(e){
+                if ( disableHoverIntent )
+                    return;
+
+                $(this).removeClass('hover');
+            },
+            timeout: 180,
+            sensitivity: 7,
+            interval: 100
+        });
 
         $('#wp-admin-bar-get-shortlink').click(function(e){