Theme Installer: Disable prev/next buttons on first/last themes, add Esc handling, use IDs.

props adamsilverstein, DH-Shredder.
fixes #27521.


git-svn-id: https://develop.svn.wordpress.org/trunk@28033 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/themes.css

@@ -1770,7 +1770,7 @@ body.full-overlay-active {
 }
 
 #customize-container iframe,
-#theme-installer iframe {
+.theme-install-overlay iframe {
 	height: 100%;
 	width: 100%;
 	z-index: 20;
@@ -1786,11 +1786,11 @@ body.full-overlay-active {
 	margin-top: 0;
 }
 
-#theme-installer {
+.theme-install-overlay {
 	display: none;
 }
 
-#theme-installer.single-theme {
+.theme-install-overlay.single-theme {
 	display: block;
 }
 
@@ -1803,7 +1803,7 @@ body.full-overlay-active {
 	padding-top: 15px;
 }
 
-#theme-installer .install-theme-info {
+.theme-install-overlay .install-theme-info {
 	display: block;
 }
 
@@ -1846,22 +1846,22 @@ body.full-overlay-active {
 	max-width: 100%;
 }
 
-#theme-installer .wp-full-overlay-header {
+.theme-install-overlay .wp-full-overlay-header {
 	margin-top: 9px;
 }
 
-#theme-installer .wp-full-overlay-header .theme-install {
+.theme-install-overlay .wp-full-overlay-header .theme-install {
 	float: right;
 	/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
 	line-height: 26px;
 }
 
-#theme-installer .wp-full-overlay-sidebar {
+.theme-install-overlay .wp-full-overlay-sidebar {
 	background: #EEE;
 	border-right: 1px solid #DDD;
 }
 
-#theme-installer .wp-full-overlay-main {
+.theme-install-overlay .wp-full-overlay-main {
 	background: #fff url(../images/spinner.gif) no-repeat center center;
 	-webkit-background-size: 20px 20px;
 	background-size: 20px 20px;
@@ -1884,7 +1884,7 @@ body.full-overlay-active {
 	}
 
 	.customize-loading #customize-container,
-	#theme-installer .wp-full-overlay-main {
+	.theme-install-overlay .wp-full-overlay-main {
 		background-image: url(../images/spinner-2x.gif);
 	}
 }

src/wp-admin/js/theme.js

@@ -443,6 +443,22 @@ themes.view.Theme = wp.Backbone.View.extend({
 		this.touchDrag = true;
 	},
 
+	// Handles .disabled classes for previous/next buttons in theme installer preview
+	setNavButtonsState: function() {
+		var $themeInstaller = $( '.theme-install-overlay' ),
+			current = _.isUndefined( this.current ) ? this.model : this.current;
+
+		// Disable previous at the zero position
+		if ( 0 === this.model.collection.indexOf( current ) ) {
+			$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+		}
+
+		// 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' );
+		}
+	},
+
 	preview: function( event ) {
 		var self = this,
 			current, preview;
@@ -511,6 +527,7 @@ themes.view.Theme = wp.Backbone.View.extend({
 
 			// Render and append.
 			preview.render();
+			this.setNavButtonsState();
 			$( 'div.wrap' ).append( preview.el );
 			$( '.next-theme' ).focus();
 		})
@@ -539,9 +556,11 @@ themes.view.Theme = wp.Backbone.View.extend({
 
 			// Render and append.
 			preview.render();
+			this.setNavButtonsState();
 			$( 'div.wrap' ).append( preview.el );
 			$( '.previous-theme' ).focus();
 		});
+		self.setNavButtonsState();
 	}
 });
 
@@ -676,7 +695,7 @@ themes.view.Details = wp.Backbone.View.extend({
 		this.trigger( 'theme:collapse' );
 	},
 
-	// Confirmation dialoge for deleting a theme
+	// Confirmation dialog for deleting a theme
 	deleteTheme: function() {
 		return confirm( themes.data.settings.confirmDelete );
 	},
@@ -684,11 +703,13 @@ themes.view.Details = wp.Backbone.View.extend({
 	nextTheme: function() {
 		var self = this;
 		self.trigger( 'theme:next', self.model.cid );
+		return false;
 	},
 
 	previousTheme: function() {
 		var self = this;
 		self.trigger( 'theme:previous', self.model.cid );
+		return false;
 	},
 
 	// Checks if the theme screenshot is the old 300px width version
@@ -712,7 +733,7 @@ themes.view.Details = wp.Backbone.View.extend({
 themes.view.Preview = themes.view.Details.extend({
 
 	className: 'wp-full-overlay expanded',
-	el: '#theme-installer',
+	el: '.theme-install-overlay',
 
 	events: {
 		'click .close-full-overlay': 'close',
@@ -725,20 +746,28 @@ themes.view.Preview = themes.view.Details.extend({
 	html: themes.template( 'theme-preview' ),
 
 	render: function() {
-		var data = this.model.toJSON();
+		var data = this.model.toJSON(),
+			self = this;
 		this.$el.html( this.html( data ) );
 
 		themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } );
 
 		this.$el.fadeIn( 200, function() {
-			$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+			$( 'body' )
+				.addClass( 'theme-installer-active full-overlay-active' )
+				.on( 'keyup.overlay', function( event ) {
+					// Pressing the escape key closes the preview
+					if ( event.keyCode === 27 ) {
+						self.close();
+					}
+				});
 			$( '.close-full-overlay' ).focus();
 		});
 	},
 
 	close: function() {
 		this.$el.fadeOut( 200, function() {
-			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
+			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' );
 
 			// Return focus to the theme div
 			if ( themes.focusedTheme ) {

src/wp-admin/theme-install.php

@@ -158,7 +158,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 		</div>
 	</div>
 	<div class="theme-browser"></div>
-	<div id="theme-installer" class="wp-full-overlay expanded"></div>
+	<div class="theme-install-overlay wp-full-overlay expanded"></div>
 
 	<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
 	<span class="spinner"></span>