WordPress.org
Get WordPress

Make WordPress Core

Changeset 29336


Ignore:
Timestamp:
08/01/2014 02:42:30 AM (10 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.