WordPress.org

Make WordPress Core

Changeset 29835


Ignore:
Timestamp:
10/05/2014 03:08:11 AM (5 years ago)
Author:
azaozz
Message:

Pin the admin menu on scrolling similarly to how the side metaboxes are pinned on the Edit Post screen, first run. See #29806.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/admin-menu.css

    r29518 r29835  
    1616#adminmenu {
    1717    clear: left;
    18     margin: 12px 0 0;
     18    margin: 12px 0;
    1919    padding: 0;
    2020    list-style: none;
  • trunk/src/wp-admin/js/common.js

    r29770 r29835  
    551551        $body = $( document.body ),
    552552        $adminMenuWrap = $( '#adminmenuwrap' ),
    553         $collapseMenu = $( '#collapse-menu' ),
    554553        $wpwrap = $( '#wpwrap' ),
    555554        $adminmenu = $( '#adminmenu' ),
     
    558557        $toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
    559558        $sortables = $('.meta-box-sortables'),
    560         stickyMenuActive = false,
    561         wpResponsiveActive = false;
    562 
    563     window.stickyMenu = {
    564         enable: function() {
    565             if ( ! stickyMenuActive ) {
    566                 $document.on( 'wp-window-resized.sticky-menu', $.proxy( this.update, this ) );
    567                 $collapseMenu.on( 'click.sticky-menu', $.proxy( this.update, this ) );
    568                 this.update();
    569                 stickyMenuActive = true;
    570             }
    571         },
    572 
    573         disable: function() {
    574             if ( stickyMenuActive ) {
    575                 $window.off( 'resize.sticky-menu' );
    576                 $collapseMenu.off( 'click.sticky-menu' );
    577                 $body.removeClass( 'sticky-menu' );
    578                 stickyMenuActive = false;
    579             }
    580         },
    581 
    582         update: function() {
    583             // Make the admin menu sticky if the viewport is taller than it
    584             if ( $window.height() > $adminMenuWrap.height() + 32 ) {
    585                 if ( ! $body.hasClass( 'sticky-menu' ) ) {
    586                     $body.addClass( 'sticky-menu' );
    587                 }
    588             } else {
    589                 if ( $body.hasClass( 'sticky-menu' ) ) {
    590                     $body.removeClass( 'sticky-menu' );
    591                 }
    592             }
    593         }
    594     };
     559        wpResponsiveActive = false,
     560        $adminbar = $( '#wpadminbar' ),
     561        lastScrollPosition = 0,
     562        fixedMenuTop = false,
     563        fixedMenuBottom = false,
     564        menuTop = 0,
     565        height = {
     566            window: $window.height(),
     567            adminbar: $adminbar.height(),
     568            menu: $adminMenuWrap.height()
     569        };
     570
     571    function pinMenu() {
     572        var windowPos = $window.scrollTop();
     573
     574        if ( $adminmenu.data('wp-responsive') ) {
     575            return;
     576        }
     577
     578        if ( height.menu + height.adminbar > height.window ) {
     579            if ( windowPos > lastScrollPosition ) {
     580                // Scrolling down
     581                if ( fixedMenuTop ) {
     582                    // let it scroll
     583                    fixedMenuTop = false;
     584                    menuTop = $adminMenuWrap.offset().top - height.adminbar;
     585
     586                    $adminMenuWrap.css({
     587                        position: 'absolute',
     588                        top: menuTop,
     589                        bottom: ''
     590                    });
     591                } else if ( ! fixedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) {
     592                    // pin the bottom
     593                    fixedMenuBottom = true;
     594
     595                    $adminMenuWrap.css({
     596                        position: 'fixed',
     597                        top: '',
     598                        bottom: 0
     599                    });
     600                }
     601            } else if ( windowPos < lastScrollPosition ) {
     602                // Scrolling up
     603                if ( fixedMenuBottom ) {
     604                    // let it scroll
     605                    fixedMenuBottom = false;
     606                    menuTop = $adminMenuWrap.offset().top - height.adminbar;
     607
     608                    $adminMenuWrap.css({
     609                        position: 'absolute',
     610                        top: menuTop,
     611                        bottom: ''
     612                    });
     613                } else if ( ! fixedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
     614                    // pin the top
     615                    fixedMenuTop = true;
     616
     617                    $adminMenuWrap.css({
     618                        position: 'fixed',
     619                        top: '',
     620                        bottom: ''
     621                    });
     622                }
     623            }
     624        }
     625
     626        lastScrollPosition = windowPos;
     627    }
     628
     629    function setPinMenu() {
     630        if ( $adminmenu.data('wp-responsive') ) {
     631            $body.removeClass( 'sticky-menu' );
     632            $adminMenuWrap.css({
     633                position: '',
     634                top: '',
     635                bottom: ''
     636            });
     637        } else if ( height.menu + height.adminbar > height.window ) {
     638            $body.removeClass( 'sticky-menu' );
     639            pinMenu();
     640        } else {
     641            $body.addClass( 'sticky-menu' );
     642        }
     643    }
     644
     645    setPinMenu();
     646    $window.on( 'scroll.pin-menu', pinMenu );
     647
     648    $document.on( 'wp-window-resized.pin-menu', function() {
     649        height.window = $window.height();
     650        height.adminbar = $adminbar.height();
     651        setPinMenu();
     652    }).on( 'wp-collapse-menu.pin-menu', function() {
     653        height.menu = $adminMenuWrap.height();
     654        setPinMenu();
     655    });
    595656
    596657    window.wpResponsive = {
     
    643704
    644705        activate: function() {
    645             window.stickyMenu.disable();
     706            setPinMenu();
    646707
    647708            if ( ! $body.hasClass( 'auto-fold' ) ) {
     
    654715
    655716        deactivate: function() {
    656             window.stickyMenu.enable();
     717            setPinMenu();
    657718            $adminmenu.removeData('wp-responsive');
    658719            this.enableSortables();
     
    727788    };
    728789
    729     window.stickyMenu.enable();
    730790    window.wpResponsive.init();
    731791});
Note: See TracChangeset for help on using the changeset viewer.