Changeset 28123

Timestamp:

04/14/2014 10:05:20 PM (10 years ago)

Author:

nacin

Message:

Theme installer: Improve route handling and make ?theme= work.

props matveb.
fixes #27708.

Location:

trunk/src/wp-admin

Files:

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

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

@@ -1714 +1714 @@
     float: right;
 }
+.wp-full-overlay.no-navigation .theme-navigation {
+    display: none;
+}
 
 /* Animations */

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

@@ -23 +23 @@
     // Map `id` to `slug` for shared code
     initialize: function() {
-        var install;
+        var install, description;
 
         // Install url for the theme
@@ -47 +47 @@
             id: this.get( 'slug' ) || this.get( 'id' )
         });
+
+        // Map `section.description` to `description`
+        // as the API sometimes returns it differently
+        if ( this.has( 'sections' ) ) {
+            description = this.get( 'sections' ).description;
+            this.set({ description: description });
+        }
     }
 });
@@ -219 +226 @@
     // When we are missing a cache object we fire an apiCall()
     // which triggers events of `query:success` or `query:fail`
-    query: function( request ) {
+    query: function( request, action ) {
         /**
          * @static
@@ -248 +255 @@
         // Otherwise, send a new API call and add it to the cache.
         if ( ! query && ! isPaginated ) {
-            query = this.apiCall( request ).done( function( data ) {
+            query = this.apiCall( request, action ).done( function( data ) {
+
                 // Update the collection with the queried data.
-                self.reset( data.themes );
-                count = data.info.results;
+                if ( data.themes ) {
+                    self.reset( data.themes );
+                    count = data.info.results;
+                    // Store the results and the query request
+                    queries.push( { themes: data.themes, request: request, total: count } );
+
+                } else if ( action ) {
+                    self.reset( data );
+                    count = 1;
+                    self.trigger( 'query:theme' );
+                }
 
                 // Trigger a collection refresh event
@@ -258 +275 @@
                 self.trigger( 'query:success', count );
 
-                if ( data.themes.length === 0 ) {
+                if ( data.themes && data.themes.length === 0 ) {
                     self.trigger( 'query:empty' );
                 }
 
-                // Store the results and the query request
-                queries.push( { themes: data.themes, request: request, total: count } );
             }).fail( function() {
                 self.trigger( 'query:fail' );
@@ -270 +285 @@
             // If it's a paginated request we need to fetch more themes...
             if ( isPaginated ) {
-                return this.apiCall( request, isPaginated ).done( function( data ) {
+                return this.apiCall( request, action, isPaginated ).done( function( data ) {
                     // Add the new themes to the current collection
                     // @todo update counter
@@ -315 +330 @@
 
     // Send request to api.wordpress.org/themes
-    apiCall: function( request, paginated ) {
+    apiCall: function( request, action, paginated ) {
 
         // Send tags (and fields) as comma-separated to keep the JSONP query string short.
         if ( request.tag && _.isArray( request.tag ) ) {
             request.tag = request.tag.join( ',' );
+        }
+
+        // Set request action
+        if ( ! action ) {
+            action = 'query_themes'
         }
 
@@ -330 +350 @@
             // Request data
             data: {
-                action: 'query_themes',
+                action: action,
                 request: _.extend({
                     per_page: 72,
@@ -483 +503 @@
         preview.render();
         this.setNavButtonsState();
+
+        // Hide previous/next navigation if there is only one theme
+        if ( this.model.collection.length === 1 ) {
+            preview.$el.addClass( 'no-navigation' );
+        } else {
+            preview.$el.removeClass( 'no-navigation' );
+        }
+
+        // Apend preview
         $( 'div.wrap' ).append( preview.el );
 
@@ -781 +810 @@
         themes.router.navigate( themes.router.baseUrl( '' ) );
         this.trigger( 'preview:close' );
+        this.unbind();
         return false;
     },
@@ -1306 +1336 @@
     },
 
-    // Handles all the rendering of the public theme directory
-    browse: function( section ) {
+    // Initial render method
+    render: function() {
         var self = this;
+
+        this.search();
+        this.uploader();
 
         this.collection = new themes.Collection();
@@ -1340 +1373 @@
         });
 
-        // Create a new collection with the proper theme data
-        // for each section
-        this.collection.query( { browse: section } );
-
         if ( this.view ) {
             this.view.remove();
@@ -1351 +1380 @@
         this.view = new themes.view.Themes({
             collection: this.collection,
-            section: section,
             parent: this
         });
@@ -1364 +1392 @@
     },
 
-    // Initial render method
-    render: function() {
-        this.search();
-        this.uploader();
-        return this.browse( this.options.section );
+    // Handles all the rendering of the public theme directory
+    browse: function( section ) {
+        // Create a new collection with the proper theme data
+        // for each section
+        this.collection.query( { browse: section } );
     },
 
@@ -1555 +1583 @@
         'theme-install.php?upload': 'upload',
         'theme-install.php?search=:query': 'search',
-        '': 'sort'
+        'theme-install.php': 'sort'
     },
 
@@ -1597 +1625 @@
 
     routes: function() {
-        var self = this;
-        // Bind to our global thx object
-        // so that the object is available to sub-views
+        var self = this,
+            request = {};
+
+        // Bind to our global `wp.themes` object
+        // so that the router is available to sub-views
         themes.router = new themes.InstallerRouter();
 
-        // Handles theme details route event
-        themes.router.on( 'route:theme', function( slug ) {
-            self.view.view.expand( slug );
-        });
-
+        // Handles `theme` route event
+        // Queries the API for the passed theme slug
+        themes.router.on( 'route:preview', function( slug ) {
+            request.slug = slug;
+            self.view.collection.query( request, 'theme_information' );
+        });
+
+        // Handles sorting / browsing routes
+        // Also handles the root URL triggering a sort request
+        // for `featured`, the default view
         themes.router.on( 'route:sort', function( sort ) {
             if ( ! sort ) {
@@ -1615 +1650 @@
         });
 
+        // Support the `upload` route by going straight to upload section
         themes.router.on( 'route:upload', function() {
             $( 'a.upload' ).trigger( 'click' );
         });
 
-        // Handles search route event
+        // The `search` route event. The router populates the input field.
         themes.router.on( 'route:search', function() {
             $( '.theme-search' ).focus().trigger( 'keyup' );

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

@@ -123 +123 @@
     <div class="theme-navigation">
         <span class="theme-count"></span>
-        <a class="theme-section current" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
+        <a class="theme-section" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
         <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
         <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>