Changeset 28581

Timestamp:

05/26/2014 11:56:27 PM (11 years ago)

Author:

wonderboymusic

Message:

When adding a URL in the Insert from URL state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields.

This will probably be iterated upon.

Props helen, jtsternberg, wonderboymusic.
See #15490.

Location:

trunk/src

Files:

• wp-admin/includes/ajax-actions.php (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (3 diffs)
• wp-includes/js/media-views.js (modified) (2 diffs)
• wp-includes/media-template.php (modified) (1 diff)

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2310 +2310 @@
  */
 function wp_ajax_send_link_to_editor() {
+    global $post, $wp_embed;
+
     check_ajax_referer( 'media-send-to-editor', 'nonce' );
 
@@ -2324 +2326 @@
         $title = wp_basename( $src );
 
-    $html = '';
-    if ( $title )
+    $post = get_post( isset( $_POST['post_id'] ) ? $_POST['post_id'] : 0 );
+    // ping WordPress for an embed
+    $check_embed = $wp_embed->run_shortcode( '[embed]'. $src .'[/embed]' );
+    // fallback that WordPress creates when no oEmbed was found
+    $fallback = $wp_embed->maybe_make_link( $src );
+
+    if ( $check_embed !== $fallback ) {
+        // TinyMCE view for [embed] will parse this
+        $html = '[embed]' . $src . '[/embed]';
+    } elseif ( $title ) {
         $html = '<a href="' . esc_url( $src ) . '">' . $title . '</a>';
+    } else {
+        $html = '';
+    }
 
     // Figure out what filter to run:

trunk/src/wp-includes/css/media-views.css

@@ -1584 +1584 @@
 .media-frame .embed-url .spinner {
     position: absolute;
-    top: 16px;
+    top: 32px;
     right: 26px;
 }
@@ -1595 +1595 @@
 .embed-media-settings {
     position: absolute;
-    top: 60px;
+    top: 70px;
     left: 0;
     right: 0;
@@ -1601 +1601 @@
     padding: 16px 16px 32px;
     overflow: auto;
+}
+
+.embed-preview img, .embed-preview iframe, .embed-preview embed {
+    max-width: 100%;
+}
+
+.embed-preview img {
+    height: auto;
 }
 

trunk/src/wp-includes/js/media-views.js

@@ -6151 +6151 @@
 
         initialize: function() {
-            this.$input = $('<input/>').attr( 'type', 'text' ).val( this.model.get('url') );
+            this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') );
             this.input = this.$input[0];
 
@@ -6207 +6207 @@
     media.view.EmbedLink = media.view.Settings.extend({
         className: 'embed-link-settings',
-        template:  media.template('embed-link-settings')
+        template:  media.template('embed-link-settings'),
+
+        initialize: function() {
+            this.spinner = $('<span class="spinner" />');
+            this.$el.append( this.spinner[0] );
+            this.listenTo( this.model, 'change:url', this.updateoEmbed );
+        },
+
+        updateoEmbed: function() {
+            var url = this.model.get( 'url' );
+
+            this.$('.setting.title').show();
+            // clear out previous results
+            this.$('.embed-container').hide().find('.embed-preview').html('');
+
+            // only proceed with embed if the field contains more than 6 characters
+            if ( url && url.length < 6 ) {
+                return;
+            }
+
+            this.spinner.show();
+
+            setTimeout( _.bind( this.fetch, this ), 500 );
+        },
+
+        fetch: function() {
+            // check if they haven't typed in 500 ms
+            if ( $('#embed-url-field').val() !== this.model.get('url') ) {
+                return;
+            }
+
+            wp.ajax.send( 'parse-embed', {
+                data : {
+                    post_ID: media.view.settings.post.id,
+                    content: '[embed]' + this.model.get('url') + '[/embed]'
+                }
+            } ).done( _.bind( this.renderoEmbed, this ) );
+        },
+
+        renderoEmbed: function(html) {
+            this.spinner.hide();
+
+            this.$('.setting.title').hide();
+            this.$('.embed-container').show().find('.embed-preview').html( html );
+        }
     });
 

trunk/src/wp-includes/media-template.php

@@ -547 +547 @@
 
     <script type="text/html" id="tmpl-embed-link-settings">
-        <label class="setting">
-            <span><?php _e('Title'); ?></span>
+        <label class="setting title">
+            <span><?php _e( 'Title' ); ?></span>
             <input type="text" class="alignment" data-setting="title" />
         </label>
+        <div class="embed-container" style="display: none;">
+            <div class="embed-preview"></div>
+        </div>
     </script>