WordPress.org

Make WordPress Core

Changeset 22770


Ignore:
Timestamp:
11/21/2012 04:46:32 PM (8 years ago)
Author:
koopersmith
Message:

Media: Move the new sections of media-upload.js to media-editor.js to allow the media modal to be used on the front end and prevent dependency conflicts with older themes and plugins. see #21390.

Location:
trunk
Files:
4 edited
2 copied

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/media-upload.js

    r22768 r22770  
    8787
    8888})(jQuery);
    89 
    90 // WordPress, TinyMCE, and Media
    91 // -----------------------------
    92 (function($){
    93     // Stores the editors' `wp.media.controller.Frame` instances.
    94     var workflows = {},
    95         linkToUrl;
    96 
    97     linkToUrl = function( props, attachment ) {
    98         var link = props.link || getUserSetting( 'urlbutton', 'post' ),
    99             url;
    100 
    101         if ( 'file' === link )
    102             url = attachment.url;
    103         else if ( 'post' === link )
    104             url = attachment.link;
    105         else if ( 'custom' === link )
    106             url = props.linkUrl;
    107 
    108         return url || '';
    109     };
    110 
    111     wp.media.string = {
    112         // Joins the `props` and `attachment` objects,
    113         // outputting the proper object format based on the
    114         // attachment's type.
    115         props: function( props, attachment ) {
    116             var link, linkUrl, size, sizes;
    117 
    118             props = props ? _.clone( props ) : {};
    119 
    120             if ( attachment && attachment.type )
    121                 props.type = attachment.type;
    122 
    123             if ( 'image' === props.type ) {
    124                 props = _.defaults( props || {}, {
    125                     align:   getUserSetting( 'align', 'none' ),
    126                     size:    getUserSetting( 'imgsize', 'medium' ),
    127                     url:     '',
    128                     classes: []
    129                 });
    130             }
    131 
    132             // All attachment-specific settings follow.
    133             if ( ! attachment )
    134                 return props;
    135 
    136             link = props.link || getUserSetting( 'urlbutton', 'post' );
    137             if ( 'file' === link )
    138                 linkUrl = attachment.url;
    139             else if ( 'post' === link )
    140                 linkUrl = attachment.link;
    141             else if ( 'custom' === link )
    142                 linkUrl = props.linkUrl;
    143             props.linkUrl = linkUrl || '';
    144 
    145             // Format properties for images.
    146             if ( 'image' === attachment.type ) {
    147                 props.classes.push( 'wp-image-' + attachment.id );
    148 
    149                 sizes = attachment.sizes;
    150                 size = sizes && sizes[ props.size ] ? sizes[ props.size ] : attachment;
    151 
    152                 _.extend( props, _.pick( attachment, 'align', 'caption' ), {
    153                     width:     size.width,
    154                     height:    size.height,
    155                     src:       size.url,
    156                     captionId: 'attachment_' + attachment.id
    157                 });
    158 
    159             // Format properties for non-images.
    160             } else {
    161                 _.extend( props, {
    162                     title:   attachment.title || attachment.filename,
    163                     rel:     'attachment wp-att-' + attachment.id
    164                 });
    165             }
    166 
    167             return props;
    168         },
    169 
    170         link: function( props, attachment ) {
    171             var options;
    172 
    173             props = wp.media.string.props( props, attachment );
    174 
    175             options = {
    176                 tag:     'a',
    177                 content: props.title,
    178                 attrs:   {
    179                     href: props.linkUrl
    180                 }
    181             };
    182 
    183             if ( props.rel )
    184                 options.attrs.rel = props.rel;
    185 
    186             return wp.html.string( options );
    187         },
    188 
    189         image: function( props, attachment ) {
    190             var img = {},
    191                 options, classes, shortcode, html;
    192 
    193             props = wp.media.string.props( props, attachment );
    194             classes = props.classes || [];
    195 
    196             img.src = props.url;
    197             _.extend( img, _.pick( props, 'width', 'height', 'alt' ) );
    198 
    199             // Only assign the align class to the image if we're not printing
    200             // a caption, since the alignment is sent to the shortcode.
    201             if ( props.align && ! props.caption )
    202                 classes.push( 'align' + props.align );
    203 
    204             if ( props.size )
    205                 classes.push( 'size-' + props.size );
    206 
    207             img['class'] = _.compact( classes ).join(' ');
    208 
    209             // Generate `img` tag options.
    210             options = {
    211                 tag:    'img',
    212                 attrs:  img,
    213                 single: true
    214             };
    215 
    216             // Generate the `a` element options, if they exist.
    217             if ( props.linkUrl ) {
    218                 options = {
    219                     tag:   'a',
    220                     attrs: {
    221                         href: props.linkUrl
    222                     },
    223                     content: options
    224                 };
    225             }
    226 
    227             html = wp.html.string( options );
    228 
    229             // Generate the caption shortcode.
    230             if ( props.caption ) {
    231                 shortcode = {};
    232 
    233                 if ( img.width )
    234                     shortcode.width = img.width;
    235 
    236                 if ( props.captionId )
    237                     shortcode.id = props.captionId;
    238 
    239                 if ( props.align )
    240                     shortcode.align = 'align' + props.align;
    241 
    242                 html = wp.shortcode.string({
    243                     tag:     'caption',
    244                     attrs:   shortcode,
    245                     content: html + ' ' + props.caption
    246                 });
    247             }
    248 
    249             return html;
    250         }
    251     };
    252 
    253     wp.media.gallery = (function() {
    254         var galleries = {};
    255 
    256         return {
    257             defaults: {
    258                 order:      'ASC',
    259                 id:         wp.media.view.settings.postId,
    260                 itemtag:    'dl',
    261                 icontag:    'dt',
    262                 captiontag: 'dd',
    263                 columns:    3,
    264                 size:       'thumbnail'
    265             },
    266 
    267             attachments: function( shortcode ) {
    268                 var shortcodeString = shortcode.string(),
    269                     result = galleries[ shortcodeString ],
    270                     attrs, args, query, others;
    271 
    272                 delete galleries[ shortcodeString ];
    273 
    274                 if ( result )
    275                     return result;
    276 
    277                 attrs = shortcode.attrs.named;
    278                 args  = _.pick( attrs, 'orderby', 'order' );
    279 
    280                 args.type    = 'image';
    281                 args.perPage = -1;
    282 
    283                 // Map the `ids` param to the correct query args.
    284                 if ( attrs.ids ) {
    285                     args.post__in = attrs.ids.split(',');
    286                     args.orderby  = 'post__in';
    287                 } else if ( attrs.include ) {
    288                     args.post__in = attrs.include.split(',');
    289                 }
    290 
    291                 if ( attrs.exclude )
    292                     args.post__not_in = attrs.exclude.split(',');
    293 
    294                 if ( ! args.post__in )
    295                     args.parent = attrs.id;
    296 
    297                 // Collect the attributes that were not included in `args`.
    298                 others = {};
    299                 _.filter( attrs, function( value, key ) {
    300                     if ( _.isUndefined( args[ key ] ) )
    301                         others[ key ] = value;
    302                 });
    303 
    304                 query = media.query( args );
    305                 query.gallery = new Backbone.Model( others );
    306                 return query;
    307             },
    308 
    309             shortcode: function( attachments ) {
    310                 var props = attachments.props.toJSON(),
    311                     attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
    312                     shortcode, clone;
    313 
    314                 if ( attachments.gallery )
    315                     _.extend( attrs, attachments.gallery.toJSON() );
    316 
    317                 attrs.ids = attachments.pluck('id');
    318 
    319                 // If the `ids` attribute is set and `orderby` attribute
    320                 // is the default value, clear it for cleaner output.
    321                 if ( attrs.ids && 'post__in' === attrs.orderby )
    322                     delete attrs.orderby;
    323 
    324                 // Remove default attributes from the shortcode.
    325                 _.each( wp.media.gallery.defaults, function( value, key ) {
    326                     if ( value === attrs[ key ] )
    327                         delete attrs[ key ];
    328                 });
    329 
    330                 shortcode = new wp.shortcode({
    331                     tag:    'gallery',
    332                     attrs:  attrs,
    333                     type:   'single'
    334                 });
    335 
    336                 // Use a cloned version of the gallery.
    337                 clone = new wp.media.model.Attachments( attachments.models, {
    338                     props: props
    339                 });
    340                 clone.gallery = attachments.gallery;
    341                 galleries[ shortcode.string() ] = clone;
    342 
    343                 return shortcode;
    344             },
    345 
    346             edit: function( content ) {
    347                 var shortcode = wp.shortcode.next( 'gallery', content ),
    348                     defaultPostId = wp.media.gallery.defaults.id,
    349                     attachments, selection;
    350 
    351                 // Bail if we didn't match the shortcode or all of the content.
    352                 if ( ! shortcode || shortcode.content !== content )
    353                     return;
    354 
    355                 // Ignore the rest of the match object.
    356                 shortcode = shortcode.shortcode;
    357 
    358                 if ( _.isUndefined( shortcode.get('id') ) && ! _.isUndefined( defaultPostId ) )
    359                     shortcode.set( 'id', defaultPostId );
    360 
    361                 attachments = wp.media.gallery.attachments( shortcode );
    362 
    363                 selection = new wp.media.model.Selection( attachments.models, {
    364                     props:    attachments.props.toJSON(),
    365                     multiple: true
    366                 });
    367 
    368                 selection.gallery = attachments.gallery;
    369 
    370                 // Fetch the query's attachments, and then break ties from the
    371                 // query to allow for sorting.
    372                 selection.more().done( function() {
    373                     // Break ties with the query.
    374                     selection.props.set({ query: false });
    375                     selection.unmirror();
    376                     selection.props.unset('orderby');
    377                 });
    378 
    379                 return wp.media({
    380                     frame:     'post',
    381                     state:     'gallery-edit',
    382                     title:     wp.media.view.l10n.editGalleryTitle,
    383                     editing:   true,
    384                     multiple:  true,
    385                     selection: selection
    386                 });
    387             }
    388         };
    389     }());
    390 
    391     wp.media.editor = {
    392         insert: send_to_editor,
    393 
    394         add: function( id, options ) {
    395             var workflow = this.get( id );
    396 
    397             if ( workflow )
    398                 return workflow;
    399 
    400             workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
    401                 frame:    'post',
    402                 title:    wp.media.view.l10n.insertMedia,
    403                 multiple: true
    404             } ) );
    405 
    406             workflow.on( 'insert', function( selection ) {
    407                 var state = workflow.state(),
    408                     details = state.get('details');
    409 
    410                 selection = selection || state.get('selection');
    411 
    412                 if ( ! selection || ! details )
    413                     return;
    414 
    415                 selection.each( function( attachment ) {
    416                     var detail = details[ attachment.cid ];
    417 
    418                     if ( detail )
    419                         detail = detail.toJSON();
    420 
    421                     // Reset the attachment details.
    422                     delete details[ attachment.cid ];
    423 
    424                     attachment = attachment.toJSON();
    425 
    426                     this.send.attachment( detail, attachment );
    427                 }, this );
    428             }, this );
    429 
    430             workflow.get('gallery-edit').on( 'update', function( selection ) {
    431                 this.insert( wp.media.gallery.shortcode( selection ).string() );
    432             }, this );
    433 
    434             workflow.get('embed').on( 'select', function() {
    435                 var embed = workflow.state().toJSON();
    436 
    437                 embed.url = embed.url || '';
    438 
    439                 if ( 'link' === embed.type ) {
    440                     _.defaults( embed, {
    441                         title:   embed.url,
    442                         linkUrl: embed.url
    443                     });
    444 
    445                     this.send.link( embed );
    446 
    447                 } else if ( 'image' === embed.type ) {
    448                     _.defaults( embed, {
    449                         title:   embed.url,
    450                         linkUrl: '',
    451                         align:   'none',
    452                         link:    'none'
    453                     });
    454 
    455                     if ( 'none' === embed.link )
    456                         embed.linkUrl = '';
    457                     else if ( 'file' === embed.link )
    458                         embed.linkUrl = embed.url;
    459 
    460                     this.insert( wp.media.string.image( embed ) );
    461                 }
    462             }, this );
    463 
    464             return workflow;
    465         },
    466 
    467         get: function( id ) {
    468             return workflows[ id ];
    469         },
    470 
    471         remove: function( id ) {
    472             delete workflows[ id ];
    473         },
    474 
    475         send: {
    476             attachment: function( props, attachment ) {
    477                 var caption = attachment.caption,
    478                     options, html;
    479 
    480                 // If captions are disabled, clear the caption.
    481                 if ( ! wp.media.view.settings.captions )
    482                     delete attachment.caption;
    483 
    484                 props = wp.media.string.props( props, attachment );
    485 
    486                 options = {
    487                     id: attachment.id
    488                 };
    489 
    490                 if ( 'image' === attachment.type ) {
    491                     html = wp.media.string.image( props );
    492                     options['caption'] = caption;
    493 
    494                     _.each({
    495                         align:   'image-align',
    496                         size:    'image-size',
    497                         alt:     'image-alt',
    498                         linkUrl: 'url'
    499                     }, function( option, prop ) {
    500                         if ( props[ prop ] )
    501                             options[ option ] = props[ prop ];
    502                     });
    503 
    504                 } else {
    505                     html = wp.media.string.link( props );
    506                     options.title = props.title;
    507                 }
    508 
    509                 return media.post( 'send-attachment-to-editor', {
    510                     nonce:      wp.media.view.settings.nonce.sendToEditor,
    511                     attachment: options,
    512                     html:       html
    513                 }).done( function( resp ) {
    514                     wp.media.editor.insert( resp );
    515                 });
    516             },
    517 
    518             link: function( embed ) {
    519                 return media.post( 'send-link-to-editor', {
    520                     nonce: wp.media.view.settings.nonce.sendToEditor,
    521                     src:   embed.linkUrl,
    522                     title: embed.title,
    523                     html:  wp.media.string.link( embed )
    524                 }).done( function( resp ) {
    525                     wp.media.editor.insert( resp );
    526                 });
    527             }
    528         },
    529 
    530         init: function() {
    531             $(document.body).on('click', '.insert-media', function( event ) {
    532                 var $this = $(this),
    533                     editor = $this.data('editor'),
    534                     workflow;
    535 
    536                 event.preventDefault();
    537 
    538                 // Remove focus from the `.insert-media` button.
    539                 // Prevents Opera from showing the outline of the button
    540                 // above the modal.
    541                 //
    542                 // See: http://core.trac.wordpress.org/ticket/22445
    543                 $this.blur();
    544 
    545                 if ( ! _.isString( editor ) )
    546                     return;
    547 
    548                 workflow = wp.media.editor.get( editor );
    549 
    550                 // If the workflow exists, just open it.
    551                 if ( workflow ) {
    552                     workflow.open();
    553                     return;
    554                 }
    555 
    556                 // Initialize the editor's workflow if we haven't yet.
    557                 wp.media.editor.add( editor );
    558             });
    559         }
    560     };
    561 
    562     $( wp.media.editor.init );
    563 }(jQuery));
  • trunk/wp-includes/js/media-models.js

    r22753 r22770  
    4141    // Link any localized strings.
    4242    l10n = media.model.l10n = typeof _wpMediaModelsL10n === 'undefined' ? {} : _wpMediaModelsL10n;
     43
     44    // Link any settings.
     45    media.model.settings = l10n.settings || {};
     46    delete l10n.settings;
    4347
    4448    /**
     
    125129            options = _.defaults( options || {}, {
    126130                type:    'POST',
    127                 url:     ajaxurl,
     131                url:     media.model.settings.ajaxurl,
    128132                context: this
    129133            });
     
    222226                    action: 'save-attachment',
    223227                    id:     this.id,
    224                     nonce:  l10n.saveAttachmentNonce
     228                    nonce:  media.model.settings.saveAttachmentNonce
    225229                });
    226230
  • trunk/wp-includes/media.php

    r22768 r22770  
    13881388    wp_localize_script( 'media-views', '_wpMediaViewsL10n', $strings );
    13891389
    1390     wp_enqueue_script( 'media-upload' );
     1390    wp_enqueue_script( 'media-editor' );
    13911391    wp_enqueue_style( 'media-views' );
    13921392    wp_plupload_default_settings();
  • trunk/wp-includes/script-loader.php

    r22653 r22770  
    299299    ) );
    300300
    301     $scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox', 'shortcode', 'media-views' ), false, 1 );
     301    $scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox', 'shortcode' ), false, 1 );
    302302
    303303    $scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r6', 1 );
     
    319319    ) );
    320320
     321    $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
    321322    $scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
    322323    did_action( 'init' ) && $scripts->localize( 'media-models', '_wpMediaModelsL10n', array(
    323         'saveAttachmentNonce' => wp_create_nonce( 'save-attachment' ),
    324     ) );
    325 
     324        'settings' => array(
     325            'saveAttachmentNonce' => wp_create_nonce( 'save-attachment' ),
     326            'ajaxurl' => admin_url( 'admin-ajax.php', 'relative' ),
     327        ),
     328    ) );
     329
     330    // To enqueue media-views or media-editor, call wp_enqueue_media().
     331    // Both rely on numerous settings, styles, and templates to operate correctly.
    326332    $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'media-models', 'wp-plupload' ), false, 1 );
    327     $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
     333    $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    328334    $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    329335
Note: See TracChangeset for help on using the changeset viewer.