Index: src/wp-admin/css/wp-admin.css =================================================================== --- src/wp-admin/css/wp-admin.css (revision 26106) +++ src/wp-admin/css/wp-admin.css (working copy) @@ -1504,6 +1504,29 @@ text-decoration: none; } +.sticky-menu #adminmenuwrap { + position: fixed; + top: 32px; + left: 0; + z-index: 80000; +} +.sticky-menu.rtl #adminmenuwrap { + right: 0; + left: auto; +} + +.sticky-menu #TB_overlay { + z-index: 80100; +} +.sticky-menu #TB_window { + z-index: 80102; +} + +/* hotfix! increase `zindex` in `wp-pointer.js` to 80010 */ +.sticky-menu .wp-pointer { + z-index: 80010 !important; +} + /*------------------------------------------------------------------------------ 6.1 - Screen Options Tabs ------------------------------------------------------------------------------*/ Index: src/wp-admin/js/common.js =================================================================== --- src/wp-admin/js/common.js (revision 26106) +++ src/wp-admin/js/common.js (working copy) @@ -438,6 +438,89 @@ })(); }); +var stickymenu = { + active: false, + + init: function () { + this.$window = $( window ); + this.$body = $( document.body ); + this.$adminMenuWrap = $( '#adminmenuwrap' ); + this.$collapseMenu = $( '#collapse-menu' ); + this.bodyMinWidth = parseInt( this.$body.css( 'min-width' ), 10 ); + this.enable(); + }, + + enable: function () { + if ( ! this.active ) { + this.$window.on( 'resize.stickymenu scroll.stickymenu', this.debounce( + $.proxy( this.update, this ), 200 + ) ); + this.$collapseMenu.on( 'click.stickymenu', $.proxy( this.update, this ) ); + this.update(); + this.active = true; + } + }, + + disable: function () { + if ( this.active ) { + this.$window.off( 'resize.stickymenu scroll.stickymenu' ); + this.$collapseMenu.off( 'click.stickymenu' ); + this.$body.removeClass( 'sticky-menu' ); + this.active = false; + } + }, + + update: function () { + // float the admin menu sticky if: + // 1) the viewport is taller than the admin menu + // 2) the viewport is wider than the min-width of the + // to float it only if it's collapsed add: $(document.body).hasClass('folded') + if ( this.$window.height() > this.$adminMenuWrap.height() + 32 && this.$window.width() > this.bodyMinWidth) { + if ( ! this.$body.hasClass( 'sticky-menu' ) ) { + this.$body.addClass( 'sticky-menu' ); + } + } else { + if ( this.$body.hasClass( 'sticky-menu' ) ) { + this.$body.removeClass( 'sticky-menu' ); + } + } + }, + + // Borrowed from Underscore.js + debounce: function( func, wait, immediate ) { + var timeout, args, context, timestamp, result; + return function() { + context = this; + args = arguments; + timestamp = new Date().getTime(); + var later = function() { + var last = new Date().getTime() - timestamp; + if ( last < wait ) { + timeout = setTimeout( later, wait - last ); + } else { + timeout = null; + if ( ! immediate ) { + result = func.apply( context, args ); + context = args = null; + } + } + }; + var callNow = immediate && !timeout; + if ( ! timeout ) { + timeout = setTimeout( later, wait ); + } + if ( callNow ) { + result = func.apply( context, args ); + context = args = null; + } + + return result; + }; + } +}; + +stickymenu.init(); + // internal use $(document).bind( 'wp_CloseOnEscape', function( e, data ) { if ( typeof(data.cb) != 'function' )