WordPress.org

Make WordPress Core

Changeset 28581


Ignore:
Timestamp:
05/26/14 23:56:27 (3 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/ajax-actions.php

    r28580 r28581  
    23102310 */ 
    23112311function wp_ajax_send_link_to_editor() { 
     2312    global $post, $wp_embed; 
     2313 
    23122314    check_ajax_referer( 'media-send-to-editor', 'nonce' ); 
    23132315 
     
    23242326        $title = wp_basename( $src ); 
    23252327 
    2326     $html = ''; 
    2327     if ( $title ) 
     2328    $post = get_post( isset( $_POST['post_id'] ) ? $_POST['post_id'] : 0 ); 
     2329    // ping WordPress for an embed 
     2330    $check_embed = $wp_embed->run_shortcode( '[embed]'. $src .'[/embed]' ); 
     2331    // fallback that WordPress creates when no oEmbed was found 
     2332    $fallback = $wp_embed->maybe_make_link( $src ); 
     2333 
     2334    if ( $check_embed !== $fallback ) { 
     2335        // TinyMCE view for [embed] will parse this 
     2336        $html = '[embed]' . $src . '[/embed]'; 
     2337    } elseif ( $title ) { 
    23282338        $html = '<a href="' . esc_url( $src ) . '">' . $title . '</a>'; 
     2339    } else { 
     2340        $html = ''; 
     2341    } 
    23292342 
    23302343    // Figure out what filter to run: 
  • trunk/src/wp-includes/css/media-views.css

    r28369 r28581  
    15841584.media-frame .embed-url .spinner { 
    15851585    position: absolute; 
    1586     top: 16px; 
     1586    top: 32px; 
    15871587    right: 26px; 
    15881588} 
     
    15951595.embed-media-settings { 
    15961596    position: absolute; 
    1597     top: 60px; 
     1597    top: 70px; 
    15981598    left: 0; 
    15991599    right: 0; 
     
    16011601    padding: 16px 16px 32px; 
    16021602    overflow: auto; 
     1603} 
     1604 
     1605.embed-preview img, .embed-preview iframe, .embed-preview embed { 
     1606    max-width: 100%; 
     1607} 
     1608 
     1609.embed-preview img { 
     1610    height: auto; 
    16031611} 
    16041612 
  • trunk/src/wp-includes/js/media-views.js

    r28577 r28581  
    61516151 
    61526152        initialize: function() { 
    6153             this.$input = $('<input/>').attr( 'type', 'text' ).val( this.model.get('url') ); 
     6153            this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') ); 
    61546154            this.input = this.$input[0]; 
    61556155 
     
    62076207    media.view.EmbedLink = media.view.Settings.extend({ 
    62086208        className: 'embed-link-settings', 
    6209         template:  media.template('embed-link-settings') 
     6209        template:  media.template('embed-link-settings'), 
     6210 
     6211        initialize: function() { 
     6212            this.spinner = $('<span class="spinner" />'); 
     6213            this.$el.append( this.spinner[0] ); 
     6214            this.listenTo( this.model, 'change:url', this.updateoEmbed ); 
     6215        }, 
     6216 
     6217        updateoEmbed: function() { 
     6218            var url = this.model.get( 'url' ); 
     6219 
     6220            this.$('.setting.title').show(); 
     6221            // clear out previous results 
     6222            this.$('.embed-container').hide().find('.embed-preview').html(''); 
     6223 
     6224            // only proceed with embed if the field contains more than 6 characters 
     6225            if ( url && url.length < 6 ) { 
     6226                return; 
     6227            } 
     6228 
     6229            this.spinner.show(); 
     6230 
     6231            setTimeout( _.bind( this.fetch, this ), 500 ); 
     6232        }, 
     6233 
     6234        fetch: function() { 
     6235            // check if they haven't typed in 500 ms 
     6236            if ( $('#embed-url-field').val() !== this.model.get('url') ) { 
     6237                return; 
     6238            } 
     6239 
     6240            wp.ajax.send( 'parse-embed', { 
     6241                data : { 
     6242                    post_ID: media.view.settings.post.id, 
     6243                    content: '[embed]' + this.model.get('url') + '[/embed]' 
     6244                } 
     6245            } ).done( _.bind( this.renderoEmbed, this ) ); 
     6246        }, 
     6247 
     6248        renderoEmbed: function(html) { 
     6249            this.spinner.hide(); 
     6250 
     6251            this.$('.setting.title').hide(); 
     6252            this.$('.embed-container').show().find('.embed-preview').html( html ); 
     6253        } 
    62106254    }); 
    62116255 
  • trunk/src/wp-includes/media-template.php

    r28442 r28581  
    547547 
    548548    <script type="text/html" id="tmpl-embed-link-settings"> 
    549         <label class="setting"> 
    550             <span><?php _e('Title'); ?></span> 
     549        <label class="setting title"> 
     550            <span><?php _e( 'Title' ); ?></span> 
    551551            <input type="text" class="alignment" data-setting="title" /> 
    552552        </label> 
     553        <div class="embed-container" style="display: none;"> 
     554            <div class="embed-preview"></div> 
     555        </div> 
    553556    </script> 
    554557 
Note: See TracChangeset for help on using the changeset viewer.