Make WordPress Core

Changeset 22770


Ignore:
Timestamp:
11/21/2012 04:46:32 PM (14 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.