From 41f89a3c143800d09e865fa6ee0e3503b4584eaf Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Thu, 26 Feb 2015 23:00:20 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@31562 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/upload.php                       |  7 +++-
 src/wp-includes/js/media/grid.js              | 39 ++++++++++++++++---
 .../js/media/views/frame/manage.js            | 36 ++++++++++++++---
 3 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/src/wp-admin/upload.php b/src/wp-admin/upload.php
index 5346c2aef1..5408395dc7 100644
--- a/src/wp-admin/upload.php
+++ b/src/wp-admin/upload.php
@@ -25,7 +25,10 @@ if ( 'grid' === $mode ) {
 	wp_enqueue_script( 'media-grid' );
 	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 ) {
 		if ( ! $value || in_array( $key, $ignore ) ) {
@@ -67,7 +70,7 @@ if ( 'grid' === $mode ) {
 
 	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
 		echo esc_html( $title );
diff --git a/src/wp-includes/js/media/grid.js b/src/wp-includes/js/media/grid.js
index 51c33abeab..857065b9ee 100644
--- a/src/wp-includes/js/media/grid.js
+++ b/src/wp-includes/js/media/grid.js
@@ -682,15 +682,42 @@ Manage = MediaFrame.extend({
 		this.createStates();
 		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 );
+		} );
 	},
 
 	/**
diff --git a/src/wp-includes/js/media/views/frame/manage.js b/src/wp-includes/js/media/views/frame/manage.js
index 1c02071887..190f397f39 100644
--- a/src/wp-includes/js/media/views/frame/manage.js
+++ b/src/wp-includes/js/media/views/frame/manage.js
@@ -83,15 +83,39 @@ Manage = MediaFrame.extend({
 		this.createStates();
 		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 );
+		} );
 	},
 
 	/**