Changeset 28033

Timestamp:

04/08/2014 03:57:01 AM (10 years ago)

Author:

nacin

Message:

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

props adamsilverstein, DH-Shredder.
fixes #27521.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (6 diffs)
• js/theme.js (modified) (10 diffs)
• theme-install.php (modified) (1 diff)

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

@@ -1771 +1771 @@
 
 #customize-container iframe,
-#theme-installer iframe {
+.theme-install-overlay iframe {
     height: 100%;
     width: 100%;
@@ -1787 +1787 @@
 }
 
-#theme-installer {
+.theme-install-overlay {
     display: none;
 }
 
-#theme-installer.single-theme {
+.theme-install-overlay.single-theme {
     display: block;
 }
@@ -1804 +1804 @@
 }
 
-#theme-installer .install-theme-info {
+.theme-install-overlay .install-theme-info {
     display: block;
 }
@@ -1847 +1847 @@
 }
 
-#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) */
@@ -1857 +1857 @@
 }
 
-#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;
@@ -1885 +1885 @@
 
     .customize-loading #customize-container,
-    #theme-installer .wp-full-overlay-main {
+    .theme-install-overlay .wp-full-overlay-main {
         background-image: url(../images/spinner-2x.gif);
     }

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

@@ -444 +444 @@
     },
 
+    // 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,
@@ -512 +528 @@
             // Render and append.
             preview.render();
+            this.setNavButtonsState();
             $( 'div.wrap' ).append( preview.el );
             $( '.next-theme' ).focus();
@@ -540 +557 @@
             // Render and append.
             preview.render();
+            this.setNavButtonsState();
             $( 'div.wrap' ).append( preview.el );
             $( '.previous-theme' ).focus();
         });
+        self.setNavButtonsState();
     }
 });
@@ -677 +696 @@
     },
 
-    // Confirmation dialoge for deleting a theme
+    // Confirmation dialog for deleting a theme
     deleteTheme: function() {
         return confirm( themes.data.settings.confirmDelete );
@@ -685 +704 @@
         var self = this;
         self.trigger( 'theme:next', self.model.cid );
+        return false;
     },
 
@@ -690 +710 @@
         var self = this;
         self.trigger( 'theme:previous', self.model.cid );
+        return false;
     },
 
@@ -713 +734 @@
 
     className: 'wp-full-overlay expanded',
-    el: '#theme-installer',
+    el: '.theme-install-overlay',
 
     events: {
@@ -726 +747 @@
 
     render: function() {
-        var data = this.model.toJSON();
+        var data = this.model.toJSON(),
+            self = this;
         this.$el.html( this.html( data ) );
 
@@ -732 +754 @@
 
         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();
         });
@@ -739 +768 @@
     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

trunk/src/wp-admin/theme-install.php

@@ -159 +159 @@
     </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>