Changeset 22712

Timestamp:

11/20/2012 01:49:35 PM (11 years ago)

Author:

koopersmith

Message:

Media: Add filters to the media library. fixes #22514, see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• js/media-views.js (modified) (9 diffs)
• media.php (modified) (1 diff)

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

@@ -387 +387 @@
     height: 100%;
     width: 100%;
+}
+
+/**
+ * Attachment Browser Filters
+ */
+.media-frame select.attachment-filters {
+    margin-top: 11px;
+    margin-right: 10px;
 }
 

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

@@ -256 +256 @@
             toolbar:    'main-attachments',
             sidebar:    'settings',
-            searchable: true
+            searchable: true,
+            filterable: false
         },
 
@@ -335 +336 @@
             var frame = this.frame;
 
-            // Content.
             if ( this.get('empty') ) {
                 // Attempt to fetch any Attachments we don't already have.
@@ -355 +355 @@
 
         _updateEmpty: function() {
-            var library = this.get('library');
+            var library = this.get('library'),
+                props = library.props;
+
+            // If we're filtering the library, bail.
+            if ( this.get('filterable') && ( props.get('type') || props.get('parent') ) )
+                return;
+
             this.set( 'empty', ! library.length && ! library.props.get('search') );
         },
@@ -1214 +1220 @@
                 search:     state.get('searchable'),
                 upload:     state.get('upload'),
+                filters:    state.get('filterable'),
 
                 AttachmentView: state.get('AttachmentView')
@@ -1341 +1348 @@
                 // Main states.
                 new media.controller.Library( _.defaults({
-                    selection: options.selection,
-                    library:   media.query( options.library ),
-                    editable:  true
+                    selection:  options.selection,
+                    library:    media.query( options.library ),
+                    editable:   true,
+                    filterable: true
                 }, main ) ),
 
@@ -2720 +2728 @@
     });
 
+    /**
+     * wp.media.view.AttachmentFilters
+     */
+    media.view.AttachmentFilters = media.View.extend({
+        tagName:   'select',
+        className: 'attachment-filters',
+
+        events: {
+            change: 'change'
+        },
+
+        initialize: function() {
+            var els;
+
+            els = _.map({
+                all:      'allMediaItems',
+                uploaded: 'uploadedToThisPost',
+                image:    'images',
+                audio:    'audio',
+                video:    'videos'
+            }, function( text, value ) {
+                return this.make( 'option', { value: value }, l10n[ text ] );
+            }, this );
+
+            this.$el.html( els );
+
+            this.model.on( 'change', this.select, this );
+            this.select();
+        },
+
+        change: function( event ) {
+            var model = this.model,
+                value = this.el.value,
+                type;
+
+            if ( 'all' === value || 'uploaded' === value )
+                model.unset('type');
+            else if ( 'image' === value || 'audio' === value || 'video' === value )
+                model.set( 'type', value );
+
+            if ( 'uploaded' === value )
+                model.set( 'parent', media.view.settings.postId );
+            else
+                model.unset('parent');
+        },
+
+        select: function() {
+            var model = this.model,
+                type = model.get('type'),
+                value = 'all';
+
+            if ( model.get('parent') === media.view.settings.postId )
+                value = 'uploaded';
+            else if ( 'image' === type )
+                value = 'image';
+            else if ( 'audio' === type )
+                value = 'audio';
+            else if ( 'video' === type )
+                value = 'video';
+
+            this.$el.val( value );
+        }
+    });
+
 
 
@@ -2733 +2805 @@
 
             _.defaults( this.options, {
-                search: true,
-                upload: false,
-                total:  true,
+                filters: false,
+                search:  true,
+                upload:  false,
 
                 AttachmentView: media.view.Attachment.Library
@@ -2743 +2815 @@
                 controller: this.controller
             });
+
+            if ( this.options.filters ) {
+                this.toolbar.set( 'filters', new media.view.AttachmentFilters({
+                    controller: this.controller,
+                    model:      this.collection.props,
+                    priority:   -80
+                }).render() );
+            }
 
             if ( this.options.search ) {
@@ -2748 +2828 @@
                     controller: this.controller,
                     model:      this.collection.props,
-                    priority:   -60
+                    priority:   60
                 }).render() );
             }

trunk/wp-includes/media.php

@@ -1358 +1358 @@
         'returnToLibrary'   => __( '← Return to library' ),
 
+        'allMediaItems'      => __( 'All media items' ),
+        'uploadedToThisPost' => __( 'Uploaded to this post' ),
+        'images'             => __( 'Images' ),
+        'audio'              => __( 'Audio' ),
+        'videos'             => __( 'Videos' ),
+
         // Embed
         'embedFromUrlTitle' => __( 'Embed From URL' ),