WordPress.org
Get WordPress

Make WordPress Core

Changeset 26125


Ignore:
Timestamp:
11/13/2013 04:29:27 AM (11 years ago)
Author:
helen
Message:

Merge the sticky menu component from MP6. The admin menu is now fixed if the viewport is large enough. props tollmanz, tillkruess, dd32. see #25858.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/wp-admin.css

    r26107 r26125  
    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

  • trunk/src/wp-admin/js/common.js

    r26112 r26125  
    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.
    … …  
    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 ) {
Note: See TracChangeset for help on using the changeset viewer.