Changeset 22173

Timestamp:

10/10/2012 11:32:48 PM (14 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:

• wp-admin/admin-ajax.php (modified) (1 diff)
• wp-admin/includes/ajax-actions.php (modified) (1 diff)
• wp-admin/js/media-upload.js (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (3 diffs)
• wp-includes/js/mce-view.js (modified) (1 diff)
• wp-includes/js/media-models.js (modified) (2 diffs)
• wp-includes/js/media-views.js (modified) (4 diffs)
• wp-includes/media.php (modified) (1 diff)

trunk/wp-admin/admin-ajax.php

@@ -54 +54 @@
         'sample-permalink', 'inline-save', 'inline-save-tax', 'find_posts', 'widgets-order',
         'save-widget', 'set-post-thumbnail', 'date_format', 'time_format', 'wp-fullscreen-save-post',
-        'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment', 'query-attachments',
+        'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
+        'query-attachments', 'save-attachment',
 );
 

trunk/wp-admin/includes/ajax-actions.php

@@ -1821 +1821 @@
         wp_send_json_success( $posts );
 }
+
+/**
+ * Save attachment attributes.
+ *
+ * @since 3.5.0
+ */
+function wp_ajax_save_attachment() {
+        if ( ! isset( $_REQUEST['id'] ) || ! isset( $_REQUEST['changes'] ) )
+                wp_send_json_error();
+
+        if ( ! $id = absint( $_REQUEST['id'] ) )
+                wp_send_json_error();
+
+        if ( ! current_user_can( 'edit_post', $id ) )
+                wp_send_json_error();
+
+        $changes = $_REQUEST['changes'];
+        $args    = array();
+
+        if ( $changes['title'] )
+                $args['post_title'] = $changes['title'];
+
+        if ( $changes['caption'] )
+                $args['post_excerpt'] = $changes['caption'];
+
+        if ( $args )
+                wp_update_post( array_merge( $args, array( 'ID' => $id ) ) );
+
+        wp_send_json_success();
+}

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

@@ -105 +105 @@
                         workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
                                 title:    wp.media.view.l10n.insertMedia,
-                                multiple: true
+                                multiple: true,
+                                describe: true
                         } ) );
 

trunk/wp-includes/css/media-views.css

@@ -247 +247 @@
         position: relative;
         float: left;
+
+        padding: 0;
+        margin: 0 10px 20px;
+        color: #464646;
+
+        -webkit-user-select: none;
+        -moz-user-select:    none;
+        -ms-user-select:     none;
+        -o-user-select:      none;
+        user-select:         none;
+}
+
+.attachment.library.selected:after {
+        content: '\2713';
+        display: block;
+        height: 24px;
+        width: 24px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        line-height: 24px;
+        font-size: 18px;
+        text-align: center;
+        color: #fff;
+        background: #21759b;
+}
+
+.attachment-preview {
+        position: relative;
         width: 199px;
         height: 199px;
-
-        padding: 0;
-        margin: 0 10px 20px;
+        overflow: hidden;
         box-shadow:
                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
@@ -257 +284 @@
         background: #eee;
         cursor: pointer;
-        color: #464646;
-
-        -webkit-user-select: none;
-        -moz-user-select:    none;
-        -ms-user-select:     none;
-        -o-user-select:      none;
-        user-select:         none;
-}
-
-.attachment.library.selected:after {
-        content: '\2713';
-        display: block;
-        height: 24px;
-        width: 24px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        line-height: 24px;
-        font-size: 18px;
-        text-align: center;
-        color: #fff;
-        background: #21759b;
-}
-
-.attachment-preview {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: hidden;
 }
 
@@ -391 +387 @@
 }
 
+.attachment .describe {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 66px;
+        margin: -1px 0 0;
+        padding: 8px;
+        font-size: 12px;
+        resize: none;
+        border-radius: 0;
+}
+
 
 /* Square crop with overflow visible on hover. */

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

@@ -640 +640 @@
                                         title:     mceview.l10n.editGallery,
                                         editing:   true,
-                                        multiple:  true
+                                        multiple:  true,
+                                        describe:  true
                                 });
 

trunk/wp-includes/js/media-models.js

@@ -175 +175 @@
         Attachment = media.model.Attachment = Backbone.Model.extend({
                 sync: function( method, model, options ) {
-                        // Overload the read method so Attachment.fetch() functions correctly.
+                        // Overload the `read` request so Attachment.fetch() functions correctly.
                         if ( 'read' === method ) {
                                 options = options || {};
@@ -185 +185 @@
                                 return media.ajax( options );
 
-                        // Otherwise, fall back to Backbone.sync()
-                        } else {
-                                return Backbone.sync.apply( this, arguments );
+                        // Overload the `update` request so properties can be saved.
+                        } else if ( 'update' === method ) {
+                                options = options || {};
+                                options.context = this;
+
+                                // Set the action and ID.
+                                options.data = _.extend( options.data || {}, {
+                                        action: 'save-attachment',
+                                        id: this.id
+                                });
+
+                                // Record the values of the changed attributes.
+                                if ( options.changes ) {
+                                        _.each( options.changes, function( value, key ) {
+                                                options.changes[ key ] = this.get( key );
+                                        }, this );
+
+                                        options.data.changes = options.changes;
+                                        delete options.changes;
+                                }
+
+                                return media.ajax( options );
                         }
                 },
 
                 parse: function( resp, xhr ) {
+                        if ( ! resp )
+                                return resp;
+
                         // Convert date strings into Date objects.
                         resp.date = new Date( resp.date );

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

@@ -386 +386 @@
 
                 events: {
-                        'click': 'toggleSelection',
-                        'mouseenter': 'shrink',
-                        'mouseleave': 'expand'
+                        'click .attachment-preview': 'toggleSelection',
+                        'mouseenter .attachment-preview': 'shrink',
+                        'mouseleave .attachment-preview': 'expand',
+                        'change .describe': 'describe'
                 },
 
@@ -416 +417 @@
                                 });
 
-                        options.buttons = this.buttons;
+                        options.buttons  = this.buttons;
+                        options.describe = this.controller.get('describe');
 
                         if ( 'image' === options.type )
@@ -534 +536 @@
                                 height: 199
                         });
+                },
+
+                describe: function( event ) {
+                        if ( 'image' === this.model.get('type') )
+                                this.model.save( 'caption', event.target.value );
+                        else
+                                this.model.save( 'title', event.target.value );
                 }
         });
@@ -818 +827 @@
 
                 events: {
-                        'keyup input': 'search'
+                        'keyup .search': 'search'
                 },
 

trunk/wp-includes/media.php

@@ -1346 +1346 @@
                         <% } %>
                 </div>
-                <div class="describe"></div>
+                <% if ( describe ) { %>
+                        <% if ( 'image' === type ) { %>
+                                <textarea class="describe"
+                                        placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
+                                        ><%- caption %></textarea>
+                        <% } else { %>
+                                <textarea class="describe"
+                                        <% if ( 'video' === type ) { %>
+                                                placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
+                                        <% } else if ( 'audio' === type ) { %>
+                                                placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
+                                        <% } else { %>
+                                                placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
+                                        <% } %>
+                                        ><%- title %></textarea>
+                        <% } %>
+                <% } %>
         </script>