WordPress.org

Make WordPress Core

Changeset 22036


Ignore:
Timestamp:
09/27/2012 04:09:43 AM (8 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.