Make WordPress Core

Ticket #25858: 25858.sticky.diff

File 25858.sticky.diff, 3.4 KB (added by helen, 11 years ago)
  • src/wp-admin/css/wp-admin.css

     
    19191919        height: 34px;
    19201920}
    19211921
     1922/* Sticky admin menu */
     1923
     1924.sticky-menu #wpwrap {
     1925        z-index: 1; /* prevent flyouts from going behind content in Webkit */
     1926}
     1927
     1928.sticky-menu #adminmenuwrap {
     1929        position: fixed;
     1930        top: 32px;
     1931        left: 0;
     1932        z-index: 2; /* needs to be above .sticky-menu #wpwrap */
     1933}
     1934
    19221935/* A new arrow */
    19231936
    19241937.wp-menu-arrow {
  • src/wp-admin/js/common.js

     
    11/* global setUserSetting, ajaxurl, commonL10n, alert, confirm, toggleWithKeyboard, pagenow */
    2 var showNotice, adminMenu, columns, validateForm, screenMeta;
     2var showNotice, adminMenu, columns, validateForm, screenMeta, stickyMenu;
    33(function($){
    44// Removed in 3.3.
    55// (perhaps) needed for back-compat
     
    447447        })();
    448448});
    449449
     450stickyMenu = {
     451        active: false,
     452
     453        init: function () {
     454                this.$window = $( window );
     455                this.$body = $( document.body );
     456                this.$adminMenuWrap = $( '#adminmenuwrap' );
     457                this.$collapseMenu = $( '#collapse-menu' );
     458                this.bodyMinWidth = parseInt( this.$body.css( 'min-width' ), 10 );
     459                this.enable();
     460        },
     461
     462        enable: function () {
     463                if ( ! this.active ) {
     464                        this.$window.on( 'resize.stickyMenu scroll.stickyMenu', this.debounce(
     465                                $.proxy( this.update, this ), 200
     466                        ) );
     467                        this.$collapseMenu.on( 'click.stickyMenu', $.proxy( this.update, this ) );
     468                        this.update();
     469                        this.active = true;
     470                }
     471        },
     472
     473        disable: function () {
     474                if ( this.active ) {
     475                        this.$window.off( 'resize.stickyMenu scroll.stickyMenu' );
     476                        this.$collapseMenu.off( 'click.stickyMenu' );
     477                        this.$body.removeClass( 'sticky-menu' );
     478                        this.active = false;
     479                }
     480        },
     481
     482        update: function () {
     483                // Make the admin menu sticky if both of the following:
     484                // 1. The viewport is taller than the admin menu
     485                // 2. The viewport is wider than the min-width of the <body>
     486                if ( this.$window.height() > this.$adminMenuWrap.height() + 32 && this.$window.width() > this.bodyMinWidth) {
     487                        if ( ! this.$body.hasClass( 'sticky-menu' ) ) {
     488                                this.$body.addClass( 'sticky-menu' );
     489                        }
     490                } else {
     491                        if ( this.$body.hasClass( 'sticky-menu' ) ) {
     492                                this.$body.removeClass( 'sticky-menu' );
     493                        }
     494                }
     495        },
     496
     497        // Borrowed from Underscore.js
     498        debounce: function( func, wait, immediate ) {
     499                var timeout, args, context, timestamp, result;
     500                return function() {
     501                        var later, callNow;
     502                        context = this;
     503                        args = arguments;
     504                        timestamp = new Date().getTime();
     505                        later = function() {
     506                                var last = new Date().getTime() - timestamp;
     507                                if ( last < wait ) {
     508                                        timeout = setTimeout( later, wait - last );
     509                                } else {
     510                                        timeout = null;
     511                                        if ( ! immediate ) {
     512                                                result = func.apply( context, args );
     513                                                context = args = null;
     514                                        }
     515                                }
     516                        };
     517                        callNow = immediate && !timeout;
     518                        if ( ! timeout ) {
     519                                timeout = setTimeout( later, wait );
     520                        }
     521                        if ( callNow ) {
     522                                result = func.apply( context, args );
     523                                context = args = null;
     524                        }
     525
     526                        return result;
     527                };
     528        }
     529};
     530
     531stickyMenu.init();
     532
    450533// internal use
    451534$(document).bind( 'wp_CloseOnEscape', function( e, data ) {
    452535        if ( typeof(data.cb) != 'function' )