Changeset 27937

Timestamp:

04/03/2014 11:52:45 PM (12 years ago)

Author:

nacin

Message:

Theme Installer: Fix sorting, counts, keyboard navigation; add prev/next to previews.

props matveb.
see #27055.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (4 diffs)
• js/theme.js (modified) (18 diffs)
• theme-install.php (modified) (2 diffs)

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

@@ -1290 +1290 @@
     padding: 4px 8px;
 }
+.more-filters-container .filtering-by a {
+    margin-left: 10px;
+}
 body.filters-applied .more-filters-container .filters-group,
-body.filters-applied .more-filters-container a,
+body.filters-applied .more-filters-container a.button,
 body.filters-applied .more-filters-container br {
     display: none !important;
@@ -1510 +1513 @@
     z-index: 10;
     overflow: auto;
-    background: transparent;
+    background: #eee;
     border-right: none;
 }
@@ -1671 +1674 @@
 .wp-full-overlay.collapsed .collapse-sidebar-label {
     display: none;
+}
+
+.wp-full-overlay .theme-navigation {
+    padding: 10px 20px;
+    position: absolute;
+        bottom: 10px;
+    text-align: left;
+}
+.wp-full-overlay .theme-navigation .next-theme {
+    float: right;
 }
 
@@ -1751 +1764 @@
 .install-theme-info {
     display: none;
-    padding: 10px 20px 20px;
+    padding: 10px 20px 60px;
 }
 

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

@@ -215 +215 @@
         return collection;
     },
+
+    count: false,
 
     // Handles requests for more themes
@@ -230 +232 @@
             query, isPaginated, count;
 
+        // Store current query request args
+        // for later use with the event `theme:end`
+        this.currentQuery.request = request;
+
         // Search the query cache for matches.
         query = _.find( queries, function( query ) {
@@ -245 +251 @@
 
         // Otherwise, send a new API call and add it to the cache.
-        if ( ! query ) {
+        if ( ! query && ! isPaginated ) {
             query = this.apiCall( request ).done( function( data ) {
                 // Update the collection with the queried data.
@@ -261 +267 @@
 
                 // Store the results and the query request
-                queries.push( { themes: data.themes, request: request } );
+                queries.push( { themes: data.themes, request: request, total: count } );
             }).fail( function() {
                 self.trigger( 'query:fail' );
@@ -290 +296 @@
             // Only trigger an update event since we already have the themes
             // on our cached object
+            if ( _.isNumber( query.total ) ) {
+                this.count = query.total;
+            }
+
+            if ( ! query.total ) {
+                this.count = this.length;
+            }
+
             this.reset( query.themes );
             this.trigger( 'update' );
@@ -306 +320 @@
     // Send Ajax POST request to api.wordpress.org/themes
     apiCall: function( request, paginated ) {
-        // Store current query request args
-        // for later use with the event `theme:end`
-        this.currentQuery.request = request;
 
         // Ajax request to .org API
@@ -442 +453 @@
 
     preview: function( event ) {
+        var self = this,
+            current;
+
         // Bail if the user scrolled on a touch device
         if ( this.touchDrag === true ) {
@@ -461 +475 @@
         event = event || window.event;
 
+        // Set focus to current theme.
+        themes.focusedTheme = this.$el;
+
+        // Construct a new Preview view.
         var preview = new themes.view.Preview({
             model: this.model
         });
 
+        // Render the view and append it.
         preview.render();
         $( 'div.wrap' ).append( preview.el );
+
+        // Listen to our preview object
+        // for `theme:next` and `theme:previous` events.
+        this.listenTo( preview, 'theme:next', function() {
+
+            // Keep local track of current theme model.
+            current = self.model;
+
+            // If we have ventured away from current model update the current model position.
+            if ( ! _.isUndefined( self.current ) ) {
+                current = self.current;
+            }
+
+            // Get previous theme model.
+            self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
+
+            // If we have no more themes, bail.
+            if ( _.isUndefined( self.current ) ) {
+                return self.current = current;
+            }
+
+            // Construct a new Preview view.
+            preview = new themes.view.Preview({
+                model: self.current
+            });
+
+            // Render and append.
+            preview.render();
+            $( 'div.wrap' ).append( preview.el );
+        })
+        .listenTo( preview, 'theme:previous', function() {
+
+            // Keep track of current theme model.
+            current = self.model;
+
+            // If we have ventured away from current model update the current model position.
+            if ( ! _.isUndefined( self.current ) ) {
+                current = self.current;
+            }
+
+            // Get previous theme model.
+            self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
+
+            // If we have no more themes, bail.
+            if ( _.isUndefined( self.current ) ) {
+                return;
+            }
+
+            // Construct a new Preview view.
+            preview = new themes.view.Preview({
+                model: self.current
+            });
+
+            // Render and append.
+            preview.render();
+            $( 'div.wrap' ).append( preview.el );
+        });
     }
 });
@@ -634 +710 @@
 // Theme Preview view
 // Set ups a modal overlay with the expanded theme data
-themes.view.Preview = wp.Backbone.View.extend({
+themes.view.Preview = themes.view.Details.extend({
 
     className: 'wp-full-overlay expanded',
@@ -641 +717 @@
     events: {
         'click .close-full-overlay': 'close',
-        'click .collapse-sidebar': 'collapse'
+        'click .collapse-sidebar': 'collapse',
+        'click .previous-theme': 'previousTheme',
+        'click .next-theme': 'nextTheme'
     },
 
@@ -655 +733 @@
         this.$el.fadeIn( 200, function() {
             $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+            $( '.close-full-overlay' ).focus();
         });
     },
@@ -661 +740 @@
         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();
+            }
         });
 
@@ -783 +867 @@
 
         // Display a live theme count for the collection
-        this.count.text( this.collection.length );
+        this.count.text( this.collection.count ? this.collection.count : this.collection.length );
     },
 
@@ -1144 +1228 @@
         }
 
+        $( '.theme-section.current' ).removeClass( 'current' );
+        $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
+
         // Get the themes by sending Ajax POST request to api.wordpress.org/themes
         // or searching the local cache
@@ -1162 +1249 @@
         'click [type="checkbox"]': 'filtersChecked',
         'click .clear-filters': 'clearFilters',
-        'click .feature-name': 'filterSection'
+        'click .feature-name': 'filterSection',
+        'click .filtering-by a': 'backToFilters'
     },
 
@@ -1298 +1386 @@
 
         $( 'body' ).addClass( 'filters-applied' );
+        $( '.theme-section.current' ).removeClass( 'current' );
         filteringBy.empty();
 
@@ -1356 +1445 @@
 
         if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
-            return $( 'body' ).removeClass( 'filters-applied' );
+            return this.backToFilters();
         }
 
@@ -1385 +1474 @@
             return self.filtersChecked();
         });
+    },
+
+    backToFilters: function() {
+        $( 'body' ).removeClass( 'filters-applied' );
     }
 });

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

@@ -146 +146 @@
                 <span><?php _e( 'Filtering by:' ); ?></span>
                 <div class="tags"></div>
+                <a href="#"><?php _e( 'Edit' ); ?></a>
             </div>
         </div>
     </div>
     <div class="theme-browser"></div>
-    <div class="theme-overlay"></div>
     <div id="theme-installer" class="wp-full-overlay expanded"></div>
 
@@ -225 +225 @@
                 <span class="collapse-sidebar-arrow"></span>
             </a>
+            <div class="theme-navigation">
+                <a class="previous-theme button" href="#"><?php _e( 'Previous' ); ?></a>
+                <a class="next-theme button" href="#"><?php _e( 'Next' ); ?></a>
+            </div>
         </div>
     </div>