Changeset 27169

Timestamp:

02/13/2014 05:09:04 AM (11 years ago)

Author:

azaozz

Message:

TinyMCE: add image based placeholders for audio and video shortcodes. Props wonderboymusic, see #27016.

Location:

trunk/src/wp-includes/js/tinymce

Files:

• plugins/wpgallery/plugin.js (modified) (4 diffs)
• skins/wordpress/images/audio.png (added)
• skins/wordpress/images/video.png (added)
• skins/wordpress/wp-content.css (modified) (2 diffs)

trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

@@ -2 +2 @@
 tinymce.PluginManager.add('wpgallery', function( editor ) {
 
-    function parseGallery( content ) {
-        return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) {
-            var data = tinymce.DOM.encode( attr );
+    function replaceGalleryShortcodes( content ) {
+        return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
+            var data = window.encodeURIComponent( match );
 
-            return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-gallery mceItem" ' +
-                'title="gallery' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
+            return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media wp-gallery mceItem" ' +
+                'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
         });
     }
 
-    function getGallery( content ) {
+    function replaceAVShortcodes( content ) {
+        return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {
+            var data = window.encodeURIComponent( match ),
+                cls = 'wp-media mceItem wp-' + type;
+
+            return '<img src="' + tinymce.Env.transparentSrc + '" class="' + cls + '" ' +
+                'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
+        });
+    }
+
+    function restoreMediaShortcodes( content ) {
         function getAttr( str, name ) {
-            name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
-            return name ? tinymce.DOM.decode( name[1] ) : '';
+            name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
+            return name ? window.decodeURIComponent( name[1] ) : '';
         }
 
-        return content.replace( /(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function( match, image ) {
-            var cls = getAttr( image, 'class' );
+        return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
+            var data = getAttr( image, 'data-wp-media' );
 
-            if ( cls.indexOf('wp-gallery') !== -1 ) {
-                return '<p>['+ tinymce.trim( getAttr( image, 'title' ) ) +']</p>';
+            if ( data ) {
+                return '<p>' + data + '</p>';
             }
 
@@ -28 +38 @@
     }
 
-    // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
-    editor.addCommand( 'WP_Gallery', function() {
-        var gallery, frame, node;
+    function editMedia( node ) {
+        var gallery, frame, data;
+
+        if ( node.nodeName !== 'IMG' ) {
+            return;
+        }
 
         // Check if the `wp.media.gallery` API exists.
@@ -37 +50 @@
         }
 
-        node = editor.selection.getNode();
-        gallery = wp.media.gallery;
-
         // Make sure we've selected a gallery node.
-        if ( node.nodeName === 'IMG' && editor.dom.hasClass( node, 'wp-gallery' ) ) {
-            frame = gallery.edit( '[' + editor.dom.getAttrib( node, 'title' ) + ']' );
+        if ( editor.dom.hasClass( node, 'wp-gallery' ) ) {
+            gallery = wp.media.gallery;
+            data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
+            frame = gallery.edit( data );
 
             frame.state('gallery-edit').on( 'update', function( selection ) {
-                var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 );
-                editor.dom.setAttrib( node, 'title', shortcode );
+                var shortcode = gallery.shortcode( selection ).string();
+                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
             });
+        } else {
+            // temp
+            window.console && console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );
         }
+    }
+
+    // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
+    editor.addCommand( 'WP_Gallery', function() {
+        editMedia( editor.selection.getNode() );
     });
 /*
@@ -69 +89 @@
     });
 */
-    editor.on( 'mouseup', function( e ) {
-        if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {
+    editor.on( 'mouseup', function( event ) {
+        var dom = editor.dom,
+            node = event.target;
+
+        if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
             // Don't trigger on right-click
-            if ( e.button !== 2 ) {
-                if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) {
-                    editor.execCommand('WP_Gallery');
-                    editor.dom.removeClass( e.target, 'wp-gallery-selected' );
+            if ( event.button !== 2 ) {
+                if ( dom.hasClass( node, 'wp-media-selected' ) ) {
+                    editMedia( node );
+                    dom.removeClass( node, 'wp-media-selected' );
                 } else {
-                    editor.dom.addClass( e.target, 'wp-gallery-selected' );
+                    dom.addClass( node, 'wp-media-selected' );
                 }
             }
         } else {
-            editor.dom.removeClass( editor.dom.select( 'img.wp-gallery-selected' ), 'wp-gallery-selected' );
+            dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
         }
     });
 
-    // Display 'gallery' instead of img in element path
-    editor.on( 'ResolveName', function( e ) {
+    // Display gallery, audio or video instead of img in the element path
+    editor.on( 'ResolveName', function( event ) {
         var dom = editor.dom,
-            target = e.target;
+            node = event.target;
 
-        if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-gallery' ) ) {
-            e.name = 'gallery';
+        if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
+            if ( dom.hasClass( node, 'wp-gallery' ) ) {
+                event.name = 'gallery';
+            } else if ( dom.hasClass( node, 'wp-video' ) ) {
+                event.name = 'video';
+            } else if ( dom.hasClass( node, 'wp-audio' ) ) {
+                event.name = 'audio';
+            }
         }
     });
 
-    editor.on( 'BeforeSetContent', function( e ) {
-        e.content = parseGallery( e.content );
+    editor.on( 'BeforeSetContent', function( event ) {
+        event.content = replaceGalleryShortcodes( event.content );
+        event.content = replaceAVShortcodes( event.content );
     });
 
-    editor.on( 'PostProcess', function( e ) {
-        if ( e.get ) {
-            e.content = getGallery( e.content );
+    editor.on( 'PostProcess', function( event ) {
+        if ( event.get ) {
+            event.content = restoreMediaShortcodes( event.content );
         }
     });
-
-    return {
-        _do_gallery: parseGallery,
-        _get_gallery: getGallery
-    };
 });

trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -109 +109 @@
 }
 
-.mce-content-body img.wp-gallery {
-    border: 1px dashed #888;
-    background: #f2f2f2 url("images/gallery.png") no-repeat scroll center center;
+/* Gallery, audio, vudeo placeholders */
+.mce-content-body img.wp-media {
+    border: 1px solid #aaa;
+    background-color: #f2f2f2;
+    background-repeat: no-repeat;
+    background-position: center center;
     width: 99%;
     height: 250px;
     outline: 0;
     cursor: pointer;
+}
+
+.mce-content-body img.wp-media:hover {
+    background-color: #ededed;
+    border-color: #777;
+}
+
+.mce-content-body img.wp-media.wp-media-selected {
+    background-color: #d8d8d8;
+    border-color: #777;
+}
+
+.mce-content-body img.wp-media.wp-gallery {
+    background-image: url("images/gallery.png");
+}
+
+.mce-content-body img.wp-media.wp-video {
+    background-image: url("images/video.png");
+}
+
+.mce-content-body img.wp-media.wp-audio {
+    height: 70px;
+    background-image: url("images/audio.png");
 }
 
@@ -158 +184 @@
 }
 
-.mce-content-body img.wp-gallery:hover {
-    background-color: #ededed;
-    border-style: solid;
-}
-
-.mce-content-body img.wp-gallery.wp-gallery-selected {
-    background-color: #d8d8d8;
-    border-style: solid;
-}
-
 img.wp-oembed {
     border: 1px dashed #888;