Changeset 22208

Timestamp:

10/11/2012 11:52:09 PM (12 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:

• mce-view.js (modified) (1 diff)
• tinymce/plugins/wpview/editor_plugin_src.js (modified) (2 diffs)
• tinymce/themes/advanced/skins/wp_theme/content.css (modified) (3 diffs)

trunk/wp-includes/js/mce-view.js

@@ -360 +360 @@
         },
 
+        // ### 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

trunk/wp-includes/js/tinymce/plugins/wpview/editor_plugin_src.js

@@ -4 +4 @@
 
 (function() {
+
+
     tinymce.create('tinymce.plugins.wpView', {
         init : function( editor, url ) {
-            var wpView = this;
+            var wpView = this,
+                selected;
 
             // Check if the `wp.mce` API exists.
@@ -62 +65 @@
                 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;
+            }
         },
 

trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

@@ -177 +177 @@
     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;
-}
-
-.wp-view-wrap:hover .overlay {
+    -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.selected .overlay {
     opacity: 1;
+}
+.wp-view-wrap.selected .overlay {
+    background: rgba( 0, 86, 132, 0.3 );
 }
 
@@ -227 +231 @@
 }
 
-.wp-view-wrap .close,
-.wp-view-wrap .edit {
-    display: none;
-}
-
 .wp-view-wrap .close {
     top: 5px;
@@ -244 +243 @@
     right: 5px;
     padding: 0 10px;
-}
-
-.editor-attachment:hover .close,
-.editor-gallery:hover .close,
-.editor-gallery:hover .edit {
-    display: block;
 }