Changeset 28049

Timestamp:

04/08/2014 04:23:26 PM (10 years ago)

Author:

nacin

Message:

Theme installer keyboard fixes. Updates [28033] and [28036].

props matveb.
see #27521.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (2 diffs)
• js/theme.js (modified) (9 diffs)

trunk/src/wp-admin/css/themes.css

@@ -1078 +1078 @@
 
 /* Already installed theme */
-.theme-browser .theme.is-installed {
-    cursor: default;
-}
 .theme-browser .theme .theme-installed {
     background: #0074a2;
@@ -1087 +1084 @@
     content: '\f147';
 }
-.theme-browser .theme.is-installed .theme-actions .button-primary,
-.theme-browser.rendered .theme.is-installed .more-details {
+.theme-browser .theme.is-installed .theme-actions .button-primary {
     display: none !important;
-}
-.theme-browser.rendered .theme.is-installed:hover .theme-screenshot img,
-.theme-browser.rendered .theme.is-installed:focus .theme-screenshot img {
-    opacity: 1 !important;
 }
 

trunk/src/wp-admin/js/theme.js

@@ -443 +443 @@
     },
 
-    // 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,
@@ -497 +481 @@
         // Render the view and append it.
         preview.render();
+        this.setNavButtonsState();
         $( 'div.wrap' ).append( preview.el );
 
@@ -536 +521 @@
             current = self.model;
 
+            // Bail early if we are at the beginning of the collection
+            if ( self.model.collection.indexOf( self.current ) === 0 ) {
+                return;
+            }
+
             // If we have ventured away from current model update the current model position.
             if ( ! _.isUndefined( self.current ) ) {
@@ -560 +550 @@
             $( '.previous-theme' ).focus();
         });
-        self.setNavButtonsState();
+
+        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' ),
+            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' );
+        }
     }
 });
@@ -739 +748 @@
         'click .collapse-sidebar': 'collapse',
         'click .previous-theme': 'previousTheme',
-        'click .next-theme': 'nextTheme'
+        'click .next-theme': 'nextTheme',
+        'keyup': 'keyEvent'
     },
 
@@ -753 +763 @@
 
         this.$el.fadeIn( 200, function() {
-            $( 'body' )
-                .addClass( 'theme-installer-active full-overlay-active' )
-                .on( 'keyup.overlay', function( event ) {
-                    // The escape key closes the preview
-                    if ( event.keyCode === 27 ) {
-                        self.close();
-                    }
-                    // The right arrow key, next theme
-                    if ( event.keyCode === 39 ) {
-                        self.nextTheme();
-                    }
-
-                    // The left arrow key, previous theme
-                    if ( event.keyCode === 37 ) {
-                        self.previousTheme();
-                    }
-                });
+            $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
             $( '.close-full-overlay' ).focus();
         });
@@ -776 +770 @@
     close: function() {
         this.$el.fadeOut( 200, function() {
-            $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' );
+            $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
 
             // Return focus to the theme div
@@ -785 +779 @@
 
         themes.router.navigate( themes.router.baseUrl( '' ) );
+        this.trigger( 'preview:close' );
         return false;
     },
@@ -792 +787 @@
         this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
         return false;
+    },
+
+    keyEvent: function( event ) {
+        // The escape key closes the preview
+        if ( event.keyCode === 27 ) {
+            this.undelegateEvents();
+            this.close();
+        }
+        // The right arrow key, next theme
+        if ( event.keyCode === 39 ) {
+            _.once( this.nextTheme() );
+        }
+
+        // The left arrow key, previous theme
+        if ( event.keyCode === 37 ) {
+            this.previousTheme();
+        }
     }
 });