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>