sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Editor scrolling: better "scroll into view" in the visual editor. Don't override MCE path focus style. Props avryl, see #28328.

Browse Source 
git-svn-id: https://develop.svn.wordpress.org/trunk@29186 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2014-07-16 04:05:13 +00:00
parent 850d8eb69e
commit 09f5183276
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/wp-admin/js/editor-expand.js
View File

@ -117,14 +117,23 @@ jQuery( document ).ready( function($) {
// Adjust when switching editor modes. // Adjust when switching editor modes.
editor.on( 'show', function() { editor.on( 'show', function() {
setTimeout( function() { setTimeout( function() {
editor.execCommand( 'mceAutoResize' ); editor.execCommand( 'wpAutoResize' );
adjust( 'resize' ); adjust( 'resize' );
}, 200 ); }, 200 );
} ); } );
editor.on( 'keyup', function() { // Make sure the cursor is always visible.
var offset = getCursorOffset(), // This is not only necessary to keep the cursor between the toolbars,
// but also to scroll the window when the cursor moves out of the viewport to a wpview.
// Setting a buffer > 0 will prevent the browser default.
// Some browsers will scroll to the middle,
// others to the top/bottom of the *window* when moving the cursor out of the viewport.
editor.on( 'keyup', function( event ) {
var VK = tinymce.util.VK,
key = event.keyCode,
offset = getCursorOffset(),
windowHeight = $window.height(), windowHeight = $window.height(),
buffer = 10,
cursorTop, cursorBottom, editorTop, editorBottom; cursorTop, cursorBottom, editorTop, editorBottom;
if ( ! offset ) { if ( ! offset ) {
@ -133,11 +142,15 @@ jQuery( document ).ready( function($) {
cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top; cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top;
cursorBottom = cursorTop + offset.height; cursorBottom = cursorTop + offset.height;
cursorTop = cursorTop - buffer;
cursorBottom = cursorBottom + buffer;
editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight(); editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight();
editorBottom = $window.height() - $bottom.outerHeight(); editorBottom = windowHeight - $bottom.outerHeight();
if ( cursorTop < editorTop || cursorBottom > editorBottom ) { if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 ); window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
} else if ( cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
} }
} ); } );
@ -145,7 +158,7 @@ jQuery( document ).ready( function($) {
var selection = editor.selection, var selection = editor.selection,
node = selection.getNode(), node = selection.getNode(),
range = selection.getRng(), range = selection.getRng(),
view, clone, right, offset; view, clone, offset;
if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) { if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) {
return; return;
@ -159,7 +172,6 @@ jQuery( document ).ready( function($) {
if ( clone.startContainer.length > 1 ) { if ( clone.startContainer.length > 1 ) {
if ( clone.startContainer.length > clone.endOffset ) { if ( clone.startContainer.length > clone.endOffset ) {
clone.setEnd( clone.startContainer, clone.endOffset + 1 ); clone.setEnd( clone.startContainer, clone.endOffset + 1 );
right = true;
} else { } else {
clone.setStart( clone.startContainer, clone.endOffset - 1 ); clone.setStart( clone.startContainer, clone.endOffset - 1 );
} }
@ -175,7 +187,7 @@ jQuery( document ).ready( function($) {
} }
if ( ! offset.height ) { if ( ! offset.height ) {
return false; return;
} }
return offset; return offset;

5
src/wp-includes/css/editor.css
View File

@ -181,11 +181,6 @@ div.mce-path {
line-height: 18px; line-height: 18px;
} }
.mce-path-item:focus {
background: none;
color: inherit;
}
.mce-toolbar .mce-btn, .mce-toolbar .mce-btn,
.qt-fullscreen { .qt-fullscreen {
border-color: transparent; border-color: transparent;