diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 8ef2f21061..e75d050523 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -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; diff --git a/src/wp-admin/edit-form-advanced.php b/src/wp-admin/edit-form-advanced.php index 5bfd4a8e6d..9529dd889e 100644 --- a/src/wp-admin/edit-form-advanced.php +++ b/src/wp-admin/edit-form-advanced.php @@ -490,7 +490,7 @@ do_action( 'edit_form_after_title', $post ); if ( post_type_supports($post_type, 'editor') ) { ?> -
+
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, ), ) ); ?> diff --git a/src/wp-admin/includes/screen.php b/src/wp-admin/includes/screen.php index ad7140f28e..7d07ac74e3 100644 --- a/src/wp-admin/includes/screen.php +++ b/src/wp-admin/includes/screen.php @@ -1110,6 +1110,11 @@ final class WP_Screen {
+
' ), $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 + }; }); diff --git a/src/wp-admin/js/post.js b/src/wp-admin/js/post.js index 73a685e530..45413f8e99 100644 --- a/src/wp-admin/js/post.js +++ b/src/wp-admin/js/post.js @@ -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'); diff --git a/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js b/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js index 47eb295c65..477fe05caf 100644 --- a/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js @@ -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 );