Changeset 30844

Timestamp:

12/14/2014 01:46:39 AM (11 years ago)

Author:

azaozz

Message:

Fix menu shakiness when over-scrolling in Chrome and Safari on MacOS.
See #30692.

File:

• trunk/src/wp-admin/js/common.js (modified) (6 diffs)

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

@@ -194 +194 @@
         pinnedMenuTop = false,
         pinnedMenuBottom = false,
+        isScrolling = false,
+        scrollTimer,
         menuTop = 0,
         height = {
+            document: $document.height(),
             window: $window.height(),
             wpwrap: $wpwrap.height(),
@@ -555 +558 @@
 
         if ( height.menu + height.adminbar > height.window ) {
+            // Check for overscrolling
+            if ( windowPos < 0 ) {
+                if ( ! pinnedMenuTop ) {
+                    pinnedMenuTop = true;
+                    pinnedMenuBottom = false;
+
+                    $adminMenuWrap.css({
+                        position: 'fixed',
+                        top: '',
+                        bottom: ''
+                    });
+                }
+
+                return;
+            } else if ( windowPos + height.window > height.document - 1 ) {
+                if ( ! pinnedMenuBottom ) {
+                    pinnedMenuBottom = true;
+                    pinnedMenuTop = false;
+
+                    $adminMenuWrap.css({
+                        position: 'fixed',
+                        top: '',
+                        bottom: 0
+                    });
+                }
+
+                return;
+            }
+
             if ( windowPos > lastScrollPosition ) {
                 // Scrolling down
@@ -627 +659 @@
     }
 
+    function resetHeights() {
+        height = {
+            document: $document.height(),
+            window: $window.height(),
+            wpwrap: $wpwrap.height(),
+            adminbar: $adminbar.height(),
+            menu: $adminMenuWrap.height()
+        };
+    }
+
     function unpinMenu() {
         if ( isIOS ) {
@@ -641 +683 @@
 
     function setPinMenu() {
+        resetHeights();
+
         if ( $adminmenu.data('wp-responsive') ) {
             $body.removeClass( 'sticky-menu' );
@@ -653 +697 @@
     }
 
+    function scrollStart() {
+        if ( isScrolling ) {
+            window.clearTimeout( scrollTimer );
+
+            scrollTimer = window.setTimeout( function() {
+                isScrolling = false;
+            }, 200 );
+        } else {
+            isScrolling = true;
+            $document.triggerHandler( 'wp-scroll-start' );
+        }
+    }
+
     if ( ! isIOS ) {
-        $window.on( 'scroll.pin-menu', pinMenu );
+        $window.on( 'scroll.pin-menu', function() {
+            scrollStart();
+            pinMenu();
+        });
     }
 
@@ -793 +853 @@
     setPinMenu();
 
-    $document.on( 'wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu', function() {
-        height.wpwrap = $wpwrap.height();
-        height.window = $window.height();
-        height.adminbar = $adminbar.height();
-        setPinMenu();
-    }).on( 'wp-collapse-menu.pin-menu', function() {
-        height.wpwrap = $wpwrap.height();
-        height.menu = $adminMenuWrap.height();
-        setPinMenu();
-    });
-
+    $document.on( 'wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu', setPinMenu );
 });