WordPress.org

Make WordPress Core

Changeset 26125


Ignore:
Timestamp:
11/13/13 04:29:27 (4 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.