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. git-svn-id: https://develop.svn.wordpress.org/trunk@29495 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
22eca56a81
commit
ee20b5a45f
|
@ -405,6 +405,10 @@ td.plugin-title p {
|
|||
}
|
||||
/* end editor-expand.js override */
|
||||
|
||||
#poststuff #post-body.columns-2 #side-sortables {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
#timestampdiv select {
|
||||
height: 21px;
|
||||
line-height: 14px;
|
||||
|
@ -1229,6 +1233,7 @@ table.links-table {
|
|||
|
||||
#poststuff #post-body.columns-2 #side-sortables {
|
||||
min-height: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* hide the radio buttons for column prefs */
|
||||
|
|
|
@ -6,6 +6,7 @@ jQuery( document ).ready( function($) {
|
|||
var $window = $( window ),
|
||||
$document = $( document ),
|
||||
$adminBar = $( '#wpadminbar' ),
|
||||
$footer = $( '#wpfooter' ),
|
||||
$wrap = $( '#postdivrich' ),
|
||||
$contentWrap = $( '#wp-content-wrap' ),
|
||||
$tools = $( '#wp-content-editor-tools' ),
|
||||
|
@ -16,13 +17,23 @@ jQuery( document ).ready( function($) {
|
|||
$textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
|
||||
$bottom = $( '#post-status-info' ),
|
||||
$statusBar,
|
||||
$sideSortables = $( '#side-sortables' ),
|
||||
$postboxContainer = $( '#postbox-container-1' ),
|
||||
$postBody = $('#post-body'),
|
||||
fullscreen = window.wp.editor && window.wp.editor.fullscreen,
|
||||
mceEditor,
|
||||
mceBind = function(){},
|
||||
mceUnbind = function(){},
|
||||
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 );
|
||||
|
||||
|
@ -31,7 +42,7 @@ jQuery( document ).ready( function($) {
|
|||
'font-size': $textEditor.css( 'font-size' ),
|
||||
'line-height': $textEditor.css( 'line-height' ),
|
||||
'padding': $textEditor.css( 'padding' ),
|
||||
'padding-top': 37,
|
||||
'padding-top': textEditorClonePaddingTop,
|
||||
'white-space': 'pre-wrap',
|
||||
'word-wrap': 'break-word'
|
||||
} );
|
||||
|
@ -88,8 +99,8 @@ jQuery( document ).ready( function($) {
|
|||
|
||||
hiddenHeight = $textEditorClone.height();
|
||||
|
||||
if ( hiddenHeight < 300 ) {
|
||||
hiddenHeight = 300;
|
||||
if ( hiddenHeight < autoresizeMinHeight ) {
|
||||
hiddenHeight = autoresizeMinHeight;
|
||||
}
|
||||
|
||||
if ( hiddenHeight === textEditorHeight ) {
|
||||
|
@ -112,7 +123,7 @@ jQuery( document ).ready( function($) {
|
|||
mceEditor = editor;
|
||||
|
||||
// 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.
|
||||
$visualTop = $contentWrap.find( '.mce-toolbar-grp' );
|
||||
|
@ -218,8 +229,12 @@ jQuery( document ).ready( function($) {
|
|||
adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
|
||||
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;
|
||||
|
||||
if ( visual ) {
|
||||
|
@ -238,25 +253,27 @@ jQuery( document ).ready( function($) {
|
|||
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 ) ) ) {
|
||||
// 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: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
|
||||
width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
|
||||
borderTop: '1px solid #e5e5e5'
|
||||
} );
|
||||
|
||||
$tools.css( {
|
||||
position: 'fixed',
|
||||
top: adminBarHeight,
|
||||
width: editorWidth + 2
|
||||
width: contentWrapWidth
|
||||
} );
|
||||
// Maybe unpin the top.
|
||||
} else if ( fixedTop || resize ) {
|
||||
|
@ -268,13 +285,13 @@ jQuery( document ).ready( function($) {
|
|||
position: 'absolute',
|
||||
top: 0,
|
||||
borderTop: 'none',
|
||||
width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
|
||||
width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
|
||||
} );
|
||||
|
||||
$tools.css( {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: $contentWrap.width()
|
||||
width: contentWrapWidth
|
||||
} );
|
||||
// Handle scrolling down.
|
||||
} else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
|
||||
|
@ -282,31 +299,33 @@ jQuery( document ).ready( function($) {
|
|||
|
||||
$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
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
$bottom.css( {
|
||||
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;
|
||||
|
||||
$bottom.css( {
|
||||
|
@ -317,6 +336,95 @@ jQuery( document ).ready( function($) {
|
|||
} );
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
if ( resize ) {
|
||||
$contentWrap.css( {
|
||||
paddingTop: $tools.outerHeight()
|
||||
|
@ -354,7 +462,7 @@ jQuery( document ).ready( function($) {
|
|||
function on() {
|
||||
// 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 );
|
||||
}
|
||||
|
||||
|
@ -397,7 +505,7 @@ jQuery( document ).ready( function($) {
|
|||
|
||||
// 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 );
|
||||
}
|
||||
|
||||
|
@ -417,10 +525,12 @@ jQuery( document ).ready( function($) {
|
|||
fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
|
||||
|
||||
// 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 ) {
|
||||
mceEditor.settings.wp_autoresize_on = false;
|
||||
mceEditor.execCommand( 'wpAutoResizeOff' );
|
||||
|
|
Loading…
Reference in New Issue