Changeset 29835

Timestamp:

10/05/2014 03:08:11 AM (11 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:

• css/admin-menu.css (modified) (1 diff)
• js/common.js (modified) (5 diffs)

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

@@ -16 +16 @@
 #adminmenu {
     clear: left;
-    margin: 12px 0 0;
+    margin: 12px 0;
     padding: 0;
     list-style: none;

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

@@ -551 +551 @@
         $body = $( document.body ),
         $adminMenuWrap = $( '#adminmenuwrap' ),
-        $collapseMenu = $( '#collapse-menu' ),
         $wpwrap = $( '#wpwrap' ),
         $adminmenu = $( '#adminmenu' ),
@@ -558 +557 @@
         $toolbarPopups = $toolbar.find( 'a[aria-haspopup="true"]' ),
         $sortables = $('.meta-box-sortables'),
-        stickyMenuActive = false,
-        wpResponsiveActive = false;
-
-    window.stickyMenu = {
-        enable: function() {
-            if ( ! stickyMenuActive ) {
-                $document.on( 'wp-window-resized.sticky-menu', $.proxy( this.update, this ) );
-                $collapseMenu.on( 'click.sticky-menu', $.proxy( this.update, this ) );
-                this.update();
-                stickyMenuActive = true;
-            }
-        },
-
-        disable: function() {
-            if ( stickyMenuActive ) {
-                $window.off( 'resize.sticky-menu' );
-                $collapseMenu.off( 'click.sticky-menu' );
-                $body.removeClass( 'sticky-menu' );
-                stickyMenuActive = false;
-            }
-        },
-
-        update: function() {
-            // Make the admin menu sticky if the viewport is taller than it
-            if ( $window.height() > $adminMenuWrap.height() + 32 ) {
-                if ( ! $body.hasClass( 'sticky-menu' ) ) {
-                    $body.addClass( 'sticky-menu' );
-                }
-            } else {
-                if ( $body.hasClass( 'sticky-menu' ) ) {
-                    $body.removeClass( 'sticky-menu' );
-                }
-            }
-        }
-    };
+        wpResponsiveActive = false,
+        $adminbar = $( '#wpadminbar' ),
+        lastScrollPosition = 0,
+        fixedMenuTop = false,
+        fixedMenuBottom = false,
+        menuTop = 0,
+        height = {
+            window: $window.height(),
+            adminbar: $adminbar.height(),
+            menu: $adminMenuWrap.height()
+        };
+
+    function pinMenu() {
+        var windowPos = $window.scrollTop();
+
+        if ( $adminmenu.data('wp-responsive') ) {
+            return;
+        }
+
+        if ( height.menu + height.adminbar > height.window ) {
+            if ( windowPos > lastScrollPosition ) {
+                // Scrolling down
+                if ( fixedMenuTop ) {
+                    // let it scroll
+                    fixedMenuTop = false;
+                    menuTop = $adminMenuWrap.offset().top - height.adminbar;
+
+                    $adminMenuWrap.css({
+                        position: 'absolute',
+                        top: menuTop,
+                        bottom: ''
+                    });
+                } else if ( ! fixedMenuBottom && $adminMenuWrap.offset().top + height.menu < windowPos + height.window ) {
+                    // pin the bottom
+                    fixedMenuBottom = true;
+
+                    $adminMenuWrap.css({
+                        position: 'fixed',
+                        top: '',
+                        bottom: 0
+                    });
+                }
+            } else if ( windowPos < lastScrollPosition ) {
+                // Scrolling up
+                if ( fixedMenuBottom ) {
+                    // let it scroll
+                    fixedMenuBottom = false;
+                    menuTop = $adminMenuWrap.offset().top - height.adminbar;
+
+                    $adminMenuWrap.css({
+                        position: 'absolute',
+                        top: menuTop,
+                        bottom: ''
+                    });
+                } else if ( ! fixedMenuTop && $adminMenuWrap.offset().top >= windowPos + height.adminbar ) {
+                    // pin the top
+                    fixedMenuTop = true;
+
+                    $adminMenuWrap.css({
+                        position: 'fixed',
+                        top: '',
+                        bottom: ''
+                    });
+                }
+            }
+        }
+
+        lastScrollPosition = windowPos;
+    }
+
+    function setPinMenu() {
+        if ( $adminmenu.data('wp-responsive') ) {
+            $body.removeClass( 'sticky-menu' );
+            $adminMenuWrap.css({
+                position: '',
+                top: '',
+                bottom: ''
+            });
+        } else if ( height.menu + height.adminbar > height.window ) {
+            $body.removeClass( 'sticky-menu' );
+            pinMenu();
+        } else {
+            $body.addClass( 'sticky-menu' );
+        }
+    }
+
+    setPinMenu();
+    $window.on( 'scroll.pin-menu', pinMenu );
+
+    $document.on( 'wp-window-resized.pin-menu', function() {
+        height.window = $window.height();
+        height.adminbar = $adminbar.height();
+        setPinMenu();
+    }).on( 'wp-collapse-menu.pin-menu', function() {
+        height.menu = $adminMenuWrap.height();
+        setPinMenu();
+    });
 
     window.wpResponsive = {
@@ -643 +704 @@
 
         activate: function() {
-            window.stickyMenu.disable();
+            setPinMenu();
 
             if ( ! $body.hasClass( 'auto-fold' ) ) {
@@ -654 +715 @@
 
         deactivate: function() {
-            window.stickyMenu.enable();
+            setPinMenu();
             $adminmenu.removeData('wp-responsive');
             this.enableSortables();
@@ -727 +788 @@
     };
 
-    window.stickyMenu.enable();
     window.wpResponsive.init();
 });