From 4af634578a5de2de182a48c78f92d00f89718d25 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Thu, 11 Oct 2012 23:52:09 +0000
Subject: [PATCH] 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                    | 30 ++++++++++++++++
 .../plugins/wpview/editor_plugin_src.js       | 34 ++++++++++++++++++-
 .../advanced/skins/wp_theme/content.css       | 27 ++++++---------
 3 files changed, 73 insertions(+), 18 deletions(-)

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;