enmi-conf.org: comparison wp/wp-admin/js/theme.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

wp/wp-admin/js/theme.js

changeset 7	cf61fcea0001
parent 5	5e2f62d02dcd
child 9	177826044cd9

equal deleted inserted replaced

-:490d5cc509ed
+:cf61fcea0001
 		});
 		// Render search form.
 		this.search();
+		this.$el.removeClass( 'search-loading' );
 		// Render and append
 		this.view.render();
 		this.$el.empty().append( this.view.el ).addClass( 'rendered' );
-		this.$el.append( '<br class="clear"/>' );
 	},
 	// Defines search element container
-	searchContainer: $( '#wpbody h2:first' ),
+	searchContainer: $( '.search-form' ),
 	// Search input and view
 	// for current theme collection
 	search: function() {
 		var view,
 		view = new this.SearchView({
 			collection: self.collection,
 			parent: this
 		});
+		self.SearchView = view;
 		// Render and append after screen title
 		view.render();
 		this.searchContainer
 			.append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
-			.append( view.el );
+			.append( view.el )
+			.on( 'submit', function( event ) {
+				event.preventDefault();
+			});
 	},
 	// Checks when the user gets close to the bottom
 	// of the mage and triggers a theme:scroll event
 	scroller: function() {
 		if ( this.terms === '' ) {
 			this.reset( themes.data.themes );
 			$( 'body' ).removeClass( 'no-results' );
 		}
-		// Trigger an 'update' event
+		// Trigger a 'themes:update' event
-		this.trigger( 'update' );
+		this.trigger( 'themes:update' );
 	},
 	// Performs a search within the collection
 	// @uses RegExp
 	search: function( term ) {
 		results = this.filter( function( data ) {
 			name        = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );
 			description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' );
 			author      = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' );
-			haystack = _.union( name, data.get( 'id' ), description, author, data.get( 'tags' ) );
+			haystack = _.union( [ name, data.get( 'id' ), description, author, data.get( 'tags' ) ] );
 			if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
 				data.set( 'displayAuthor', true );
 			}
 					queries.push( { themes: data.themes, request: request, total: count } );
 				}
 				// Trigger a collection refresh event
 				// and a `query:success` event with a `count` argument.
-				self.trigger( 'update' );
+				self.trigger( 'themes:update' );
 				self.trigger( 'query:success', count );
 				if ( data.themes && data.themes.length === 0 ) {
 					self.trigger( 'query:empty' );
 				}
 			this.reset( query.themes );
 			if ( ! query.total ) {
 				this.count = this.length;
 			}
-			this.trigger( 'update' );
+			this.trigger( 'themes:update' );
 			this.trigger( 'query:success', this.count );
 		}
 	},
 	// Local cache array for API queries
 	events: {
 		'click': themes.isInstall ? 'preview': 'expand',
 		'keydown': themes.isInstall ? 'preview': 'expand',
 		'touchend': themes.isInstall ? 'preview': 'expand',
 		'keyup': 'addFocus',
-		'touchmove': 'preventExpand'
+		'touchmove': 'preventExpand',
+		'click .theme-install': 'installTheme',
+		'click .update-message': 'updateTheme'
 	},
 	touchDrag: false,
+	initialize: function() {
+		this.model.on( 'change', this.render, this );
+	},
 	render: function() {
 		var data = this.model.toJSON();
 		// Render themes using the html template
 		this.$el.html( this.html( data ) ).attr({
 			tabindex: 0,
-			'aria-describedby' : data.id + '-action ' + data.id + '-name'
+			'aria-describedby' : data.id + '-action ' + data.id + '-name',
+			'data-slug': data.id
 		});
 		// Renders active theme styles
 		this.activeTheme();
 		if ( this.model.get( 'displayAuthor' ) ) {
 			this.$el.addClass( 'display-author' );
-		}
-		if ( this.model.get( 'installed' ) ) {
-			this.$el.addClass( 'is-installed' );
 		}
 	},
 	// Adds a class to the currently active theme
 	// and to the overlay in detailed view mode
 		// one of the direct action buttons
 		if ( $( event.target ).is( '.theme-actions a' ) ) {
 			return;
 		}
+		// Prevent the modal from showing when the user clicks one of the direct action buttons.
+		if ( $( event.target ).is( '.theme-actions a, .update-message, .button-link, .notice-dismiss' ) ) {
+			return;
+		}
 		// Set focused theme to current element
 		themes.focusedTheme = this.$el;
 		this.trigger( 'theme:expand', self.model.cid );
 	},
 	preview: function( event ) {
 		var self = this,
 			current, preview;
+		event = event || window.event;
 		// Bail if the user scrolled on a touch device
 		if ( this.touchDrag === true ) {
 			return this.touchDrag = false;
 		}
 		// Allow direct link path to installing a theme.
-		if ( $( event.target ).hasClass( 'button-primary' ) ) {
+		if ( $( event.target ).not( '.install-theme-preview' ).parents( '.theme-actions' ).length ) {
 			return;
 		}
 		// 'enter' and 'space' keys expand the details view when a theme is :focused
 		if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
 		// Set focus to current theme.
 		themes.focusedTheme = this.$el;
 		// Construct a new Preview view.
-		preview = new themes.view.Preview({
+		themes.preview = preview = new themes.view.Preview({
 			model: this.model
 		});
 		// Render the view and append it.
 		preview.render();
 		});
 		this.listenTo( preview, 'preview:close', function() {
 			self.current = self.model;
 		});
 	},
 	// Handles .disabled classes for previous/next buttons in theme installer preview
 	setNavButtonsState: function() {
 		var $themeInstaller = $( '.theme-install-overlay' ),
 		// Disable next if the next model is undefined
 		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
 			$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
 		}
+	},
+	installTheme: function( event ) {
+		var _this = this;
+		event.preventDefault();
+		wp.updates.maybeRequestFilesystemCredentials( event );
+		$( document ).on( 'wp-theme-install-success', function( event, response ) {
+			if ( _this.model.get( 'id' ) === response.slug ) {
+				_this.model.set( { 'installed': true } );
+			}
+		} );
+		wp.updates.installTheme( {
+			slug: $( event.target ).data( 'slug' )
+		} );
+	},
+	updateTheme: function( event ) {
+		var _this = this;
+		if ( ! this.model.get( 'hasPackage' ) ) {
+			return;
+		}
+		event.preventDefault();
+		wp.updates.maybeRequestFilesystemCredentials( event );
+		$( document ).on( 'wp-theme-update-success', function( event, response ) {
+			_this.model.off( 'change', _this.render, _this );
+			if ( _this.model.get( 'id' ) === response.slug ) {
+				_this.model.set( {
+					hasUpdate: false,
+					version: response.newVersion
+				} );
+			}
+			_this.model.on( 'change', _this.render, _this );
+		} );
+		wp.updates.updateTheme( {
+			slug: $( event.target ).parents( 'div.theme' ).first().data( 'slug' )
+		} );
 	}
 });
 // Theme Details view
 // Set ups a modal overlay with the expanded theme data
 	events: {
 		'click': 'collapse',
 		'click .delete-theme': 'deleteTheme',
 		'click .left': 'previousTheme',
-		'click .right': 'nextTheme'
+		'click .right': 'nextTheme',
+		'click #update-theme': 'updateTheme'
 	},
 	// The HTML template for the theme overlay
 	html: themes.template( 'theme-single' ),
 	activeTheme: function() {
 		// Check the model has the active property
 		this.$el.toggleClass( 'active', this.model.get( 'active' ) );
 	},
-	// Keeps :focus within the theme details elements
+	// Set initial focus and constrain tabbing within the theme browser modal.
 	containFocus: function( $el ) {
-		var $target;
+		// Set initial focus on the primary action control.
-		// Move focus to the primary action
 		_.delay( function() {
-			$( '.theme-wrap a.button-primary:visible' ).focus();
+			$( '.theme-overlay' ).focus();
-		}, 500 );
+		}, 100 );
+		// Constrain tabbing within the modal.
 		$el.on( 'keydown.wp-themes', function( event ) {
+			var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
-			// Tab key
+				$lastFocusable = $el.find( '.theme-actions a:visible' ).last();
-			if ( event.which === 9 ) {
-				$target = $( event.target );
+			// Check for the Tab key.
+			if ( 9 === event.which ) {
-				// Keep focus within the overlay by making the last link on theme actions
+				if ( $firstFocusable[0] === event.target && event.shiftKey ) {
-				// switch focus to button.left on tabbing and vice versa
+					$lastFocusable.focus();
-				if ( $target.is( 'button.left' ) && event.shiftKey ) {
-					$el.find( '.theme-actions a:last-child' ).focus();
 					event.preventDefault();
-				} else if ( $target.is( '.theme-actions a:last-child' ) ) {
+				} else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
-					$el.find( 'button.left' ).focus();
+					$firstFocusable.focus();
 					event.preventDefault();
 				}
 			}
 		});
 	},
 	// Handles .disabled classes for next/previous buttons
 	navigation: function() {
 		// Disable Left/Right when at the start or end of the collection
 		if ( this.model.cid === this.model.collection.at(0).cid ) {
-			this.$el.find( '.left' ).addClass( 'disabled' );
+			this.$el.find( '.left' )
+				.addClass( 'disabled' )
+				.prop( 'disabled', true );
 		}
 		if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
-			this.$el.find( '.right' ).addClass( 'disabled' );
+			this.$el.find( '.right' )
+				.addClass( 'disabled' )
+				.prop( 'disabled', true );
 		}
 	},
 	// Performs the actions to effectively close
 	// the theme details overlay
 		this.remove();
 		this.unbind();
 		this.trigger( 'theme:collapse' );
 	},
-	// Confirmation dialog for deleting a theme
+	updateTheme: function( event ) {
-	deleteTheme: function() {
+		var _this = this;
-		return confirm( themes.data.settings.confirmDelete );
+		event.preventDefault();
+		wp.updates.maybeRequestFilesystemCredentials( event );
+		$( document ).on( 'wp-theme-update-success', function( event, response ) {
+			if ( _this.model.get( 'id' ) === response.slug ) {
+				_this.model.set( {
+					hasUpdate: false,
+					version: response.newVersion
+				} );
+			}
+			_this.render();
+		} );
+		wp.updates.updateTheme( {
+			slug: $( event.target ).data( 'slug' )
+		} );
+	},
+	deleteTheme: function( event ) {
+		var _this = this,
+		    _collection = _this.model.collection,
+		    _themes = themes;
+		event.preventDefault();
+		// Confirmation dialog for deleting a theme.
+		if ( ! window.confirm( wp.themes.data.settings.confirmDelete ) ) {
+			return;
+		}
+		wp.updates.maybeRequestFilesystemCredentials( event );
+		$( document ).one( 'wp-theme-delete-success', function( event, response ) {
+			_this.$el.find( '.close' ).trigger( 'click' );
+			$( '[data-slug="' + response.slug + '"]' ).css( { backgroundColor:'#faafaa' } ).fadeOut( 350, function() {
+				$( this ).remove();
+				_themes.data.themes = _.without( _themes.data.themes, _.findWhere( _themes.data.themes, { id: response.slug } ) );
+				$( '.wp-filter-search' ).val( '' );
+				_collection.doSearch( '' );
+				_collection.remove( _this.model );
+				_collection.trigger( 'themes:update' );
+			} );
+		} );
+		wp.updates.deleteTheme( {
+			slug: this.model.get( 'id' )
+		} );
 	},
 	nextTheme: function() {
 		var self = this;
 		self.trigger( 'theme:next', self.model.cid );
 	el: '.theme-install-overlay',
 	events: {
 		'click .close-full-overlay': 'close',
 		'click .collapse-sidebar': 'collapse',
+		'click .devices button': 'previewDevice',
 		'click .previous-theme': 'previousTheme',
 		'click .next-theme': 'nextTheme',
-		'keyup': 'keyEvent'
+		'keyup': 'keyEvent',
+		'click .theme-install': 'installTheme'
 	},
 	// The HTML template for the theme preview
 	html: themes.template( 'theme-preview' ),
 	render: function() {
-		var data = this.model.toJSON();
+		var self = this,
+			currentPreviewDevice,
-		this.$el.html( this.html( data ) );
+			data = this.model.toJSON(),
+			$body = $( document.body );
-		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
+		$body.attr( 'aria-busy', 'true' );
+		this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
+		currentPreviewDevice = this.$el.data( 'current-preview-device' );
+		if ( currentPreviewDevice ) {
+			self.tooglePreviewDeviceButtons( currentPreviewDevice );
+		}
+		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: false } );
 		this.$el.fadeIn( 200, function() {
-			$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+			$body.addClass( 'theme-installer-active full-overlay-active' );
-			$( '.close-full-overlay' ).focus();
+		});
-		});
+		this.$el.find( 'iframe' ).one( 'load', function() {
+			self.iframeLoaded();
+		});
+	},
+	iframeLoaded: function() {
+		this.$el.addClass( 'iframe-ready' );
+		$( document.body ).attr( 'aria-busy', 'false' );
 	},
 	close: function() {
 		this.$el.fadeOut( 200, function() {
 			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
 			// Return focus to the theme div
 			if ( themes.focusedTheme ) {
 				themes.focusedTheme.focus();
 			}
-		});
+		}).removeClass( 'iframe-ready' );
-		themes.router.navigate( themes.router.baseUrl( '' ) );
+		// Restore the previous browse tab if available.
+		if ( themes.router.selectedTab ) {
+			themes.router.navigate( themes.router.baseUrl( '?browse=' + themes.router.selectedTab ) );
+			themes.router.selectedTab = false;
+		} else {
+			themes.router.navigate( themes.router.baseUrl( '' ) );
+		}
 		this.trigger( 'preview:close' );
 		this.undelegateEvents();
 		this.unbind();
 		return false;
 	},
-	collapse: function() {
+	collapse: function( event ) {
+		var $button = $( event.currentTarget );
+		if ( 'true' === $button.attr( 'aria-expanded' ) ) {
+			$button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
+		} else {
+			$button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
+		}
 		this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
 		return false;
+	},
+	previewDevice: function( event ) {
+		var device = $( event.currentTarget ).data( 'device' );
+		this.$el
+			.removeClass( 'preview-desktop preview-tablet preview-mobile' )
+			.addClass( 'preview-' + device )
+			.data( 'current-preview-device', device );
+		this.tooglePreviewDeviceButtons( device );
+	},
+	tooglePreviewDeviceButtons: function( newDevice ) {
+		var $devices = $( '.wp-full-overlay-footer .devices' );
+		$devices.find( 'button' )
+			.removeClass( 'active' )
+			.attr( 'aria-pressed', false );
+		$devices.find( 'button.preview-' + newDevice )
+			.addClass( 'active' )
+			.attr( 'aria-pressed', true );
 	},
 	keyEvent: function( event ) {
 		// The escape key closes the preview
 		if ( event.keyCode === 27 ) {
 		// The left arrow key, previous theme
 		if ( event.keyCode === 37 ) {
 			this.previousTheme();
 		}
+	},
+	installTheme: function( event ) {
+		var _this   = this,
+		    $target = $( event.target );
+		event.preventDefault();
+		if ( $target.hasClass( 'disabled' ) ) {
+			return;
+		}
+		wp.updates.maybeRequestFilesystemCredentials( event );
+		$( document ).on( 'wp-theme-install-success', function() {
+			_this.model.set( { 'installed': true } );
+		} );
+		wp.updates.installTheme( {
+			slug: $target.data( 'slug' )
+		} );
 	}
 });
 // Controls the rendering of div.themes,
 // a wrapper that will hold all the theme elements
 themes.view.Themes = wp.Backbone.View.extend({
-	className: 'themes',
+	className: 'themes wp-clearfix',
 	$overlay: $( 'div.theme-overlay' ),
 	// Number to keep track of scroll position
 	// while in theme-overlay mode
 	index: 0,
 	// The theme count element
-	count: $( '.wp-core-ui .theme-count' ),
+	count: $( '.wrap .theme-count' ),
 	// The live themes count
 	liveThemeCount: 0,
 	initialize: function( options ) {
 		// Move the active theme to the beginning of the collection
 		self.currentTheme();
 		// When the collection is updated by user input...
-		this.listenTo( self.collection, 'update', function() {
+		this.listenTo( self.collection, 'themes:update', function() {
 			self.parent.page = 0;
 			self.currentTheme();
 			self.render( this );
-		});
+		} );
 		// Update theme count to full result set when available.
 		this.listenTo( self.collection, 'query:success', function( count ) {
 			if ( _.isNumber( count ) ) {
 				self.count.text( count );
 		$( 'body' ).on( 'keyup', function( event ) {
 			if ( ! self.overlay ) {
 				return;
 			}
+			// Bail if the filesystem credentials dialog is shown.
+			if ( $( '#request-filesystem-credentials-dialog' ).is( ':visible' ) ) {
+				return;
+			}
 			// Pressing the right arrow key fires a theme:next event
 			if ( event.keyCode === 39 ) {
 				self.overlay.nextTheme();
 			}
 		// Display a live theme count for the collection
 		this.liveThemeCount = this.collection.count ? this.collection.count : this.collection.length;
 		this.count.text( this.liveThemeCount );
-		this.announceSearchResults( this.liveThemeCount );
+		/*
+		 * In the theme installer the themes count is already announced
+		 * because `announceSearchResults` is called on `query:success`.
+		 */
+		if ( ! themes.isInstall ) {
+			this.announceSearchResults( this.liveThemeCount );
+		}
 	},
 	// Iterates through each instance of the collection
 	// and renders each theme module
 	renderThemes: function( page ) {
 			this.parent.trigger( 'theme:end' );
 			return;
 		}
 		// Make sure the add-new stays at the end
-		if ( page >= 1 ) {
+		if ( ! themes.isInstall && page >= 1 ) {
 			$( '.add-new-theme' ).remove();
 		}
 		// Loop through the themes and setup each theme view
 		self.instance.each( function( theme ) {
 			// with the theme details
 			self.listenTo( self.theme, 'theme:expand', self.expand, self );
 		});
 		// 'Add new theme' element shown at the end of the grid
-		if ( themes.data.settings.canInstall ) {
+		if ( ! themes.isInstall && themes.data.settings.canInstall ) {
-			this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + l10n.addNew + '</h3></a></div>' );
+			this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
 		}
 		this.parent.page++;
 	},
 	},
 	// Renders the overlay with the ThemeDetails view
 	// Uses the current model data
 	expand: function( id ) {
-		var self = this;
+		var self = this, $card, $modal;
 		// Set the current theme model
 		this.model = self.collection.get( id );
 		// Trigger a route update for the current model
 		this.overlay = new themes.view.Details({
 			model: self.model
 		});
 		this.overlay.render();
+		if ( this.model.get( 'hasUpdate' ) ) {
+			$card  = $( '[data-slug="' + this.model.id + '"]' );
+			$modal = $( this.overlay.el );
+			if ( $card.find( '.updating-message' ).length ) {
+				$modal.find( '.notice-warning h3' ).remove();
+				$modal.find( '.notice-warning' )
+					.removeClass( 'notice-large' )
+					.addClass( 'updating-message' )
+					.find( 'p' ).text( wp.updates.l10n.updating );
+			} else if ( $card.find( '.notice-error' ).length ) {
+				$modal.find( '.notice-warning' ).remove();
+			}
+		}
 		this.$overlay.html( this.overlay.el );
 		// Bind to theme:next and theme:previous
 		// triggered by the arrow keys
 		//
 		// Clear on escape.
 		if ( event.type === 'keyup' && event.which === 27 ) {
 			event.target.value = '';
 		}
-		/**
+		// Since doSearch is debounced, it will only run when user input comes to a rest.
-		 * Since doSearch is debounced, it will only run when user input comes to a rest
-		 */
 		this.doSearch( event );
 	},
 	// Runs a search on the theme collection.
-	doSearch: _.debounce( function( event ) {
+	doSearch: function( event ) {
 		var options = {};
-		this.collection.doSearch( event.target.value );
+		this.collection.doSearch( event.target.value.replace( /\+/g, ' ' ) );
 		// if search is initiated and key is not return
 		if ( this.searching && event.which !== 13 ) {
 			options.replace = true;
 		} else {
 		if ( event.target.value ) {
 			themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options );
 		} else {
 			themes.router.navigate( themes.router.baseUrl( '' ) );
 		}
-	}, 500 ),
+	},
 	pushState: function( event ) {
 		var url = themes.router.baseUrl( '' );
 		if ( event.target.value ) {
-			url = themes.router.baseUrl( themes.router.searchPath + event.target.value );
+			url = themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( event.target.value ) );
 		}
 		this.searching = false;
 		themes.router.navigate( url );
 	}
 });
+/**
+* Navigate router.
+*
+* @since 4.9.0
+*
+* @param {string} url - URL to navigate to.
+* @param {object} state - State.
+* @returns {void}
+*/
+function navigateRouter( url, state ) {
+	var router = this;
+	if ( Backbone.history._hasPushState ) {
+		Backbone.Router.prototype.navigate.call( router, url, state );
+	}
+}
 // Sets up the routes events for relevant url queries
 // Listens to [theme] and [search] params
 themes.Router = Backbone.Router.extend({
 	themePath: '?theme=',
 	searchPath: '?search=',
 	search: function( query ) {
-		$( '.wp-filter-search' ).val( query );
+		$( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
 	},
 	themes: function() {
 		$( '.wp-filter-search' ).val( '' );
 	},
-	navigate: function() {
+	navigate: navigateRouter
-		if ( Backbone.history._hasPushState ) {
-			Backbone.Router.prototype.navigate.apply( this, arguments );
-		}
-	}
 });
 // Execute and setup the application
 themes.Run = {
 		this.view = new themes.view.Appearance({
 			collection: this.themes
 		});
 		this.render();
+		// Start debouncing user searches after Backbone.history.start().
+		this.view.SearchView.doSearch = _.debounce( this.view.SearchView.doSearch, 500 );
 	},
 	render: function() {
 		// Render results
 		this.view.render();
 		this.routes();
+		if ( Backbone.History.started ) {
+			Backbone.history.stop();
+		}
 		Backbone.history.start({
 			root: themes.data.settings.adminUrl,
 			pushState: true,
 			hashChange: false
 		});
 	events: {
 		'input': 'search',
 		'keyup': 'search'
 	},
+	terms: '',
 	// Handles Ajax request for searching through themes in public repo
 	search: function( event ) {
 		// Tabbing or reverse tabbing into the search input shouldn't trigger a search
 		if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
 		}
 		this.doSearch( event.target.value );
 	},
-	doSearch: _.debounce( function( value ) {
+	doSearch: function( value ) {
 		var request = {};
+		// Don't do anything if the search terms haven't changed.
+		if ( this.terms === value ) {
+			return;
+		}
+		// Updates terms with the value passed.
+		this.terms = value;
 		request.search = value;
 		// Intercept an [author] search.
 		//
 		if ( value.substring( 0, 4 ) === 'tag:' ) {
 			request.search = '';
 			request.tag = [ value.slice( 4 ) ];
 		}
-		$( '.filter-links li > a.current' ).removeClass( 'current' );
+		$( '.filter-links li > a.current' )
-		$( 'body' ).removeClass( 'show-filters filters-applied' );
+			.removeClass( 'current' )
+			.removeAttr( 'aria-current' );
+		$( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
+		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
 		// or searching the local cache
 		this.collection.query( request );
 		// Set route
-		themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } );
+		themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( value ) ), { replace: true } );
-	}, 500 )
+	}
 });
 themes.view.Installer = themes.view.Appearance.extend({
 	el: '#wpbody-content .wrap',
 		'click .theme-filter': 'onFilter',
 		'click .drawer-toggle': 'moreFilters',
 		'click .filter-drawer .apply-filters': 'applyFilters',
 		'click .filter-group [type="checkbox"]': 'addFilter',
 		'click .filter-drawer .clear-filters': 'clearFilters',
-		'click .filtered-by': 'backToFilters'
+		'click .edit-filters': 'backToFilters',
+		'click .favorites-form-submit' : 'saveUsername',
+		'keyup #wporg-username-input': 'saveUsername'
 	},
 	// Initial render method
 	render: function() {
 		var self = this;
 		});
 		this.listenTo( this.collection, 'query:fail', function() {
 			$( 'body' ).removeClass( 'loading-content' );
 			$( '.theme-browser' ).find( 'div.error' ).remove();
-			$( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
+			$( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' );
+			$( '.theme-browser .error .try-again' ).on( 'click', function( e ) {
+				e.preventDefault();
+				$( 'input.wp-filter-search' ).trigger( 'input' );
+			} );
 		});
 		if ( this.view ) {
 			this.view.remove();
 		}
 			sort = $el.data( 'sort' );
 		event.preventDefault();
 		$( 'body' ).removeClass( 'filters-applied show-filters' );
+		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 		// Bail if this is already active
 		if ( $el.hasClass( this.activeClass ) ) {
 			return;
 		}
 	},
 	sort: function( sort ) {
 		this.clearSearch();
-		$( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
+		// Track sorting so we can restore the correct tab when closing preview.
-		$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
+		themes.router.selectedTab = sort;
+		$( '.filter-links li > a, .theme-filter' )
+			.removeClass( this.activeClass )
+			.removeAttr( 'aria-current' );
+		$( '[data-sort="' + sort + '"]' )
+			.addClass( this.activeClass )
+			.attr( 'aria-current', 'page' );
+		if ( 'favorites' === sort ) {
+			$( 'body' ).addClass( 'show-favorites-form' );
+		} else {
+			$( 'body' ).removeClass( 'show-favorites-form' );
+		}
 		this.browse( sort );
 	},
 	// Filters and Tags
 		// Bail if this is already active
 		if ( $el.hasClass( this.activeClass ) ) {
 			return;
 		}
-		$( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
+		$( '.filter-links li > a, .theme-section' )
-		$el.addClass( this.activeClass );
+			.removeClass( this.activeClass )
+			.removeAttr( 'aria-current' );
+		$el
+			.addClass( this.activeClass )
+			.attr( 'aria-current', 'page' );
 		if ( ! filter ) {
 			return;
 		}
 		// Construct the filter request
 		// using the default values
-		filter = _.union( filter, this.filtersChecked() );
+		filter = _.union( [ filter, this.filtersChecked() ] );
 		request = { tag: [ filter ] };
 		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
 		// or searching the local cache
 		this.collection.query( request );
 		if ( event ) {
 			event.preventDefault();
 		}
+		if ( ! tags ) {
+			wp.a11y.speak( l10n.selectFeatureFilter );
+			return;
+		}
 		$( 'body' ).addClass( 'filters-applied' );
-		$( '.filter-links li > a.current' ).removeClass( 'current' );
+		$( '.filter-links li > a.current' )
+			.removeClass( 'current' )
+			.removeAttr( 'aria-current' );
 		filteringBy.empty();
 		_.each( tags, function( tag ) {
 			name = $( 'label[for="filter-id-' + tag + '"]' ).text();
 			filteringBy.append( '<span class="tag">' + name + '</span>' );
 		});
 		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
 		// or searching the local cache
 		this.collection.query( request );
+	},
+	// Save the user's WordPress.org username and get his favorite themes.
+	saveUsername: function ( event ) {
+		var username = $( '#wporg-username-input' ).val(),
+			nonce = $( '#wporg-username-nonce' ).val(),
+			request = { browse: 'favorites', user: username },
+			that = this;
+		if ( event ) {
+			event.preventDefault();
+		}
+		// save username on enter
+		if ( event.type === 'keyup' && event.which !== 13 ) {
+			return;
+		}
+		return wp.ajax.send( 'save-wporg-username', {
+			data: {
+				_wpnonce: nonce,
+				username: username
+			},
+			success: function () {
+				// Get the themes by sending Ajax POST request to api.wordpress.org/themes
+				// or searching the local cache
+				that.collection.query( request );
+			}
+		} );
 	},
 	// Get the checked filters
 	// @return {array} of tags or false
 	filtersChecked: function() {
 		return tags;
 	},
 	activeClass: 'current',
-	// Overwrite search container class to append search
+	/*
-	// in new location
+	 * When users press the "Upload Theme" button, show the upload form in place.
-	searchContainer: $( '.wp-filter .search-form' ),
+	 */
 	uploader: function() {
-		$( 'a.upload' ).on( 'click', function( event ) {
+		var uploadViewToggle = $( '.upload-view-toggle' ),
-			event.preventDefault();
+			$body = $( document.body );
-			$( 'body' ).addClass( 'show-upload-theme' );
-			themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
+		uploadViewToggle.on( 'click', function() {
-		});
+			// Toggle the upload view.
-		$( 'a.browse-themes' ).on( 'click', function( event ) {
+			$body.toggleClass( 'show-upload-view' );
-			event.preventDefault();
+			// Toggle the `aria-expanded` button attribute.
-			$( 'body' ).removeClass( 'show-upload-theme' );
+			uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
-			themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 		});
 	},
 	// Toggle the full filters navigation
 	moreFilters: function( event ) {
+		var $body = $( 'body' ),
+			$toggleButton = $( '.drawer-toggle' );
 		event.preventDefault();
-		if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+		if ( $body.hasClass( 'filters-applied' ) ) {
 			return this.backToFilters();
 		}
-		// If the filters section is opened and filters are checked
-		// run the relevant query collapsing to filtered-by state
-		if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
-			return this.addFilter();
-		}
 		this.clearSearch();
 		themes.router.navigate( themes.router.baseUrl( '' ) );
-		$( 'body' ).toggleClass( 'show-filters' );
+		// Toggle the feature filters view.
+		$body.toggleClass( 'show-filters' );
+		// Toggle the `aria-expanded` button attribute.
+		$toggleButton.attr( 'aria-expanded', $body.hasClass( 'show-filters' ) );
 	},
 	// Clears all the checked filters
 	// @uses filtersChecked()
 	clearFilters: function( event ) {
 themes.InstallerRouter = Backbone.Router.extend({
 	routes: {
 		'theme-install.php?theme=:slug': 'preview',
 		'theme-install.php?browse=:sort': 'sort',
-		'theme-install.php?upload': 'upload',
 		'theme-install.php?search=:query': 'search',
 		'theme-install.php': 'sort'
 	},
 	baseUrl: function( url ) {
 	themePath: '?theme=',
 	browsePath: '?browse=',
 	searchPath: '?search=',
 	search: function( query ) {
-		$( '.wp-filter-search' ).val( query );
+		$( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
 	},
-	navigate: function() {
+	navigate: navigateRouter
-		if ( Backbone.history._hasPushState ) {
-			Backbone.Router.prototype.navigate.apply( this, arguments );
-		}
-	}
 });
 themes.RunInstaller = {
 		});
 		// Render results
 		this.render();
+		// Start debouncing user searches after Backbone.history.start().
+		this.view.SearchView.doSearch = _.debounce( this.view.SearchView.doSearch, 500 );
 	},
 	render: function() {
 		// Render results
 		this.view.render();
 		this.routes();
+		if ( Backbone.History.started ) {
+			Backbone.history.stop();
+		}
 		Backbone.history.start({
 			root: themes.data.settings.adminUrl,
 			pushState: true,
 			hashChange: false
 		});
 		themes.router = new themes.InstallerRouter();
 		// Handles `theme` route event
 		// Queries the API for the passed theme slug
 		themes.router.on( 'route:preview', function( slug ) {
-			request.theme = slug;
-			self.view.collection.query( request );
+			// Remove existing handlers.
+			if ( themes.preview ) {
+				themes.preview.undelegateEvents();
+				themes.preview.unbind();
+			}
+			// If the theme preview is active, set the current theme.
+			if ( self.view.view.theme && self.view.view.theme.preview ) {
+				self.view.view.theme.model = self.view.collection.findWhere( { 'slug': slug } );
+				self.view.view.theme.preview();
+			} else {
+				// Select the theme by slug.
+				request.theme = slug;
+				self.view.collection.query( request );
+				self.view.collection.trigger( 'update' );
+				// Open the theme preview.
+				self.view.collection.once( 'query:success', function() {
+					$( 'div[data-slug="' + slug + '"]' ).trigger( 'click' );
+				});
+			}
 		});
 		// Handles sorting / browsing routes
 		// Also handles the root URL triggering a sort request
 		// for `featured`, the default view
 		themes.router.on( 'route:sort', function( sort ) {
 			if ( ! sort ) {
 				sort = 'featured';
+				themes.router.navigate( themes.router.baseUrl( '?browse=featured' ), { replace: true } );
 			}
 			self.view.sort( sort );
-			self.view.trigger( 'theme:close' );
-		});
+			// Close the preview if open.
+			if ( themes.preview ) {
-		// Support the `upload` route by going straight to upload section
+				themes.preview.close();
-		themes.router.on( 'route:upload', function() {
+			}
-			$( 'a.upload' ).trigger( 'click' );
 		});
 		// The `search` route event. The router populates the input field.
 		themes.router.on( 'route:search', function() {
 			$( '.wp-filter-search' ).focus().trigger( 'keyup' );
 	if ( themes.isInstall ) {
 		themes.RunInstaller.init();
 	} else {
 		themes.Run.init();
 	}
+	// Update the return param just in time.
+	$( document.body ).on( 'click', '.load-customize', function() {
+		var link = $( this ), urlParser = document.createElement( 'a' );
+		urlParser.href = link.prop( 'href' );
+		urlParser.search = $.param( _.extend(
+			wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+			{
+				'return': window.location.href
+			}
+		) );
+		link.prop( 'href', urlParser.href );
+	});
 	$( '.broken-themes .delete-theme' ).on( 'click', function() {
 		return confirm( _wpThemeSettings.settings.confirmDelete );
 	});
 });

enmi-conf.org