mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-01 00:27:38 +02:00
Make the admin menu and toolbar work well on mobile devices (take 2), props georgestephanis, fixes #20614, fixes #22382
git-svn-id: http://core.svn.wordpress.org/trunk@22636 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
cc2ddb8421
commit
981419d292
@ -160,7 +160,7 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
|
||||
});
|
||||
|
||||
$(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();
|
||||
|
||||
// when the menu is folded, make the fly-out submenu header clickable
|
||||
@ -196,67 +196,73 @@ $(document).ready( function() {
|
||||
});
|
||||
|
||||
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);
|
||||
menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) {
|
||||
var el = $(this), parent = el.parent();
|
||||
|
||||
if ( !el.hasClass('opensub') ) {
|
||||
// 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.
|
||||
$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
|
||||
$('div.updated, div.error').not('.below-h2, .inline').insertAfter( $('div.wrap h2:first') );
|
||||
|
@ -4,7 +4,7 @@ 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 adminbar = $('#wpadminbar'), refresh;
|
||||
var adminbar = $('#wpadminbar'), refresh, touchOpen, touchClose, disableHoverIntent = false;
|
||||
|
||||
refresh = function(i, el){ // force the browser to refresh the tabbing index
|
||||
var node = $(el), tab = node.attr('tabindex');
|
||||
@ -12,15 +12,7 @@ if ( typeof(jQuery) != 'undefined' ) {
|
||||
node.attr('tabindex', '0').attr('tabindex', tab);
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
@ -29,21 +21,54 @@ if ( typeof(jQuery) != 'undefined' ) {
|
||||
adminbar.find('li.menupop.hover').removeClass('hover');
|
||||
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){
|
||||
e.preventDefault();
|
||||
$(this).addClass('selected').children('.shortlink-input').blur(function(){
|
||||
|
Loading…
Reference in New Issue
Block a user