Ticket #24716: 24716.10.diff

src/wp-admin/upload.php

@@ -24 +24 @@
         wp_enqueue_media();
         wp_enqueue_script( 'media' );
         require_once( ABSPATH . 'wp-admin/admin-header.php' );
-        ?><div class="view-switch media-grid-view-switch">
-                <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
-                        <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
-                </a>
-                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
-                        <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
-                </a>
-        </div><?php
         include( ABSPATH . 'wp-admin/admin-footer.php' );
         exit;
 }

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

@@ -909 +909 @@
         border-radius: 0;
 }
 
+.attachment .data-field {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        line-height: 19px;
+        height: 19px;
+        text-align: left;
+}
+
 /**
  * Attachments Browser
  */
@@ -924 +934 @@
         height: 50px;
 }
 
+.attachments-browser.hide-sidebar .media-toolbar {
+        right: 0;
+}
+
 .attachments-browser .media-toolbar-primary > .media-button,
 .attachments-browser .media-toolbar-primary > .media-button-group,
 .attachments-browser .media-toolbar-secondary > .media-button,
@@ -942 +956 @@
         outline: none;
 }
 
+/**
+ * Copied styles from the theme browser view.
+ *
+ * This should be OOCSS'd so both use a shared selector.
+ */
+.attachment .edit-media {
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+        opacity: 0;
+        position: absolute;
+        top: 25%;
+        right: 25%;
+        left: 25%;
+        background: #222;
+        background: rgba(0,0,0,0.7);
+        color: #fff;
+        font-size: 15px;
+        text-shadow: 0 1px 0 rgba(0,0,0,0.6);
+        -webkit-font-smoothing: antialiased;
+        font-weight: 600;
+        padding: 10px 0;
+        text-align: center;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-transition: opacity 0.1s ease-in-out;
+        transition: opacity 0.1s ease-in-out;
+}
+
+.attachment:hover .edit-media {
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+        opacity: 1;
+}
+
+.attachments-browser.hide-sidebar .attachments {
+        right: 0;
+}
+
 .attachments-browser .instructions {
         display: inline-block;
         margin-top: 16px;
@@ -2388 +2438 @@
         line-height: 29px;
 }
 
-.media-grid-view-switch {
-        position: fixed;
-        right: 10px;
-        top: 44px;
-        z-index: 300;
+.media-grid-view .view-switch {
+        display: inline-block;
+        float: none;
+        margin-top: 13px;
+        vertical-align: middle;
 }
 
 /**
@@ -2427 +2477 @@
         display: none;
 }
 
+/**
+ * Copied styles from the Add theme toolbar.
+ *
+ * This should be OOCSS'd so both use a shared selector.
+ */
+.media-grid-view .media-toolbar {
+        background: #fff;
+        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #555;
+        display: inline-block;
+        font-size: 13px;
+        padding: 0 20px;
+        position: relative;
+        width: 100%;
+}
+
+.media-grid-view.hide-router .media-frame-title {
+        box-shadow: none;
+}
+
 .media-grid-view .media-frame-content {
+        background-color: transparent;
         bottom: 40px;
 }
 @media screen and (max-width: 782px) {

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

@@ -337 +337 @@
         });
 
         /**
+         * A more abstracted state, because media.controller.State expects
+         * specific regions (menu, title, etc.) to exist on the frame, which do not
+         * exist in media.view.Frame.EditMediaDetails.
+         */
+        media.controller._State = Backbone.Model.extend({
+                constructor: function() {
+                        this.on( 'activate', this._preActivate, this );
+                        this.on( 'activate', this.activate, this );
+                        this.on( 'activate', this._postActivate, this );
+                        this.on( 'deactivate', this._deactivate, this );
+                        this.on( 'deactivate', this.deactivate, this );
+                        this.on( 'reset', this.reset, this );
+                        this.on( 'ready', this.ready, this );
+                        /**
+                         * Call parent constructor with passed arguments
+                         */
+                        Backbone.Model.apply( this, arguments );
+                },
+
+                /**
+                 * @abstract
+                 */
+                ready: function() {},
+                /**
+                 * @abstract
+                 */
+                activate: function() {},
+                /**
+                 * @abstract
+                 */
+                deactivate: function() {},
+                /**
+                 * @abstract
+                 */
+                reset: function() {},
+                /**
+                 * @access private
+                 */
+                _preActivate: function() {
+                        this.active = true;
+                },
+                /**
+                 * @access private
+                 */
+                _postActivate: function() {},
+                /**
+                 * @access private
+                 */
+                _deactivate: function() {
+                        this.active = false;
+                }
+        });
+
+        /**
          * wp.media.controller.State
          *
          * A state is a step in a workflow that when set will trigger the controllers
@@ -1350 +1404 @@
         });
 
         /**
+         * A state for editing (cropping, etc.) an image.
+         *
+         * @constructor
+         * @augments wp.media.controller.State
+         * @augments Backbone.Model
+         */
+        media.controller.EditImageNoFrame = media.controller._State.extend({
+                defaults: {
+                        id:      'edit-image',
+                        title:   l10n.editImage,
+                        // Region mode defaults.
+                        menu:    false,
+                        toolbar: 'edit-image',
+                        content: 'edit-image',
+
+                        url:     ''
+                },
+
+                initialize: function() {
+                        media.controller._State.prototype.initialize.apply( this, arguments );
+                },
+
+                activate: function() {
+                        this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar );
+                },
+
+                _postActivate: function() {
+                        this._content();
+                },
+
+                deactivate: function() {
+                        this.stopListening( this.frame );
+                },
+
+                toolbar: function() {
+                        var frame = this.frame,
+                                lastState = frame.lastState(),
+                                previous = lastState && lastState.id;
+
+                        frame.toolbar.set( new media.view.Toolbar({
+                                controller: frame,
+                                items: {
+                                        back: {
+                                                style: 'primary',
+                                                text:     l10n.back,
+                                                priority: 20,
+                                                click:    function() {
+                                                        if ( previous ) {
+                                                                frame.setState( previous );
+                                                        } else {
+                                                                frame.close();
+                                                        }
+                                                }
+                                        }
+                                }
+                        }) );
+                },
+
+                _content: function() {
+                        var mode = this.get( 'content' );
+                        if ( mode ) {
+                                this.frame[ 'content' ].render( mode );
+                        }
+                }
+        });
+
+        /**
          * wp.media.controller.MediaLibrary
          *
          * @constructor
@@ -1758 +1879 @@
                         _.defaults( this.options, {
                                 title:    '',
                                 modal:    true,
-                                uploader: true
+                                uploader: true,
+                                mode:     ['select']
                         });
 
                         // Ensure core UI is enabled.
@@ -1981 +2103 @@
                                 library:   {},
                                 multiple:  false,
                                 state:     'library',
-                                uploader:  true
+                                uploader:  true,
+                                mode:      [ 'grid', 'edit' ]
                         });
 
                         // Ensure core and media grid view UI is enabled.
@@ -2056 +2179 @@
                                         router:     false,
                                         content:    'browse',
                                         filterable: 'mime-types'
-                                }),
-
-                                new media.controller.EditImage( { model: options.editImage } )
+                                })
                         ]);
                 },
 
                 bindHandlers: function() {
                         this.on( 'content:create:browse', this.browseContent, this );
                         this.on( 'content:render:edit-image', this.editImageContent, this );
+
+                        // Handle a frame-level event for editing an attachment.
+                        this.on( 'edit:attachment', this.editAttachment, this );
+                },
+
+                /**
+                 * Open the Edit Attachment modal.
+                 */
+                editAttachment: function( model ) {
+                        new media.view.Frame.EditMediaDetails({ model: model });
                 },
 
                 /**
@@ -2088 +2219 @@
                                 display:    state.get('displaySettings'),
                                 dragInfo:   state.get('dragInfo'),
                                 bulkEdit:   true,
+                                sidebar:    false,
 
                                 suggestedWidth:  state.get('suggestedWidth'),
                                 suggestedHeight: state.get('suggestedHeight'),
@@ -4718 +4850 @@
                                         compat:        false,
                                         alt:           '',
                                         description:   ''
-                                });
+                                }, this.options );
 
                         options.buttons  = this.buttons;
                         options.describe = this.controller.state().get('describe');
@@ -4768 +4900 @@
                  */
                 toggleSelectionHandler: function( event ) {
                         var method;
-
                         // Catch enter and space events
                         if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
                                 return;
                         }
+
+                        // In the grid view, bubble up an edit:attachment event to the controller.
+                        if ( _.contains( this.controller.options.mode, 'grid' ) ) {
+                                this.controller.trigger( 'edit:attachment', this.model );
+                                return;
+                        }
+
                         if ( event.shiftKey ) {
                                 method = 'between';
                         } else if ( event.ctrlKey || event.metaKey ) {
@@ -5303 +5441 @@
                  */
                 createAttachmentView: function( attachment ) {
                         var view = new this.options.AttachmentView({
-                                controller: this.controller,
-                                model:      attachment,
-                                collection: this.collection,
-                                selection:  this.options.selection
+                                controller:           this.controller,
+                                model:                attachment,
+                                collection:           this.collection,
+                                selection:            this.options.selection,
+                                showAttachmentFields: this.options.showAttachmentFields
                         });
 
                         return this._viewsByCid[ attachment.cid ] = view;
@@ -5603 +5742 @@
                 }
         });
 
-
         /**
          * wp.media.view.AttachmentsBrowser
          *
@@ -5621 +5759 @@
                                 filters: false,
                                 search:  true,
                                 display: false,
-
+                                sidebar: true,
+                                showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ),
                                 AttachmentView: media.view.Attachment.Library
                         });
 
                         this.createToolbar();
                         this.updateContent();
-                        this.createSidebar();
+                        if ( this.options.sidebar ) {
+                                this.createSidebar();
+                        } else {
+                                this.$el.addClass( 'hide-sidebar' );
+                        }
 
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
@@ -5652 +5795 @@
 
                         this.views.add( this.toolbar );
 
+                        // Feels odd to bring the global media library switcher into the Attachment
+                        // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
+                        // which the controller can tap into and add this view?
+                        if ( _.contains( this.controller.options.mode, 'grid' ) ) {
+                                var libraryViewSwitcherConstructor = media.View.extend({
+                                        className: 'view-switch media-grid-view-switch',
+                                        template: media.template( 'media-library-view-switcher')
+                                });
+                                this.toolbar.set( 'libraryViewSwitcher', new libraryViewSwitcherConstructor({
+                                        controller: this.controller,
+                                        priority: -90
+                                }).render() );
+                        }
+
                         filters = this.options.filters;
                         if ( 'uploaded' === filters ) {
                                 FiltersConstructor = media.view.AttachmentFilters.Uploaded;
@@ -5746 +5903 @@
                         this.removeContent();
 
                         this.attachments = new media.view.Attachments({
-                                controller: this.controller,
-                                collection: this.collection,
-                                selection:  this.options.selection,
-                                model:      this.model,
-                                sortable:   this.options.sortable,
+                                controller:           this.controller,
+                                collection:           this.collection,
+                                selection:            this.options.selection,
+                                model:                this.model,
+                                sortable:             this.options.sortable,
+                                showAttachmentFields: this.options.showAttachmentFields,
 
                                 // The single `Attachment` view to be used in the `Attachments` view.
                                 AttachmentView: this.options.AttachmentView
@@ -6814 +6972 @@
                 }
         });
 
+        /**
+         * A frame for editing the details of a specific media item.
+         *
+         * Pops open in a modal by default.
+         */
+        media.view.Frame.EditMediaDetails = media.view.Frame.extend({
+
+                className: 'edit-media-overlay',
+                template: media.template( 'edit-media-details' ),
+                regions:   [ 'content' ],
+
+                events: {
+                        'click':                    'collapse',
+                        'click .delete-media-item': 'deleteMediaItem',
+                        'click .left':              'previousMediaItem',
+                        'click .right':             'nextMediaItem'
+                },
+
+                initialize: function( options ) {
+                        var self = this;
+                        media.view.Frame.prototype.initialize.apply( this, arguments );
+
+                        _.defaults( this.options, {
+                                modal:    true,
+                                state: 'edit-image'
+                        });
+
+                        this.createStates();
+
+                        this.on( 'content:render:edit-image', this.editImageContentUgh, this );
+                        // Initialize modal container view.
+                        if ( this.options.modal ) {
+                                this.modal = new media.view.Modal({
+                                        controller: this,
+                                        title:      this.options.title
+                                });
+
+                                // Completely destroy the modal DOM element when closing it.
+                                this.modal.close = function() {
+                                        self.modal.remove();
+                                };
+
+                                this.modal.content( this );
+                                this.modal.open();
+                        }
+                },
+
+                // Add the default states to the frame.
+                createStates: function() {
+                        this.states.add([
+                                new media.controller.EditImageNoFrame( { model: this.model } )
+                        ]);
+                },
+
+                /**
+                 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
+                 */
+                render: function() {
+                        // Activate the default state if no active state exists.
+                        if ( ! this.state() && this.options.state ) {
+                                this.setState( this.options.state );
+                        }
+                        /**
+                         * call 'render' directly on the parent class
+                         */
+                        return media.view.Frame.prototype.render.apply( this, arguments );
+                },
+
+                /**
+                 * For some reason the view doesn't exist in the DOM yet, don't have the
+                 * patience to track this down right now.
+                 */
+                editImageContentUgh: function() {
+                        _.defer( _.bind( this.editImageContent, this ) );
+                },
+
+                /**
+                 * Render the EditImage view into the frame's content region.
+                 */
+                editImageContent: function() {
+                        var view = new media.view.EditImage( { model: this.model, controller: this } ).render();
+
+                        this.content.set( view );
+
+                        // after creating the wrapper view, load the actual editor via an ajax call
+                        view.loadEditor();
+                }
+
+        });
+
         media.view.EditImage = media.View.extend({
 
                 className: 'image-editor',

src/wp-includes/media-template.php

@@ -220 +220 @@
                 </div>
         </script>
 
+        <script type="text/html" id="tmpl-media-library-view-switcher">
+                <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
+                        <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
+                </a>
+                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
+                        <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
+                </a>
+        </script>
+
         <script type="text/html" id="tmpl-uploader-status">
                 <h3><?php _e( 'Uploading' ); ?></h3>
                 <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
@@ -241 +250 @@
                 <span class="upload-error-message">{{ data.message }}</span>
         </script>
 
+        <script type="text/html" id="tmpl-edit-media-details">
+                <div class="edit-media-header">
+                        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
+                        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
+                </div>
+                <div class="media-frame-content"></div>
+        </script>
         <script type="text/html" id="tmpl-attachment">
                 <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
                         <# if ( data.uploading ) { #>
@@ -257 +273 @@
                                         <div>{{ data.filename }}</div>
                                 </div>
                         <# } #>
-
+                        <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
+                                <span class="edit-media">Edit Media</span>
+                        <# } #>
                         <# if ( data.buttons.close ) { #>
                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
                         <# } #>
@@ -283 +301 @@
                                         <# } #> {{ maybeReadOnly }} />
                         <# } #>
                 <# } #>
+                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
+                        <# _.each( data.showAttachmentFields, function( field ) { #>
+                                <div class="data-field data-{{ field }}">
+                                        <# if ( 'uploadedTo' === field ) { #>
+
+                                                <# if ( data[field] ) { #>
+                                                <?php _e( 'Uploaded To:' ) ?>
+                                                <# } else { #>
+                                                <?php _e( 'Unattached' ) ?>
+                                                <# } #>
+
+                                        <# } #>
+                                <# if ( data[field] ) { #>
+                                        &nbsp;{{ data[field] }}
+                                <# } #>
+                                </div>
+                        <# }); #>
+                <# } #>
+
         </script>
 
         <script type="text/html" id="tmpl-attachment-details">