WordPress.org

Make WordPress Core

Changeset 22208


Ignore:
Timestamp:
10/11/2012 11:52:09 PM (7 years ago)
Author:
koopersmith
Message:

MCE Views: Add selection/deselection when a view is clicked.

These methods should be expanded to prevent content from being inserted into the view by blocking and rerouting keystrokes as appropriate as well as repositioning the caret before content is inserted.

see #21390, #21812, #21813, #21815.

Location:
trunk/wp-includes/js
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/js/mce-view.js

    r22173 r22208  
    360360        },
    361361
     362        // ### Select a view.
     363        //
     364        // Accepts a MCE view wrapper `node` (i.e. a node with the
     365        // `wp-view-wrap` class).
     366        select: function( node ) {
     367            var $node = $(node);
     368
     369            // Bail if node is already selected.
     370            if ( $node.hasClass('selected') )
     371                return;
     372
     373            $node.addClass('selected');
     374            $( node.firstChild ).trigger('select');
     375        },
     376
     377        // ### Deselect a view.
     378        //
     379        // Accepts a MCE view wrapper `node` (i.e. a node with the
     380        // `wp-view-wrap` class).
     381        deselect: function( node ) {
     382            var $node = $(node);
     383
     384            // Bail if node is already selected.
     385            if ( ! $node.hasClass('selected') )
     386                return;
     387
     388            $node.removeClass('selected');
     389            $( node.firstChild ).trigger('deselect');
     390        },
     391
    362392        // Link any localized strings.
    363393        l10n: _.isUndefined( _wpMceViewL10n ) ? {} : _wpMceViewL10n
  • trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js

    r21961 r22208  
    44
    55(function() {
     6
     7
    68    tinymce.create('tinymce.plugins.wpView', {
    79        init : function( editor, url ) {
    8             var wpView = this;
     10            var wpView = this,
     11                selected;
    912
    1013            // Check if the `wp.mce` API exists.
     
    6265                o.content = wp.mce.view.toText( o.content );
    6366            });
     67
     68            // Triggers when the selection is changed.
     69            editor.onNodeChange.add( function( editor, controlManager, node, collapsed, o ) {
     70                var view = wpView.getParentView( node );
     71
     72                // If we've clicked off of the selected view, deselect it.
     73                if ( selected && selected !== view )
     74                    wp.mce.view.deselect( selected );
     75
     76                // Bail if we're not selecting another view.
     77                if ( ! view )
     78                    return;
     79
     80                // Update the selected view.
     81                selected = view;
     82                wp.mce.view.select( selected );
     83
     84                // Prevent the selection from propagating to other plugins.
     85                return false;
     86            });
     87        },
     88
     89        getParentView : function( node ) {
     90            while ( node ) {
     91                if ( /(?:^|\s)wp-view-wrap(?:\s|$)/.test( node.className ) )
     92                    return node;
     93
     94                node = node.parentNode;
     95            }
    6496        },
    6597
  • trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

    r22154 r22208  
    177177    overflow: hidden;
    178178
    179     -webkit-transition: opacity 100ms ease-in-out;
    180     -moz-transition:    opacity 100ms ease-in-out;
    181     -ms-transition:     opacity 100ms ease-in-out;
    182     -o-transition:      opacity 100ms ease-in-out;
    183     transition:         opacity 100ms ease-in-out;
    184 }
    185 
    186 .wp-view-wrap:hover .overlay {
     179    -webkit-transition: opacity 100ms ease-in-out, background 150ms;
     180    -moz-transition:    opacity 100ms ease-in-out, background 150ms;
     181    -ms-transition:     opacity 100ms ease-in-out, background 150ms;
     182    -o-transition:      opacity 100ms ease-in-out, background 150ms;
     183    transition:         opacity 100ms ease-in-out, background 150ms;
     184}
     185
     186.wp-view-wrap:hover .overlay,
     187.wp-view-wrap.selected .overlay {
    187188    opacity: 1;
     189}
     190.wp-view-wrap.selected .overlay {
     191    background: rgba( 0, 86, 132, 0.3 );
    188192}
    189193
     
    227231}
    228232
    229 .wp-view-wrap .close,
    230 .wp-view-wrap .edit {
    231     display: none;
    232 }
    233 
    234233.wp-view-wrap .close {
    235234    top: 5px;
     
    244243    right: 5px;
    245244    padding: 0 10px;
    246 }
    247 
    248 .editor-attachment:hover .close,
    249 .editor-gallery:hover .close,
    250 .editor-gallery:hover .edit {
    251     display: block;
    252245}
    253246
Note: See TracChangeset for help on using the changeset viewer.