Ticket #27521: 27521.16.diff

src/wp-admin/js/theme.js

@@ -443 +443 @@
                 this.touchDrag = true;
         },
 
+        // Handles .disabled classes for previous/next buttons in theme installer preview
+        setNavButtonsState: function() {
+                var $themeInstaller = $( '#theme-installer' ),
+                        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 +527 @@
 
                         // Render and append.
                         preview.render();
+                        this.setNavButtonsState();
                         $( 'div.wrap' ).append( preview.el );
                         $( '.next-theme' ).focus();
                 })
@@ -539 +556 @@
 
                         // Render and append.
                         preview.render();
+                        this.setNavButtonsState();
                         $( 'div.wrap' ).append( preview.el );
                         $( '.previous-theme' ).focus();
                 });
+                self.setNavButtonsState();
         }
 });
 
@@ -676 +695 @@
                 this.trigger( 'theme:collapse' );
         },
 
-        // Confirmation dialoge for deleting a theme
+        // Confirmation dialog for deleting a theme
         deleteTheme: function() {
                 return confirm( themes.data.settings.confirmDelete );
         },
@@ -725 +744 @@
         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', 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' ).unbind( 'keyup' );
 
                         // Return focus to the theme div
                         if ( themes.focusedTheme ) {