Changeset 29495

Timestamp:

08/15/2014 03:16:07 AM (11 years ago)

Author:

helen

Message:

Editor scrolling:

• Reduce the starting height of the editor to better match the height at which the top toolbar unpins.
• Pin the side metaboxes so they do not get lost when the editor content is long.
• Turn magic numbers into variables.

props stephdau, azaozz. see #28328.

Location:

trunk/src/wp-admin

Files:

• css/edit.css (modified) (2 diffs)
• js/editor-expand.js (modified) (19 diffs)

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

@@ -405 +405 @@
 }
 /* end editor-expand.js override */
+
+#poststuff #post-body.columns-2 #side-sortables {
+    width: 280px;
+}
 
 #timestampdiv select {
@@ -1230 +1234 @@
     #poststuff #post-body.columns-2 #side-sortables {
         min-height: 0;
+        width: auto;
     }
 

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

@@ -7 +7 @@
         $document = $( document ),
         $adminBar = $( '#wpadminbar' ),
+        $footer = $( '#wpfooter' ),
         $wrap = $( '#postdivrich' ),
         $contentWrap = $( '#wp-content-wrap' ),
@@ -17 +18 @@
         $bottom = $( '#post-status-info' ),
         $statusBar,
+        $sideSortables = $( '#side-sortables' ),
+        $postboxContainer = $( '#postbox-container-1' ),
+        $postBody = $('#post-body'),
         fullscreen = window.wp.editor && window.wp.editor.fullscreen,
         mceEditor,
@@ -23 +27 @@
         fixedTop = false,
         fixedBottom = false,
-        scrollTimer;
+        fixedSideTop = false,
+        fixedSideBottom = false,
+        scrollTimer,
+        lastScrollPosition = 0,
+        pageYOffsetAtTop = 130,
+        pinnedToolsTop = 56, // also used in CSS for the "#poststuff #post-body #postbox-container-1.pinned" selector
+        textEditorClonePaddingTop = 37,
+        autoresizeMinHeight = 300; // $window.height() - 310;
 
     $textEditorClone.insertAfter( $textEditor );
@@ -32 +43 @@
         'line-height': $textEditor.css( 'line-height' ),
         'padding': $textEditor.css( 'padding' ),
-        'padding-top': 37,
+        'padding-top': textEditorClonePaddingTop,
         'white-space': 'pre-wrap',
         'word-wrap': 'break-word'
@@ -89 +100 @@
         hiddenHeight = $textEditorClone.height();
 
-        if ( hiddenHeight < 300 ) {
-            hiddenHeight = 300;
+        if ( hiddenHeight < autoresizeMinHeight ) {
+            hiddenHeight = autoresizeMinHeight;
         }
 
@@ -113 +124 @@
 
         // Set the minimum height to the initial viewport height.
-        editor.settings.autoresize_min_height = 300;
+        editor.settings.autoresize_min_height = autoresizeMinHeight;
 
         // Get the necessary UI elements.
@@ -219 +230 @@
             resize = type !== 'scroll',
             visual = ( mceEditor && ! mceEditor.isHidden() ),
-            buffer = 200,
-            $top, $editor,
+            buffer = autoresizeMinHeight + adminBarHeight,
+            postBodyTop = $postBody.offset().top,
+            borderWidth = 1,
+            contentWrapWidth = $contentWrap.width(),
+            sideSortablesHeight = $sideSortables.height(),
+            $top, $editor, sidebarTop, footerTop,
             toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
 
@@ -239 +254 @@
         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 ) ) ) {
+            // Handle scrolling down.
+            ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
+            // Handle scrolling up.
+            windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
+
             fixedTop = true;
 
@@ -250 +267 @@
                 position: 'fixed',
                 top: adminBarHeight + toolsHeight,
-                width: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
+                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
                 borderTop: '1px solid #e5e5e5'
             } );
@@ -257 +274 @@
                 position: 'fixed',
                 top: adminBarHeight,
-                width: editorWidth + 2
+                width: contentWrapWidth
             } );
         // Maybe unpin the top.
@@ -269 +286 @@
                     top: 0,
                     borderTop: 'none',
-                    width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
+                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                 } );
 
@@ -275 +292 @@
                     position: 'absolute',
                     top: 0,
-                    width: $contentWrap.width()
+                    width: contentWrapWidth
                 } );
             // Handle scrolling down.
@@ -283 +300 @@
                 $top.css( {
                     position: 'absolute',
-                    top: editorHeight - buffer
+                    top: editorHeight - buffer,
+                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
                 } );
 
                 $tools.css( {
                     position: 'absolute',
-                    top: editorHeight - buffer + 1, // border
-                    width: $contentWrap.width()
+                    top: editorHeight - buffer + borderWidth, // border
+                    width: contentWrapWidth
                 } );
             }
@@ -296 +314 @@
         // Maybe adjust the bottom bar.
         if ( ( ! fixedBottom || resize ) &&
-                // + 1 for the border around the .wp-editor-container.
-                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
+            // +[n] for the border around the .wp-editor-container.
+            ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
+
             fixedBottom = true;
 
@@ -303 +322 @@
                 position: 'fixed',
                 bottom: 0,
-                width: editorWidth + 2,
+                width: editorWidth + ( borderWidth * 2 ),
                 borderTop: '1px solid #dedede'
             } );
         } else if ( ( fixedBottom || resize ) &&
-                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
+                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
             fixedBottom = false;
 
@@ -316 +335 @@
                 borderTop: 'none'
             } );
+        }
+
+        // Sidebar pinning
+        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
+
+            if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) {
+                // Reset when scrolling to the top
+                if ( windowPos + pinnedToolsTop <= postBodyTop ) {
+                    $sideSortables.attr( 'style', '' );
+                    fixedSideTop = fixedSideBottom = false;
+                } else {
+                    if ( windowPos > lastScrollPosition ) {
+                        // Scrolling down
+                        if ( fixedSideTop ) {
+                            // let it scroll
+                            fixedSideTop = false;
+                            sidebarTop = $sideSortables.offset().top - adminBarHeight;
+                            footerTop = $footer.offset().top;
+
+                            // don't get over the footer
+                            if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
+                                sidebarTop = footerTop - sideSortablesHeight - 20;
+                            }
+
+                            $sideSortables.css({
+                                position: 'absolute',
+                                top: sidebarTop,
+                                bottom: ''
+                            });
+                        } else if ( ! fixedSideBottom && sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + windowHeight ) {
+                            // pin the bottom
+                            fixedSideBottom = true;
+
+                            $sideSortables.css({
+                                position: 'fixed',
+                                top: 'auto',
+                                bottom: '20px'
+                            });
+                        }
+                    } else if ( windowPos < lastScrollPosition ) {
+                        // Scrolling up
+                        if ( fixedSideBottom ) {
+                            // let it scroll
+                            fixedSideBottom = false;
+                            sidebarTop = $sideSortables.offset().top - 20;
+                            footerTop = $footer.offset().top;
+
+                            // don't get over the footer
+                            if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
+                                sidebarTop = footerTop - sideSortablesHeight - 20;
+                            }
+
+                            $sideSortables.css({
+                                position: 'absolute',
+                                top: sidebarTop,
+                                bottom: ''
+                            });
+                        } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
+                            // pin the top
+                            fixedSideTop = true;
+
+                            $sideSortables.css({
+                                position: 'fixed',
+                                top: pinnedToolsTop,
+                                bottom: ''
+                            });
+                        }
+                    }
+                }
+            } else {
+                // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
+                if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
+                    $sideSortables.css( {
+                        position: 'fixed',
+                        top: pinnedToolsTop
+                    } );
+                } else {
+                    $sideSortables.attr( 'style', '' );
+                }
+
+                fixedSideTop = fixedSideBottom = false;
+            }
+
+            lastScrollPosition = windowPos;
+        } else {
+            $sideSortables.attr( 'style', '' );
+            fixedSideTop = fixedSideBottom = false;
         }
 
@@ -355 +463 @@
         // Scroll to the top when triggering this from JS.
         // Ensures toolbars are pinned properly.
-        if ( window.pageYOffset && window.pageYOffset > 130 ) {
+        if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
             window.scrollTo( window.pageXOffset, 0 );
         }
@@ -398 +506 @@
         // Scroll to the top when triggering this from JS.
         // Ensures toolbars are reset properly.
-        if ( window.pageYOffset && window.pageYOffset > 130 ) {
+        if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
             window.scrollTo( window.pageXOffset, 0 );
         }
@@ -418 +526 @@
 
         // Reset all css
-        $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor ], function( i, element ) {
+        $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
             element && element.attr( 'style', '' );
         });
+
+        fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
 
         if ( mceEditor ) {