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.


git-svn-id: https://develop.svn.wordpress.org/trunk@22208 602fd350-edb4-49c9-b593-d223f7449a82

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
 	};

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() {

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;