Permalink
Browse files

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: http://core.svn.wordpress.org/trunk@22208 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information...
1 parent 7abe581 commit e0135ddf0967fc904a54458823766cd2c920b86f @koop koop committed Oct 11, 2012
View
@@ -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
};
@@ -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() {
@@ -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;

0 comments on commit e0135dd

Please sign in to comment.