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:
parent
2b93139fc9
commit
801ce09508
@ -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/) ) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user