Editor expand:
- Adjust calculation when comparing sidebar position to wpfooter top. Fixes an annoying jumping when the user scrolls off the bottom. - Use a var for the 'bottom' distance of the sidebar. - Fix sidebar pinning when it's height is nearly the same as the viewport height. Fixes #29349 git-svn-id: https://develop.svn.wordpress.org/trunk@29656 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
14313673d5
commit
c3222171cd
|
@ -33,6 +33,7 @@ jQuery( document ).ready( function($) {
|
||||||
lastScrollPosition = 0,
|
lastScrollPosition = 0,
|
||||||
pageYOffsetAtTop = 130,
|
pageYOffsetAtTop = 130,
|
||||||
pinnedToolsTop = 56,
|
pinnedToolsTop = 56,
|
||||||
|
sidebarBottom = 20,
|
||||||
autoresizeMinHeight = 300,
|
autoresizeMinHeight = 300,
|
||||||
initialMode = window.getUserSetting( 'editor' ),
|
initialMode = window.getUserSetting( 'editor' ),
|
||||||
// These are corrected when adjust() runs, except on scrolling if already set.
|
// These are corrected when adjust() runs, except on scrolling if already set.
|
||||||
|
@ -432,7 +433,7 @@ jQuery( document ).ready( function($) {
|
||||||
$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
|
$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
|
||||||
heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
|
heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
|
||||||
|
|
||||||
if ( heights.sideSortablesHeight > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
|
if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
|
||||||
// Reset when scrolling to the top
|
// Reset when scrolling to the top
|
||||||
if ( windowPos + pinnedToolsTop <= postBodyTop ) {
|
if ( windowPos + pinnedToolsTop <= postBodyTop ) {
|
||||||
$sideSortables.attr( 'style', '' );
|
$sideSortables.attr( 'style', '' );
|
||||||
|
@ -447,8 +448,8 @@ jQuery( document ).ready( function($) {
|
||||||
footerTop = $footer.offset().top;
|
footerTop = $footer.offset().top;
|
||||||
|
|
||||||
// don't get over the footer
|
// don't get over the footer
|
||||||
if ( footerTop < sidebarTop + heights.sideSortablesHeight + 20 ) {
|
if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
|
||||||
sidebarTop = footerTop - heights.sideSortablesHeight - 20;
|
sidebarTop = footerTop - heights.sideSortablesHeight - 12;
|
||||||
}
|
}
|
||||||
|
|
||||||
$sideSortables.css({
|
$sideSortables.css({
|
||||||
|
@ -456,14 +457,14 @@ jQuery( document ).ready( function($) {
|
||||||
top: sidebarTop,
|
top: sidebarTop,
|
||||||
bottom: ''
|
bottom: ''
|
||||||
});
|
});
|
||||||
} else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + heights.windowHeight ) {
|
} else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
|
||||||
// pin the bottom
|
// pin the bottom
|
||||||
fixedSideBottom = true;
|
fixedSideBottom = true;
|
||||||
|
|
||||||
$sideSortables.css({
|
$sideSortables.css({
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: 'auto',
|
top: 'auto',
|
||||||
bottom: '20px'
|
bottom: sidebarBottom
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else if ( windowPos < lastScrollPosition ) {
|
} else if ( windowPos < lastScrollPosition ) {
|
||||||
|
@ -471,12 +472,12 @@ jQuery( document ).ready( function($) {
|
||||||
if ( fixedSideBottom ) {
|
if ( fixedSideBottom ) {
|
||||||
// let it scroll
|
// let it scroll
|
||||||
fixedSideBottom = false;
|
fixedSideBottom = false;
|
||||||
sidebarTop = $sideSortables.offset().top - 20;
|
sidebarTop = $sideSortables.offset().top - sidebarBottom;
|
||||||
footerTop = $footer.offset().top;
|
footerTop = $footer.offset().top;
|
||||||
|
|
||||||
// don't get over the footer
|
// don't get over the footer
|
||||||
if ( footerTop < sidebarTop + heights.sideSortablesHeight + 20 ) {
|
if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
|
||||||
sidebarTop = footerTop - heights.sideSortablesHeight - 20;
|
sidebarTop = footerTop - heights.sideSortablesHeight - 12;
|
||||||
}
|
}
|
||||||
|
|
||||||
$sideSortables.css({
|
$sideSortables.css({
|
||||||
|
@ -499,6 +500,7 @@ jQuery( document ).ready( function($) {
|
||||||
} else {
|
} else {
|
||||||
// if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
|
// if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
|
||||||
if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
|
if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
|
||||||
|
|
||||||
$sideSortables.css( {
|
$sideSortables.css( {
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: pinnedToolsTop
|
top: pinnedToolsTop
|
||||||
|
@ -569,7 +571,7 @@ jQuery( document ).ready( function($) {
|
||||||
// Adjust when collapsing the menu, changing the columns, changing the body class.
|
// 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() {
|
.on( 'postbox-toggled.editor-expand', function() {
|
||||||
if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > 20 ) {
|
if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
|
||||||
fixedSideBottom = true;
|
fixedSideBottom = true;
|
||||||
window.scrollBy( 0, -1 );
|
window.scrollBy( 0, -1 );
|
||||||
adjust();
|
adjust();
|
||||||
|
|
Loading…
Reference in New Issue