WordPress.org

Make WordPress Core

Changeset 29279


Ignore:
Timestamp:
07/24/14 01:32:29 (3 years ago)
Author:
azaozz
Message:

Editor scrolling:

  • Improve TinyMCE resizing when a floated block is at the end of the content.
  • Improve setting the padding/margin under the toolbar on loading.
  • Add custom event on TinyMCE resizing and use it to adjust the pinning (if needed).

Part props avryl, see #28328.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r29049 r29279  
    378378    overflow: hidden; 
    379379} 
     380 
     381.wp-fullscreen-wrap #content-textarea-clone { 
     382    display: none; 
     383} 
     384 
     385/* editor-expand.js override */ 
     386.wp-fullscreen-wrap { 
     387    padding-top: 0 !important; 
     388} 
     389 
     390.wp-fullscreen-wrap .wp-editor-area { 
     391    margin-top: 0 !important; 
     392} 
     393 
     394.wp-fullscreen-wrap .mce-edit-area { 
     395    padding-top: 0 !important; 
     396} 
     397/* end editor-expand.js override */ 
    380398 
    381399#timestampdiv select { 
  • trunk/src/wp-admin/js/editor-expand.js

    r29186 r29279  
    4242    } ); 
    4343 
    44     $textEditor.on( 'keyup', function() { 
    45         var range = document.createRange(), 
    46             start = $textEditor[0].selectionStart, 
    47             end = $textEditor[0].selectionEnd, 
     44    $textEditor.on( 'keyup', function( event ) { 
     45        var VK = jQuery.ui.keyCode, 
     46            key = event.keyCode, 
     47            range = document.createRange(), 
     48            selStart = $textEditor[0].selectionStart, 
     49            selEnd = $textEditor[0].selectionEnd, 
    4850            textNode = $textEditorClone[0].firstChild, 
    4951            windowHeight = $window.height(), 
     52            buffer = 10, 
    5053            offset, cursorTop, cursorBottom, editorTop, editorBottom; 
    5154 
    52         if ( start && end && start !== end ) { 
    53             return; 
    54         } 
    55  
    56         range.setStart( textNode, start ); 
    57         range.setEnd( textNode, end + 1 ); 
     55        if ( selStart && selEnd && selStart !== selEnd ) { 
     56            return; 
     57        } 
     58 
     59        // These are not TinyMCE ranges. 
     60        try { 
     61            range.setStart( textNode, selStart ); 
     62            range.setEnd( textNode, selEnd + 1 ); 
     63        } catch ( ex ) {} 
    5864 
    5965        offset = range.getBoundingClientRect(); 
     
    6369        } 
    6470 
    65         cursorTop = offset.top; 
    66         cursorBottom = cursorTop + offset.height; 
    67         editorTop = $adminBar.outerHeight() + $textTop.outerHeight(); 
     71        cursorTop = offset.top - buffer; 
     72        cursorBottom = cursorTop + offset.height + buffer; 
     73        editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight(); 
    6874        editorBottom = windowHeight - $bottom.outerHeight(); 
    6975 
    70         if ( cursorTop < editorTop || cursorBottom > editorBottom ) { 
    71             window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 ); 
     76        if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) { 
     77            window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop ); 
     78        } else if ( cursorBottom > editorBottom ) { 
     79            window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom ); 
    7280        } 
    7381    } ); 
     
    7886        } 
    7987 
    80         var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(), 
    81             textEditorHeight = $textEditor.height(); 
     88        var textEditorHeight = $textEditor.height(), 
     89            hiddenHeight; 
     90 
     91        $textEditorClone.width( $textEditor.width() ); 
     92        $textEditorClone.text( $textEditor.val() + '&nbsp;' ); 
     93 
     94        hiddenHeight = $textEditorClone.height(); 
    8295 
    8396        if ( hiddenHeight < 300 ) { 
     
    91104        $textEditor.height( hiddenHeight ); 
    92105 
    93         adjust( 'resize' ); 
     106        adjust(); 
    94107    } 
    95108 
     
    104117        editorInstance = editor; 
    105118 
    106         // Resizing will be handled by the autoresize plugin. 
    107         editor.theme.resizeTo = function() {}; 
    108  
    109119        // Set the minimum height to the initial viewport height. 
    110120        editor.settings.autoresize_min_height = 300; 
     
    119129            setTimeout( function() { 
    120130                editor.execCommand( 'wpAutoResize' ); 
    121                 adjust( 'resize' ); 
    122             }, 200 ); 
     131                adjust(); 
     132            }, 300 ); 
    123133        } ); 
    124134 
     
    196206        editor.on( 'hide', function() { 
    197207            textEditorResize(); 
    198             adjust( 'resize' ); 
     208            adjust(); 
    199209        } ); 
    200210 
    201211        // Adjust when the editor resizes. 
    202         editor.on( 'nodechange setcontent keyup FullscreenStateChanged', function() { 
    203             adjust( 'resize' ); 
    204         } ); 
    205  
    206         editor.on( 'wp-toolbar-toggle', function() { 
    207             $visualEditor.css( { 
    208                 paddingTop: $visualTop.outerHeight() 
    209             } ); 
     212        editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() { 
     213            adjust(); 
    210214        } ); 
    211215 
    212216        // And adjust "immediately". 
    213217        // Allow some time to load CSS etc. 
    214         setTimeout( function() { 
    215             $visualEditor.css( { 
    216                 paddingTop: $visualTop.outerHeight() 
    217             } ); 
    218  
    219             adjust( 'resize' ); 
    220         }, 500 ); 
    221     } ); 
    222  
    223     // Adjust when the window is scrolled or resized. 
    224     $window.on( 'scroll resize', function( event ) { 
    225         adjust( event.type ); 
    226     } ); 
    227  
    228     // Adjust when exiting fullscreen mode. 
    229     fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() { 
    230         adjust( 'resize' ); 
    231     } ); 
    232  
    233     // Adjust when collapsing the menu. 
    234     $document.on( 'wp-collapse-menu.editor-expand', function() { 
    235         adjust( 'resize' ); 
    236     } ) 
    237  
    238     // Adjust when changing the columns. 
    239     .on( 'postboxes-columnchange.editor-expand', function() { 
    240         adjust( 'resize' ); 
    241     } ) 
    242  
    243     // Adjust when changing the body class. 
    244     .on( 'editor-classchange.editor-expand', function() { 
    245         adjust( 'resize' ); 
     218        initialResize( adjust ); 
    246219    } ); 
    247220 
    248221    // Adjust the toolbars based on the active editor mode. 
    249     function adjust( eventType ) { 
     222    function adjust( type ) { 
    250223        // Make sure we're not in fullscreen mode. 
    251224        if ( fullscreen && fullscreen.settings.visible ) { 
     
    258231            windowWidth = $window.width(), 
    259232            adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0, 
    260             $top, $editor, visual, 
     233            resize = type !== 'scroll', 
     234            visual = ( editorInstance && ! editorInstance.isHidden() ), 
     235            $top, $editor, 
    261236            toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight; 
    262237 
    263         // Visual editor. 
    264         if ( editorInstance && ! editorInstance.isHidden() ) { 
     238        if ( visual ) { 
    265239            $top = $visualTop; 
    266240            $editor = $visualEditor; 
    267             visual = true; 
    268  
    269             // Doesn't hide the panel of 'styleselect'. :( 
    270             tinymce.each( editorInstance.controlManager.buttons, function( button ) { 
    271                 if ( button._active && ( button.type === 'colorbutton' || button.type === 'panelbutton' || button.type === 'menubutton' ) ) { 
    272                     button.hidePanel(); 
    273                 } 
    274             } ); 
    275         // Text editor. 
    276241        } else { 
    277242            $top = $textTop; 
     
    288253 
    289254        // Maybe pin the top. 
    290         if ( ( ! fixedTop || eventType === 'resize' ) && 
     255        if ( ( ! fixedTop || resize ) && 
    291256                // Handle scrolling down. 
    292257                ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) && 
     
    308273            } ); 
    309274        // Maybe unpin the top. 
    310         } else if ( fixedTop || eventType === 'resize' ) { 
     275        } else if ( fixedTop || resize ) { 
    311276            // Handle scrolling up. 
    312277            if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) { 
     
    343308 
    344309        // Maybe adjust the bottom bar. 
    345         if ( ( ! fixedBottom || eventType === 'resize' ) && 
     310        if ( ( ! fixedBottom || resize ) && 
    346311                // + 1 for the border around the .wp-editor-container. 
    347312                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) { 
     
    354319                borderTop: '1px solid #dedede' 
    355320            } ); 
    356         } else if ( fixedBottom && 
     321        } else if ( ( fixedBottom || resize ) && 
    357322                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) { 
    358323            fixedBottom = false; 
     
    365330            } ); 
    366331        } 
     332 
     333        if ( resize ) { 
     334            $contentWrap.css( { 
     335                paddingTop: $tools.outerHeight() 
     336            } ); 
     337 
     338            if ( visual ) { 
     339                $visualEditor.css( { 
     340                    paddingTop: $visualTop.outerHeight() 
     341                } ); 
     342            } else { 
     343                $textEditor.css( { 
     344                    marginTop: $textTop.outerHeight() 
     345                } ); 
     346                $textEditorClone.width( $textEditor.width() ); 
     347            } 
     348        } 
    367349    } 
    368350 
    369     textEditorResize(); 
    370  
    371     $tools.css( { 
    372         position: 'absolute', 
    373         top: 0, 
    374         width: $contentWrap.width() 
    375     } ); 
    376  
    377     $contentWrap.css( { 
    378         paddingTop: $tools.outerHeight() 
    379     } ); 
    380  
    381     // This needs to execute after quicktags is ready or a button is added... 
    382     setTimeout( function() { 
    383         $textEditor.css( { 
    384             paddingTop: $textTop.outerHeight() + parseInt( $textEditor.css( 'padding-top' ), 10 ) 
    385         } ); 
    386     }, 500 ); 
     351    function initialResize( callback ) { 
     352        for ( var i = 1; i < 6; i++ ) { 
     353            setTimeout( callback, 500 * i ); 
     354        } 
     355    } 
     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 entering/exiting fullscreen mode. 
     363    fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() { 
     364        textEditorResize(); 
     365        adjust(); 
     366    } ); 
     367 
     368    // Adjust when collapsing the menu, changing the columns, changing the body class. 
     369    $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust ); 
     370 
     371    // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready. 
     372    if ( $contentWrap.hasClass( 'html-active' ) ) { 
     373        initialResize( function() { 
     374            adjust(); 
     375            textEditorResize(); 
     376        } ); 
     377    } 
    387378}); 
  • trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js

    r29185 r29279  
    4343        } 
    4444 
     45        e = e || {}; 
    4546        body = doc.body; 
    4647        docElm = doc.documentElement; 
     
    6061        marginBottom = editor.dom.getStyle( body, 'margin-bottom', true ); 
    6162        myHeight = body.offsetHeight + parseInt( marginTop, 10 ) + parseInt( marginBottom, 10 ); 
     63 
     64        // IE < 11, other? 
     65        if ( myHeight && myHeight < docElm.offsetHeight ) { 
     66            myHeight = docElm.offsetHeight; 
     67        } 
    6268 
    6369        // Make sure we have a valid height 
     
    94100                resize( e ); 
    95101            } 
     102 
     103            editor.fire( 'wp-autoresize', { height: resizeHeight } ); 
    96104        } 
    97105    } 
     
    103111    function wait( times, interval, callback ) { 
    104112        setTimeout( function() { 
    105             resize({}); 
     113            resize(); 
    106114 
    107115            if ( times-- ) { 
     
    124132            // Add appropriate listeners for resizing the content area 
    125133            editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize ); 
     134            resize(); 
    126135        } 
    127136    } 
    128137 
    129138    function off() { 
     139        var doc; 
     140 
    130141        // Don't turn off if the setting is 'on' 
    131142        if ( ! settings.wp_autoresize_on ) { 
     143            doc = editor.getDoc(); 
    132144            editor.dom.removeClass( editor.getBody(), 'wp-autoresize' ); 
    133145            editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize ); 
     146            doc.body.style.overflowY = 'auto'; 
     147            doc.documentElement.style.overflowY = 'auto'; // Old IE 
    134148            oldSize = 0; 
    135149        } 
     
    159173    } 
    160174 
     175    // Reset the stored size 
     176    editor.on( 'show', function() { 
     177        oldSize = 0; 
     178    }); 
     179 
    161180    // Register the command 
    162181    editor.addCommand( 'wpAutoResize', resize ); 
Note: See TracChangeset for help on using the changeset viewer.