Admin menu:

- Fix pinning after resizing the window.
- Merge the two DOM ready callbacks in common.js
- Fix the submenus position adjustment on focus.
See #29806

git-svn-id: https://develop.svn.wordpress.org/trunk@29898 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2014-10-15 06:04:15 +00:00
parent 2b93139fc9
commit 801ce09508

View File

@ -173,14 +173,35 @@ $('.contextual-help-tabs').delegate('a', 'click', function(e) {
$(document).ready( function() { $(document).ready( function() {
var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions, var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
lastClicked = false, lastClicked = false,
menu = $('#adminmenu'),
pageInput = $('input.current-page'), pageInput = $('input.current-page'),
currentPage = pageInput.val(), currentPage = pageInput.val(),
isIOS = /iPhone|iPad|iPod/.test( navigator.userAgent ), isIOS = /iPhone|iPad|iPod/.test( navigator.userAgent ),
isAndroid = navigator.userAgent.indexOf( 'Android' ) !== -1; isAndroid = navigator.userAgent.indexOf( 'Android' ) !== -1,
$document = $( document ),
$window = $( window ),
$body = $( document.body ),
$adminMenuWrap = $( '#adminmenuwrap' ),
$wpwrap = $( '#wpwrap' ),
$adminmenu = $( '#adminmenu' ),
$overlay = $( '#wp-responsive-overlay' ),
$toolbar = $( '#wp-toolbar' ),
$toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
$sortables = $('.meta-box-sortables'),
wpResponsiveActive = false,
$adminbar = $( '#wpadminbar' ),
lastScrollPosition = 0,
pinnedMenuTop = false,
pinnedMenuBottom = false,
menuTop = 0,
height = {
window: $window.height(),
adminbar: $adminbar.height(),
menu: $adminMenuWrap.height()
};
// when the menu is folded, make the fly-out submenu header clickable // when the menu is folded, make the fly-out submenu header clickable
menu.on('click.wp-submenu-head', '.wp-submenu-head', function(e){ $adminmenu.on('click.wp-submenu-head', '.wp-submenu-head', function(e){
$(e.target).parent().siblings('a').get(0).click(); $(e.target).parent().siblings('a').get(0).click();
}); });
@ -224,108 +245,90 @@ $(document).ready( function() {
$( document ).trigger( 'wp-collapse-menu', { state: state } ); $( document ).trigger( 'wp-collapse-menu', { state: state } );
}); });
function adjustSubmenu( $menuItem ) {
var bottomOffset, pageHeight, adjustment, theFold, menutop, wintop, maxtop,
$submenu = $menuItem.find( '.wp-submenu' );
menutop = $menuItem.offset().top;
wintop = $window.scrollTop();
maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
bottomOffset = menutop + $submenu.height() + 1; // Bottom offset of the menu
pageHeight = $wpwrap.height(); // Height of the entire page
adjustment = 60 + bottomOffset - pageHeight;
theFold = $window.height() + wintop - 50; // The fold
if ( theFold < ( bottomOffset - adjustment ) ) {
adjustment = bottomOffset - theFold;
}
if ( adjustment > maxtop ) {
adjustment = maxtop;
}
if ( adjustment > 1 ) {
$submenu.css( 'margin-top', '-' + adjustment + 'px' );
} else {
$submenu.css( 'margin-top', '' );
}
}
if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
// iOS Safari works with touchstart, the rest work with click // iOS Safari works with touchstart, the rest work with click
mobileEvent = isIOS ? 'touchstart' : 'click'; mobileEvent = isIOS ? 'touchstart' : 'click';
// close any open submenus when touch/click is not on the menu // close any open submenus when touch/click is not on the menu
$(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) { $(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data('wp-responsive') ) {
return; return;
} }
if ( ! $( e.target ).closest( '#adminmenu' ).length ) { if ( ! $( e.target ).closest( '#adminmenu' ).length ) {
menu.find('li.wp-has-submenu.opensub').removeClass('opensub'); $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
} }
}); });
menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) { $adminmenu.find( 'a.wp-has-submenu' ).on( mobileEvent + '.wp-mobile-hover', function( event ) {
var b, h, o, f, menutop, wintop, maxtop, var $menuItem = $(this).parent();
el = $(this),
parent = el.parent(),
m = parent.find('.wp-submenu');
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data( 'wp-responsive' ) ) {
return; return;
} }
// Show the sub instead of following the link if: // Show the sub instead of following the link if:
// - the submenu is not open // - the submenu is not open
// - the submenu is not shown inline or the menu is not folded // - the submenu is not shown inline or the menu is not folded
if ( !parent.hasClass('opensub') && ( !parent.hasClass('wp-menu-open') || parent.width() < 40 ) ) { if ( ! $menuItem.hasClass( 'opensub' ) && ( ! $menuItem.hasClass( 'wp-menu-open' ) || $menuItem.width() < 40 ) ) {
e.preventDefault(); event.preventDefault();
adjustSubmenu( $menuItem );
menutop = parent.offset().top; $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
wintop = $(window).scrollTop(); $menuItem.addClass('opensub');
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 - 50; // 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.opensub').removeClass('opensub');
parent.addClass('opensub');
} }
}); });
} }
if ( ! isIOS && ! isAndroid ) { if ( ! isIOS && ! isAndroid ) {
menu.find('li.wp-has-submenu').hoverIntent({ $adminmenu.find( 'li.wp-has-submenu' ).hoverIntent({
over: function() { over: function() {
var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop, top = parseInt( m.css('top'), 10 ); var $menuItem = $( this ),
$submenu = $menuItem.find( '.wp-submenu' ),
top = parseInt( $submenu.css( 'top' ), 10 );
if ( isNaN(top) || top > -5 ) { // meaning the submenu is visible if ( isNaN( top ) || top > -5 ) { // the submenu is visible
return; return;
} }
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data( 'wp-responsive' ) ) {
// The menu is in responsive mode, bail // The menu is in responsive mode, bail
return; return;
} }
menutop = $(this).offset().top; adjustSubmenu( $menuItem );
wintop = $(window).scrollTop(); $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar $menuItem.addClass( 'opensub' );
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(){ out: function(){
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data( 'wp-responsive' ) ) {
// The menu is in responsive mode, bail // The menu is in responsive mode, bail
return; return;
} }
@ -337,20 +340,21 @@ $(document).ready( function() {
interval: 90 interval: 90
}); });
menu.on('focus.adminmenu', '.wp-submenu a', function(e){ $adminmenu.on( 'focus.adminmenu', '.wp-submenu a', function( event ) {
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data( 'wp-responsive' ) ) {
// The menu is in responsive mode, bail // The menu is in responsive mode, bail
return; return;
} }
$(e.target).closest('li.menu-top').addClass('opensub'); $( event.target ).closest( 'li.menu-top' ).addClass( 'opensub' );
}).on('blur.adminmenu', '.wp-submenu a', function(e){ }).on( 'blur.adminmenu', '.wp-submenu a', function( event ) {
if ( menu.data('wp-responsive') ) { if ( $adminmenu.data( 'wp-responsive' ) ) {
// The menu is in responsive mode, bail
return; return;
} }
$(e.target).closest('li.menu-top').removeClass('opensub'); $( event.target ).closest( 'li.menu-top' ).removeClass( 'opensub' );
}).find( 'li.wp-has-submenu' ).on( 'focusin.adminmenu', function() {
adjustSubmenu( $( this ) );
}); });
} }
@ -527,60 +531,20 @@ $(document).ready( function() {
toggleUploadButton(); toggleUploadButton();
input.on('change', toggleUploadButton); input.on('change', toggleUploadButton);
})(); })();
});
// Fire a custom jQuery event at the end of window resize
( function() {
var timeout;
function triggerEvent() {
$(document).trigger( 'wp-window-resized' );
}
function fireOnce() {
window.clearTimeout( timeout );
timeout = window.setTimeout( triggerEvent, 200 );
}
$(window).on( 'resize.wp-fire-once', fireOnce );
}());
$(document).ready( function() {
var $document = $( document ),
$window = $( window ),
$body = $( document.body ),
$adminMenuWrap = $( '#adminmenuwrap' ),
$wpwrap = $( '#wpwrap' ),
$adminmenu = $( '#adminmenu' ),
$overlay = $( '#wp-responsive-overlay' ),
$toolbar = $( '#wp-toolbar' ),
$toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
$sortables = $('.meta-box-sortables'),
wpResponsiveActive = false,
$adminbar = $( '#wpadminbar' ),
lastScrollPosition = 0,
fixedMenuTop = false,
fixedMenuBottom = false,
menuTop = 0,
height = {
window: $window.height(),
adminbar: $adminbar.height(),
menu: $adminMenuWrap.height()
};
function pinMenu() { function pinMenu() {
var windowPos = $window.scrollTop(); var windowPos = $window.scrollTop();
if ( $adminmenu.data('wp-responsive') ) { if ( isIOS || $adminmenu.data('wp-responsive') ) {
return; return;
} }
if ( height.menu + height.adminbar > height.window ) { if ( height.menu + height.adminbar > height.window ) {
if ( windowPos > lastScrollPosition ) { if ( windowPos > lastScrollPosition ) {
// Scrolling down // Scrolling down
if ( fixedMenuTop ) { if ( pinnedMenuTop ) {
// let it scroll // let it scroll
fixedMenuTop = false; pinnedMenuTop = false;
menuTop = $adminMenuWrap.offset().top - height.adminbar; menuTop = $adminMenuWrap.offset().top - height.adminbar;
$adminMenuWrap.css({ $adminMenuWrap.css({
@ -588,9 +552,9 @@ $(document).ready( function() {
top: menuTop, top: menuTop,
bottom: '' bottom: ''
}); });
} else if ( ! fixedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) { } else if ( ! pinnedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) {
// pin the bottom // pin the bottom
fixedMenuBottom = true; pinnedMenuBottom = true;
$adminMenuWrap.css({ $adminMenuWrap.css({
position: 'fixed', position: 'fixed',
@ -600,9 +564,9 @@ $(document).ready( function() {
} }
} else if ( windowPos < lastScrollPosition ) { } else if ( windowPos < lastScrollPosition ) {
// Scrolling up // Scrolling up
if ( fixedMenuBottom ) { if ( pinnedMenuBottom ) {
// let it scroll // let it scroll
fixedMenuBottom = false; pinnedMenuBottom = false;
menuTop = $adminMenuWrap.offset().top - height.adminbar; menuTop = $adminMenuWrap.offset().top - height.adminbar;
$adminMenuWrap.css({ $adminMenuWrap.css({
@ -610,9 +574,9 @@ $(document).ready( function() {
top: menuTop, top: menuTop,
bottom: '' bottom: ''
}); });
} else if ( ! fixedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) { } else if ( ! pinnedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
// pin the top // pin the top
fixedMenuTop = true; pinnedMenuTop = true;
$adminMenuWrap.css({ $adminMenuWrap.css({
position: 'fixed', position: 'fixed',
@ -620,30 +584,53 @@ $(document).ready( function() {
bottom: '' bottom: ''
}); });
} }
} else {
// Resizing
pinnedMenuTop = pinnedMenuBottom = false;
menuTop = $adminMenuWrap.offset().top - height.adminbar;
$adminMenuWrap.css({
position: 'absolute',
top: menuTop,
bottom: ''
});
} }
} }
lastScrollPosition = windowPos; lastScrollPosition = windowPos;
} }
function setPinMenu() { function unpinMenu() {
if ( $adminmenu.data('wp-responsive') ) { if ( isIOS ) {
$body.removeClass( 'sticky-menu' ); return;
}
pinnedMenuTop = pinnedMenuBottom = false;
$adminMenuWrap.css({ $adminMenuWrap.css({
position: '', position: '',
top: '', top: '',
bottom: '' bottom: ''
}); });
} else if ( height.menu + height.adminbar > height.window ) { }
function setPinMenu() {
if ( $adminmenu.data('wp-responsive') ) {
$body.removeClass( 'sticky-menu' ); $body.removeClass( 'sticky-menu' );
unpinMenu();
} else if ( height.menu + height.adminbar > height.window ) {
pinMenu(); pinMenu();
$body.removeClass( 'sticky-menu' );
} else { } else {
$body.addClass( 'sticky-menu' ); $body.addClass( 'sticky-menu' );
unpinMenu();
} }
} }
setPinMenu(); setPinMenu();
if ( ! isIOS ) {
$window.on( 'scroll.pin-menu', pinMenu ); $window.on( 'scroll.pin-menu', pinMenu );
}
$document.on( 'wp-window-resized.pin-menu', function() { $document.on( 'wp-window-resized.pin-menu', function() {
height.window = $window.height(); height.window = $window.height();
@ -790,6 +777,22 @@ $(document).ready( function() {
window.wpResponsive.init(); window.wpResponsive.init();
}); });
// Fire a custom jQuery event at the end of window resize
( function() {
var timeout;
function triggerEvent() {
$(document).trigger( 'wp-window-resized' );
}
function fireOnce() {
window.clearTimeout( timeout );
timeout = window.setTimeout( triggerEvent, 200 );
}
$(window).on( 'resize.wp-fire-once', fireOnce );
}());
// Make Windows 8 devices play along nicely. // Make Windows 8 devices play along nicely.
(function(){ (function(){
if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) { if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {