Changeset 29523

Timestamp:

08/18/2014 12:34:45 AM (10 years ago)

Author:

azaozz

Message:

Editor scrolling:

• Properly handle change of sidebar height when opening, closing or hiding postboxes.
• Add a flag when to start pinning. Set it to few pixels more than the initial editor height.

See #28328

Location:

trunk/src/wp-admin/js

Files:

• editor-expand.js (modified) (7 diffs)
• postbox.js (modified) (4 diffs)

trunk/src/wp-admin/js/editor-expand.js

@@ -227 +227 @@
             resize = type !== 'scroll',
             visual = ( mceEditor && ! mceEditor.isHidden() ),
-            buffer = autoresizeMinHeight + adminBarHeight,
+            buffer = autoresizeMinHeight,
             postBodyTop = $postBody.offset().top,
             borderWidth = 1,
             contentWrapWidth = $contentWrap.width(),
             sideSortablesHeight = $sideSortables.height(),
-            $top, $editor, sidebarTop, footerTop,
-            toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
+            $top, $editor, sidebarTop, footerTop, canPin,
+            toolsHeight, topPos, topHeight, editorPos, editorHeight, statusBarHeight;
 
         if ( visual ) {
@@ -248 +248 @@
         editorPos = $editor.offset().top;
         editorHeight = $editor.outerHeight();
-        editorWidth = $editor.outerWidth();
         statusBarHeight = visual ? $statusBar.outerHeight() : 0;
 
-
-        // Maybe pin the top.
-        if ( ( ! fixedTop || resize ) &&
-            // Handle scrolling down.
-            ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
-            // Handle scrolling up.
-            windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
-
-            fixedTop = true;
-
-            $top.css( {
-                position: 'fixed',
-                top: adminBarHeight + toolsHeight,
-                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
-                borderTop: '1px solid #e5e5e5'
-            } );
-
-            $tools.css( {
-                position: 'fixed',
-                top: adminBarHeight,
-                width: contentWrapWidth
-            } );
-        // Maybe unpin the top.
-        } else if ( fixedTop || resize ) {
-            // Handle scrolling up.
-            if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
-                fixedTop = false;
-
+        // Should we pin?
+        canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
+        canPin = editorHeight > ( canPin + 5 );
+
+        if ( ! canPin ) {
+            if ( resize ) {
                 $top.css( {
                     position: 'absolute',
@@ -291 +268 @@
                     width: contentWrapWidth
                 } );
-            // Handle scrolling down.
-            } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
-                fixedTop = false;
+
+                $bottom.css( {
+                    position: 'relative',
+                    bottom: 'auto',
+                    width: '100%',
+                    borderTop: 'none'
+                } );
+            }
+        } else {
+            // Maybe pin the top.
+            if ( ( ! fixedTop || resize ) &&
+                // Handle scrolling down.
+                ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
+                // Handle scrolling up.
+                windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
+
+                fixedTop = true;
 
                 $top.css( {
-                    position: 'absolute',
-                    top: editorHeight - buffer,
-                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+                    position: 'fixed',
+                    top: adminBarHeight + toolsHeight,
+                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
+                    borderTop: '1px solid #e5e5e5'
                 } );
 
                 $tools.css( {
-                    position: 'absolute',
-                    top: editorHeight - buffer + borderWidth, // border
+                    position: 'fixed',
+                    top: adminBarHeight,
                     width: contentWrapWidth
                 } );
-            }
-        }
-
-        // Maybe adjust the bottom bar.
-        if ( ( ! fixedBottom || resize ) &&
-            // +[n] for the border around the .wp-editor-container.
-            ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
-
-            fixedBottom = true;
-
-            $bottom.css( {
-                position: 'fixed',
-                bottom: 0,
-                width: editorWidth + ( borderWidth * 2 ),
-                borderTop: '1px solid #dedede'
-            } );
-        } else if ( ( fixedBottom || resize ) &&
-                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
-            fixedBottom = false;
-
-            $bottom.css( {
-                position: 'relative',
-                bottom: 'auto',
-                width: '100%',
-                borderTop: 'none'
-            } );
+            // Maybe unpin the top.
+            } else if ( fixedTop || resize ) {
+                // Handle scrolling up.
+                if ( windowPos <= ( topPos - toolsHeight - adminBarHeight ) ) {
+                    fixedTop = false;
+
+                    $top.css( {
+                        position: 'absolute',
+                        top: 0,
+                        borderTop: 'none',
+                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+                    } );
+
+                    $tools.css( {
+                        position: 'absolute',
+                        top: 0,
+                        width: contentWrapWidth
+                    } );
+                // Handle scrolling down.
+                } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
+                    fixedTop = false;
+
+                    $top.css( {
+                        position: 'absolute',
+                        top: editorHeight - buffer,
+                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+                    } );
+
+                    $tools.css( {
+                        position: 'absolute',
+                        top: editorHeight - buffer + borderWidth, // border
+                        width: contentWrapWidth
+                    } );
+                }
+            }
+
+            // Maybe adjust the bottom bar.
+            if ( ( ! fixedBottom || resize ) &&
+                // +[n] for the border around the .wp-editor-container.
+                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
+
+                fixedBottom = true;
+
+                $bottom.css( {
+                    position: 'fixed',
+                    bottom: 0,
+                    width: contentWrapWidth,
+                    borderTop: '1px solid #dedede'
+                } );
+            } else if ( ( fixedBottom || resize ) &&
+                    ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
+                fixedBottom = false;
+
+                $bottom.css( {
+                    position: 'relative',
+                    bottom: 'auto',
+                    width: '100%',
+                    borderTop: 'none'
+                } );
+            }
         }
 
@@ -337 +363 @@
         if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
             $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
-            windowHeight < editorHeight * 0.7 ) { // the editor is taller than the viewport
+            windowHeight < editorHeight ) { // the editor is taller than the viewport
 
             if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) {
@@ -455 +481 @@
     function afterScroll() {
         clearTimeout( scrollTimer );
-        scrollTimer = setTimeout( adjust, 200 );
+        scrollTimer = setTimeout( adjust, 100 );
     }
 
@@ -474 +500 @@
 
         // Adjust when collapsing the menu, changing the columns, changing the body class.
-        $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
+        $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
+            .on( 'postbox-toggled.editor-expand', function() {
+                if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > 20 ) {
+                    fixedSideBottom = true;
+                    window.scrollBy( 0, -1 );
+                    adjust();
+                    window.scrollBy( 0, 1 );
+                }
+
+                adjust();
+            });
 
         $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
@@ -510 +546 @@
         $wrap.removeClass( 'wp-editor-expand' );
 
-        // Adjust when the window is scrolled or resized.
-        $window.off( 'scroll.editor-expand resize.editor-expand' );
-
-        // Adjust when collapsing the menu, changing the columns, changing the body class.
-        $document.off( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
-
-        $textEditor.off( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
-        $textEditor.off( 'keyup.editor-expand', textEditorKeyup );
+        $window.off( '.editor-expand' );
+        $document.off( '.editor-expand' );
+        $textEditor.off( '.editor-expand' );
         mceUnbind();
 

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

@@ -4 +4 @@
 
 (function($) {
+    var $document = $( document );
+
     postboxes = {
         add_postbox_toggles : function(page, args) {
@@ -27 +29 @@
                         self.pbhide(id);
                 }
+
+                $document.trigger( 'postbox-toggled', p );
             });
 
@@ -40 +44 @@
 
             $('.hide-postbox-tog').bind('click.postboxes', function() {
-                var box = $(this).val();
+                var boxId = $(this).val(),
+                    $postbox = $( '#' + boxId );
 
                 if ( $(this).prop('checked') ) {
-                    $('#' + box).show();
+                    $postbox.show();
                     if ( $.isFunction( postboxes.pbshow ) )
                         self.pbshow( box );
                 } else {
-                    $('#' + box).hide();
+                    $postbox.hide();
                     if ( $.isFunction( postboxes.pbhide ) )
                         self.pbhide( box );
@@ -53 +58 @@
                 self.save_state(page);
                 self._mark_area();
+                $document.trigger( 'postbox-toggled', $postbox );
             });