WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Editor scrolling: 

- Add a Screen Option to turn it on/off, and on()/off() methods from JS. Store the user preference.
- Fix delayed calls to resize() in the TinyMCE autoresize plugin.
See #28328.
Built from https://develop.svn.wordpress.org/trunk@29336


git-svn-id: http://core.svn.wordpress.org/trunk@29116 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-08-01 02:43:17 +00:00
parent 2dda137191
commit b9886e92e3
13 changed files with 201 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wp-admin/css/edit-rtl.css
View File

@ -355,12 +355,21 @@ td.plugin-title p {
#content-resize-handle {
background: transparent url(../images/resize.gif) no-repeat scroll left bottom;
width: 12px;
cursor: row-resize;
}
.rtl #content-resize-handle {
background: transparent url(../images/resize-rtl.gif) no-repeat scroll right bottom;
}
.wp-editor-expand #content-resize-handle {
display: none;
}
#postdivrich #content {
resize: none;
}
#wp-word-count {
display: block;
padding: 2px 10px;

9
wp-admin/css/edit.css
View File

@ -355,12 +355,21 @@ td.plugin-title p {
#content-resize-handle {
background: transparent url(../images/resize.gif) no-repeat scroll right bottom;
width: 12px;
cursor: row-resize;
}
.rtl #content-resize-handle {
background: transparent url(../images/resize-rtl.gif) no-repeat scroll left bottom;
}
.wp-editor-expand #content-resize-handle {
display: none;
}
#postdivrich #content {
resize: none;
}
#wp-word-count {
display: block;
padding: 2px 10px;

2
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/edit-form-advanced.php
View File

@ -490,7 +490,7 @@ do_action( 'edit_form_after_title', $post );
if ( post_type_supports($post_type, 'editor') ) {
?>
<div id="postdivrich" class="postarea edit-form-section">
<div id="postdivrich" class="postarea edit-form-section<?php if ( get_user_setting( 'editor_expand', 'on' ) === 'on' ) { echo ' wp-editor-expand'; } ?>">
<?php wp_editor( $post->post_content, 'content', array(
'dfw' => true,
@ -499,7 +499,7 @@ if ( post_type_supports($post_type, 'editor') ) {
'editor_height' => 360,
'tinymce' => array(
'resize' => false,
'wp_autoresize_on' => ! empty( $_wp_autoresize_on ),
'wp_autoresize_on' => ( ! empty( $_wp_autoresize_on ) && get_user_setting( 'editor_expand', 'on' ) === 'on' ),
'add_unload_trigger' => false,
),
) ); ?>

5
wp-admin/includes/screen.php
View File

@ -1110,6 +1110,11 @@ final class WP_Screen {
<?php
endfor; ?>
</div>
<div class="editor-expand hidden">
<label for="editor-expand-toggle">
<input type="checkbox" id="editor-expand-toggle" <?php checked( get_user_setting( 'editor_expand', 'on' ) === 'on' ); ?> />
<?php _e( 'Expand the editor to match the window height.' ); ?></label>
</div>
<?php
}

202
wp-admin/js/editor-expand.js
View File

@ -6,6 +6,7 @@ jQuery( document ).ready( function($) {
var $window = $( window ),
$document = $( document ),
$adminBar = $( '#wpadminbar' ),
$wrap = $( '#postdivrich' ),
$contentWrap = $( '#wp-content-wrap' ),
$tools = $( '#wp-content-editor-tools' ),
$visualTop,
@ -15,18 +16,15 @@ jQuery( document ).ready( function($) {
$textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
$bottom = $( '#post-status-info' ),
$statusBar,
buffer = 200,
fullscreen = window.wp.editor && window.wp.editor.fullscreen,
editorInstance,
mceEditor,
mceBind = function(){},
mceUnbind = function(){},
fixedTop = false,
fixedBottom = false;
$textEditorClone.insertAfter( $textEditor );
// use to enable/disable
$contentWrap.addClass( 'wp-editor-expand' );
$( '#content-resize-handle' ).hide();
$textEditorClone.css( {
'font-family': $textEditor.css( 'font-family' ),
'font-size': $textEditor.css( 'font-size' ),
@ -37,11 +35,7 @@ jQuery( document ).ready( function($) {
'word-wrap': 'break-word'
} );
$textEditor.on( 'focus input propertychange', function() {
textEditorResize();
} );
$textEditor.on( 'keyup', function( event ) {
function textEditorKeyup( event ) {
var VK = jQuery.ui.keyCode,
key = event.keyCode,
range = document.createRange(),
@ -78,10 +72,10 @@ jQuery( document ).ready( function($) {
} else if ( cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
}
} );
}
function textEditorResize() {
if ( editorInstance && ! editorInstance.isHidden() ) {
if ( mceEditor && ! mceEditor.isHidden() ) {
return;
}
@ -114,7 +108,7 @@ jQuery( document ).ready( function($) {
}
// Copy the editor instance.
editorInstance = editor;
mceEditor = editor;
// Set the minimum height to the initial viewport height.
editor.settings.autoresize_min_height = 300;
@ -124,7 +118,7 @@ jQuery( document ).ready( function($) {
$visualEditor = $contentWrap.find( '.mce-edit-area' );
$statusBar = $contentWrap.find( '.mce-statusbar' ).filter( ':visible' );
function getCursorOffset() {
function mceGetCursorOffset() {
var node = editor.selection.getNode(),
view, offset;
@ -143,10 +137,10 @@ jQuery( document ).ready( function($) {
// 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 ) {
function mceKeyup( event ) {
var VK = tinymce.util.VK,
key = event.keyCode,
offset = getCursorOffset(),
offset = mceGetCursorOffset(),
windowHeight = $window.height(),
buffer = 10,
cursorTop, cursorBottom, editorTop, editorBottom;
@ -172,29 +166,41 @@ jQuery( document ).ready( function($) {
} else if ( cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
}
} );
}
// Adjust when switching editor modes.
editor.on( 'show', function() {
function mceShow() {
setTimeout( function() {
editor.execCommand( 'wpAutoResize' );
adjust();
}, 300 );
} );
}
editor.on( 'hide', function() {
function mceHide() {
textEditorResize();
adjust();
} );
}
// Adjust when the editor resizes.
editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() {
adjust();
} );
mceBind = function() {
editor.on( 'keyup', mceKeyup );
editor.on( 'show', mceShow );
editor.on( 'hide', mceHide );
// Adjust when the editor resizes.
editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
};
// And adjust "immediately".
// Allow some time to load CSS etc.
initialResize( adjust );
mceUnbind = function() {
editor.off( 'keyup', mceKeyup );
editor.off( 'show', mceShow );
editor.off( 'hide', mceHide );
editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
};
if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
// Adjust "immediately"
mceBind();
initialResize( adjust );
}
} );
// Adjust the toolbars based on the active editor mode.
@ -210,7 +216,8 @@ jQuery( document ).ready( function($) {
windowWidth = $window.width(),
adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
resize = type !== 'scroll',
visual = ( editorInstance && ! editorInstance.isHidden() ),
visual = ( mceEditor && ! mceEditor.isHidden() ),
buffer = 200,
$top, $editor,
toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
@ -327,31 +334,132 @@ jQuery( document ).ready( function($) {
}
}
function fullscreenHide() {
textEditorResize();
adjust();
}
function initialResize( callback ) {
for ( var i = 1; i < 6; i++ ) {
setTimeout( callback, 500 * i );
}
}
// Adjust when the window is scrolled or resized.
$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
adjust( event.type );
} );
function on() {
// Scroll to the top when triggering this from JS.
// Ensures toolbars are pinned properly.
if ( window.pageYOffset && window.pageYOffset > 130 ) {
window.scrollTo( window.pageXOffset, 0 );
}
// Adjust when entering/exiting fullscreen mode.
fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
textEditorResize();
adjust();
} );
$wrap.addClass( 'wp-editor-expand' );
// 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 );
// Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
if ( $contentWrap.hasClass( 'html-active' ) ) {
initialResize( function() {
adjust();
textEditorResize();
// Adjust when the window is scrolled or resized.
$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
adjust( event.type );
} );
// 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 );
$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
$textEditor.on( 'keyup.editor-expand', textEditorKeyup );
mceBind();
// Adjust when entering/exiting fullscreen mode.
fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
if ( mceEditor ) {
mceEditor.settings.wp_autoresize_on = true;
mceEditor.execCommand( 'wpAutoResizeOn' );
if ( ! mceEditor.isHidden() ) {
mceEditor.execCommand( 'wpAutoResize' );
}
}
if ( ! mceEditor || mceEditor.isHidden() ) {
textEditorResize();
}
adjust();
}
function off() {
var height = window.getUserSetting('ed_size');
// Scroll to the top when triggering this from JS.
// Ensures toolbars are reset properly.
if ( window.pageYOffset && window.pageYOffset > 130 ) {
window.scrollTo( window.pageXOffset, 0 );
}
$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 );
mceUnbind();
// Adjust when entering/exiting fullscreen mode.
fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
// Reset all css
$.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor ], function( i, element ) {
element && element.attr( 'style', '' );
});
if ( mceEditor ) {
mceEditor.settings.wp_autoresize_on = false;
mceEditor.execCommand( 'wpAutoResizeOff' );
if ( ! mceEditor.isHidden() ) {
$textEditor.hide();
if ( height ) {
mceEditor.theme.resizeTo( null, height );
}
}
}
if ( height ) {
$textEditor.height( height );
}
}
// Start on load
if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
on();
// Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
if ( $contentWrap.hasClass( 'html-active' ) ) {
initialResize( function() {
adjust();
textEditorResize();
} );
}
}
// Show the on/off checkbox
$( '#adv-settings .editor-expand' ).show();
$( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
if ( $(this).prop( 'checked' ) ) {
on();
window.setUserSetting( 'editor_expand', 'on' );
} else {
off();
window.setUserSetting( 'editor_expand', 'off' );
}
});
// Expose on() and off()
window.editorExpand = {
on: on,
off: off
};
});

2
wp-admin/js/editor-expand.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
wp-admin/js/post.js
View File

@ -1005,7 +1005,7 @@ jQuery(document).ready( function($) {
var editor, offset, mce,
$textarea = $('textarea#content'),
$handle = $('#post-status-info'),
$contentWrap = $('#wp-content-wrap');
$postdivrich = $('#postdivrich');
// No point for touch devices
if ( ! $textarea.length || 'ontouchstart' in window ) {
@ -1015,7 +1015,7 @@ jQuery(document).ready( function($) {
}
function dragging( event ) {
if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
return;
}
@ -1031,7 +1031,7 @@ jQuery(document).ready( function($) {
function endDrag() {
var height, toolbarHeight;
if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
return;
}
@ -1057,8 +1057,6 @@ jQuery(document).ready( function($) {
}
}
$textarea.css( 'resize', 'none' );
$handle.on( 'mousedown.wp-editor-resize', function( event ) {
if ( typeof tinymce !== 'undefined' ) {
editor = tinymce.get('content');

2
wp-admin/js/post.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
wp-includes/js/tinymce/plugins/wpautoresize/plugin.js
View File

@ -21,7 +21,9 @@
* it's initialized.
*/
tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
var settings = editor.settings, oldSize = 0;
var settings = editor.settings,
oldSize = 0,
isActive = false;
function isFullscreen() {
return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
@ -37,8 +39,12 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
function resize( e ) {
var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight, marginTop, marginBottom;
if ( ! isActive ) {
return;
}
doc = editor.getDoc();
if (!doc) {
if ( ! doc ) {
return;
}
@ -128,6 +134,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
function on() {
if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
isActive = true;
editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
// Add appropriate listeners for resizing the content area
editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
@ -140,6 +147,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
// Don't turn off if the setting is 'on'
if ( ! settings.wp_autoresize_on ) {
isActive = false;
doc = editor.getDoc();
editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
@ -151,6 +159,8 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
if ( settings.wp_autoresize_on ) {
// Turn resizing on when the editor loads
isActive = true;
editor.on( 'init', function() {
editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
});
@ -163,7 +173,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
if ( editor.getParam( 'autoresize_on_init', true ) ) {
editor.on( 'init', function() {
// Hit it 20 times in 100 ms intervals
// Hit it 10 times in 200 ms intervals
wait( 10, 200, function() {
// Hit it 5 times in 1 sec intervals
wait( 5, 1000 );

2
wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js vendored
View File

@ -1 +1 @@
tinymce.PluginManager.add("wpautoresize",function(a){function b(){return a.plugins.fullscreen&&a.plugins.fullscreen.isFullscreen()}function c(d){var e,f,i,j,k,l,m,n,o=tinymce.DOM;if(f=a.getDoc()){if(d=d||{},i=f.body,j=f.documentElement,k=g.autoresize_min_height,!i||d&&"setcontent"===d.type&&d.initial||b())return void(i&&j&&(i.style.overflowY="auto",j.style.overflowY="auto"));m=a.dom.getStyle(i,"margin-top",!0),n=a.dom.getStyle(i,"margin-bottom",!0),l=i.offsetHeight+parseInt(m,10)+parseInt(n,10),l&&l<j.offsetHeight&&(l=j.offsetHeight),(isNaN(l)||0>=l)&&(l=tinymce.Env.ie?i.scrollHeight:tinymce.Env.webkit&&0===i.clientHeight?0:i.offsetHeight),l>g.autoresize_min_height&&(k=l),g.autoresize_max_height&&l>g.autoresize_max_height?(k=g.autoresize_max_height,i.style.overflowY="auto",j.style.overflowY="auto"):(i.style.overflowY="hidden",j.style.overflowY="hidden",i.scrollTop=0),k!==h&&(e=k-h,o.setStyle(o.get(a.id+"_ifr"),"height",k+"px"),h=k,tinymce.isWebKit&&0>e&&c(d),a.fire("wp-autoresize",{height:k}))}}function d(a,b,e){setTimeout(function(){c(),a--?d(a,b,e):e&&e()},b)}function e(){a.dom.hasClass(a.getBody(),"wp-autoresize")||(a.dom.addClass(a.getBody(),"wp-autoresize"),a.on("nodechange setcontent keyup FullscreenStateChanged",c),c())}function f(){var b;g.wp_autoresize_on||(b=a.getDoc(),a.dom.removeClass(a.getBody(),"wp-autoresize"),a.off("nodechange setcontent keyup FullscreenStateChanged",c),b.body.style.overflowY="auto",b.documentElement.style.overflowY="auto",h=0)}var g=a.settings,h=0;a.settings.inline||(g.autoresize_min_height=parseInt(a.getParam("autoresize_min_height",a.getElement().offsetHeight),10),g.autoresize_max_height=parseInt(a.getParam("autoresize_max_height",0),10),g.wp_autoresize_on&&(a.on("init",function(){a.dom.addClass(a.getBody(),"wp-autoresize")}),a.on("nodechange keyup FullscreenStateChanged",c),a.on("setcontent",function(){d(3,100)}),a.getParam("autoresize_on_init",!0)&&a.on("init",function(){d(10,200,function(){d(5,1e3)})})),a.on("show",function(){h=0}),a.addCommand("wpAutoResize",c),a.addCommand("wpAutoResizeOn",e),a.addCommand("wpAutoResizeOff",f))});
tinymce.PluginManager.add("wpautoresize",function(a){function b(){return a.plugins.fullscreen&&a.plugins.fullscreen.isFullscreen()}function c(d){var e,f,j,k,l,m,n,o,p=tinymce.DOM;if(i&&(f=a.getDoc())){if(d=d||{},j=f.body,k=f.documentElement,l=g.autoresize_min_height,!j||d&&"setcontent"===d.type&&d.initial||b())return void(j&&k&&(j.style.overflowY="auto",k.style.overflowY="auto"));n=a.dom.getStyle(j,"margin-top",!0),o=a.dom.getStyle(j,"margin-bottom",!0),m=j.offsetHeight+parseInt(n,10)+parseInt(o,10),m&&m<k.offsetHeight&&(m=k.offsetHeight),(isNaN(m)||0>=m)&&(m=tinymce.Env.ie?j.scrollHeight:tinymce.Env.webkit&&0===j.clientHeight?0:j.offsetHeight),m>g.autoresize_min_height&&(l=m),g.autoresize_max_height&&m>g.autoresize_max_height?(l=g.autoresize_max_height,j.style.overflowY="auto",k.style.overflowY="auto"):(j.style.overflowY="hidden",k.style.overflowY="hidden",j.scrollTop=0),l!==h&&(e=l-h,p.setStyle(p.get(a.id+"_ifr"),"height",l+"px"),h=l,tinymce.isWebKit&&0>e&&c(d),a.fire("wp-autoresize",{height:l}))}}function d(a,b,e){setTimeout(function(){c(),a--?d(a,b,e):e&&e()},b)}function e(){a.dom.hasClass(a.getBody(),"wp-autoresize")||(i=!0,a.dom.addClass(a.getBody(),"wp-autoresize"),a.on("nodechange setcontent keyup FullscreenStateChanged",c),c())}function f(){var b;g.wp_autoresize_on||(i=!1,b=a.getDoc(),a.dom.removeClass(a.getBody(),"wp-autoresize"),a.off("nodechange setcontent keyup FullscreenStateChanged",c),b.body.style.overflowY="auto",b.documentElement.style.overflowY="auto",h=0)}var g=a.settings,h=0,i=!1;a.settings.inline||(g.autoresize_min_height=parseInt(a.getParam("autoresize_min_height",a.getElement().offsetHeight),10),g.autoresize_max_height=parseInt(a.getParam("autoresize_max_height",0),10),g.wp_autoresize_on&&(i=!0,a.on("init",function(){a.dom.addClass(a.getBody(),"wp-autoresize")}),a.on("nodechange keyup FullscreenStateChanged",c),a.on("setcontent",function(){d(3,100)}),a.getParam("autoresize_on_init",!0)&&a.on("init",function(){d(10,200,function(){d(5,1e3)})})),a.on("show",function(){h=0}),a.addCommand("wpAutoResize",c),a.addCommand("wpAutoResizeOn",e),a.addCommand("wpAutoResizeOff",f))});

BIN
wp-includes/js/tinymce/wp-tinymce.js.gz
View File

Binary file not shown.