WordPress.org
Get WordPress

Make WordPress Core

Changeset 22036


Ignore:
Timestamp:
09/27/2012 04:09:43 AM (14 years ago)
Author:
koopersmith
Message:

BUTTON.

Add a "Beta Media" button to the post editor. Currently, it is only capable of inserting images. Other attachment types and galleries need not apply... yet.

  • Added wp.media.string.image( attachment, props ) for generating an image as a string from an attachment and relevant attachment display properties.
  • Properly localized the gallery workflow.
  • Added Workflow.update(), which closes the modal, triggers an update event, and resets the selection.
  • Added wp.mce.media to manage the various media workflows for editors.

see #21813, #21814, #21390.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/includes/media.php

    r22019 r22036  
    381381
    382382        $img = '<img src="' . esc_url( admin_url( 'images/media-button.png?ver=20111005' ) ) . '" width="16" height="16" />';
     383
     384        echo '<a href="#" class="button insert-media" data-editor="' . esc_attr( $editor_id ) . '" title="' . esc_attr__( 'Add Media' ) . '">' . sprintf( __('%s Beta Media'), $img ) . '</a>';
    383385
    384386        echo '<a href="' . esc_url( get_upload_iframe_src() ) . '" class="thickbox add_media" id="' . esc_attr( $editor_id ) . '-add_media" title="' . esc_attr__( 'Add Media' ) . '" onclick="return false;">' . sprintf( $context, $img ) . '</a>';

  • trunk/wp-admin/js/media-upload.js

    r21592 r22036  
    8787
    8888})(jQuery);
     89
     90// WordPress, TinyMCE, and Media
     91// -----------------------------
     92(function($){
     93        // Stores the editors' `wp.media.controller.Workflow` instaces.
     94        var workflows = {};
     95
     96        wp.mce.media = {
     97                insert: send_to_editor,
     98
     99                add: function( id, options ) {
     100                        var workflow = this.get( id );
     101
     102                        if ( workflow )
     103                                return workflow;
     104
     105                        workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
     106                                multiple: true
     107                        } ) );
     108
     109                        workflow.on( 'update', function( selection ) {
     110                                this.insert( '\n' + selection.map( function( attachment ) {
     111                                        return wp.media.string.image( attachment );
     112                                }).join('\n\n') + '\n' );
     113                        }, this );
     114
     115                        return workflow;
     116                },
     117
     118                get: function( id ) {
     119                        return workflows[ id ];
     120                },
     121
     122                remove: function( id ) {
     123                        delete workflows[ id ];
     124                },
     125
     126                init: function() {
     127                        $('.insert-media').on( 'click', function( event ) {
     128                                var editor = $(this).data('editor'),
     129                                        workflow;
     130
     131                                event.preventDefault();
     132
     133                                if ( ! editor )
     134                                        return;
     135
     136                                workflow = wp.mce.media.get( editor );
     137
     138                                // If the workflow exists, just open it.
     139                                if ( workflow ) {
     140                                        workflow.open();
     141                                        return;
     142                                }
     143
     144                                // Initialize the editor's workflow if we haven't yet.
     145                                wp.mce.media.add( editor );
     146                        });
     147                }
     148        };
     149
     150        $( wp.mce.media.init )
     151}(jQuery));

  • trunk/wp-includes/css/editor.css

    r22032 r22036  
    10091009.wp-editor-tools {
    10101010        height: 30px;
    1011         padding: 0 10px;
     1011        padding: 0 10px 0 0;
    10121012}
    10131013
    … …  
    10801080}
    10811081
    1082 .wp-media-buttons {
    1083         line-height: 1;
    1084     padding: 9px 0 0;
     1082.wp-media-buttons .button {
     1083        margin-right: 5px;
     1084}
     1085
     1086.wp-media-buttons .insert-media {
     1087        padding-left: 0.4em;
    10851088}
    10861089
    10871090.wp-media-buttons a {
    10881091        text-decoration: none;
    1089         color: #333;
     1092        color: #464646;
    10901093        font-size: 12px;
    1091         vertical-align: bottom;
    10921094}
    10931095

  • trunk/wp-includes/js/mce-view.js

    r22023 r22036  
    360360// ---------------------
    361361(function($){
    362         var mceview = wp.mce.view,
    363                 mceFreeAttrs;
     362        var mceview = wp.mce.view;
     363
     364        wp.media.string = {};
     365        wp.media.string.image = function( attachment, props ) {
     366                var classes, img, options, size;
     367
     368                attachment = attachment.toJSON();
     369
     370                props = _.defaults( props || {}, {
     371                        img:   {},
     372                        align: getUserSetting( 'align', 'none' ),
     373                        size:  getUserSetting( 'imgsize', 'medium' ),
     374                        link:  getUserSetting( 'urlbutton', 'post' )
     375                });
     376
     377                img     = _.clone( props.img );
     378                classes = img['class'] ? img['class'].split(/\s+/) : [];
     379                size    = attachment.sizes ? attachment.sizes[ props.size ] : {};
     380
     381                if ( ! size )
     382                        delete props.size;
     383
     384                img.width  = size.width  || attachment.width;
     385                img.height = size.height || attachment.height;
     386                img.src    = size.url    || attachment.url;
     387
     388                // Update `img` classes.
     389                if ( props.align )
     390                        classes.push( 'align' + props.align );
     391
     392                if ( props.size )
     393                        classes.push( 'size-' + props.size );
     394
     395                classes.push( 'wp-image-' + attachment.id );
     396
     397                img['class'] = _.compact( classes ).join(' ');
     398
     399                // Generate `img` tag options.
     400                options = {
     401                        tag:    'img',
     402                        attrs:  img,
     403                        single: true
     404                };
     405
     406                // Generate the `a` element options, if they exist.
     407                if ( props.anchor ) {
     408                        options = {
     409                                tag:     'a',
     410                                attrs:   props.anchor,
     411                                content: options
     412                        };
     413                }
     414
     415                return wp.html.string( options );
     416        };
    364417
    365418        mceview.add( 'attachment', {
    … …  
    367420
    368421                text: function( instance ) {
    369                         var img     = _.clone( instance.img ),
    370                                 classes = img['class'].split(/\s+/),
    371                                 options;
    372 
    373                         // Update `img` classes.
    374                         if ( instance.align )
    375                                 classes.push( 'align' + instance.align );
    376 
    377                         if ( instance.size )
    378                                 classes.push( 'size-' + instance.size );
    379 
    380                         classes.push( 'wp-image-' + instance.model.id );
    381 
    382                         img['class'] = _.compact( classes ).join(' ');
    383 
    384                         // Generate `img` tag options.
    385                         options = {
    386                                 tag:    'img',
    387                                 attrs:  img,
    388                                 single: true
    389                         };
    390 
    391                         // Generate the `a` element options, if they exist.
    392                         if ( instance.anchor ) {
    393                                 options = {
    394                                         tag:     'a',
    395                                         attrs:   instance.anchor,
    396                                         content: options
    397                                 };
    398                         }
    399 
    400                         return wp.html.string( options );
     422                        var props = _.pick( instance, 'align', 'size', 'link', 'img', 'anchor' );
     423                        return wp.media.string.image( instance.model, props );
    401424                },
    402425

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

    r22029 r22036  
    117117                },
    118118
     119                update: function() {
     120                        this.close();
     121                        this.trigger( 'update', this.selection );
     122                        this.selection.clear();
     123                },
     124
    119125                createSelection: function() {
    120126                        var controller = this;
    … …  
    480486                                        'insert-into-post': {
    481487                                                text:     l10n.insertIntoPost,
    482                                                 priority: 30
     488                                                priority: 30,
     489                                                click:    _.bind( controller.update, controller )
    483490                                        },
    484491
    … …  
    529536                                items: {
    530537                                        'return-to-library': {
    531                                                 text:  'Return to media library',
     538                                                text:     l10n.returnToLibrary,
    532539                                                priority: -40,
     540
    533541                                                click:  function() {
    534542                                                        controller.render('library');
    … …  
    537545
    538546                                        'insert-gallery-into-post': {
    539                                                 style: 'primary',
    540                                                 text:  'Insert gallery into post',
     547                                                style:    'primary',
     548                                                text:     l10n.insertGalleryIntoPost,
    541549                                                priority: 40,
    542                                                 click:  function() {
    543                                                         controller.close();
    544                                                 }
     550                                                click:    _.bind( controller.update, controller )
    545551                                        },
    546552
    547                                         'add-images': {
    548                                                 text:  'Add images from media library',
     553                                        'add-images-from-library': {
     554                                                text:     l10n.addImagesFromLibrary,
    549555                                                priority: 30
    550556                                        }

  • trunk/wp-includes/script-loader.php

    r22030 r22036  
    298298        ) );
    299299
    300         $scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox' ), false, 1 );
     300        $scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox', 'mce-view' ), false, 1 );
    301301
    302302        $scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r6', 1 );
    … …  
    318318        $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'media-models', 'wp-plupload' ), false, 1 );
    319319        did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
    320                 'insertMedia'         => __( 'Insert Media' ),
    321                 'selectMediaSingular' => __( 'Select a media file:' ),
    322                 'selectMediaMultiple' => __( 'Select one or more media files:' ),
    323                 'createNewGallery'    => __( 'Create a new gallery' ),
    324                 'insertIntoPost'      => __( 'Insert into post' ),
    325                 'addToGallery'        => __( 'Add to gallery' ),
     320                // Generic
     321                'insertMedia'           => __( 'Insert Media' ),
     322                'selectMediaSingular'   => __( 'Select a media file:' ),
     323                'selectMediaMultiple'   => __( 'Select one or more media files:' ),
     324
     325                // Library
     326                'createNewGallery'      => __( 'Create a new gallery' ),
     327                'insertIntoPost'        => __( 'Insert into post' ),
     328                'addToGallery'          => __( 'Add to gallery' ),
     329
     330                // Gallery
     331                'returnToLibrary'       => __( 'Return to media library' ),
     332                'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
     333                'addImagesFromLibrary'  => __( 'Add images from media library' ),
    326334        ) );
    327335
Note: See TracChangeset for help on using the changeset viewer.