Changeset 22323

Timestamp:

10/29/2012 03:13:02 PM (13 years ago)

Author:

koopersmith

Message:

Add attachment details to the media sidebar.

• Also moves most of the Frame view's createSelection method to a real Selection model (which inherits from the Attachments model).
• Properly assigns the library within the Gallery state, allowing for the Gallery state to inherit from the Library state.

see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (4 diffs)
• js/media-models.js (modified) (1 diff)
• js/media-views.js (modified) (20 diffs)
• media.php (modified) (2 diffs)

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

@@ -308 +308 @@
 }
 
-.attachment .thumbnail,
-.attachment .thumbnail img {
+.attachment-preview .thumbnail,
+.attachment-preview .thumbnail img {
     -webkit-transition-property: width, height, top, left, right, bottom;
     -moz-transition-property:    width, height, top, left, right, bottom;
@@ -327 +327 @@
 }
 
-.attachment .thumbnail {
+.attachment-preview .thumbnail {
     width: 199px;
     height: 199px;
 }
 
-.attachment .thumbnail:after {
+.attachment-preview .thumbnail:after {
     content: '';
     display: block;
@@ -389 +389 @@
 }
 
-.attachment .describe {
+.media-frame .describe {
     position: relative;
     display: block;
@@ -594 +594 @@
 
 /**
+ * Attachment Details
+ */
+
+.attachment-details {
+    padding-top: 20px;
+}
+
+.attachment-details-preview {
+    cursor: default;
+}
+
+.attachment-details-preview,
+.attachment-details-preview .thumbnail {
+    width: auto;
+    height: auto;
+    float: left;
+    position: relative;
+}
+
+.attachment-details-preview .thumbnail img {
+    max-width: 120px;
+    max-height: 120px;
+    display: block;
+    margin: 0 auto;
+}
+
+.attachment-details .describe {
+    float: left;
+    margin: 10px 0 0;
+}
+
+/**
  * Attachment Display Settings
  */

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

@@ -614 +614 @@
     });
 
+    /**
+     * wp.media.model.Selection
+     *
+     * Used to manage a selection of attachments in the views.
+     */
+    media.model.Selection = Attachments.extend({
+        initialize: function( models, options ) {
+            Attachments.prototype.initialize.apply( this, arguments );
+            this.multiple = options && options.multiple;
+        },
+
+        // Override the selection's add method.
+        // If the workflow does not support multiple
+        // selected attachments, reset the selection.
+        add: function( models, options ) {
+            if ( ! this.multiple ) {
+                models = _.isArray( models ) ? _.first( models ) : models;
+                this.clear( options );
+            }
+
+            return Attachments.prototype.add.call( this, models, options );
+        },
+
+        // Removes all models from the selection.
+        clear: function( options ) {
+            return this.remove( this.models, options );
+        },
+
+        // Override the selection's reset method.
+        // Always direct items through add and remove,
+        // as we need them to fire.
+        reset: function( models, options ) {
+            return this.clear( options ).add( models, options );
+        },
+
+        // Create selection.has, which determines if a model
+        // exists in the collection based on cid and id,
+        // instead of direct comparison.
+        has: function( attachment ) {
+            return !! ( this.getByCid( attachment.cid ) || this.get( attachment.id ) );
+        }
+    });
+
 }(jQuery));

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

@@ -119 +119 @@
 
         initialize: function() {
-            if ( ! this.get('selection') )
-                this.set( 'selection', new Attachments() );
+            if ( ! this.get('selection') ) {
+                this.set( 'selection', new media.model.Selection( null, {
+                    multiple: this.get('multiple')
+                }) );
+            }
 
             if ( ! this.get('library') )
@@ -126 +129 @@
 
             this.on( 'activate', this.activate, this );
+            this.on( 'deactivate', this.deactivate, this );
+            this.on( 'change:details', this.details, this );
         },
 
         activate: function() {
+            this.toolbar();
+            this.sidebar();
+            this.content();
+
+            // If we're in a workflow that supports multiple attachments,
+            // automatically select any uploading attachments.
+            if ( this.get('multiple') )
+                wp.Uploader.queue.on( 'add', this.selectUpload, this );
+
+            this.get('selection').on( 'add remove', this.toggleDetails, this );
+        },
+
+        deactivate: function() {
+            var toolbar = this._postLibraryToolbar;
+            if ( toolbar )
+                this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
+
+            wp.Uploader.queue.off( 'add', this.selectUpload, this );
+            this.get('selection').off( 'add remove', this.toggleDetails, this );
+        },
+
+        toolbar: function() {
             var frame = this.frame,
                 toolbar;
@@ -140 +167 @@
             frame.toolbar( toolbar );
             this.get('selection').on( 'add remove', toolbar.visibility, toolbar );
+        },
+
+        sidebar: function() {
+            var frame = this.frame;
 
             // Sidebar.
             frame.sidebar( new media.view.Sidebar({
-                controller: frame,
-                views: {
-                    search: new media.view.Search({
-                        controller: frame,
-                        model:      this.get('library').props,
-                        priority:   20
-                    }),
-
-                    selection: new media.view.SelectionPreview({
-                        controller: frame,
-                        collection: this.get('selection'),
-                        priority:   40
-                    })
-                }
+                controller: frame
             }) );
+
+            this.details({ silent: true });
+            frame.sidebar().add({
+                search: new media.view.Search({
+                    controller: frame,
+                    model:      this.get('library').props,
+                    priority:   20
+                }),
+
+                selection: new media.view.SelectionPreview({
+                    controller: frame,
+                    collection: this.get('selection'),
+                    priority:   40
+                })
+            });
+        },
+
+        content: function() {
+            var frame = this.frame;
 
             // Content.
@@ -166 +203 @@
                 AttachmentView: media.view.Attachment.Library
             }).render() );
-
-            // If we're in a workflow that supports multiple attachments,
-            // automatically select any uploading attachments.
-            if ( this.get('multiple') )
-                wp.Uploader.queue.on( 'add', this.selectUpload, this );
-        },
-
-        deactivate: function() {
-            var toolbar = this._postLibraryToolbar;
-
-            wp.Uploader.queue.off( 'add', this.selectUpload, this );
-            this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
         },
 
         selectUpload: function( attachment ) {
             this.get('selection').add( attachment );
+        },
+
+        details: function( options ) {
+            var model = this.get('details'),
+                view;
+
+            if ( model ) {
+                view = new media.view.Attachment.Details({
+                    controller: this.frame,
+                    model:      model,
+                    priority:   80
+                });
+            } else {
+                view = new Backbone.View();
+            }
+
+            if ( ! options || ! options.silent )
+                view.render();
+
+            this.frame.sidebar().add( 'details', view, options );
+        },
+
+        toggleDetails: function( model ) {
+            var details = this.get('details'),
+                selection = this.get('selection');
+
+            if ( selection.has( model ) )
+                this.set( 'details', model );
+            else if ( selection.length )
+                this.set( 'details', selection.last() );
+            else
+                this.unset('details');
         }
     });
@@ -187 +244 @@
     // wp.media.controller.Gallery
     // ---------------------------
-    media.controller.Gallery = Backbone.Model.extend({
+    media.controller.Gallery = media.controller.Library.extend({
         defaults: {
             id:         'gallery',
-            multiple:   true,
+            multiple:   false,
             describe:   true,
             title:      l10n.createGallery
         },
 
-        initialize: function() {
-            if ( ! this.get('selection') )
-                this.set( 'selection', new Attachments() );
-
-            this.on( 'activate', this.activate, this );
-        },
-
-        activate: function() {
-            var frame = this.frame;
-
-            // Toolbar.
-            frame.toolbar( new media.view.Toolbar.Gallery({
-                controller: frame,
+        toolbar: function() {
+            this.frame.toolbar( new media.view.Toolbar.Gallery({
+                controller: this.frame,
                 state:      this
             }) );
+        },
+
+        sidebar: function() {
+            var frame = this.frame;
 
             // Sidebar.
             frame.sidebar( new media.view.Sidebar({
                 controller: frame
-            }).render() );
-
-            // Content.
-            frame.content( new media.view.Attachments({
-                controller: frame,
-                collection: this.get('selection'),
+            }) );
+
+            this.details();
+        },
+
+        content: function() {
+            this.frame.content( new media.view.Attachments({
+                controller: this.frame,
+                collection: this.get('library'),
                 sortable:   true,
                 // The single `Attachment` view to be used in the `Attachments` view.
                 AttachmentView: media.view.Attachment.Gallery
             }).render() );
-
-            // Automatically select any uploading attachments.
-            wp.Uploader.queue.on( 'add', this.selectUpload, this );
-        },
-
-        deactivate: function() {
-            wp.Uploader.queue.off( 'add', this.selectUpload, this );
-        },
-
-        selectUpload: function( attachment ) {
-            this.get('selection').add( attachment );
         }
     });
@@ -289 +332 @@
                 selection = this.options.selection;
 
-            if ( ! (selection instanceof Attachments) )
-                selection = this.options.selection = new Attachments( selection );
-
-            _.extend( selection, {
-                // Override the selection's add method.
-                // If the workflow does not support multiple
-                // selected attachments, reset the selection.
-                add: function( models, options ) {
-                    if ( ! controller.state().get('multiple') ) {
-                        models = _.isArray( models ) ? _.first( models ) : models;
-                        this.clear( options );
-                    }
-
-                    return Attachments.prototype.add.call( this, models, options );
-                },
-
-                // Removes all models from the selection.
-                clear: function( options ) {
-                    return this.remove( this.models, options );
-                },
-
-                // Override the selection's reset method.
-                // Always direct items through add and remove,
-                // as we need them to fire.
-                reset: function( models, options ) {
-                    return this.clear( options ).add( models, options );
-                },
-
-                // Create selection.has, which determines if a model
-                // exists in the collection based on cid and id,
-                // instead of direct comparison.
-                has: function( attachment ) {
-                    return !! ( this.getByCid( attachment.cid ) || this.get( attachment.id ) );
-                }
-            });
+            if ( ! (selection instanceof media.model.Selection) ) {
+                selection = this.options.selection = new media.model.Selection( selection, {
+                    multiple: this.options.multiple
+                });
+            }
         },
 
@@ -340 +353 @@
             this.states.add([
                 new media.controller.Library({
-                    selection:  options.selection,
-                    collection: media.query( options.library ),
-                    multiple:   this.options.multiple
+                    selection: options.selection,
+                    library:   media.query( options.library ),
+                    multiple:  this.options.multiple
                 }),
                 new media.controller.Gallery({
-                    selection:  options.selection
+                    library: options.selection
                 })
             ]);
@@ -631 +644 @@
 
             if ( this.options.items )
-                this.add( this.options.items, { silent: true }).render();
+                this.add( this.options.items, { silent: true });
+
+            if ( ! this.options.silent )
+                this.render();
         },
 
@@ -651 +667 @@
 
         add: function( id, view, options ) {
+            options = options || {};
+
             // Accept an object with an `id` : `view` mapping.
             if ( _.isObject( id ) ) {
                 _.each( id, function( view, id ) {
-                    this.add( id, view, options );
+                    this.add( id, view, { silent: true });
                 }, this );
+
+                if ( ! options.silent )
+                    this.render();
                 return this;
             }
@@ -667 +688 @@
 
             this._views[ id ] = view;
-            if ( ! options || ! options.silent )
+            if ( ! options.silent )
                 this.render();
             return this;
@@ -778 +799 @@
             var state = this.options.state,
                 editing = state.get('editing'),
-                selection = state.get('selection'),
+                library = state.get('library'),
                 controller = this.options.controller;
 
@@ -788 +809 @@
                     click:    function() {
                         controller.close();
-                        state.trigger( 'update', selection );
-                        selection.clear();
+                        state.trigger( 'update', library );
+                        library.clear();
                         controller.state('library');
                     }
@@ -922 +943 @@
 
             if ( this.options.views )
-                this.add( this.options.views, { silent: true }).render();
+                this.add( this.options.views, { silent: true });
+
+            if ( ! this.options.silent )
+                this.render();
         },
 
@@ -950 +974 @@
 
         add: function( id, view, options ) {
+            options = options || {};
+
             // Accept an object with an `id` : `view` mapping.
             if ( _.isObject( id ) ) {
                 _.each( id, function( view, id ) {
-                    this.add( id, view, options );
+                    this.add( id, view, { silent: true });
                 }, this );
+
+                if ( ! options.silent )
+                    this.render();
                 return this;
             }
@@ -961 +990 @@
 
             this._views[ id ] = view;
-            if ( ! options || ! options.silent )
+            if ( ! options.silent )
                 this.render();
             return this;
@@ -990 +1019 @@
             'mouseenter .attachment-preview': 'shrink',
             'mouseleave .attachment-preview': 'expand',
-            'change .describe':               'describe',
-            'click .close':                   'toggleSelection'
+            'change .describe':               'describe'
         },
 
@@ -1183 +1211 @@
         events: (function() {
             var events = _.clone( media.view.Attachment.prototype.events );
-            delete events['click .attachment-preview'];
+            events['click .close'] = 'removeFromGallery';
             return events;
-        }())
+        }()),
+
+        removeFromGallery: function() {
+            this.controller.state().get('library').remove( this.model );
+        }
     });
 
@@ -1377 +1409 @@
         render: function() {
             var options = _.clone( this.options ),
-                first, sizes, amount;
+                last, sizes, amount;
 
             // If nothing is selected, display nothing.
@@ -1386 +1418 @@
 
             options.count = this.collection.length;
-            first = this.collection.first();
-            sizes = first.get('sizes');
-
-            if ( 'image' === first.get('type') )
-                options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : first.get('url');
+            last  = this.collection.last();
+            sizes = last.get('sizes');
+
+            if ( 'image' === last.get('type') )
+                options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : last.get('url');
             else
-                options.thumbnail =  first.get('icon');
+                options.thumbnail =  last.get('icon');
 
             this.$el.html( this.template( options ) );
@@ -1491 +1523 @@
         }
     });
+
+    /**
+     * wp.media.view.Attachment.Details
+     */
+    media.view.Attachment.Details = media.view.Attachment.extend({
+        tagName:   'div',
+        className: 'attachment-details',
+        template:  media.template('attachment-details'),
+
+        events: {
+            'change .describe': 'describe'
+        }
+    });
 }(jQuery));

trunk/wp-includes/media.php

@@ -1306 +1306 @@
     <script type="text/html" id="tmpl-uploader-window">
         <div class="uploader-window-content">
-            <h3><?php _e( 'Drop files here to upload' ); ?></h3>
+            <h3><?php _e( 'Drop files to upload' ); ?></h3>
         </div>
     </script>
@@ -1359 +1359 @@
     </script>
 
+    <script type="text/html" id="tmpl-attachment-details">
+        <div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
+            <% if ( uploading ) { %>
+                <div class="media-progress-bar"><div></div></div>
+            <% } else if ( 'image' === type ) { %>
+                <div class="thumbnail">
+                    <img src="<%- url %>" draggable="false" />
+                </div>
+            <% } else { %>
+                <div class="icon-thumbnail">
+                    <img src="<%- icon %>" class="icon" draggable="false" />
+                    <div class="filename"><%- filename %></div>
+                </div>
+            <% } %>
+        </div>
+
+        <% 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>
+
     <script type="text/html" id="tmpl-media-selection-preview">
         <div class="selected-img selected-count-<%- count %>">