From dcba23a58e369cde243e1bf50e7ebbd9fede6c87 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Mon, 18 Aug 2014 00:34:45 +0000 Subject: [PATCH] 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 git-svn-id: https://develop.svn.wordpress.org/trunk@29523 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/js/editor-expand.js | 173 ++++++++++++++++++------------- src/wp-admin/js/postbox.js | 12 ++- 2 files changed, 111 insertions(+), 74 deletions(-) diff --git a/src/wp-admin/js/editor-expand.js b/src/wp-admin/js/editor-expand.js index 700954df29..b2caebfea5 100644 --- a/src/wp-admin/js/editor-expand.js +++ b/src/wp-admin/js/editor-expand.js @@ -226,13 +226,13 @@ jQuery( document ).ready( function($) { adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0, 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 ) { $top = $visualTop; @@ -247,37 +247,14 @@ jQuery( document ).ready( function($) { topHeight = $top.outerHeight(); editorPos = $editor.offset().top; editorHeight = $editor.outerHeight(); - editorWidth = $editor.outerWidth(); statusBarHeight = visual ? $statusBar.outerHeight() : 0; + // Should we pin? + canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding + canPin = editorHeight > ( canPin + 5 ); - // 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; - + if ( ! canPin ) { + if ( resize ) { $top.css( { position: 'absolute', top: 0, @@ -290,53 +267,102 @@ jQuery( document ).ready( function($) { top: 0, 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 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 ) ) { + // 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; + 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: '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' - } ); + $bottom.css( { + position: 'relative', + bottom: 'auto', + width: '100%', + 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 + windowHeight < editorHeight ) { // the editor is taller than the viewport if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) { // Reset when scrolling to the top @@ -454,7 +480,7 @@ jQuery( document ).ready( function($) { function afterScroll() { clearTimeout( scrollTimer ); - scrollTimer = setTimeout( adjust, 200 ); + scrollTimer = setTimeout( adjust, 100 ); } function on() { @@ -473,7 +499,17 @@ jQuery( document ).ready( function($) { } ); // 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 ); $textEditor.on( 'keyup.editor-expand', textEditorKeyup ); @@ -509,14 +545,9 @@ jQuery( document ).ready( function($) { $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(); // Adjust when entering/exiting fullscreen mode. diff --git a/src/wp-admin/js/postbox.js b/src/wp-admin/js/postbox.js index 6c2e6945cd..5fc24e846c 100644 --- a/src/wp-admin/js/postbox.js +++ b/src/wp-admin/js/postbox.js @@ -3,6 +3,8 @@ var postboxes; (function($) { + var $document = $( document ); + postboxes = { add_postbox_toggles : function(page, args) { var self = this; @@ -26,6 +28,8 @@ var postboxes; else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) ) self.pbhide(id); } + + $document.trigger( 'postbox-toggled', p ); }); $('.postbox .hndle a').click( function(e) { @@ -39,19 +43,21 @@ var postboxes; }); $('.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 ); } self.save_state(page); self._mark_area(); + $document.trigger( 'postbox-toggled', $postbox ); }); $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){