Changeset 31562

Timestamp:

02/26/2015 11:00:20 PM (11 years ago)

Author:

wonderboymusic

Message:

Persist search terms across grid/list modes:

• In grid mode, when the page loads and s is in the URL, all attachments are loaded and then the search value is set, which will filter the attachments. If the page loads with the attachments already filtered, the library will have to be requery'd to get the full set, which will require weirder code.
• When a user searches, the mode-switcher link for list view is updated dynamically to represent the current location.href in the proper mode= and s= context.

Fixes #30583.

Location:

trunk/src

Files:

• wp-admin/upload.php (modified) (2 diffs)
• wp-includes/js/media/grid.js (modified) (1 diff)
• wp-includes/js/media/views/frame/manage.js (modified) (1 diff)

trunk/src/wp-admin/upload.php

@@ -26 +26 @@
         wp_enqueue_script( 'media' );
 
-        $vars = wp_edit_attachments_query_vars();
+        $q = $_GET;
+        // let JS handle this
+        unset( $q['s'] );
+        $vars = wp_edit_attachments_query_vars( $q );
         $ignore = array( 'mode', 'post_type', 'post_status', 'posts_per_page' );
         foreach ( $vars as $key => $value ) {
@@ -68 +71 @@
         require_once( ABSPATH . 'wp-admin/admin-header.php' );
         ?>
-        <div class="wrap" id="wp-media-grid">
+        <div class="wrap" id="wp-media-grid" data-search="<?php _admin_search_query() ?>">
                 <h2>
                 <?php

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

@@ -683 +683 @@
                 this.bindRegionModeHandlers();
                 this.render();
+                this.bindSearchHandler();
+        },
+
+        /**
+         * The views must interact with form controls that are not part of a frame
+         */
+        bindSearchHandler: function() {
+                var search = this.$( '#media-search-input' ),
+                        currentSearch = this.options.container.data( 'search' ),
+                        searchView = this.browserView.toolbar.get( 'search' ).$el,
+                        listMode = this.$( '.view-list' ),
+
+                        input  = _.debounce( function (e) {
+                                var val = $( e.currentTarget ).val(),
+                                        url = '';
+
+                                if ( val ) {
+                                        url += '?search=' + val;
+                                }
+                                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
+                        }, 1000 );
 
                 // Update the URL when entering search string (at most once per second)
-                $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
-                        var val = $( e.currentTarget ).val(), url = '';
-                        if ( val ) {
-                                url += '?search=' + val;
+                search.on( 'input', _.bind( input, this ) );
+                searchView.val( currentSearch ).trigger( 'input' );
+
+                this.gridRouter.on( 'route:search', function () {
+                        var href = window.location.href;
+                        if ( href.indexOf( 'mode=' ) > -1 ) {
+                                href = href.replace( /mode=[^&]+/g, 'mode=list' );
+                        } else {
+                                href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
                         }
-                        self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
-                }, 1000 ) );
+                        href = href.replace( 'search=', 's=' );
+                        listMode.prop( 'href', href );
+                } );
         },
 

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

@@ -84 +84 @@
                 this.bindRegionModeHandlers();
                 this.render();
+                this.bindSearchHandler();
+        },
+
+        bindSearchHandler: function() {
+                var search = this.$( '#media-search-input' ),
+                        currentSearch = this.options.container.data( 'search' ),
+                        searchView = this.browserView.toolbar.get( 'search' ).$el,
+                        listMode = this.$( '.view-list' ),
+
+                        input  = _.debounce( function (e) {
+                                var val = $( e.currentTarget ).val(),
+                                        url = '';
+
+                                if ( val ) {
+                                        url += '?search=' + val;
+                                }
+                                this.gridRouter.navigate( this.gridRouter.baseUrl( url ) );
+                        }, 1000 );
 
                 // Update the URL when entering search string (at most once per second)
-                $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
-                        var val = $( e.currentTarget ).val(), url = '';
-                        if ( val ) {
-                                url += '?search=' + val;
+                search.on( 'input', _.bind( input, this ) );
+                searchView.val( currentSearch ).trigger( 'input' );
+
+                this.gridRouter.on( 'route:search', function () {
+                        var href = window.location.href;
+                        if ( href.indexOf( 'mode=' ) > -1 ) {
+                                href = href.replace( /mode=[^&]+/g, 'mode=list' );
+                        } else {
+                                href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list';
                         }
-                        self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
-                }, 1000 ) );
+                        href = href.replace( 'search=', 's=' );
+                        listMode.prop( 'href', href );
+                } );
         },