$(document).ready( function() {
var checks, first, last, checked, sliced, mobileEvent, transitionTimeout, focusedRowActions,
lastClicked = false,
- menu = $('#adminmenu'),
pageInput = $('input.current-page'),
- currentPage = pageInput.val();
+ currentPage = pageInput.val(),
+ isIOS = /iPhone|iPad|iPod/.test( navigator.userAgent ),
+ isAndroid = navigator.userAgent.indexOf( 'Android' ) !== -1,
+ isIE8 = $( document.documentElement ).hasClass( 'ie8' ),
+ $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,
+ menuIsPinned = false,
+ height = {
+ window: $window.height(),
+ wpwrap: $wpwrap.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();
});
$( document ).trigger( 'wp-collapse-menu', { state: state } );
});
+ /**
+ * Ensure an admin submenu is within the visual viewport.
+ *
+ * @since 4.1.0
+ *
+ * @param {jQuery} $menuItem The parent menu item containing the submenu.
+ */
+ 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 = /Mobile\/.+Safari/.test(navigator.userAgent) ? 'touchstart' : '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
+ 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');
+ }
+ });
+ }
- 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 ( ! isIOS && ! isAndroid ) {
+ $adminmenu.find( 'li.wp-has-submenu' ).hoverIntent({
+ over: function() {
+ var $menuItem = $( this ),
+ $submenu = $menuItem.find( '.wp-submenu' ),
+ top = parseInt( $submenu.css( 'top' ), 10 );
- if ( f < (b - o) ) {
- o = b - f;
+ if ( isNaN( top ) || top > -5 ) { // the submenu is visible
+ return;
}
- if ( o > maxtop ) {
- o = maxtop;
+ if ( $adminmenu.data( 'wp-responsive' ) ) {
+ // The menu is in responsive mode, bail
+ return;
}
- if ( o > 1 ) {
- m.css('margin-top', '-'+o+'px');
- } else {
- m.css('margin-top', '');
+ adjustSubmenu( $menuItem );
+ $adminmenu.find( 'li.opensub' ).removeClass( 'opensub' );
+ $menuItem.addClass( 'opensub' );
+ },
+ out: function(){
+ if ( $adminmenu.data( 'wp-responsive' ) ) {
+ // The menu is in responsive mode, bail
+ return;
}
- menu.find('li.opensub').removeClass('opensub');
- parent.addClass('opensub');
- }
+ $( this ).removeClass( 'opensub' ).find( '.wp-submenu' ).css( 'margin-top', '' );
+ },
+ timeout: 200,
+ sensitivity: 7,
+ interval: 90
});
- }
-
- menu.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 );
- if ( isNaN(top) || top > -5 ) { // meaning the submenu is visible
- return;
- }
-
- 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;
}
- 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(){
- 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;
}
- $(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') ) {
- // 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
- return;
- }
-
- $(e.target).closest('li.menu-top').removeClass('opensub');
- });
+ $( event.target ).closest( 'li.menu-top' ).removeClass( 'opensub' );
+ }).find( 'li.wp-has-submenu.wp-not-current-submenu' ).on( 'focusin.adminmenu', function() {
+ adjustSubmenu( $( this ) );
+ });
+ }
// 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');
toggleUploadButton();
input.on('change', toggleUploadButton);
})();
-});
-// Fire a custom jQuery event at the end of window resize
-( function() {
- var timeout;
+ function pinMenu( event ) {
+ var windowPos = $window.scrollTop(),
+ resizing = ! event || event.type !== 'scroll';
- function triggerEvent() {
- $(document).trigger( 'wp-window-resized' );
- }
+ if ( isIOS || isIE8 || $adminmenu.data( 'wp-responsive' ) ) {
+ return;
+ }
- function fireOnce() {
- window.clearTimeout( timeout );
- timeout = window.setTimeout( triggerEvent, 200 );
- }
+ if ( height.menu + height.adminbar < height.window ||
+ height.menu + height.adminbar + 20 > height.wpwrap ) {
+ unpinMenu();
+ return;
+ }
- $(window).on( 'resize.wp-fire-once', fireOnce );
-}());
+ menuIsPinned = true;
-$(document).ready( function() {
- var $document = $( document ),
- $window = $( window ),
- $body = $( document.body ),
- $adminMenuWrap = $( '#adminmenuwrap' ),
- $collapseMenu = $( '#collapse-menu' ),
- $wpwrap = $( '#wpwrap' ),
- $adminmenu = $( '#adminmenu' ),
- $overlay = $( '#wp-responsive-overlay' ),
- $toolbar = $( '#wp-toolbar' ),
- $toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
- $sortables = $('.meta-box-sortables'),
- stickyMenuActive = false,
- wpResponsiveActive = false;
-
- window.stickyMenu = {
- enable: function() {
- if ( ! stickyMenuActive ) {
- $document.on( 'wp-window-resized.sticky-menu', $.proxy( this.update, this ) );
- $collapseMenu.on( 'click.sticky-menu', $.proxy( this.update, this ) );
- this.update();
- stickyMenuActive = true;
- }
- },
+ if ( height.menu + height.adminbar > height.window ) {
+ // Check for overscrolling
+ if ( windowPos < 0 ) {
+ if ( ! pinnedMenuTop ) {
+ pinnedMenuTop = true;
+ pinnedMenuBottom = false;
- disable: function() {
- if ( stickyMenuActive ) {
- $window.off( 'resize.sticky-menu' );
- $collapseMenu.off( 'click.sticky-menu' );
- $body.removeClass( 'sticky-menu' );
- stickyMenuActive = false;
+ $adminMenuWrap.css({
+ position: 'fixed',
+ top: '',
+ bottom: ''
+ });
+ }
+
+ return;
+ } else if ( windowPos + height.window > $document.height() - 1 ) {
+ if ( ! pinnedMenuBottom ) {
+ pinnedMenuBottom = true;
+ pinnedMenuTop = false;
+
+ $adminMenuWrap.css({
+ position: 'fixed',
+ top: '',
+ bottom: 0
+ });
+ }
+
+ return;
}
- },
- update: function() {
- // Make the admin menu sticky if the viewport is taller than it
- if ( $window.height() > $adminMenuWrap.height() + 32 ) {
- if ( ! $body.hasClass( 'sticky-menu' ) ) {
- $body.addClass( 'sticky-menu' );
+ if ( windowPos > lastScrollPosition ) {
+ // Scrolling down
+ if ( pinnedMenuTop ) {
+ // let it scroll
+ pinnedMenuTop = false;
+ menuTop = $adminMenuWrap.offset().top - height.adminbar - ( windowPos - lastScrollPosition );
+
+ if ( menuTop + height.menu + height.adminbar < windowPos + height.window ) {
+ menuTop = windowPos + height.window - height.menu - height.adminbar;
+ }
+
+ $adminMenuWrap.css({
+ position: 'absolute',
+ top: menuTop,
+ bottom: ''
+ });
+ } else if ( ! pinnedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) {
+ // pin the bottom
+ pinnedMenuBottom = true;
+
+ $adminMenuWrap.css({
+ position: 'fixed',
+ top: '',
+ bottom: 0
+ });
}
- } else {
- if ( $body.hasClass( 'sticky-menu' ) ) {
- $body.removeClass( 'sticky-menu' );
+ } else if ( windowPos < lastScrollPosition ) {
+ // Scrolling up
+ if ( pinnedMenuBottom ) {
+ // let it scroll
+ pinnedMenuBottom = false;
+ menuTop = $adminMenuWrap.offset().top - height.adminbar + ( lastScrollPosition - windowPos );
+
+ if ( menuTop + height.menu > windowPos + height.window ) {
+ menuTop = windowPos;
+ }
+
+ $adminMenuWrap.css({
+ position: 'absolute',
+ top: menuTop,
+ bottom: ''
+ });
+ } else if ( ! pinnedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
+ // pin the top
+ pinnedMenuTop = true;
+
+ $adminMenuWrap.css({
+ position: 'fixed',
+ top: '',
+ bottom: ''
+ });
+ }
+ } else if ( resizing ) {
+ // Resizing
+ pinnedMenuTop = pinnedMenuBottom = false;
+ menuTop = windowPos + height.window - height.menu - height.adminbar - 1;
+
+ if ( menuTop > 0 ) {
+ $adminMenuWrap.css({
+ position: 'absolute',
+ top: menuTop,
+ bottom: ''
+ });
+ } else {
+ unpinMenu();
}
}
}
- };
+
+ lastScrollPosition = windowPos;
+ }
+
+ function resetHeights() {
+ height = {
+ window: $window.height(),
+ wpwrap: $wpwrap.height(),
+ adminbar: $adminbar.height(),
+ menu: $adminMenuWrap.height()
+ };
+ }
+
+ function unpinMenu() {
+ if ( isIOS || ! menuIsPinned ) {
+ return;
+ }
+
+ pinnedMenuTop = pinnedMenuBottom = menuIsPinned = false;
+ $adminMenuWrap.css({
+ position: '',
+ top: '',
+ bottom: ''
+ });
+ }
+
+ function setPinMenu() {
+ resetHeights();
+
+ 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();
+ }
+ }
+
+ if ( ! isIOS ) {
+ $window.on( 'scroll.pin-menu', pinMenu );
+ $document.on( 'tinymce-editor-init.pin-menu', function( event, editor ) {
+ editor.on( 'wp-autoresize', resetHeights );
+ });
+ }
window.wpResponsive = {
init: function() {
},
activate: function() {
- window.stickyMenu.disable();
+ setPinMenu();
if ( ! $body.hasClass( 'auto-fold' ) ) {
$body.addClass( 'auto-fold' );
},
deactivate: function() {
- window.stickyMenu.enable();
+ setPinMenu();
$adminmenu.removeData('wp-responsive');
this.enableSortables();
},
}
};
- window.stickyMenu.enable();
window.wpResponsive.init();
+ setPinMenu();
+
+ $document.on( 'wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu', setPinMenu );
});
+// 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/) ) {