diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js index 546c714d85..ba89e976a9 100644 --- a/wp-includes/js/mce-view.js +++ b/wp-includes/js/mce-view.js @@ -359,6 +359,36 @@ window.wp = window.wp || {}; return wp.mce.view.removeInternalAttrs( wp.html.attrs( content ) ); }, + // ### Select a view. + // + // Accepts a MCE view wrapper `node` (i.e. a node with the + // `wp-view-wrap` class). + select: function( node ) { + var $node = $(node); + + // Bail if node is already selected. + if ( $node.hasClass('selected') ) + return; + + $node.addClass('selected'); + $( node.firstChild ).trigger('select'); + }, + + // ### Deselect a view. + // + // Accepts a MCE view wrapper `node` (i.e. a node with the + // `wp-view-wrap` class). + deselect: function( node ) { + var $node = $(node); + + // Bail if node is already selected. + if ( ! $node.hasClass('selected') ) + return; + + $node.removeClass('selected'); + $( node.firstChild ).trigger('deselect'); + }, + // Link any localized strings. l10n: _.isUndefined( _wpMceViewL10n ) ? {} : _wpMceViewL10n }; diff --git a/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js b/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js index 09d58f1e4f..ed12deb21a 100644 --- a/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js +++ b/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js @@ -3,9 +3,12 @@ */ (function() { + + tinymce.create('tinymce.plugins.wpView', { init : function( editor, url ) { - var wpView = this; + var wpView = this, + selected; // Check if the `wp.mce` API exists. if ( typeof wp === 'undefined' || ! wp.mce ) @@ -61,6 +64,35 @@ o.content = wp.mce.view.toText( o.content ); }); + + // Triggers when the selection is changed. + editor.onNodeChange.add( function( editor, controlManager, node, collapsed, o ) { + var view = wpView.getParentView( node ); + + // If we've clicked off of the selected view, deselect it. + if ( selected && selected !== view ) + wp.mce.view.deselect( selected ); + + // Bail if we're not selecting another view. + if ( ! view ) + return; + + // Update the selected view. + selected = view; + wp.mce.view.select( selected ); + + // Prevent the selection from propagating to other plugins. + return false; + }); + }, + + getParentView : function( node ) { + while ( node ) { + if ( /(?:^|\s)wp-view-wrap(?:\s|$)/.test( node.className ) ) + return node; + + node = node.parentNode; + } }, getInfo : function() { diff --git a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css index 39102bfd7a..8f3c083537 100644 --- a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css +++ b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css @@ -176,16 +176,20 @@ img.wp-oembed { inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/ overflow: hidden; - -webkit-transition: opacity 100ms ease-in-out; - -moz-transition: opacity 100ms ease-in-out; - -ms-transition: opacity 100ms ease-in-out; - -o-transition: opacity 100ms ease-in-out; - transition: opacity 100ms ease-in-out; + -webkit-transition: opacity 100ms ease-in-out, background 150ms; + -moz-transition: opacity 100ms ease-in-out, background 150ms; + -ms-transition: opacity 100ms ease-in-out, background 150ms; + -o-transition: opacity 100ms ease-in-out, background 150ms; + transition: opacity 100ms ease-in-out, background 150ms; } -.wp-view-wrap:hover .overlay { +.wp-view-wrap:hover .overlay, +.wp-view-wrap.selected .overlay { opacity: 1; } +.wp-view-wrap.selected .overlay { + background: rgba( 0, 86, 132, 0.3 ); +} .wp-view-wrap .spinner { background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center; @@ -226,11 +230,6 @@ img.wp-oembed { color: #333; } -.wp-view-wrap .close, -.wp-view-wrap .edit { - display: none; -} - .wp-view-wrap .close { top: 5px; right: 5px; @@ -245,12 +244,6 @@ img.wp-oembed { padding: 0 10px; } -.editor-attachment:hover .close, -.editor-gallery:hover .close, -.editor-gallery:hover .edit { - display: block; -} - .editor-attachment { position: relative; margin-top: 10px;