WordPress.org

Make WordPress Core

Changeset 29022


Ignore:
Timestamp:
07/08/2014 04:15:00 AM (4 years ago)
Author:
azaozz
Message:

TinyMCE wpView:

  • Improve the fake caret hide/show.
  • Improve getView() speed.
  • Add callback for showing the proper path when a view is selected. This currently doesn't work, will start working after we update TinyMCE.

props avryl, see #28567, #28595.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r29010 r29022  
    1313
    1414    function getView( node ) {
    15         return editor.dom.getParent( node, function( node ) {
    16             return editor.dom.hasClass( node, 'wpview-wrap' );
    17         });
     15        // Doing this directly is about 40% faster
     16        while ( node && node.parentNode ) {
     17            if ( node.className && (' ' + node.className + ' ').indexOf(' wpview-wrap ') !== -1 ) {
     18                return node;
     19            }
     20
     21            node = node.parentNode;
     22        }
     23
     24        return false;
    1825    }
    1926
     
    5663        var location = before ? 'before' : 'after',
    5764            offset = before ? 0 : 1;
     65        deselect();
    5866        editor.selection.setCursorLocation( editor.dom.select( '.wpview-selection-' + location, view )[0], offset );
    5967        editor.nodeChanged();
     
    111119        dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
    112120        dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
     121
     122        tinymce.DOM.addClass( editor.getContainer(), 'wpview-selected' );
    113123
    114124        // Make sure that the editor is focused.
     
    275285                deselectEventType;
    276286
     287            firstFocus = false;
     288
    277289            // Contain clicks inside the view wrapper
    278290            if ( view ) {
     
    485497        if ( keyCode === VK.LEFT ) {
    486498            setViewCursor( true, view );
    487             deselect();
    488499        } else if ( keyCode === VK.UP ) {
    489500            if ( view.previousSibling ) {
     
    491502                    setViewCursor( true, view.previousSibling );
    492503                } else {
     504                    deselect();
    493505                    selection.select( view.previousSibling, true );
    494506                    selection.collapse();
     
    497509                setViewCursor( true, view );
    498510            }
    499             deselect();
     511           
    500512        } else if ( keyCode === VK.RIGHT ) {
    501513            setViewCursor( false, view );
    502             deselect();
    503514        } else if ( keyCode === VK.DOWN ) {
    504515            if ( view.nextSibling ) {
     
    506517                    setViewCursor( false, view.nextSibling );
    507518                } else {
     519                    deselect();
    508520                    selection.setCursorLocation( view.nextSibling, 0 );
    509521                }
     
    511523                setViewCursor( false, view );
    512524            }
    513             deselect();
    514525        } else if ( keyCode === VK.ENTER ) {
    515526            handleEnter( view );
     
    587598        dom.removeClass( views, 'wpview-cursor-hide' );
    588599
    589         if ( view && editor.selection.isCollapsed() && focus ) {
    590             if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' ) {
    591                 setViewCursorTries = 0;
    592 
    593                 // Make sure the cursor arrived in the right node.
    594                 // This is necessary for Firefox.
    595                 if ( lKDN === view.previousSibling ) {
     600        if ( ! selected ) {
     601            tinymce.DOM.removeClass( editor.getContainer(), 'wpview-selected' );
     602        }
     603
     604        if ( focus ) {
     605            if ( view ) {
     606                if ( className === 'wpview-selection-before' || className === 'wpview-selection-after' && editor.selection.isCollapsed() ) {
     607                    setViewCursorTries = 0;
     608
     609                    deselect();
     610
     611                    tinymce.DOM.addClass( editor.getContainer(), 'wpview-selected' );
     612
     613                    // Make sure the cursor arrived in the right node.
     614                    // This is necessary for Firefox.
     615                    if ( lKDN === view.previousSibling ) {
     616                        setViewCursor( true, view );
     617                        return;
     618                    } else if ( lKDN === view.nextSibling ) {
     619                        setViewCursor( false, view );
     620                        return;
     621                    }
     622
     623                    dom.addClass( view, className );
     624
     625                    cursorInterval = setInterval( function() {
     626                        if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
     627                            dom.removeClass( view, 'wpview-cursor-hide' );
     628                        } else {
     629                            dom.addClass( view, 'wpview-cursor-hide' );
     630                        }
     631                    }, 500 );
     632                // If the cursor lands anywhere else in the view, set the cursor before it.
     633                // Only try this once to prevent a loop. (You never know.)
     634                } else if ( className !== 'wpview-clipboard' && ! setViewCursorTries ) {
     635                    deselect();
     636                    setViewCursorTries++;
    596637                    setViewCursor( true, view );
    597                     return;
    598                 } else if ( lKDN === view.nextSibling ) {
    599                     setViewCursor( false, view );
    600                     return;
    601                 }
    602 
    603                 dom.addClass( view, className );
    604 
    605                 cursorInterval = setInterval( function() {
    606                     if ( dom.hasClass( view, 'wpview-cursor-hide' ) ) {
    607                         dom.removeClass( view, 'wpview-cursor-hide' );
    608                     } else {
    609                         dom.addClass( view, 'wpview-cursor-hide' );
    610                     }
    611                 }, 500 );
    612             // If the cursor happens to be anywhere around the view, then set the cursor properly.
    613             // Only try this once to prevent a loop. (You never know.)
    614             } else if ( ! selected && ! setViewCursorTries ) {
    615                 setViewCursorTries++;
    616                 setViewCursor( true, view );
    617             }
     638                }
     639            } else {
     640                deselect();
     641            }
     642        }
     643    });
     644
     645    editor.on( 'resolvename', function( event ) {
     646        if ( editor.dom.hasClass( event.target, 'wpview-wrap' ) ) {
     647            event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'wpview';
     648            event.stopPropagation();
     649        } else if ( getView( event.target ) ) {
     650            event.preventDefault();
     651            event.stopPropagation();
    618652        }
    619653    });
Note: See TracChangeset for help on using the changeset viewer.