From b807ab4a3485f83cc92ed6c7e02a473d1d649ae7 Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Mon, 14 Apr 2014 22:05:20 +0000 Subject: [PATCH] Theme installer: Improve route handling and make ?theme= work. props matveb. fixes #27708. git-svn-id: https://develop.svn.wordpress.org/trunk@28123 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/themes.css | 3 ++ src/wp-admin/js/theme.js | 98 +++++++++++++++++++++++----------- src/wp-admin/theme-install.php | 2 +- 3 files changed, 71 insertions(+), 32 deletions(-) diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 4abf3a1d9d..13076cbf6f 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1713,6 +1713,9 @@ body.full-overlay-active { .wp-full-overlay .theme-navigation .next-theme { float: right; } +.wp-full-overlay.no-navigation .theme-navigation { + display: none; +} /* Animations */ .wp-full-overlay, diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index 6f4e378b4f..5a6a80ab2a 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -22,7 +22,7 @@ themes.Model = Backbone.Model.extend({ // Adds attributes to the default data coming through the .org themes api // Map `id` to `slug` for shared code initialize: function() { - var install; + var install, description; // Install url for the theme // using the install nonce @@ -46,6 +46,13 @@ themes.Model = Backbone.Model.extend({ // slug is for installation, id is for existing. 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 }); + } } }); @@ -218,7 +225,7 @@ themes.Collection = Backbone.Collection.extend({ // // 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 * @type Array @@ -247,29 +254,37 @@ themes.Collection = Backbone.Collection.extend({ // 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 // and a `query:success` event with a `count` argument. self.trigger( 'update' ); 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' ); }); } else { // 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 self.add( data.themes ); @@ -314,13 +329,18 @@ themes.Collection = Backbone.Collection.extend({ }, // 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' + } + // JSONP request to .org API return $.ajax({ url: 'https://api.wordpress.org/themes/info/1.1/?callback=?', @@ -329,7 +349,7 @@ themes.Collection = Backbone.Collection.extend({ // Request data data: { - action: 'query_themes', + action: action, request: _.extend({ per_page: 72, fields: 'description,tested,requires,rating,downloaded,downloadLink,last_updated,homepage,num_ratings' @@ -482,6 +502,15 @@ themes.view.Theme = wp.Backbone.View.extend({ // Render the view and append it. 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 ); // Listen to our preview object @@ -780,6 +809,7 @@ themes.view.Preview = themes.view.Details.extend({ themes.router.navigate( themes.router.baseUrl( '' ) ); this.trigger( 'preview:close' ); + this.unbind(); return false; }, @@ -1305,10 +1335,13 @@ themes.view.Installer = themes.view.Appearance.extend({ 'click .filtering-by a': 'backToFilters' }, - // 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(); // Bump `collection.currentQuery.page` and request more themes if we hit the end of the page. @@ -1339,10 +1372,6 @@ themes.view.Installer = themes.view.Appearance.extend({ $( '.theme-browser' ).find( 'div.themes' ).before( '

' + l10n.error + '

' ); }); - // Create a new collection with the proper theme data - // for each section - this.collection.query( { browse: section } ); - if ( this.view ) { this.view.remove(); } @@ -1350,7 +1379,6 @@ themes.view.Installer = themes.view.Appearance.extend({ // Set ups the view and passes the section argument this.view = new themes.view.Themes({ collection: this.collection, - section: section, parent: this }); @@ -1363,11 +1391,11 @@ themes.view.Installer = themes.view.Appearance.extend({ this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' ); }, - // 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 } ); }, // Sorting navigation @@ -1554,7 +1582,7 @@ themes.InstallerRouter = Backbone.Router.extend({ 'theme-install.php?browse=:sort': 'sort', 'theme-install.php?upload': 'upload', 'theme-install.php?search=:query': 'search', - '': 'sort' + 'theme-install.php': 'sort' }, baseUrl: function( url ) { @@ -1596,16 +1624,23 @@ themes.RunInstaller = { }, 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 ) { sort = 'featured'; @@ -1614,11 +1649,12 @@ themes.RunInstaller = { self.view.trigger( 'theme:close' ); }); + // 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' ); }); diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 77efdeb7cf..aa19ce9648 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -122,7 +122,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
- +