Index: wp-admin/js/theme.js =================================================================== --- wp-admin/js/theme.js (revision 26827) +++ wp-admin/js/theme.js (working copy) @@ -70,9 +70,7 @@ // Render and append after screen title view.render(); - $('#wpbody h2:first') - .append( $.parseHTML( '' ) ) - .append( view.el ); + $('#wpbody h2:first').append( view.el ); }, // Checks when the user gets close to the bottom @@ -207,6 +205,7 @@ activeTheme: function() { if ( this.model.get( 'active' ) ) { this.$el.addClass( 'active' ); + $( '.theme-overlay' ).addClass( 'active' ); } }, @@ -294,7 +293,7 @@ scroll = document.body.scrollTop; // Clean the url structure - themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); + themes.router.navigate( '' ); // Restore scroll position document.body.scrollTop = scroll; @@ -302,9 +301,29 @@ } }, - // Handles .disabled classes for next/previous buttons + // Handles arrow keys navigation for the overlay + // Triggers theme:next and theme:previous events 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 ) { this.$el.find( '.left' ).addClass( 'disabled' ); @@ -340,15 +359,15 @@ // Checks if the theme screenshot is the old 300px width version // and adds a corresponding class if it's true screenshotCheck: function( el ) { - var screenshot, image; + var screenshot, image, width; screenshot = el.find( '.screenshot img' ); image = new Image(); image.src = screenshot.attr( 'src' ); // Width check - if ( image.width && image.width <= 300 ) { - el.addClass( 'small-screenshot' ); + if ( image.width <= 300 ) { + el.addClass( 'small-screenshot' ); } } }); @@ -358,7 +377,6 @@ 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 @@ -389,28 +407,6 @@ this.listenTo( this.parent, 'theme:scroll', function() { self.renderThemes( self.parent.page ); }); - - // Bind keyboard events. - $('body').on( 'keyup', function( event ) { - if ( ! self.overlay ) { - return; - } - - // 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 @@ -512,7 +508,7 @@ this.model = self.collection.get( id ); // Trigger a route update for the current model - themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } ); + themes.router.navigate( 'themes.php?theme=' + this.model.id ); // Sets this.view to 'detail' this.setView( 'detail' ); @@ -524,7 +520,7 @@ }); this.overlay.render(); - this.$overlay.html( this.overlay.el ); + this.$el.append( this.overlay.el ); // Bind to theme:next and theme:previous // triggered by the arrow keys @@ -562,8 +558,8 @@ this.overlay.closeOverlay(); // Trigger a route update for the current model - self.theme.trigger( 'theme:expand', nextModel.cid ); - + // that renders the new theme's overlay + themes.router.navigate( 'themes.php?theme=' + nextModel.id, { trigger: true } ); } }, @@ -586,8 +582,8 @@ this.overlay.closeOverlay(); // Trigger a route update for the current model - self.theme.trigger( 'theme:expand', previousModel.cid ); - + // that renders the new theme's overlay + themes.router.navigate( 'themes.php?theme=' + previousModel.id, { trigger: true } ); } } }); @@ -599,7 +595,7 @@ className: 'theme-search', attributes: { - placeholder: l10n.searchPlaceholder, + placeholder: l10n.search, type: 'search' }, @@ -621,9 +617,9 @@ // Update the URL hash if ( event.target.value ) { - themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } ); + themes.router.navigate( 'search/' + event.target.value, { replace: true } ); } else { - themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); + themes.router.navigate( '' ); } } }); @@ -633,15 +629,52 @@ themes.routes = Backbone.Router.extend({ initialize: function() { - this.routes = _.object([ - ]); + this.route( /^(.*?)/, 'parseThemeUri' ); }, - baseUrl: function( url ) { - return themes.data.settings.root + url; + // Parse URL route + parseThemeUri: function() { + var regex = /([^&=]+)=?([^&]*)/g, + params, key, value; + + // Gets the url params from Backbone.history + params = regex.exec( Backbone.history.location.search ); + + // Bail if we have no parameters + if ( ! params ) { + return; + } + + key = params[1]; + value = params[2] + + // Handles theme route + if ( key.indexOf( 'theme' ) !== -1 ) { + this.theme( value ); + } + + // Handles search route + if ( key.indexOf( 'search' ) !== -1 ) { + this.search( value ); + } + }, + + theme: function( slug ) { + // Trigger a route event of 'theme' + this.trigger( 'route:theme', slug ); + }, + + search: function( term ) { + // Set the search input value based on url + $( '.theme-search' ).val( term ); + // Trigger a route event of 'search' + this.trigger( 'route:search', term ); } }); +// Make routes easily extendable +_.extend( themes.routes, themes.data.settings.extraRoutes ); + // Execute and setup the application themes.Run = { init: function() { @@ -660,30 +693,29 @@ render: function() { // Render results this.view.render(); + + // Calls the routes functionality this.routes(); - // 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 }); - } + // Set ups history with pushState and our root + Backbone.history.start({ root: 'develop/src/wp-admin/', pushState: true }); }, routes: function() { + var self = this; // 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 ); + }); } };