mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2025-10-16 12:05:38 +00:00
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. git-svn-id: https://develop.svn.wordpress.org/trunk@29336 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
parent
a8a936ebc5
commit
c94edd08bd
@ -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;
|
||||
|
||||
@ -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,
|
||||
),
|
||||
) ); ?>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
};
|
||||
});
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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 );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user