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

git-svn-id: https://develop.svn.wordpress.org/trunk@22262 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/js/common.js

@@ -195,49 +195,67 @@ $(document).ready( function() {
 		}
 	});
 
-	$('li.wp-has-submenu', menu).hoverIntent({
+	if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
-		over: function(e){
+		// close any open submenus when touch/click is not on the menu
-			var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 );
+		$(document.body).on('click.wp-mobile-hover', function(e) {
+			if ( !$(e.target).closest('#adminmenu').length )
+				menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
+		});
 
-			if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
+		menu.find('li.wp-has-submenu').on('click.wp-mobile-hover', function(e) {
-				return;
+			var el = $(this);
 
-			menutop = $(this).offset().top;
+			if ( !el.hasClass('opensub') ) {
-			wintop = $(window).scrollTop();
+				e.preventDefault();
-			maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
+				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 );
 
-			b = menutop + m.height() + 1; // Bottom offset of the menu
+				if ( isNaN(top) || top > -5 ) // meaning the submenu is visible
-			h = $('#wpwrap').height(); // Height of the entire page
+					return;
-			o = 60 + b - h;
-			f = $(window).height() + wintop - 15; // The fold
 
-			if ( f < (b - o) )
+				menutop = $(this).offset().top;
-				o = b - f;
+				wintop = $(window).scrollTop();
+				maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
 
-			if ( o > maxtop )
+				b = menutop + m.height() + 1; // Bottom offset of the menu
-				o = maxtop;
+				h = $('#wpwrap').height(); // Height of the entire page
+				o = 60 + b - h;
+				f = $(window).height() + wintop - 15; // The fold
 
-			if ( o > 1 )
+				if ( f < (b - o) )
-				m.css('margin-top', '-'+o+'px');
+					o = b - f;
-			else
-				m.css('margin-top', '');
 
-			menu.find('li.menu-top').removeClass('opensub');
+				if ( o > maxtop )
-			$(this).addClass('opensub');
+					o = maxtop;
-		},
-		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){
+				if ( o > 1 )
-		$(e.target).closest('li.menu-top').addClass('opensub');
+					m.css('margin-top', '-'+o+'px');
-	}).on('blur.adminmenu', '.wp-submenu a', function(e){
+				else
-		$(e.target).closest('li.menu-top').removeClass('opensub');
+					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.
 	$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');

wp-includes/js/admin-bar.js

@@ -4,23 +4,45 @@ if ( typeof(jQuery) != 'undefined' ) {
 		(function(a){a.fn.hoverIntent=function(l,j){var m={sensitivity:7,interval:100,timeout:0};m=a.extend(m,j?{over:l,out:j}:l);var o,n,h,d;var e=function(f){o=f.pageX;n=f.pageY};var c=function(g,f){f.hoverIntent_t=clearTimeout(f.hoverIntent_t);if((Math.abs(h-o)+Math.abs(d-n))<m.sensitivity){a(f).unbind("mousemove",e);f.hoverIntent_s=1;return m.over.apply(f,[g])}else{h=o;d=n;f.hoverIntent_t=setTimeout(function(){c(g,f)},m.interval)}};var i=function(g,f){f.hoverIntent_t=clearTimeout(f.hoverIntent_t);f.hoverIntent_s=0;return m.out.apply(f,[g])};var b=function(q){var f=this;var g=(q.type=="mouseover"?q.fromElement:q.toElement)||q.relatedTarget;while(g&&g!=this){try{g=g.parentNode}catch(q){g=this}}if(g==this){if(a.browser.mozilla){if(q.type=="mouseout"){f.mtout=setTimeout(function(){k(q,f)},30)}else{if(f.mtout){f.mtout=clearTimeout(f.mtout)}}}return}else{if(f.mtout){f.mtout=clearTimeout(f.mtout)}k(q,f)}};var k=function(p,f){var g=jQuery.extend({},p);if(f.hoverIntent_t){f.hoverIntent_t=clearTimeout(f.hoverIntent_t)}if(p.type=="mouseover"){h=g.pageX;d=g.pageY;a(f).bind("mousemove",e);if(f.hoverIntent_s!=1){f.hoverIntent_t=setTimeout(function(){c(g,f)},m.interval)}}else{a(f).unbind("mousemove",e);if(f.hoverIntent_s==1){f.hoverIntent_t=setTimeout(function(){i(g,f)},m.timeout)}}};return this.mouseover(b).mouseout(b)}})(jQuery);
 
 	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 )
 				node.attr('tabindex', '0').attr('tabindex', tab);
 		};
 
-		$('#wpadminbar').removeClass('nojq').removeClass('nojs').find('li.menupop').hoverIntent({
+		adminbar.removeClass('nojq').removeClass('nojs');
-			over: function(e){
+		
-				$(this).addClass('hover');
+		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
-			out: function(e){
+			$(document.body).on('click.wp-mobile-hover', function(e) {
-				$(this).removeClass('hover');
+				if ( !$(e.target).closest('#wpadminbar').length )
-			},
+					adminbar.find('li.menupop.hover').removeClass('hover');
-			timeout: 180,
+			});
-			sensitivity: 7,
+
-			interval: 100
+			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){
 			e.preventDefault();
@@ -84,9 +106,9 @@ if ( typeof(jQuery) != 'undefined' ) {
 } else {
 	(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);});
 		},
 
@@ -98,9 +120,10 @@ if ( typeof(jQuery) != 'undefined' ) {
 		 */
 		getTOID = function(el) {
 			var i = q.length;
-			while( i-- )
+			while ( i-- ) {
 				if ( q[i] && el == q[i][1] )
 					return q[i][0];
+			}
 			return false;
 		},
 
@@ -110,7 +133,7 @@ if ( typeof(jQuery) != 'undefined' ) {
 				ancestorLength = 0;
 
 			while ( t && t != aB && t != d ) {
-				if( 'LI' == t.nodeName.toUpperCase() ) {
+				if ( 'LI' == t.nodeName.toUpperCase() ) {
 					ancestors[ ancestors.length ] = t;
 					id = getTOID(t);
 					if ( id )
@@ -151,7 +174,7 @@ if ( typeof(jQuery) != 'undefined' ) {
 
 		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() {
 							t.className = t.className ? t.className.replace(hc, '') : '';