Changeset 22712

Timestamp:

11/20/2012 01:49:35 PM (14 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' ),