Skip to content

Commit

Permalink
Editor scrolling:
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@azaozz
azaozz committed Aug 1, 2014
1 parent 2dda137 commit b9886e9
Show file tree
Hide file tree
Showing 13 changed files with 201 additions and 62 deletions.
9 changes: 9 additions & 0 deletions wp-admin/css/edit-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions wp-admin/css/edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion wp-admin/css/wp-admin-rtl.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion wp-admin/css/wp-admin.min.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions wp-admin/edit-form-advanced.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@

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,
Expand All @@ -499,7 +499,7 @@
'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,
),
) ); ?>
Expand Down
5 changes: 5 additions & 0 deletions wp-admin/includes/screen.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1110,6 +1110,11 @@ public function render_screen_layout() {
<?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
}

Expand Down
202 changes: 155 additions & 47 deletions wp-admin/js/editor-expand.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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' ),
Expand All @@ -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(),
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;

Expand All @@ -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;
Expand All @@ -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();
} );
}

// And adjust "immediately".
// Allow some time to load CSS etc.
initialResize( 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 );
};

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.
Expand All @@ -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;

Expand Down Expand Up @@ -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 );
// Adjust when the window is scrolled or resized.
$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
adjust( event.type );
} );

// Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
if ( $contentWrap.hasClass( 'html-active' ) ) {
initialResize( function() {
adjust();
// 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
};
});
Loading

0 comments on commit b9886e9

Please sign in to comment.