WordPress.org
Get WordPress

Make WordPress Core

Changeset 29336


Ignore:
Timestamp:
08/01/2014 02:42:30 AM (12 years ago)
Author:
azaozz
Message:

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.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/edit.css

    r29292 r29336  
    356356        background: transparent url(../images/resize.gif) no-repeat scroll right bottom;
    357357        width: 12px;
     358        cursor: row-resize;
    358359}
    359360
    360361.rtl #content-resize-handle {
    361362        background: transparent url(../images/resize-rtl.gif) no-repeat scroll left bottom;
     363}
     364
     365.wp-editor-expand #content-resize-handle {
     366        display: none;
     367}
     368
     369#postdivrich #content {
     370        resize: none;
    362371}
    363372

  • trunk/src/wp-admin/edit-form-advanced.php

    r29180 r29336  
    491491if ( post_type_supports($post_type, 'editor') ) {
    492492?>
    493 <div id="postdivrich" class="postarea edit-form-section">
     493<div id="postdivrich" class="postarea edit-form-section<?php if ( get_user_setting( 'editor_expand', 'on' ) === 'on' ) { echo ' wp-editor-expand'; } ?>">
    494494
    495495<?php wp_editor( $post->post_content, 'content', array(
    … …  
    500500        'tinymce' => array(
    501501                'resize' => false,
    502                 'wp_autoresize_on' => ! empty( $_wp_autoresize_on ),
     502                'wp_autoresize_on' => ( ! empty( $_wp_autoresize_on ) && get_user_setting( 'editor_expand', 'on' ) === 'on' ),
    503503                'add_unload_trigger' => false,
    504504        ),

  • trunk/src/wp-admin/includes/screen.php

    r29280 r29336  
    11111111                        endfor; ?>
    11121112                </div>
     1113                <div class="editor-expand hidden">
     1114                        <label for="editor-expand-toggle">
     1115                        <input type="checkbox" id="editor-expand-toggle" <?php checked( get_user_setting( 'editor_expand', 'on' ) === 'on' ); ?> />
     1116                        <?php _e( 'Expand the editor to match the window height.' ); ?></label>
     1117                </div>
    11131118                <?php
    11141119        }

  • trunk/src/wp-admin/js/editor-expand.js

    r29302 r29336  
    77                $document = $( document ),
    88                $adminBar = $( '#wpadminbar' ),
     9                $wrap = $( '#postdivrich' ),
    910                $contentWrap = $( '#wp-content-wrap' ),
    1011                $tools = $( '#wp-content-editor-tools' ),
    … …  
    1617                $bottom = $( '#post-status-info' ),
    1718                $statusBar,
    18                 buffer = 200,
    1919                fullscreen = window.wp.editor && window.wp.editor.fullscreen,
    20                 editorInstance,
     20                mceEditor,
     21                mceBind = function(){},
     22                mceUnbind = function(){},
    2123                fixedTop = false,
    2224                fixedBottom = false;
    2325
    2426        $textEditorClone.insertAfter( $textEditor );
    25 
    26         // use to enable/disable
    27         $contentWrap.addClass( 'wp-editor-expand' );
    28         $( '#content-resize-handle' ).hide();
    2927
    3028        $textEditorClone.css( {
    … …  
    3836        } );
    3937
    40         $textEditor.on( 'focus input propertychange', function() {
    41                 textEditorResize();
    42         } );
    43 
    44         $textEditor.on( 'keyup', function( event ) {
     38        function textEditorKeyup( event ) {
    4539                var VK = jQuery.ui.keyCode,
    4640                        key = event.keyCode,
    … …  
    7973                        window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
    8074                }
    81         } );
     75        }
    8276
    8377        function textEditorResize() {
    84                 if ( editorInstance && ! editorInstance.isHidden() ) {
     78                if ( mceEditor && ! mceEditor.isHidden() ) {
    8579                        return;
    8680                }
    … …  
    115109
    116110                // Copy the editor instance.
    117                 editorInstance = editor;
     111                mceEditor = editor;
    118112
    119113                // Set the minimum height to the initial viewport height.
    … …  
    125119                $statusBar = $contentWrap.find( '.mce-statusbar' ).filter( ':visible' );
    126120
    127                 function getCursorOffset() {
     121                function mceGetCursorOffset() {
    128122                        var node = editor.selection.getNode(),
    129123                                view, offset;
    … …  
    144138                // Some browsers will scroll to the middle,
    145139                // others to the top/bottom of the *window* when moving the cursor out of the viewport.
    146                 editor.on( 'keyup', function( event ) {
     140                function mceKeyup( event ) {
    147141                        var VK = tinymce.util.VK,
    148142                                key = event.keyCode,
    149                                 offset = getCursorOffset(),
     143                                offset = mceGetCursorOffset(),
    150144                                windowHeight = $window.height(),
    151145                                buffer = 10,
    … …  
    173167                                window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
    174168                        }
    175                 } );
     169                }
    176170
    177171                // Adjust when switching editor modes.
    178                 editor.on( 'show', function() {
     172                function mceShow() {
    179173                        setTimeout( function() {
    180174                                editor.execCommand( 'wpAutoResize' );
    181175                                adjust();
    182176                        }, 300 );
    183                 } );
    184 
    185                 editor.on( 'hide', function() {
     177                }
     178
     179                function mceHide() {
    186180                        textEditorResize();
    187181                        adjust();
    188                 } );
    189 
    190                 // Adjust when the editor resizes.
    191                 editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() {
    192                         adjust();
    193                 } );
    194 
    195                 // And adjust "immediately".
    196                 // Allow some time to load CSS etc.
    197                 initialResize( adjust );
     182                }
     183
     184                mceBind = function() {
     185                        editor.on( 'keyup', mceKeyup );
     186                        editor.on( 'show', mceShow );
     187                        editor.on( 'hide', mceHide );
     188                        // Adjust when the editor resizes.
     189                        editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
     190                };
     191
     192                mceUnbind = function() {
     193                        editor.off( 'keyup', mceKeyup );
     194                        editor.off( 'show', mceShow );
     195                        editor.off( 'hide', mceHide );
     196                        editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
     197                };
     198
     199                if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
     200                        // Adjust "immediately"
     201                        mceBind();
     202                        initialResize( adjust );
     203                }
    198204        } );
    199205
    … …  
    211217                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    212218                        resize = type !== 'scroll',
    213                         visual = ( editorInstance && ! editorInstance.isHidden() ),
     219                        visual = ( mceEditor && ! mceEditor.isHidden() ),
     220                        buffer = 200,
    214221                        $top, $editor,
    215222                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    … …  
    328335        }
    329336
     337        function fullscreenHide() {
     338                textEditorResize();
     339                adjust();
     340        }
     341
    330342        function initialResize( callback ) {
    331343                for ( var i = 1; i < 6; i++ ) {
    … …  
    334346        }
    335347
    336         // Adjust when the window is scrolled or resized.
    337         $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
    338                 adjust( event.type );
    339         } );
    340 
    341         // Adjust when entering/exiting fullscreen mode.
    342         fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
    343                 textEditorResize();
     348        function on() {
     349                // Scroll to the top when triggering this from JS.
     350                // Ensures toolbars are pinned properly.
     351                if ( window.pageYOffset && window.pageYOffset > 130 ) {
     352                        window.scrollTo( window.pageXOffset, 0 );
     353                }
     354
     355                $wrap.addClass( 'wp-editor-expand' );
     356
     357                // Adjust when the window is scrolled or resized.
     358                $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
     359                        adjust( event.type );
     360                } );
     361
     362                // Adjust when collapsing the menu, changing the columns, changing the body class.
     363                $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
     364
     365                $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
     366                $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
     367                mceBind();
     368
     369                // Adjust when entering/exiting fullscreen mode.
     370                fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
     371
     372                if ( mceEditor ) {
     373                        mceEditor.settings.wp_autoresize_on = true;
     374                        mceEditor.execCommand( 'wpAutoResizeOn' );
     375
     376                        if ( ! mceEditor.isHidden() ) {
     377                                mceEditor.execCommand( 'wpAutoResize' );
     378                        }
     379                }
     380
     381                if ( ! mceEditor || mceEditor.isHidden() ) {
     382                        textEditorResize();
     383                }
     384
    344385                adjust();
    345         } );
    346 
    347         // Adjust when collapsing the menu, changing the columns, changing the body class.
    348         $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
    349 
    350         // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
    351         if ( $contentWrap.hasClass( 'html-active' ) ) {
    352                 initialResize( function() {
    353                         adjust();
    354                         textEditorResize();
    355                 } );
    356         }
     386        }
     387
     388        function off() {
     389                var height = window.getUserSetting('ed_size');
     390
     391                // Scroll to the top when triggering this from JS.
     392                // Ensures toolbars are reset properly.
     393                if ( window.pageYOffset && window.pageYOffset > 130 ) {
     394                        window.scrollTo( window.pageXOffset, 0 );
     395                }
     396
     397                $wrap.removeClass( 'wp-editor-expand' );
     398
     399                // Adjust when the window is scrolled or resized.
     400                $window.off( 'scroll.editor-expand resize.editor-expand' );
     401
     402                // Adjust when collapsing the menu, changing the columns, changing the body class.
     403                $document.off( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
     404
     405                $textEditor.off( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
     406                $textEditor.off( 'keyup.editor-expand', textEditorKeyup );
     407                mceUnbind();
     408
     409                // Adjust when entering/exiting fullscreen mode.
     410                fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
     411
     412                // Reset all css
     413                $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor ], function( i, element ) {
     414                        element && element.attr( 'style', '' );
     415                });
     416
     417                if ( mceEditor ) {
     418                        mceEditor.settings.wp_autoresize_on = false;
     419                        mceEditor.execCommand( 'wpAutoResizeOff' );
     420
     421                        if ( ! mceEditor.isHidden() ) {
     422                                $textEditor.hide();
     423
     424                                if ( height ) {
     425                                        mceEditor.theme.resizeTo( null, height );
     426                                }
     427                        }
     428                }
     429
     430                if ( height ) {
     431                        $textEditor.height( height );
     432                }
     433        }
     434
     435        // Start on load
     436        if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
     437                on();
     438
     439                // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
     440                if ( $contentWrap.hasClass( 'html-active' ) ) {
     441                        initialResize( function() {
     442                                adjust();
     443                                textEditorResize();
     444                        } );
     445                }
     446        }
     447
     448        // Show the on/off checkbox
     449        $( '#adv-settings .editor-expand' ).show();
     450        $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
     451                if ( $(this).prop( 'checked' ) ) {
     452                        on();
     453                        window.setUserSetting( 'editor_expand', 'on' );
     454                } else {
     455                        off();
     456                        window.setUserSetting( 'editor_expand', 'off' );
     457                }
     458        });
     459
     460        // Expose on() and off()
     461        window.editorExpand = {
     462                on: on,
     463                off: off
     464        };
    357465});

  • trunk/src/wp-admin/js/post.js

    r29117 r29336  
    10061006                        $textarea = $('textarea#content'),
    10071007                        $handle = $('#post-status-info'),
    1008                         $contentWrap = $('#wp-content-wrap');
     1008                        $postdivrich = $('#postdivrich');
    10091009
    10101010                // No point for touch devices
    … …  
    10161016
    10171017                function dragging( event ) {
    1018                         if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
     1018                        if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
    10191019                                return;
    10201020                        }
    … …  
    10321032                        var height, toolbarHeight;
    10331033
    1034                         if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
     1034                        if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
    10351035                                return;
    10361036                        }
    … …  
    10571057                        }
    10581058                }
    1059 
    1060                 $textarea.css( 'resize', 'none' );
    10611059
    10621060                $handle.on( 'mousedown.wp-editor-resize', function( event ) {

  • trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js

    r29279 r29336  
    2222 */
    2323tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
    24         var settings = editor.settings, oldSize = 0;
     24        var settings = editor.settings,
     25                oldSize = 0,
     26                isActive = false;
    2527
    2628        function isFullscreen() {
    … …  
    3840                var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight, marginTop, marginBottom;
    3941
     42                if ( ! isActive ) {
     43                        return;
     44                }
     45
    4046                doc = editor.getDoc();
    41                 if (!doc) {
     47                if ( ! doc ) {
    4248                        return;
    4349                }
    … …  
    129135        function on() {
    130136                if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
     137                        isActive = true;
    131138                        editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
    132139                        // Add appropriate listeners for resizing the content area
    … …  
    141148                // Don't turn off if the setting is 'on'
    142149                if ( ! settings.wp_autoresize_on ) {
     150                        isActive = false;
    143151                        doc = editor.getDoc();
    144152                        editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
    … …  
    152160        if ( settings.wp_autoresize_on ) {
    153161                // Turn resizing on when the editor loads
     162                isActive = true;
     163
    154164                editor.on( 'init', function() {
    155165                        editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
    … …  
    164174                if ( editor.getParam( 'autoresize_on_init', true ) ) {
    165175                        editor.on( 'init', function() {
    166                                 // Hit it 20 times in 100 ms intervals
     176                                // Hit it 10 times in 200 ms intervals
    167177                                wait( 10, 200, function() {
    168178                                        // Hit it 5 times in 1 sec intervals
Note: See TracChangeset for help on using the changeset viewer.