Changeset 28682

Timestamp:

06/05/2014 10:00:24 PM (9 years ago)

Author:

helen

Message:

Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further.

props ericlewis, shaunandrews, wonderboymusic.
see #24716.

Location:

trunk/src

Files:

• wp-admin/css/list-tables.css (modified) (3 diffs)
• wp-admin/includes/class-wp-list-table.php (modified) (1 diff)
• wp-admin/includes/class-wp-media-list-table.php (modified) (3 diffs)
• wp-admin/js/media.js (modified) (1 diff)
• wp-admin/upload.php (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (4 diffs)
• wp-includes/js/media-models.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (4 diffs)
• wp-includes/media-template.php (modified) (2 diffs)
• wp-includes/media.php (modified) (2 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -635 +635 @@
 .view-switch > a:before {
     color: #bbb;
-    content: '\f163';
     display: inline-block;
     float: left;
@@ -646 +645 @@
 }
 
+.view-switch > .view-list:before {
+    content: '\f163';
+}
+
 .view-switch a:hover:before {
     color: #727272;
@@ -654 +657 @@
 }
 
-.view-switch > a + a:before {
+.view-switch > a + a {
     margin-left: 5px;
+}
+
+.view-switch > .view-excerpt:before {
     content: '\f164';
+}
+
+.view-switch > .view-grid:before {
+    content: '\f180';
 }
 

trunk/src/wp-admin/includes/class-wp-list-table.php

@@ -494 +494 @@
 <?php
             foreach ( $modes as $mode => $title ) {
-                $class = ( $current_mode == $mode ) ? 'class="current"' : '';
-                echo "<a href='" . esc_url( add_query_arg( 'mode', $mode, $_SERVER['REQUEST_URI'] ) ) . "' $class><img id='view-switch-$mode' src='" . esc_url( includes_url( 'images/blank.gif' ) ) . "' width='20' height='20' title='$title' alt='$title' /></a>\n";
+                $classes = array( 'view-' . $mode );
+                if ( $current_mode == $mode )
+                    $classes[] = 'current';
+                printf(
+                    "<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
+                    esc_url( add_query_arg( 'mode', $mode ) ),
+                    implode( ' ', $classes ),
+                    esc_url( includes_url( 'images/blank.gif' ) ),
+                    $title,
+                    $title
+                );
             }
         ?>

trunk/src/wp-admin/includes/class-wp-media-list-table.php

@@ -24 +24 @@
 
     public function prepare_items() {
-        global $lost, $wp_query, $post_mime_types, $avail_post_mime_types;
+        global $lost, $wp_query, $post_mime_types, $avail_post_mime_types, $mode;
 
         $q = $_REQUEST;
@@ -34 +34 @@
 
         $this->is_trash = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status'];
+
+        $mode = empty( $_REQUEST['mode'] ) ? 'list' : $_REQUEST['mode'];
 
         $this->set_pagination_args( array(
@@ -124 +126 @@
     public function no_items() {
         _e( 'No media attachments found.' );
+    }
+
+    protected function pagination( $which ) {
+        global $mode;
+
+        parent::pagination( $which );
+
+        $this->view_switcher( $mode );
+    }
+
+    /**
+     * Display a view switcher
+     *
+     * @since 3.1.0
+     * @access protected
+     */
+    protected function view_switcher( $current_mode ) {
+        $modes = array(
+            'list'    => __( 'List View' ),
+            'grid' => __( 'Grid View' )
+        );
+
+?>
+        <input type="hidden" name="mode" value="<?php echo esc_attr( $current_mode ); ?>" />
+        <div class="view-switch">
+<?php
+            foreach ( $modes as $mode => $title ) {
+                $classes = array( 'view-' . $mode );
+                if ( $current_mode == $mode )
+                    $classes[] = 'current';
+                printf(
+                    "<a href='%s' class='%s'><img id='view-switch-$mode' src='%s' width='20' height='20' title='%s' alt='%s' /></a>\n",
+                    esc_url( add_query_arg( 'mode', $mode ) ),
+                    implode( ' ', $classes ),
+                    esc_url( includes_url( 'images/blank.gif' ) ),
+                    $title,
+                    $title
+
+                );
+            }
+        ?>
+        </div>
+<?php
     }
 

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

@@ -73 +73 @@
 
     $( document ).ready( function() {
+        // Open up a manage media frame into the grid.
+        wp.media && wp.media({
+            frame: 'manage',
+            container: $('#wpbody-content')
+        }).open();
+
         $( '#find-posts-submit' ).click( function( event ) {
             if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length )

trunk/src/wp-admin/upload.php

@@ -12 +12 @@
 if ( !current_user_can('upload_files') )
     wp_die( __( 'You do not have permission to upload files.' ) );
+
+$mode = get_user_option( 'media_library_mode', get_current_user_id() ) ? get_user_option( 'media_library_mode', get_current_user_id() ) : 'grid';
+$modes = array( 'grid', 'list' );
+
+if ( isset( $_GET['mode'] ) && in_array( $_GET['mode'], $modes ) ) {
+    $mode = $_GET['mode'];
+    update_user_option( get_current_user_id(), 'media_library_mode', $mode );
+}
+
+if ( 'grid' === $mode ) {
+    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;
+}
 
 $wp_list_table = _get_list_table('WP_Media_List_Table');
@@ -238 +262 @@
 
 <div id="ajax-response"></div>
-<?php find_posts_div(); ?> 
+<?php find_posts_div(); ?>
 </form>
 </div>

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

@@ -296 +296 @@
 }
 
-.media-sidebar .setting span {
+.media-sidebar .setting .name {
     min-width: 30%;
     margin-right: 4%;
     font-size: 12px;
+    text-align: right;
 }
 
@@ -320 +321 @@
     padding-top: 8px;
     line-height: 16px;
-    text-align: right;
     font-weight: normal;
     color: #666;
 }
 
+.compat-item label span  {
+    text-align: right;
+}
+
 .media-sidebar .setting input,
-.media-sidebar .setting textarea {
+.media-sidebar .setting textarea,
+.media-sidebar .setting .value {
     margin: 1px;
     width: 65%;
@@ -1813 +1818 @@
 }
 
-.image-details .embed-media-settings .setting span {
+.image-details .embed-media-settings .setting .name {
     float: left;
     width: 25%;
@@ -2369 +2374 @@
     }
 }
+
+
+/**
+ * Media Grid
+ */
+
+.media-grid-view h1 {
+    color: #222;
+    font-size: 23px;
+    font-weight: 400;
+    margin: 10px 0 0;
+    padding: 9px 15px 4px 22px;
+    line-height: 29px;
+}
+
+.media-grid-view-switch {
+    position: fixed;
+    right: 10px;
+    top: 44px;
+    z-index: 300;
+}
+
+/**
+ * Position both the frame and the uploader window into the content
+ * area of the screen.
+ */
+.media-grid-view {
+    position: fixed;
+    bottom: 0;
+    left: 160px;
+    right: 0;
+    top: 32px;
+}
+@media screen and (max-width: 900px) {
+    .auto-fold .media-grid-view {
+        left: 36px;
+    }
+}
+@media screen and (max-width: 782px) {
+    .media-grid-view {
+        top: 46px;
+    }
+    .auto-fold .media-grid-view {
+        left: 0px;
+        bottom: 0px;
+    }
+}
+
+/* Regions we don't use at all */
+.media-grid-view .media-frame-toolbar,
+.media-grid-view .media-frame-menu {
+    display: none;
+}
+
+.media-grid-view .media-frame-content {
+    bottom: 40px;
+}
+@media screen and (max-width: 782px) {
+    .media-grid-view .media-frame-content {
+        border-bottom: none;
+        bottom: 0;
+    }
+}
+
+@media only screen and (max-width: 640px), screen and (max-height: 400px) {
+    .media-grid-view .media-frame-title {
+        display: block;
+        width: auto;
+        bottom: auto;
+        right: 0;
+        top: 0;
+        height: 60px;
+    }
+}

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

@@ -31 +31 @@
         } else if ( 'post' === attributes.frame && MediaFrame.Post ) {
             frame = new MediaFrame.Post( attributes );
+        } else if ( 'manage' === attributes.frame && MediaFrame.Manage ) {
+            frame = new MediaFrame.Manage( attributes ); 
         } else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
             frame = new MediaFrame.ImageDetails( attributes );

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

@@ -616 +616 @@
             this.get('selection').on( 'add remove reset', this.refreshContent, this );
 
-            if ( this.get('contentUserSetting') ) {
+            if ( this.get( 'router' ) && this.get('contentUserSetting') ) {
                 this.frame.on( 'content:activate', this.saveContentMode, this );
                 this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
@@ -1919 +1919 @@
             return this;
         };
+    });
+
+    /**
+     * wp.media.view.MediaFrame.Manage
+     *
+     * A generic management frame workflow.
+     *
+     * Used in the media grid view.
+     *
+     * @constructor
+     * @augments wp.media.view.MediaFrame
+     * @augments wp.media.view.Frame
+     * @augments wp.media.View
+     * @augments wp.Backbone.View
+     * @augments Backbone.View
+     * @mixes wp.media.controller.StateMachine
+     */
+    media.view.MediaFrame.Manage = media.view.MediaFrame.extend({
+        /**
+         * @global wp.Uploader
+         */
+        initialize: function() {
+            _.defaults( this.options, {
+                title:     l10n.mediaLibraryTitle,
+                modal:     false,
+                selection: [],
+                library:   {},
+                multiple:  false,
+                state:     'library',
+                uploader:  true
+            });
+
+            // Ensure core and media grid view UI is enabled.
+            this.$el.addClass('wp-core-ui media-grid-view');
+
+            // Force the uploader off if the upload limit has been exceeded or
+            // if the browser isn't supported.
+            if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
+                this.options.uploader = false;
+            }
+
+            // Initialize a window-wide uploader.
+            if ( this.options.uploader ) {
+                this.uploader = new media.view.UploaderWindow({
+                    controller: this,
+                    uploader: {
+                        dropzone:  $('body'),
+                        container: $('body')
+                    }
+                }).render();
+                this.uploader.ready();
+                $('body').append( this.uploader.el );
+
+                this.options.uploader = false;
+            }
+
+            /**
+             * call 'initialize' directly on the parent class
+             */
+            media.view.MediaFrame.prototype.initialize.apply( this, arguments );
+
+            // Since we're not using the default modal built into
+            // a media frame, append our $element to the supplied container.
+            this.$el.appendTo( this.options.container );
+
+            this.createSelection();
+            this.createStates();
+            this.bindHandlers();
+            this.render();
+        },
+
+        createSelection: function() {
+            var selection = this.options.selection;
+
+            if ( ! (selection instanceof media.model.Selection) ) {
+                this.options.selection = new media.model.Selection( selection, {
+                    multiple: this.options.multiple
+                });
+            }
+
+            this._selection = {
+                attachments: new media.model.Attachments(),
+                difference: []
+            };
+        },
+
+        createStates: function() {
+            var options = this.options;
+
+            if ( this.options.states ) {
+                return;
+            }
+
+            // Add the default states.
+            this.states.add([
+                new media.controller.Library({
+                    library:    media.query( options.library ),
+                    multiple:   options.multiple,
+                    title:      options.title,
+                    priority:   20,
+                    toolbar:    false,
+                    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 );
+        },
+
+        /**
+         * Content
+         *
+         * @param {Object} content
+         * @this wp.media.controller.Region
+         */
+        browseContent: function( content ) {
+            var state = this.state();
+
+            // Browse our library of attachments.
+            content.view = new media.view.AttachmentsBrowser({
+                controller: this,
+                collection: state.get('library'),
+                selection:  state.get('selection'),
+                model:      state,
+                sortable:   state.get('sortable'),
+                search:     state.get('searchable'),
+                filters:    state.get('filterable'),
+                display:    state.get('displaySettings'),
+                dragInfo:   state.get('dragInfo'),
+                bulkEdit:   true,
+
+                suggestedWidth:  state.get('suggestedWidth'),
+                suggestedHeight: state.get('suggestedHeight'),
+
+                AttachmentView: state.get('AttachmentView')
+            });
+        },
+
+        editImageContent: function() {
+            var image = this.state().get('image'),
+                view = new media.view.EditImage( { model: image, controller: this } ).render();
+
+            this.content.set( view );
+
+            // after creating the wrapper view, load the actual editor via an ajax call
+            view.loadEditor();
+
+        },
     });
 
@@ -5364 +5518 @@
     });
 
+    /**
+     * wp.media.view.AttachmentFilters.FileTypes
+     *
+     * @constructor
+     * @augments wp.media.view.AttachmentFilters
+     * @augments wp.media.View
+     * @augments wp.Backbone.View
+     * @augments Backbone.View
+     */
+    media.view.AttachmentFilters.mimeTypes = media.view.AttachmentFilters.extend({
+        createFilters: function() {
+            var filters = {};
+
+            _.each( media.view.settings.mimeTypes || {}, function( text, key ) {
+                filters[ key ] = {
+                    text: text,
+                    props: {
+                        type:    key,
+                        uploadedTo: null,
+                        orderby: 'date',
+                        order:   'DESC'
+                    }
+                };
+            });
+            filters.all = {
+                text:  l10n.allMediaTypes,
+                props: {
+                    type:    null,
+                    uploadedTo: null,
+                    orderby: 'date',
+                    order:   'DESC'
+                },
+                priority: 10
+            };
+
+            this.filters = filters;
+        }
+    });
+
 
     /**
@@ -5418 +5611 @@
             } else if ( 'all' === filters ) {
                 FiltersConstructor = media.view.AttachmentFilters.All;
+            } else if ( 'mime-types' === filters ) {
+                FiltersConstructor = media.view.AttachmentFilters.mimeTypes;
             }
 

trunk/src/wp-includes/media-template.php

@@ -309 +309 @@
                 <div class="uploaded">{{ data.dateFormatted }}</div>
 
+                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
                 <# if ( 'image' === data.type && ! data.uploading ) { #>
                     <# if ( data.width && data.height ) { #>
@@ -340 +341 @@
         </div>
 
+        <label class="setting" data-setting="url">
+            <span class="name"><?php _e('URL'); ?></span>
+            <input type="text" value="{{ data.url }}" readonly />
+        </label>
         <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
-            <label class="setting" data-setting="title">
-                <span><?php _e('Title'); ?></span>
-                <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
-            </label>
-            <label class="setting" data-setting="caption">
-                <span><?php _e('Caption'); ?></span>
-                <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
-            </label>
+        <label class="setting" data-setting="title">
+            <span class="name"><?php _e('Title'); ?></span>
+            <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
+        </label>
+        <label class="setting" data-setting="caption">
+            <span class="name"><?php _e('Caption'); ?></span>
+            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+        </label>
         <# if ( 'image' === data.type ) { #>
             <label class="setting" data-setting="alt">
-                <span><?php _e('Alt Text'); ?></span>
+                <span class="name"><?php _e('Alt Text'); ?></span>
                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
             </label>
         <# } #>
-            <label class="setting" data-setting="description">
-                <span><?php _e('Description'); ?></span>
-                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
+        <label class="setting" data-setting="description">
+            <span class="name"><?php _e('Description'); ?></span>
+            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
+        </label>
+        <label class="setting">
+                <span class="name"><?php _e( 'Uploaded By' ); ?></span>
+                <span class="value">{{ data.authorName }}</span>
             </label>
+        <# if ( data.uploadedTo ) { #>
+            <label class="setting">
+                <span class="name"><?php _e('Uploaded To'); ?></span>
+                <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
+            </label>
+        <# } #>
     </script>
 

trunk/src/wp-includes/media.php

@@ -2593 +2593 @@
     );
 
+    $author = new WP_User( $attachment->post_author );
+    $response['authorName'] = $author->display_name;
+
+    if ( $attachment->post_parent ) {
+        $post_parent = get_post( $attachment->post_parent );
+        $response['uploadedToLink'] = get_edit_post_link( $attachment->post_parent, 'raw' );
+        $response['uploadedToTitle'] = $post_parent->post_title ? $post_parent->post_title : __( '(No title)' );
+    }
+
+    $bytes = filesize( get_attached_file( $attachment->ID ) );
+    $response['filesizeInBytes'] = $bytes;
+    $response['filesizeHumanReadable'] = size_format( $bytes );
+
     if ( current_user_can( 'edit_post', $attachment->ID ) ) {
         $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
@@ -2850 +2863 @@
         'returnToLibrary'    => __( '← Return to library' ),
         'allMediaItems'      => __( 'All media items' ),
+        'allMediaTypes'      => __( 'All media types' ),
         'noItemsFound'       => __( 'No items found.' ),
         'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),