Changeset 22173

Timestamp:

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