WordPress.org

Make WordPress Core

Changeset 22173


Ignore:
Timestamp:
10/10/2012 11:32:48 PM (8 years ago)
Author:
koopersmith
Message:

Caption editing in the media modal library.

  • Adds a describe option to the workflow controller to support inline caption editing.
  • For images, descriptions are mapped to the caption attribute.
  • For other media items, descriptions are mapped to the title attribute.
  • Descriptions are saved when the textarea's change event fires (i.e. when the textarea is blurred).

fixes #21807, see #21390.

Location:
trunk
Files:
8 edited

Legend:

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

    r22001 r22173  
    5454    'sample-permalink', 'inline-save', 'inline-save-tax', 'find_posts', 'widgets-order',
    5555    'save-widget', 'set-post-thumbnail', 'date_format', 'time_format', 'wp-fullscreen-save-post',
    56     'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment', 'query-attachments',
     56    'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
     57    'query-attachments', 'save-attachment',
    5758);
    5859
  • trunk/wp-admin/includes/ajax-actions.php

    r22129 r22173  
    18211821    wp_send_json_success( $posts );
    18221822}
     1823
     1824/**
     1825 * Save attachment attributes.
     1826 *
     1827 * @since 3.5.0
     1828 */
     1829function wp_ajax_save_attachment() {
     1830    if ( ! isset( $_REQUEST['id'] ) || ! isset( $_REQUEST['changes'] ) )
     1831        wp_send_json_error();
     1832
     1833    if ( ! $id = absint( $_REQUEST['id'] ) )
     1834        wp_send_json_error();
     1835
     1836    if ( ! current_user_can( 'edit_post', $id ) )
     1837        wp_send_json_error();
     1838
     1839    $changes = $_REQUEST['changes'];
     1840    $args    = array();
     1841
     1842    if ( $changes['title'] )
     1843        $args['post_title'] = $changes['title'];
     1844
     1845    if ( $changes['caption'] )
     1846        $args['post_excerpt'] = $changes['caption'];
     1847
     1848    if ( $args )
     1849        wp_update_post( array_merge( $args, array( 'ID' => $id ) ) );
     1850
     1851    wp_send_json_success();
     1852}
  • trunk/wp-admin/js/media-upload.js

    r22170 r22173  
    105105            workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
    106106                title:    wp.media.view.l10n.insertMedia,
    107                 multiple: true
     107                multiple: true,
     108                describe: true
    108109            } ) );
    109110
  • trunk/wp-includes/css/media-views.css

    r22159 r22173  
    247247    position: relative;
    248248    float: left;
     249
     250    padding: 0;
     251    margin: 0 10px 20px;
     252    color: #464646;
     253
     254    -webkit-user-select: none;
     255    -moz-user-select:    none;
     256    -ms-user-select:     none;
     257    -o-user-select:      none;
     258    user-select:         none;
     259}
     260
     261.attachment.library.selected:after {
     262    content: '\2713';
     263    display: block;
     264    height: 24px;
     265    width: 24px;
     266    position: absolute;
     267    top: 0;
     268    left: 0;
     269    line-height: 24px;
     270    font-size: 18px;
     271    text-align: center;
     272    color: #fff;
     273    background: #21759b;
     274}
     275
     276.attachment-preview {
     277    position: relative;
    249278    width: 199px;
    250279    height: 199px;
    251 
    252     padding: 0;
    253     margin: 0 10px 20px;
     280    overflow: hidden;
    254281    box-shadow:
    255282        inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
     
    257284    background: #eee;
    258285    cursor: pointer;
    259     color: #464646;
    260 
    261     -webkit-user-select: none;
    262     -moz-user-select:    none;
    263     -ms-user-select:     none;
    264     -o-user-select:      none;
    265     user-select:         none;
    266 }
    267 
    268 .attachment.library.selected:after {
    269     content: '\2713';
    270     display: block;
    271     height: 24px;
    272     width: 24px;
    273     position: absolute;
    274     top: 0;
    275     left: 0;
    276     line-height: 24px;
    277     font-size: 18px;
    278     text-align: center;
    279     color: #fff;
    280     background: #21759b;
    281 }
    282 
    283 .attachment-preview {
    284     position: absolute;
    285     top: 0;
    286     left: 0;
    287     right: 0;
    288     bottom: 0;
    289     overflow: hidden;
    290286}
    291287
     
    391387}
    392388
     389.attachment .describe {
     390    position: relative;
     391    display: block;
     392    width: 100%;
     393    height: 66px;
     394    margin: -1px 0 0;
     395    padding: 8px;
     396    font-size: 12px;
     397    resize: none;
     398    border-radius: 0;
     399}
     400
    393401
    394402/* Square crop with overflow visible on hover. */
  • trunk/wp-includes/js/mce-view.js

    r22170 r22173  
    640640                    title:     mceview.l10n.editGallery,
    641641                    editing:   true,
    642                     multiple:  true
     642                    multiple:  true,
     643                    describe:  true
    643644                });
    644645
  • trunk/wp-includes/js/media-models.js

    r22149 r22173  
    175175    Attachment = media.model.Attachment = Backbone.Model.extend({
    176176        sync: function( method, model, options ) {
    177             // Overload the read method so Attachment.fetch() functions correctly.
     177            // Overload the `read` request so Attachment.fetch() functions correctly.
    178178            if ( 'read' === method ) {
    179179                options = options || {};
     
    185185                return media.ajax( options );
    186186
    187             // Otherwise, fall back to Backbone.sync()
    188             } else {
    189                 return Backbone.sync.apply( this, arguments );
     187            // Overload the `update` request so properties can be saved.
     188            } else if ( 'update' === method ) {
     189                options = options || {};
     190                options.context = this;
     191
     192                // Set the action and ID.
     193                options.data = _.extend( options.data || {}, {
     194                    action: 'save-attachment',
     195                    id: this.id
     196                });
     197
     198                // Record the values of the changed attributes.
     199                if ( options.changes ) {
     200                    _.each( options.changes, function( value, key ) {
     201                        options.changes[ key ] = this.get( key );
     202                    }, this );
     203
     204                    options.data.changes = options.changes;
     205                    delete options.changes;
     206                }
     207
     208                return media.ajax( options );
    190209            }
    191210        },
    192211
    193212        parse: function( resp, xhr ) {
     213            if ( ! resp )
     214                return resp;
     215
    194216            // Convert date strings into Date objects.
    195217            resp.date = new Date( resp.date );
  • trunk/wp-includes/js/media-views.js

    r22161 r22173  
    386386
    387387        events: {
    388             'click': 'toggleSelection',
    389             'mouseenter': 'shrink',
    390             'mouseleave': 'expand'
     388            'click .attachment-preview': 'toggleSelection',
     389            'mouseenter .attachment-preview': 'shrink',
     390            'mouseleave .attachment-preview': 'expand',
     391            'change .describe': 'describe'
    391392        },
    392393
     
    416417                });
    417418
    418             options.buttons = this.buttons;
     419            options.buttons  = this.buttons;
     420            options.describe = this.controller.get('describe');
    419421
    420422            if ( 'image' === options.type )
     
    534536                height: 199
    535537            });
     538        },
     539
     540        describe: function( event ) {
     541            if ( 'image' === this.model.get('type') )
     542                this.model.save( 'caption', event.target.value );
     543            else
     544                this.model.save( 'title', event.target.value );
    536545        }
    537546    });
     
    818827
    819828        events: {
    820             'keyup input': 'search'
     829            'keyup .search': 'search'
    821830        },
    822831
  • trunk/wp-includes/media.php

    r22170 r22173  
    13461346            <% } %>
    13471347        </div>
    1348         <div class="describe"></div>
     1348        <% if ( describe ) { %>
     1349            <% if ( 'image' === type ) { %>
     1350                <textarea class="describe"
     1351                    placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
     1352                    ><%- caption %></textarea>
     1353            <% } else { %>
     1354                <textarea class="describe"
     1355                    <% if ( 'video' === type ) { %>
     1356                        placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
     1357                    <% } else if ( 'audio' === type ) { %>
     1358                        placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
     1359                    <% } else { %>
     1360                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
     1361                    <% } %>
     1362                    ><%- title %></textarea>
     1363            <% } %>
     1364        <% } %>
    13491365    </script>
    13501366
Note: See TracChangeset for help on using the changeset viewer.