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 Built from https://develop.svn.wordpress.org/trunk@29898 git-svn-id: http://core.svn.wordpress.org/trunk@29653 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
ca92ca385e
commit
f19ad10571
|
|
@ -173,14 +173,35 @@ $('.contextual-help-tabs').delegate('a', 'click', function(e) {
|
|||
$(document).ready( function() {
|
||||
var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
|
||||
lastClicked = false,
|
||||
menu = $('#adminmenu'),
|
||||
pageInput = $('input.current-page'),
|
||||
currentPage = pageInput.val(),
|
||||
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
|
||||
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();
|
||||
});
|
||||
|
||||
|
|
@ -224,133 +245,116 @@ $(document).ready( function() {
|
|||
$( 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
|
||||
// iOS Safari works with touchstart, the rest work with click
|
||||
mobileEvent = isIOS ? 'touchstart' : 'click';
|
||||
|
||||
// close any open submenus when touch/click is not on the menu
|
||||
$(document.body).on( mobileEvent+'.wp-mobile-hover', function(e) {
|
||||
if ( menu.data('wp-responsive') ) {
|
||||
if ( $adminmenu.data('wp-responsive') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! $(e.target).closest('#adminmenu').length ) {
|
||||
menu.find('li.wp-has-submenu.opensub').removeClass('opensub');
|
||||
if ( ! $( e.target ).closest( '#adminmenu' ).length ) {
|
||||
$adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
|
||||
}
|
||||
});
|
||||
|
||||
menu.find('a.wp-has-submenu').on( mobileEvent+'.wp-mobile-hover', function(e) {
|
||||
var b, h, o, f, menutop, wintop, maxtop,
|
||||
el = $(this),
|
||||
parent = el.parent(),
|
||||
m = parent.find('.wp-submenu');
|
||||
$adminmenu.find( 'a.wp-has-submenu' ).on( mobileEvent + '.wp-mobile-hover', function( event ) {
|
||||
var $menuItem = $(this).parent();
|
||||
|
||||
if ( menu.data('wp-responsive') ) {
|
||||
if ( $adminmenu.data( 'wp-responsive' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
menutop = parent.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 - 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 ( ! $menuItem.hasClass( 'opensub' ) && ( ! $menuItem.hasClass( 'wp-menu-open' ) || $menuItem.width() < 40 ) ) {
|
||||
event.preventDefault();
|
||||
adjustSubmenu( $menuItem );
|
||||
$adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
|
||||
$menuItem.addClass('opensub');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ( ! isIOS && ! isAndroid ) {
|
||||
menu.find('li.wp-has-submenu').hoverIntent({
|
||||
$adminmenu.find( 'li.wp-has-submenu' ).hoverIntent({
|
||||
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;
|
||||
}
|
||||
|
||||
if ( menu.data('wp-responsive') ) {
|
||||
if ( $adminmenu.data( 'wp-responsive' ) ) {
|
||||
// The menu is in responsive mode, bail
|
||||
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');
|
||||
adjustSubmenu( $menuItem );
|
||||
$adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
|
||||
$menuItem.addClass( 'opensub' );
|
||||
},
|
||||
out: function(){
|
||||
if ( menu.data('wp-responsive') ) {
|
||||
if ( $adminmenu.data( 'wp-responsive' ) ) {
|
||||
// The menu is in responsive mode, bail
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).removeClass('opensub').find('.wp-submenu').css('margin-top', '');
|
||||
$( 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 ( menu.data('wp-responsive') ) {
|
||||
$adminmenu.on( 'focus.adminmenu', '.wp-submenu a', function( event ) {
|
||||
if ( $adminmenu.data( 'wp-responsive' ) ) {
|
||||
// The menu is in responsive mode, bail
|
||||
return;
|
||||
}
|
||||
|
||||
$(e.target).closest('li.menu-top').addClass('opensub');
|
||||
}).on('blur.adminmenu', '.wp-submenu a', function(e){
|
||||
if ( menu.data('wp-responsive') ) {
|
||||
// The menu is in responsive mode, bail
|
||||
$( event.target ).closest( 'li.menu-top' ).addClass( 'opensub' );
|
||||
}).on( 'blur.adminmenu', '.wp-submenu a', function( event ) {
|
||||
if ( $adminmenu.data( 'wp-responsive' ) ) {
|
||||
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();
|
||||
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() {
|
||||
var windowPos = $window.scrollTop();
|
||||
|
||||
if ( $adminmenu.data('wp-responsive') ) {
|
||||
if ( isIOS || $adminmenu.data('wp-responsive') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( height.menu + height.adminbar > height.window ) {
|
||||
if ( windowPos > lastScrollPosition ) {
|
||||
// Scrolling down
|
||||
if ( fixedMenuTop ) {
|
||||
if ( pinnedMenuTop ) {
|
||||
// let it scroll
|
||||
fixedMenuTop = false;
|
||||
pinnedMenuTop = false;
|
||||
menuTop = $adminMenuWrap.offset().top - height.adminbar;
|
||||
|
||||
$adminMenuWrap.css({
|
||||
|
|
@ -588,9 +552,9 @@ $(document).ready( function() {
|
|||
top: menuTop,
|
||||
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
|
||||
fixedMenuBottom = true;
|
||||
pinnedMenuBottom = true;
|
||||
|
||||
$adminMenuWrap.css({
|
||||
position: 'fixed',
|
||||
|
|
@ -600,9 +564,9 @@ $(document).ready( function() {
|
|||
}
|
||||
} else if ( windowPos < lastScrollPosition ) {
|
||||
// Scrolling up
|
||||
if ( fixedMenuBottom ) {
|
||||
if ( pinnedMenuBottom ) {
|
||||
// let it scroll
|
||||
fixedMenuBottom = false;
|
||||
pinnedMenuBottom = false;
|
||||
menuTop = $adminMenuWrap.offset().top - height.adminbar;
|
||||
|
||||
$adminMenuWrap.css({
|
||||
|
|
@ -610,9 +574,9 @@ $(document).ready( function() {
|
|||
top: menuTop,
|
||||
bottom: ''
|
||||
});
|
||||
} else if ( ! fixedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
|
||||
} else if ( ! pinnedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
|
||||
// pin the top
|
||||
fixedMenuTop = true;
|
||||
pinnedMenuTop = true;
|
||||
|
||||
$adminMenuWrap.css({
|
||||
position: 'fixed',
|
||||
|
|
@ -620,30 +584,53 @@ $(document).ready( function() {
|
|||
bottom: ''
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Resizing
|
||||
pinnedMenuTop = pinnedMenuBottom = false;
|
||||
menuTop = $adminMenuWrap.offset().top - height.adminbar;
|
||||
|
||||
$adminMenuWrap.css({
|
||||
position: 'absolute',
|
||||
top: menuTop,
|
||||
bottom: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
lastScrollPosition = windowPos;
|
||||
}
|
||||
|
||||
function setPinMenu() {
|
||||
if ( $adminmenu.data('wp-responsive') ) {
|
||||
$body.removeClass( 'sticky-menu' );
|
||||
function unpinMenu() {
|
||||
if ( isIOS ) {
|
||||
return;
|
||||
}
|
||||
|
||||
pinnedMenuTop = pinnedMenuBottom = false;
|
||||
$adminMenuWrap.css({
|
||||
position: '',
|
||||
top: '',
|
||||
bottom: ''
|
||||
});
|
||||
} else if ( height.menu + height.adminbar > height.window ) {
|
||||
}
|
||||
|
||||
function setPinMenu() {
|
||||
if ( $adminmenu.data('wp-responsive') ) {
|
||||
$body.removeClass( 'sticky-menu' );
|
||||
unpinMenu();
|
||||
} else if ( height.menu + height.adminbar > height.window ) {
|
||||
pinMenu();
|
||||
$body.removeClass( 'sticky-menu' );
|
||||
} else {
|
||||
$body.addClass( 'sticky-menu' );
|
||||
unpinMenu();
|
||||
}
|
||||
}
|
||||
|
||||
setPinMenu();
|
||||
|
||||
if ( ! isIOS ) {
|
||||
$window.on( 'scroll.pin-menu', pinMenu );
|
||||
}
|
||||
|
||||
$document.on( 'wp-window-resized.pin-menu', function() {
|
||||
height.window = $window.height();
|
||||
|
|
@ -790,6 +777,22 @@ $(document).ready( function() {
|
|||
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.
|
||||
(function(){
|
||||
if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue