diff --git a/Gruntfile.js b/Gruntfile.js index a498e0cd92..126fa256d5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -36,7 +36,8 @@ module.exports = function(grunt) { src: [ '**', '!**/.{svn,git}/**', // Ignore version control directories. - '!wp-includes/version.php' // Exclude version.php + '!wp-includes/version.php', // Exclude version.php + '!wp-content/themes/wpcom-themes/**' ], dest: BUILD_DIR }, diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index 8089128cf8..d3777b3e0c 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -293,7 +293,7 @@ themes.view.Details = wp.Backbone.View.extend({ scroll = document.body.scrollTop; // Clean the url structure - themes.router.navigate( '' ); + themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); // Restore scroll position document.body.scrollTop = scroll; @@ -301,28 +301,8 @@ themes.view.Details = wp.Backbone.View.extend({ } }, - // Handles arrow keys navigation for the overlay - // Triggers theme:next and theme:previous events + // Handles .disabled classes for next/previous buttons navigation: function() { - var self = this; - - $( 'body' ).on( 'keyup', function( event ) { - - // Pressing the right arrow key fires a theme:next event - if ( event.keyCode === 39 ) { - self.trigger( 'theme:next', self.model.cid ); - } - - // Pressing the left arrow key fires a theme:previous event - if ( event.keyCode === 37 ) { - self.trigger( 'theme:previous', self.model.cid ); - } - - // Pressing the escape key closes the theme details panel - if ( event.keyCode === 27 ) { - self.collapse(); - } - }); // Disable Left/Right when at the start or end of the collection if ( this.model.cid === this.model.collection.at(0).cid ) { @@ -377,6 +357,7 @@ themes.view.Details = wp.Backbone.View.extend({ themes.view.Themes = wp.Backbone.View.extend({ className: 'themes', + $overlay: $( 'div.theme-overlay' ), // Number to keep track of scroll position // while in theme-overlay mode @@ -407,6 +388,24 @@ themes.view.Themes = wp.Backbone.View.extend({ this.listenTo( this.parent, 'theme:scroll', function() { self.renderThemes( self.parent.page ); }); + + // Bind keyboard events. + $('body').on( 'keyup', function( event ) { + // Pressing the right arrow key fires a theme:next event + if ( event.keyCode === 39 ) { + self.overlay.nextTheme(); + } + + // Pressing the left arrow key fires a theme:previous event + if ( event.keyCode === 37 ) { + self.overlay.previousTheme(); + } + + // Pressing the escape key fires a theme:collapse event + if ( event.keyCode === 27 ) { + self.overlay.collapse( event ); + } + }); }, // Manages rendering of theme pages @@ -508,7 +507,7 @@ themes.view.Themes = wp.Backbone.View.extend({ this.model = self.collection.get( id ); // Trigger a route update for the current model - themes.router.navigate( 'theme/' + this.model.id ); + themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } ); // Sets this.view to 'detail' this.setView( 'detail' ); @@ -520,7 +519,7 @@ themes.view.Themes = wp.Backbone.View.extend({ }); this.overlay.render(); - this.$el.append( this.overlay.el ); + this.$overlay.html( this.overlay.el ); // Bind to theme:next and theme:previous // triggered by the arrow keys @@ -558,8 +557,8 @@ themes.view.Themes = wp.Backbone.View.extend({ this.overlay.closeOverlay(); // Trigger a route update for the current model - // that renders the new theme's overlay - themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } ); + self.theme.trigger( 'theme:expand', nextModel.cid ); + } }, @@ -582,8 +581,8 @@ themes.view.Themes = wp.Backbone.View.extend({ this.overlay.closeOverlay(); // Trigger a route update for the current model - // that renders the new theme's overlay - themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } ); + self.theme.trigger( 'theme:expand', previousModel.cid ); + } } }); @@ -617,9 +616,9 @@ themes.view.Search = wp.Backbone.View.extend({ // Update the URL hash if ( event.target.value ) { - themes.router.navigate( 'search/' + event.target.value, { replace: true } ); + themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } ); } else { - themes.router.navigate( '' ); + themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); } } }); @@ -628,20 +627,22 @@ themes.view.Search = wp.Backbone.View.extend({ // Listens to [theme] and [search] params themes.routes = Backbone.Router.extend({ - routes: { - 'search/*query': 'search', - 'theme/*slug': 'theme' + initialize: function() { + this.routes = _.object([ + ]); + }, + + baseUrl: function( url ) { + return themes.data.settings.root + url; }, // Set the search input value based on url search: function( query ) { $( '.theme-search' ).val( query ); + self.themes.doSearch( query ); } }); -// Make routes easily extendable -_.extend( themes.routes, themes.data.settings.extraRoutes ); - // Execute and setup the application themes.Run = { init: function() { @@ -660,12 +661,24 @@ themes.Run = { render: function() { // Render results this.view.render(); - - // Calls the routes functionality this.routes(); - // Set ups history with pushState and our root - Backbone.history.start({ root: themes.data.settings.root }); + // Set the initial theme + if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){ + this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) ); + } + + // Set the initial search + if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){ + $( '.theme-search' ).val( themes.data.settings.search ); + this.themes.doSearch( themes.data.settings.search ); + } + + // Start the router if browser supports History API + if ( window.history && window.history.pushState ) { + // Calls the routes functionality + Backbone.history.start({ pushState: true, silent: true }); + } }, routes: function() { @@ -673,16 +686,6 @@ themes.Run = { // Bind to our global thx object // so that the object is available to sub-views themes.router = new themes.routes(); - - // Handles theme details route event - themes.router.on( 'route:theme', function( slug ) { - self.view.view.expand( slug ); - }); - - // Handles search route event - themes.router.on( 'route:search', function( query ) { - self.themes.doSearch( query ); - }); } }; diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php index 0e5be5f2e7..bac6631b19 100644 --- a/src/wp-admin/themes.php +++ b/src/wp-admin/themes.php @@ -91,6 +91,7 @@ if ( current_user_can( 'switch_themes' ) ) { } else { $themes = wp_prepare_themes_for_js( array( wp_get_theme() ) ); } +wp_reset_vars( array( 'theme', 'search' ) ); wp_localize_script( 'theme', '_wpThemeSettings', array( 'themes' => $themes, @@ -98,8 +99,10 @@ wp_localize_script( 'theme', '_wpThemeSettings', array( 'canInstall' => ( ! is_multisite() && current_user_can( 'install_themes' ) ), 'installURI' => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null, 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ), - 'root' => admin_url( 'themes.php' ), - 'extraRoutes' => '', + 'root' => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ), + 'theme' => esc_html( $theme ), + 'search' => esc_html( $search ), + ), 'l10n' => array( 'addNew' => __( 'Add New Theme' ), @@ -227,6 +230,7 @@ foreach ( $themes as $theme ) : ?>
+