Changeset 30917 for branches/4.1

Timestamp:

12/16/2014 07:41:34 PM (12 years ago)

Author:

johnbillion

Message:

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

Merges [30844] to the 4.1 branch.

See #30692.

Location:

branches/4.1

Files:

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

branches/4.1/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 );
 });