Index: src/wp-admin/css/common.css =================================================================== --- src/wp-admin/css/common.css (revision 31285) +++ src/wp-admin/css/common.css (working copy) @@ -262,12 +262,12 @@ a:focus { color: #124964; - -webkit-box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); - box-shadow: - 0 0 0 1px #5b9dd9, - 0 0 2px 1px rgba(30, 140, 190, .8); + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } .ie8 a:focus { @@ -950,11 +950,16 @@ /* not a part of filter bar, but derived from it, so here for now */ .title-count { display: inline; - top: -3px; - margin-left: 5px; margin-right: 20px; + vertical-align: bottom; } +.add-new-theme { + display: inline; + position: relative; + bottom: -10px; +} + .filter-items { float: left; } @@ -1274,20 +1279,20 @@ .notice-success, div.updated { - border-color: #7ad03a; + border-color: #7ad03a; } .notice-warning { - border-color: #ffba00; + border-color: #ffba00; } .notice-error, div.error { - border-color: #dd3d36; + border-color: #dd3d36; } .notice-info { - border-color: #2ea2cc; + border-color: #2ea2cc; } .wrap .notice, @@ -2590,9 +2595,9 @@ } @media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { +(-o-min-device-pixel-ratio: 5/4), +(-webkit-min-device-pixel-ratio: 1.25), +(min-resolution: 120dpi) { body.plugin-install-php #TB_window, body.import-php #TB_window, @@ -3055,9 +3060,9 @@ * HiDPI Displays */ @media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { +(-o-min-device-pixel-ratio: 5/4), +(-webkit-min-device-pixel-ratio: 1.25), +(min-resolution: 120dpi) { /* Back-compat for pre-3.8 */ div.star-holder, div.star-holder .star-rating { @@ -3252,4 +3257,4 @@ div#post-body.metabox-holder.columns-1 { overflow-x: hidden; } -} +} \ No newline at end of file Index: src/wp-admin/css/themes.css =================================================================== --- src/wp-admin/css/themes.css (revision 31285) +++ src/wp-admin/css/themes.css (working copy) @@ -479,9 +479,9 @@ .theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .left:focus { - -webkit-box-shadow: none; - box-shadow: none; - outline: none; + -webkit-box-shadow: none; + box-shadow: none; + outline: none; } .theme-overlay .theme-header .left.disabled, @@ -1715,9 +1715,9 @@ * HiDPI Displays */ @media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { +(-o-min-device-pixel-ratio: 5/4), +(-webkit-min-device-pixel-ratio: 1.25), +(min-resolution: 120dpi) { .wp-full-overlay .collapse-sidebar-arrow { background-image: url(../images/arrows-2x.png); -webkit-background-size: 15px 123px; @@ -1754,4 +1754,4 @@ margin-top: 6px; line-height: normal; } -} +} \ No newline at end of file Index: src/wp-admin/js/theme.js =================================================================== --- src/wp-admin/js/theme.js (revision 31285) +++ src/wp-admin/js/theme.js (working copy) @@ -4,1677 +4,1677 @@ ( function($) { // Set up our namespace... -var themes, l10n; -themes = wp.themes = wp.themes || {}; + var themes, l10n; + themes = wp.themes = wp.themes || {}; // Store the theme data and settings for organized and quick access // themes.data.settings, themes.data.themes, themes.data.l10n -themes.data = _wpThemeSettings; -l10n = themes.data.l10n; + themes.data = _wpThemeSettings; + l10n = themes.data.l10n; // Shortcut for isInstall check -themes.isInstall = !! themes.data.settings.isInstall; + themes.isInstall = !! themes.data.settings.isInstall; // Setup app structure -_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template }); + _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template }); -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 description; + 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 description; - // If theme is already installed, set an attribute. - if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) { - this.set({ installed: true }); - } + // If theme is already installed, set an attribute. + if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) { + this.set({ installed: true }); + } - // Set the attributes - this.set({ - // slug is for installation, id is for existing. - id: this.get( 'slug' ) || this.get( 'id' ) - }); + // Set the attributes + this.set({ + // 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 }); + // 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 }); + } } - } -}); + }); // Main view controller for themes.php // Unifies and renders all available views -themes.view.Appearance = wp.Backbone.View.extend({ + themes.view.Appearance = wp.Backbone.View.extend({ - el: '#wpbody-content .wrap .theme-browser', + el: '#wpbody-content .wrap .theme-browser', - window: $( window ), - // Pagination instance - page: 0, + window: $( window ), + // Pagination instance + page: 0, - // Sets up a throttler for binding to 'scroll' - initialize: function( options ) { - // Scroller checks how far the scroll position is - _.bindAll( this, 'scroller' ); + // Sets up a throttler for binding to 'scroll' + initialize: function( options ) { + // Scroller checks how far the scroll position is + _.bindAll( this, 'scroller' ); - this.SearchView = options.SearchView ? options.SearchView : themes.view.Search; - // Bind to the scroll event and throttle - // the results from this.scroller - this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) ); - }, + this.SearchView = options.SearchView ? options.SearchView : themes.view.Search; + // Bind to the scroll event and throttle + // the results from this.scroller + this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) ); + }, - // Main render control - render: function() { - // Setup the main theme view - // with the current theme collection - this.view = new themes.view.Themes({ - collection: this.collection, - parent: this - }); + // Main render control + render: function() { + // Setup the main theme view + // with the current theme collection + this.view = new themes.view.Themes({ + collection: this.collection, + parent: this + }); - // Render search form. - this.search(); + // Render search form. + this.search(); - // Render and append - this.view.render(); - this.$el.empty().append( this.view.el ).addClass('rendered'); - this.$el.append( '
' ); - }, + // Render and append + this.view.render(); + this.$el.empty().append( this.view.el ).addClass('rendered'); + this.$el.append( '
' ); + }, - // Defines search element container - searchContainer: $( '#wpbody h2:first' ), + // Defines search element container + searchContainer: $( '#wpbody .add-new-theme' ), - // Search input and view - // for current theme collection - search: function() { - var view, - self = this; + // Search input and view + // for current theme collection + search: function() { + var view, + self = this; - // Don't render the search if there is only one theme - if ( themes.data.themes.length === 1 ) { - return; - } + // Don't render the search if there is only one theme + if ( themes.data.themes.length === 1 ) { + return; + } - view = new this.SearchView({ - collection: self.collection, - parent: this - }); + view = new this.SearchView({ + collection: self.collection, + parent: this + }); - // Render and append after screen title - view.render(); - this.searchContainer - .append( $.parseHTML( '' ) ) - .append( view.el ); - }, + // Render and append after screen title + view.render(); + this.searchContainer + .append( $.parseHTML( '' ) ) + .append( view.el ); + }, - // Checks when the user gets close to the bottom - // of the mage and triggers a theme:scroll event - scroller: function() { - var self = this, - bottom, threshold; + // Checks when the user gets close to the bottom + // of the mage and triggers a theme:scroll event + scroller: function() { + var self = this, + bottom, threshold; - bottom = this.window.scrollTop() + self.window.height(); - threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height(); - threshold = Math.round( threshold * 0.9 ); + bottom = this.window.scrollTop() + self.window.height(); + threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height(); + threshold = Math.round( threshold * 0.9 ); - if ( bottom > threshold ) { - this.trigger( 'theme:scroll' ); + if ( bottom > threshold ) { + this.trigger( 'theme:scroll' ); + } } - } -}); + }); // Set up the Collection for our theme data // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ... -themes.Collection = Backbone.Collection.extend({ + themes.Collection = Backbone.Collection.extend({ - model: themes.Model, + model: themes.Model, - // Search terms - terms: '', + // Search terms + terms: '', - // Controls searching on the current theme collection - // and triggers an update event - doSearch: function( value ) { + // Controls searching on the current theme collection + // and triggers an update event + doSearch: function( value ) { - // Don't do anything if we've already done this search - // Useful because the Search handler fires multiple times per keystroke - if ( this.terms === value ) { - return; - } + // Don't do anything if we've already done this search + // Useful because the Search handler fires multiple times per keystroke + if ( this.terms === value ) { + return; + } - // Updates terms with the value passed - this.terms = value; + // Updates terms with the value passed + this.terms = value; - // If we have terms, run a search... - if ( this.terms.length > 0 ) { - this.search( this.terms ); - } + // If we have terms, run a search... + if ( this.terms.length > 0 ) { + this.search( this.terms ); + } - // If search is blank, show all themes - // Useful for resetting the views when you clean the input - if ( this.terms === '' ) { - this.reset( themes.data.themes ); - } + // If search is blank, show all themes + // Useful for resetting the views when you clean the input + if ( this.terms === '' ) { + this.reset( themes.data.themes ); + } - // Trigger an 'update' event - this.trigger( 'update' ); - }, + // Trigger an 'update' event + this.trigger( 'update' ); + }, - // Performs a search within the collection - // @uses RegExp - search: function( term ) { - var match, results, haystack, name, description, author; + // Performs a search within the collection + // @uses RegExp + search: function( term ) { + var match, results, haystack, name, description, author; - // Start with a full collection - this.reset( themes.data.themes, { silent: true } ); + // Start with a full collection + this.reset( themes.data.themes, { silent: true } ); - // Escape the term string for RegExp meta characters - term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' ); + // Escape the term string for RegExp meta characters + term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' ); - // Consider spaces as word delimiters and match the whole string - // so matching terms can be combined - term = term.replace( / /g, ')(?=.*' ); - match = new RegExp( '^(?=.*' + term + ').+', 'i' ); + // Consider spaces as word delimiters and match the whole string + // so matching terms can be combined + term = term.replace( / /g, ')(?=.*' ); + match = new RegExp( '^(?=.*' + term + ').+', 'i' ); - // Find results - // _.filter and .test - results = this.filter( function( data ) { - name = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' ); - description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' ); - author = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' ); + // Find results + // _.filter and .test + results = this.filter( function( data ) { + name = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' ); + description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' ); + author = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' ); - haystack = _.union( name, data.get( 'id' ), description, author, data.get( 'tags' ) ); + haystack = _.union( name, data.get( 'id' ), description, author, data.get( 'tags' ) ); - if ( match.test( data.get( 'author' ) ) && term.length > 2 ) { - data.set( 'displayAuthor', true ); - } + if ( match.test( data.get( 'author' ) ) && term.length > 2 ) { + data.set( 'displayAuthor', true ); + } - return match.test( haystack ); - }); + return match.test( haystack ); + }); - if ( results.length === 0 ) { - this.trigger( 'query:empty' ); - } else { - $( 'body' ).removeClass( 'no-results' ); - } + if ( results.length === 0 ) { + this.trigger( 'query:empty' ); + } else { + $( 'body' ).removeClass( 'no-results' ); + } - this.reset( results ); - }, + this.reset( results ); + }, - // Paginates the collection with a helper method - // that slices the collection - paginate: function( instance ) { - var collection = this; - instance = instance || 0; + // Paginates the collection with a helper method + // that slices the collection + paginate: function( instance ) { + var collection = this; + instance = instance || 0; - // Themes per instance are set at 20 - collection = _( collection.rest( 20 * instance ) ); - collection = _( collection.first( 20 ) ); + // Themes per instance are set at 20 + collection = _( collection.rest( 20 * instance ) ); + collection = _( collection.first( 20 ) ); - return collection; - }, + return collection; + }, - count: false, + count: false, - // Handles requests for more themes - // and caches results - // - // When we are missing a cache object we fire an apiCall() - // which triggers events of `query:success` or `query:fail` - query: function( request ) { - /** - * @static - * @type Array - */ - var queries = this.queries, - self = this, - query, isPaginated, count; + // Handles requests for more themes + // and caches results + // + // When we are missing a cache object we fire an apiCall() + // which triggers events of `query:success` or `query:fail` + query: function( request ) { + /** + * @static + * @type Array + */ + var queries = this.queries, + self = this, + query, isPaginated, count; - // Store current query request args - // for later use with the event `theme:end` - this.currentQuery.request = request; + // 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 ) { - return _.isEqual( query.request, request ); - }); + // Search the query cache for matches. + query = _.find( queries, function( query ) { + return _.isEqual( query.request, request ); + }); - // If the request matches the stored currentQuery.request - // it means we have a paginated request. - isPaginated = _.has( request, 'page' ); + // If the request matches the stored currentQuery.request + // it means we have a paginated request. + isPaginated = _.has( request, 'page' ); - // Reset the internal api page counter for non paginated queries. - if ( ! isPaginated ) { - this.currentQuery.page = 1; - } + // Reset the internal api page counter for non paginated queries. + if ( ! isPaginated ) { + this.currentQuery.page = 1; + } - // Otherwise, send a new API call and add it to the cache. - if ( ! query && ! isPaginated ) { - query = this.apiCall( request ).done( function( data ) { + // Otherwise, send a new API call and add it to the cache. + if ( ! query && ! isPaginated ) { + query = this.apiCall( request ).done( function( data ) { - // Update the collection with the queried data. - 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 } ); - } + // Update the collection with the queried data. + 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 } ); + } - // Trigger a collection refresh event - // and a `query:success` event with a `count` argument. - self.trigger( 'update' ); - self.trigger( 'query:success', count ); + // 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 && data.themes.length === 0 ) { - self.trigger( 'query:empty' ); - } + if ( data.themes && data.themes.length === 0 ) { + self.trigger( 'query:empty' ); + } - }).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 ) { - // Add the new themes to the current collection - // @todo update counter - self.add( data.themes ); - self.trigger( 'query:success' ); - - // We are done loading themes for now. - self.loadingThemes = false; - }).fail( function() { self.trigger( 'query:fail' ); }); - } - - if ( query.themes.length === 0 ) { - self.trigger( 'query:empty' ); } else { - $( 'body' ).removeClass( 'no-results' ); - } + // If it's a paginated request we need to fetch more themes... + if ( isPaginated ) { + return this.apiCall( request, isPaginated ).done( function( data ) { + // Add the new themes to the current collection + // @todo update counter + self.add( data.themes ); + self.trigger( 'query:success' ); - // Only trigger an update event since we already have the themes - // on our cached object - if ( _.isNumber( query.total ) ) { - this.count = query.total; - } + // We are done loading themes for now. + self.loadingThemes = false; - this.reset( query.themes ); - if ( ! query.total ) { - this.count = this.length; + }).fail( function() { + self.trigger( 'query:fail' ); + }); + } + + if ( query.themes.length === 0 ) { + self.trigger( 'query:empty' ); + } else { + $( 'body' ).removeClass( 'no-results' ); + } + + // Only trigger an update event since we already have the themes + // on our cached object + if ( _.isNumber( query.total ) ) { + this.count = query.total; + } + + this.reset( query.themes ); + if ( ! query.total ) { + this.count = this.length; + } + + this.trigger( 'update' ); + this.trigger( 'query:success', this.count ); } + }, - this.trigger( 'update' ); - this.trigger( 'query:success', this.count ); - } - }, + // Local cache array for API queries + queries: [], - // Local cache array for API queries - queries: [], + // Keep track of current query so we can handle pagination + currentQuery: { + page: 1, + request: {} + }, - // Keep track of current query so we can handle pagination - currentQuery: { - page: 1, - request: {} - }, + // Send request to api.wordpress.org/themes + apiCall: function( request, paginated ) { + return wp.ajax.send( 'query-themes', { + data: { + // Request data + request: _.extend({ + per_page: 100, + fields: { + description: true, + tested: true, + requires: true, + rating: true, + downloaded: true, + downloadLink: true, + last_updated: true, + homepage: true, + num_ratings: true + } + }, request) + }, - // Send request to api.wordpress.org/themes - apiCall: function( request, paginated ) { - return wp.ajax.send( 'query-themes', { - data: { - // Request data - request: _.extend({ - per_page: 100, - fields: { - description: true, - tested: true, - requires: true, - rating: true, - downloaded: true, - downloadLink: true, - last_updated: true, - homepage: true, - num_ratings: true + beforeSend: function() { + if ( ! paginated ) { + // Spin it + $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' ); } - }, request) - }, - - beforeSend: function() { - if ( ! paginated ) { - // Spin it - $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' ); } - } - }); - }, + }); + }, - // Static status controller for when we are loading themes. - loadingThemes: false -}); + // Static status controller for when we are loading themes. + loadingThemes: false + }); // This is the view that controls each theme item // that will be displayed on the screen -themes.view.Theme = wp.Backbone.View.extend({ + themes.view.Theme = wp.Backbone.View.extend({ - // Wrap theme data on a div.theme element - className: 'theme', + // Wrap theme data on a div.theme element + className: 'theme', - // Reflects which theme view we have - // 'grid' (default) or 'detail' - state: 'grid', + // Reflects which theme view we have + // 'grid' (default) or 'detail' + state: 'grid', - // The HTML template for each element to be rendered - html: themes.template( 'theme' ), + // The HTML template for each element to be rendered + html: themes.template( 'theme' ), - events: { - 'click': themes.isInstall ? 'preview': 'expand', - 'keydown': themes.isInstall ? 'preview': 'expand', - 'touchend': themes.isInstall ? 'preview': 'expand', - 'keyup': 'addFocus', - 'touchmove': 'preventExpand' - }, + events: { + 'click': themes.isInstall ? 'preview': 'expand', + 'keydown': themes.isInstall ? 'preview': 'expand', + 'touchend': themes.isInstall ? 'preview': 'expand', + 'keyup': 'addFocus', + 'touchmove': 'preventExpand' + }, - touchDrag: false, + touchDrag: false, - render: function() { - var data = this.model.toJSON(); - // Render themes using the html template - this.$el.html( this.html( data ) ).attr({ - tabindex: 0, - 'aria-describedby' : data.id + '-action ' + data.id + '-name' - }); + render: function() { + var data = this.model.toJSON(); + // Render themes using the html template + this.$el.html( this.html( data ) ).attr({ + tabindex: 0, + 'aria-describedby' : data.id + '-action ' + data.id + '-name' + }); - // Renders active theme styles - this.activeTheme(); + // Renders active theme styles + this.activeTheme(); - if ( this.model.get( 'displayAuthor' ) ) { - this.$el.addClass( 'display-author' ); - } + if ( this.model.get( 'displayAuthor' ) ) { + this.$el.addClass( 'display-author' ); + } - if ( this.model.get( 'installed' ) ) { - this.$el.addClass( 'is-installed' ); - } - }, + if ( this.model.get( 'installed' ) ) { + this.$el.addClass( 'is-installed' ); + } + }, - // Adds a class to the currently active theme - // and to the overlay in detailed view mode - activeTheme: function() { - if ( this.model.get( 'active' ) ) { - this.$el.addClass( 'active' ); - } - }, + // Adds a class to the currently active theme + // and to the overlay in detailed view mode + activeTheme: function() { + if ( this.model.get( 'active' ) ) { + this.$el.addClass( 'active' ); + } + }, - // Add class of focus to the theme we are focused on. - addFocus: function() { - var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme'); + // Add class of focus to the theme we are focused on. + addFocus: function() { + var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme'); - $('.theme.focus').removeClass('focus'); - $themeToFocus.addClass('focus'); - }, + $('.theme.focus').removeClass('focus'); + $themeToFocus.addClass('focus'); + }, - // Single theme overlay screen - // It's shown when clicking a theme - expand: function( event ) { - var self = this; + // Single theme overlay screen + // It's shown when clicking a theme + expand: function( event ) { + var self = this; - event = event || window.event; + event = event || window.event; - // 'enter' and 'space' keys expand the details view when a theme is :focused - if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { - return; - } + // 'enter' and 'space' keys expand the details view when a theme is :focused + if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { + return; + } - // Bail if the user scrolled on a touch device - if ( this.touchDrag === true ) { - return this.touchDrag = false; - } + // Bail if the user scrolled on a touch device + if ( this.touchDrag === true ) { + return this.touchDrag = false; + } - // Prevent the modal from showing when the user clicks - // one of the direct action buttons - if ( $( event.target ).is( '.theme-actions a' ) ) { - return; - } + // Prevent the modal from showing when the user clicks + // one of the direct action buttons + if ( $( event.target ).is( '.theme-actions a' ) ) { + return; + } - // Set focused theme to current element - themes.focusedTheme = this.$el; + // Set focused theme to current element + themes.focusedTheme = this.$el; - this.trigger( 'theme:expand', self.model.cid ); - }, + this.trigger( 'theme:expand', self.model.cid ); + }, - preventExpand: function() { - this.touchDrag = true; - }, + preventExpand: function() { + this.touchDrag = true; + }, - preview: function( event ) { - var self = this, - current, preview; + preview: function( event ) { + var self = this, + current, preview; - // Bail if the user scrolled on a touch device - if ( this.touchDrag === true ) { - return this.touchDrag = false; - } + // Bail if the user scrolled on a touch device + if ( this.touchDrag === true ) { + return this.touchDrag = false; + } - // Allow direct link path to installing a theme. - if ( $( event.target ).hasClass( 'button-primary' ) ) { - return; - } + // Allow direct link path to installing a theme. + if ( $( event.target ).hasClass( 'button-primary' ) ) { + return; + } - // 'enter' and 'space' keys expand the details view when a theme is :focused - if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { - return; - } + // 'enter' and 'space' keys expand the details view when a theme is :focused + if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { + return; + } - // pressing enter while focused on the buttons shouldn't open the preview - if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) { - return; - } + // pressing enter while focused on the buttons shouldn't open the preview + if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) { + return; + } - event.preventDefault(); + event.preventDefault(); - event = event || window.event; + event = event || window.event; - // Set focus to current theme. - themes.focusedTheme = this.$el; + // Set focus to current theme. + themes.focusedTheme = this.$el; - // Construct a new Preview view. - preview = new themes.view.Preview({ - model: this.model - }); + // Construct a new Preview view. + preview = new themes.view.Preview({ + model: this.model + }); - // Render the view and append it. - preview.render(); - this.setNavButtonsState(); + // 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' ); - } + // 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' ); + } - // Append preview - $( 'div.wrap' ).append( preview.el ); + // Append preview + $( 'div.wrap' ).append( preview.el ); - // Listen to our preview object - // for `theme:next` and `theme:previous` events. - this.listenTo( preview, 'theme:next', function() { + // 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; + // 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; - } + // If we have ventured away from current model update the current model position. + if ( ! _.isUndefined( self.current ) ) { + current = self.current; + } - // Get next theme model. - self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 ); + // Get next 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 ) ) { - self.options.parent.parent.trigger( 'theme:end' ); - return self.current = current; - } + // If we have no more themes, bail. + if ( _.isUndefined( self.current ) ) { + self.options.parent.parent.trigger( 'theme:end' ); + return self.current = current; + } - preview.model = self.current; + preview.model = self.current; - // Render and append. - preview.render(); - this.setNavButtonsState(); - $( '.next-theme' ).focus(); - }) - .listenTo( preview, 'theme:previous', function() { + // Render and append. + preview.render(); + this.setNavButtonsState(); + $( '.next-theme' ).focus(); + }) + .listenTo( preview, 'theme:previous', function() { - // Keep track of current theme model. - current = self.model; + // Keep track of current theme model. + current = self.model; - // Bail early if we are at the beginning of the collection - if ( self.model.collection.indexOf( self.current ) === 0 ) { - return; - } + // Bail early if we are at the beginning of the collection + if ( self.model.collection.indexOf( self.current ) === 0 ) { + return; + } - // If we have ventured away from current model update the current model position. - if ( ! _.isUndefined( self.current ) ) { - current = self.current; - } + // 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 ); + // 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; - } + // If we have no more themes, bail. + if ( _.isUndefined( self.current ) ) { + return; + } - preview.model = self.current; + preview.model = self.current; - // Render and append. - preview.render(); - this.setNavButtonsState(); - $( '.previous-theme' ).focus(); - }); + // Render and append. + preview.render(); + this.setNavButtonsState(); + $( '.previous-theme' ).focus(); + }); - this.listenTo( preview, 'preview:close', function() { - self.current = self.model; - }); - }, + this.listenTo( preview, 'preview:close', function() { + self.current = self.model; + }); + }, - // Handles .disabled classes for previous/next buttons in theme installer preview - setNavButtonsState: function() { - var $themeInstaller = $( '.theme-install-overlay' ), - current = _.isUndefined( this.current ) ? this.model : this.current; + // Handles .disabled classes for previous/next buttons in theme installer preview + setNavButtonsState: function() { + var $themeInstaller = $( '.theme-install-overlay' ), + current = _.isUndefined( this.current ) ? this.model : this.current; - // Disable previous at the zero position - if ( 0 === this.model.collection.indexOf( current ) ) { - $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' ); - } + // Disable previous at the zero position + if ( 0 === this.model.collection.indexOf( current ) ) { + $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' ); + } - // Disable next if the next model is undefined - if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) { - $themeInstaller.find( '.next-theme' ).addClass( 'disabled' ); + // Disable next if the next model is undefined + if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) { + $themeInstaller.find( '.next-theme' ).addClass( 'disabled' ); + } } - } -}); + }); // Theme Details view // Set ups a modal overlay with the expanded theme data -themes.view.Details = wp.Backbone.View.extend({ + themes.view.Details = wp.Backbone.View.extend({ - // Wrap theme data on a div.theme element - className: 'theme-overlay', + // Wrap theme data on a div.theme element + className: 'theme-overlay', - events: { - 'click': 'collapse', - 'click .delete-theme': 'deleteTheme', - 'click .left': 'previousTheme', - 'click .right': 'nextTheme' - }, + events: { + 'click': 'collapse', + 'click .delete-theme': 'deleteTheme', + 'click .left': 'previousTheme', + 'click .right': 'nextTheme' + }, - // The HTML template for the theme overlay - html: themes.template( 'theme-single' ), + // The HTML template for the theme overlay + html: themes.template( 'theme-single' ), - render: function() { - var data = this.model.toJSON(); - this.$el.html( this.html( data ) ); - // Renders active theme styles - this.activeTheme(); - // Set up navigation events - this.navigation(); - // Checks screenshot size - this.screenshotCheck( this.$el ); - // Contain "tabbing" inside the overlay - this.containFocus( this.$el ); - }, + render: function() { + var data = this.model.toJSON(); + this.$el.html( this.html( data ) ); + // Renders active theme styles + this.activeTheme(); + // Set up navigation events + this.navigation(); + // Checks screenshot size + this.screenshotCheck( this.$el ); + // Contain "tabbing" inside the overlay + this.containFocus( this.$el ); + }, - // Adds a class to the currently active theme - // and to the overlay in detailed view mode - activeTheme: function() { - // Check the model has the active property - this.$el.toggleClass( 'active', this.model.get( 'active' ) ); - }, + // Adds a class to the currently active theme + // and to the overlay in detailed view mode + activeTheme: function() { + // Check the model has the active property + this.$el.toggleClass( 'active', this.model.get( 'active' ) ); + }, - // Keeps :focus within the theme details elements - containFocus: function( $el ) { - var $target; + // Keeps :focus within the theme details elements + containFocus: function( $el ) { + var $target; - // Move focus to the primary action - _.delay( function() { - $( '.theme-wrap a.button-primary:visible' ).focus(); - }, 500 ); + // Move focus to the primary action + _.delay( function() { + $( '.theme-wrap a.button-primary:visible' ).focus(); + }, 500 ); - $el.on( 'keydown.wp-themes', function( event ) { + $el.on( 'keydown.wp-themes', function( event ) { - // Tab key - if ( event.which === 9 ) { - $target = $( event.target ); + // Tab key + if ( event.which === 9 ) { + $target = $( event.target ); - // Keep focus within the overlay by making the last link on theme actions - // switch focus to button.left on tabbing and vice versa - if ( $target.is( 'button.left' ) && event.shiftKey ) { - $el.find( '.theme-actions a:last-child' ).focus(); - event.preventDefault(); - } else if ( $target.is( '.theme-actions a:last-child' ) ) { - $el.find( 'button.left' ).focus(); - event.preventDefault(); + // Keep focus within the overlay by making the last link on theme actions + // switch focus to button.left on tabbing and vice versa + if ( $target.is( 'button.left' ) && event.shiftKey ) { + $el.find( '.theme-actions a:last-child' ).focus(); + event.preventDefault(); + } else if ( $target.is( '.theme-actions a:last-child' ) ) { + $el.find( 'button.left' ).focus(); + event.preventDefault(); + } } - } - }); - }, + }); + }, - // Single theme overlay screen - // It's shown when clicking a theme - collapse: function( event ) { - var self = this, - scroll; + // Single theme overlay screen + // It's shown when clicking a theme + collapse: function( event ) { + var self = this, + scroll; - event = event || window.event; + event = event || window.event; - // Prevent collapsing detailed view when there is only one theme available - if ( themes.data.themes.length === 1 ) { - return; - } + // Prevent collapsing detailed view when there is only one theme available + if ( themes.data.themes.length === 1 ) { + return; + } - // Detect if the click is inside the overlay - // and don't close it unless the target was - // the div.back button - if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) { + // Detect if the click is inside the overlay + // and don't close it unless the target was + // the div.back button + if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) { - // Add a temporary closing class while overlay fades out - $( 'body' ).addClass( 'closing-overlay' ); + // Add a temporary closing class while overlay fades out + $( 'body' ).addClass( 'closing-overlay' ); - // With a quick fade out animation - this.$el.fadeOut( 130, function() { - // Clicking outside the modal box closes the overlay - $( 'body' ).removeClass( 'closing-overlay' ); - // Handle event cleanup - self.closeOverlay(); + // With a quick fade out animation + this.$el.fadeOut( 130, function() { + // Clicking outside the modal box closes the overlay + $( 'body' ).removeClass( 'closing-overlay' ); + // Handle event cleanup + self.closeOverlay(); - // Get scroll position to avoid jumping to the top - scroll = document.body.scrollTop; + // Get scroll position to avoid jumping to the top + scroll = document.body.scrollTop; - // Clean the url structure - themes.router.navigate( themes.router.baseUrl( '' ) ); + // Clean the url structure + themes.router.navigate( themes.router.baseUrl( '' ) ); - // Restore scroll position - document.body.scrollTop = scroll; + // Restore scroll position + document.body.scrollTop = scroll; - // Return focus to the theme div - if ( themes.focusedTheme ) { - themes.focusedTheme.focus(); - } - }); - } - }, + // Return focus to the theme div + if ( themes.focusedTheme ) { + themes.focusedTheme.focus(); + } + }); + } + }, - // Handles .disabled classes for next/previous buttons - navigation: function() { + // Handles .disabled classes for next/previous buttons + navigation: function() { - // 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' ); - } - if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) { - this.$el.find( '.right' ).addClass( 'disabled' ); - } - }, + // 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' ); + } + if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) { + this.$el.find( '.right' ).addClass( 'disabled' ); + } + }, - // Performs the actions to effectively close - // the theme details overlay - closeOverlay: function() { - $( 'body' ).removeClass( 'modal-open' ); - this.remove(); - this.unbind(); - this.trigger( 'theme:collapse' ); - }, + // Performs the actions to effectively close + // the theme details overlay + closeOverlay: function() { + $( 'body' ).removeClass( 'modal-open' ); + this.remove(); + this.unbind(); + this.trigger( 'theme:collapse' ); + }, - // Confirmation dialog for deleting a theme - deleteTheme: function() { - return confirm( themes.data.settings.confirmDelete ); - }, + // Confirmation dialog for deleting a theme + deleteTheme: function() { + return confirm( themes.data.settings.confirmDelete ); + }, - nextTheme: function() { - var self = this; - self.trigger( 'theme:next', self.model.cid ); - return false; - }, + nextTheme: function() { + var self = this; + self.trigger( 'theme:next', self.model.cid ); + return false; + }, - previousTheme: function() { - var self = this; - self.trigger( 'theme:previous', self.model.cid ); - return false; - }, + previousTheme: function() { + var self = this; + self.trigger( 'theme:previous', self.model.cid ); + return false; + }, - // 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; + // 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; - screenshot = el.find( '.screenshot img' ); - image = new Image(); - image.src = screenshot.attr( 'src' ); + 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' ); + // Width check + if ( image.width && image.width <= 300 ) { + el.addClass( 'small-screenshot' ); + } } - } -}); + }); // Theme Preview view // Set ups a modal overlay with the expanded theme data -themes.view.Preview = themes.view.Details.extend({ + themes.view.Preview = themes.view.Details.extend({ - className: 'wp-full-overlay expanded', - el: '.theme-install-overlay', + className: 'wp-full-overlay expanded', + el: '.theme-install-overlay', - events: { - 'click .close-full-overlay': 'close', - 'click .collapse-sidebar': 'collapse', - 'click .previous-theme': 'previousTheme', - 'click .next-theme': 'nextTheme', - 'keyup': 'keyEvent' - }, + events: { + 'click .close-full-overlay': 'close', + 'click .collapse-sidebar': 'collapse', + 'click .previous-theme': 'previousTheme', + 'click .next-theme': 'nextTheme', + 'keyup': 'keyEvent' + }, - // The HTML template for the theme preview - html: themes.template( 'theme-preview' ), + // The HTML template for the theme preview + html: themes.template( 'theme-preview' ), - render: function() { - var data = this.model.toJSON(); + render: function() { + var data = this.model.toJSON(); - this.$el.html( this.html( data ) ); + this.$el.html( this.html( data ) ); - themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } ); + themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } ); - this.$el.fadeIn( 200, function() { - $( 'body' ).addClass( 'theme-installer-active full-overlay-active' ); - $( '.close-full-overlay' ).focus(); - }); - }, + this.$el.fadeIn( 200, function() { + $( 'body' ).addClass( 'theme-installer-active full-overlay-active' ); + $( '.close-full-overlay' ).focus(); + }); + }, - close: function() { - this.$el.fadeOut( 200, function() { - $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ); + close: function() { + 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(); - } - }); + // Return focus to the theme div + if ( themes.focusedTheme ) { + themes.focusedTheme.focus(); + } + }); - themes.router.navigate( themes.router.baseUrl( '' ) ); - this.trigger( 'preview:close' ); - this.undelegateEvents(); - this.unbind(); - return false; - }, + themes.router.navigate( themes.router.baseUrl( '' ) ); + this.trigger( 'preview:close' ); + this.undelegateEvents(); + this.unbind(); + return false; + }, - collapse: function() { + collapse: function() { - this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); - return false; - }, + this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); + return false; + }, - keyEvent: function( event ) { - // The escape key closes the preview - if ( event.keyCode === 27 ) { - this.undelegateEvents(); - this.close(); - } - // The right arrow key, next theme - if ( event.keyCode === 39 ) { - _.once( this.nextTheme() ); - } + keyEvent: function( event ) { + // The escape key closes the preview + if ( event.keyCode === 27 ) { + this.undelegateEvents(); + this.close(); + } + // The right arrow key, next theme + if ( event.keyCode === 39 ) { + _.once( this.nextTheme() ); + } - // The left arrow key, previous theme - if ( event.keyCode === 37 ) { - this.previousTheme(); + // The left arrow key, previous theme + if ( event.keyCode === 37 ) { + this.previousTheme(); + } } - } -}); + }); // Controls the rendering of div.themes, // a wrapper that will hold all the theme elements -themes.view.Themes = wp.Backbone.View.extend({ + themes.view.Themes = wp.Backbone.View.extend({ - className: 'themes', - $overlay: $( 'div.theme-overlay' ), + className: 'themes', + $overlay: $( 'div.theme-overlay' ), - // Number to keep track of scroll position - // while in theme-overlay mode - index: 0, + // Number to keep track of scroll position + // while in theme-overlay mode + index: 0, - // The theme count element - count: $( '.wp-filter .theme-count' ), + // The theme count element + count: $( '.wp-filter .theme-count' ), - initialize: function( options ) { - var self = this; + initialize: function( options ) { + var self = this; - // Set up parent - this.parent = options.parent; + // Set up parent + this.parent = options.parent; - // Set current view to [grid] - this.setView( 'grid' ); + // Set current view to [grid] + this.setView( 'grid' ); - // Move the active theme to the beginning of the collection - self.currentTheme(); - - // When the collection is updated by user input... - this.listenTo( self.collection, 'update', function() { - self.parent.page = 0; + // Move the active theme to the beginning of the collection self.currentTheme(); - self.render( this ); - }); - // Update theme count to full result set when available. - this.listenTo( self.collection, 'query:success', function( count ) { - if ( _.isNumber( count ) ) { - self.count.text( count ); - } else { - self.count.text( self.collection.length ); - } - }); + // When the collection is updated by user input... + this.listenTo( self.collection, 'update', function() { + self.parent.page = 0; + self.currentTheme(); + self.render( this ); + }); - this.listenTo( self.collection, 'query:empty', function() { - $( 'body' ).addClass( 'no-results' ); - }); + // Update theme count to full result set when available. + this.listenTo( self.collection, 'query:success', function( count ) { + if ( _.isNumber( count ) ) { + self.count.text( count ); + } else { + self.count.text( self.collection.length ); + } + }); - this.listenTo( this.parent, 'theme:scroll', function() { - self.renderThemes( self.parent.page ); - }); + this.listenTo( self.collection, 'query:empty', function() { + $( 'body' ).addClass( 'no-results' ); + }); - this.listenTo( this.parent, 'theme:close', function() { - if ( self.overlay ) { - self.overlay.closeOverlay(); - } - } ); + this.listenTo( this.parent, 'theme:scroll', function() { + self.renderThemes( self.parent.page ); + }); - // Bind keyboard events. - $( 'body' ).on( 'keyup', function( event ) { - if ( ! self.overlay ) { - return; - } + this.listenTo( this.parent, 'theme:close', function() { + if ( self.overlay ) { + self.overlay.closeOverlay(); + } + } ); - // Pressing the right arrow key fires a theme:next event - if ( event.keyCode === 39 ) { - self.overlay.nextTheme(); - } + // Bind keyboard events. + $( 'body' ).on( 'keyup', function( event ) { + if ( ! self.overlay ) { + return; + } - // Pressing the left arrow key fires a theme:previous event - if ( event.keyCode === 37 ) { - self.overlay.previousTheme(); - } + // Pressing the right arrow key fires a theme:next event + if ( event.keyCode === 39 ) { + self.overlay.nextTheme(); + } - // Pressing the escape key fires a theme:collapse event - if ( event.keyCode === 27 ) { - self.overlay.collapse( event ); - } - }); - }, + // Pressing the left arrow key fires a theme:previous event + if ( event.keyCode === 37 ) { + self.overlay.previousTheme(); + } - // Manages rendering of theme pages - // and keeping theme count in sync - render: function() { - // Clear the DOM, please - this.$el.html( '' ); + // Pressing the escape key fires a theme:collapse event + if ( event.keyCode === 27 ) { + self.overlay.collapse( event ); + } + }); + }, - // If the user doesn't have switch capabilities - // or there is only one theme in the collection - // render the detailed view of the active theme - if ( themes.data.themes.length === 1 ) { + // Manages rendering of theme pages + // and keeping theme count in sync + render: function() { + // Clear the DOM, please + this.$el.html( '' ); - // Constructs the view - this.singleTheme = new themes.view.Details({ - model: this.collection.models[0] - }); + // If the user doesn't have switch capabilities + // or there is only one theme in the collection + // render the detailed view of the active theme + if ( themes.data.themes.length === 1 ) { - // Render and apply a 'single-theme' class to our container - this.singleTheme.render(); - this.$el.addClass( 'single-theme' ); - this.$el.append( this.singleTheme.el ); - } + // Constructs the view + this.singleTheme = new themes.view.Details({ + model: this.collection.models[0] + }); - // Generate the themes - // Using page instance - // While checking the collection has items - if ( this.options.collection.size() > 0 ) { - this.renderThemes( this.parent.page ); - } + // Render and apply a 'single-theme' class to our container + this.singleTheme.render(); + this.$el.addClass( 'single-theme' ); + this.$el.append( this.singleTheme.el ); + } - // Display a live theme count for the collection - this.count.text( this.collection.count ? this.collection.count : this.collection.length ); - }, + // Generate the themes + // Using page instance + // While checking the collection has items + if ( this.options.collection.size() > 0 ) { + this.renderThemes( this.parent.page ); + } - // Iterates through each instance of the collection - // and renders each theme module - renderThemes: function( page ) { - var self = this; + // Display a live theme count for the collection + this.count.text( this.collection.count ? this.collection.count : this.collection.length ); + }, - self.instance = self.collection.paginate( page ); + // Iterates through each instance of the collection + // and renders each theme module + renderThemes: function( page ) { + var self = this; - // If we have no more themes bail - if ( self.instance.size() === 0 ) { - // Fire a no-more-themes event. - this.parent.trigger( 'theme:end' ); - return; - } + self.instance = self.collection.paginate( page ); - // Make sure the add-new stays at the end - if ( page >= 1 ) { - $( '.add-new-theme' ).remove(); - } + // If we have no more themes bail + if ( self.instance.size() === 0 ) { + // Fire a no-more-themes event. + this.parent.trigger( 'theme:end' ); + return; + } - // Loop through the themes and setup each theme view - self.instance.each( function( theme ) { - self.theme = new themes.view.Theme({ - model: theme, - parent: self - }); + // Make sure the add-new stays at the end + if ( page >= 1 ) { + $( '.add-new-theme' ).remove(); + } - // Render the views... - self.theme.render(); - // and append them to div.themes - self.$el.append( self.theme.el ); + // Loop through the themes and setup each theme view + self.instance.each( function( theme ) { + self.theme = new themes.view.Theme({ + model: theme, + parent: self + }); - // Binds to theme:expand to show the modal box - // with the theme details - self.listenTo( self.theme, 'theme:expand', self.expand, self ); - }); + // Render the views... + self.theme.render(); + // and append them to div.themes + self.$el.append( self.theme.el ); - // 'Add new theme' element shown at the end of the grid - if ( themes.data.settings.canInstall ) { - this.$el.append( '

' + l10n.addNew + '

' ); - } + // Binds to theme:expand to show the modal box + // with the theme details + self.listenTo( self.theme, 'theme:expand', self.expand, self ); + }); - this.parent.page++; - }, + // 'Add new theme' element shown at the end of the grid + if ( themes.data.settings.canInstall ) { + this.$el.append( '

' + l10n.addNew + '

' ); + } - // Grabs current theme and puts it at the beginning of the collection - currentTheme: function() { - var self = this, - current; + this.parent.page++; + }, - current = self.collection.findWhere({ active: true }); + // Grabs current theme and puts it at the beginning of the collection + currentTheme: function() { + var self = this, + current; - // Move the active theme to the beginning of the collection - if ( current ) { - self.collection.remove( current ); - self.collection.add( current, { at:0 } ); - } - }, + current = self.collection.findWhere({ active: true }); - // Sets current view - setView: function( view ) { - return view; - }, + // Move the active theme to the beginning of the collection + if ( current ) { + self.collection.remove( current ); + self.collection.add( current, { at:0 } ); + } + }, - // Renders the overlay with the ThemeDetails view - // Uses the current model data - expand: function( id ) { - var self = this; + // Sets current view + setView: function( view ) { + return view; + }, - // Set the current theme model - this.model = self.collection.get( id ); + // Renders the overlay with the ThemeDetails view + // Uses the current model data + expand: function( id ) { + var self = this; - // Trigger a route update for the current model - themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) ); + // Set the current theme model + this.model = self.collection.get( id ); - // Sets this.view to 'detail' - this.setView( 'detail' ); - $( 'body' ).addClass( 'modal-open' ); + // Trigger a route update for the current model + themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) ); - // Set up the theme details view - this.overlay = new themes.view.Details({ - model: self.model - }); + // Sets this.view to 'detail' + this.setView( 'detail' ); + $( 'body' ).addClass( 'modal-open' ); - this.overlay.render(); - this.$overlay.html( this.overlay.el ); + // Set up the theme details view + this.overlay = new themes.view.Details({ + model: self.model + }); - // Bind to theme:next and theme:previous - // triggered by the arrow keys - // - // Keep track of the current model so we - // can infer an index position - this.listenTo( this.overlay, 'theme:next', function() { - // Renders the next theme on the overlay - self.next( [ self.model.cid ] ); + this.overlay.render(); + this.$overlay.html( this.overlay.el ); - }) - .listenTo( this.overlay, 'theme:previous', function() { - // Renders the previous theme on the overlay - self.previous( [ self.model.cid ] ); - }); - }, + // Bind to theme:next and theme:previous + // triggered by the arrow keys + // + // Keep track of the current model so we + // can infer an index position + this.listenTo( this.overlay, 'theme:next', function() { + // Renders the next theme on the overlay + self.next( [ self.model.cid ] ); - // This method renders the next theme on the overlay modal - // based on the current position in the collection - // @params [model cid] - next: function( args ) { - var self = this, - model, nextModel; + }) + .listenTo( this.overlay, 'theme:previous', function() { + // Renders the previous theme on the overlay + self.previous( [ self.model.cid ] ); + }); + }, - // Get the current theme - model = self.collection.get( args[0] ); - // Find the next model within the collection - nextModel = self.collection.at( self.collection.indexOf( model ) + 1 ); + // This method renders the next theme on the overlay modal + // based on the current position in the collection + // @params [model cid] + next: function( args ) { + var self = this, + model, nextModel; - // Sanity check which also serves as a boundary test - if ( nextModel !== undefined ) { + // Get the current theme + model = self.collection.get( args[0] ); + // Find the next model within the collection + nextModel = self.collection.at( self.collection.indexOf( model ) + 1 ); - // We have a new theme... - // Close the overlay - this.overlay.closeOverlay(); + // Sanity check which also serves as a boundary test + if ( nextModel !== undefined ) { - // Trigger a route update for the current model - self.theme.trigger( 'theme:expand', nextModel.cid ); + // We have a new theme... + // Close the overlay + this.overlay.closeOverlay(); - } - }, + // Trigger a route update for the current model + self.theme.trigger( 'theme:expand', nextModel.cid ); - // This method renders the previous theme on the overlay modal - // based on the current position in the collection - // @params [model cid] - previous: function( args ) { - var self = this, - model, previousModel; + } + }, - // Get the current theme - model = self.collection.get( args[0] ); - // Find the previous model within the collection - previousModel = self.collection.at( self.collection.indexOf( model ) - 1 ); + // This method renders the previous theme on the overlay modal + // based on the current position in the collection + // @params [model cid] + previous: function( args ) { + var self = this, + model, previousModel; - if ( previousModel !== undefined ) { + // Get the current theme + model = self.collection.get( args[0] ); + // Find the previous model within the collection + previousModel = self.collection.at( self.collection.indexOf( model ) - 1 ); - // We have a new theme... - // Close the overlay - this.overlay.closeOverlay(); + if ( previousModel !== undefined ) { - // Trigger a route update for the current model - self.theme.trigger( 'theme:expand', previousModel.cid ); + // We have a new theme... + // Close the overlay + this.overlay.closeOverlay(); + // Trigger a route update for the current model + self.theme.trigger( 'theme:expand', previousModel.cid ); + + } } - } -}); + }); // Search input view controller. -themes.view.Search = wp.Backbone.View.extend({ + themes.view.Search = wp.Backbone.View.extend({ - tagName: 'input', - className: 'wp-filter-search', - id: 'wp-filter-search-input', - searching: false, + tagName: 'input', + className: 'wp-filter-search', + id: 'wp-filter-search-input', + searching: false, - attributes: { - placeholder: l10n.searchPlaceholder, - type: 'search' - }, + attributes: { + placeholder: l10n.searchPlaceholder, + type: 'search' + }, - events: { - 'input': 'search', - 'keyup': 'search', - 'change': 'search', - 'search': 'search', - 'blur': 'pushState' - }, + events: { + 'input': 'search', + 'keyup': 'search', + 'change': 'search', + 'search': 'search', + 'blur': 'pushState' + }, - initialize: function( options ) { + initialize: function( options ) { - this.parent = options.parent; + this.parent = options.parent; - this.listenTo( this.parent, 'theme:close', function() { - this.searching = false; - } ); + this.listenTo( this.parent, 'theme:close', function() { + this.searching = false; + } ); - }, + }, - // Runs a search on the theme collection. - search: function( event ) { - var options = {}; + // Runs a search on the theme collection. + search: function( event ) { + var options = {}; - // Clear on escape. - if ( event.type === 'keyup' && event.which === 27 ) { - event.target.value = ''; - } + // Clear on escape. + if ( event.type === 'keyup' && event.which === 27 ) { + event.target.value = ''; + } - // Lose input focus when pressing enter - if ( event.which === 13 ) { - this.$el.trigger( 'blur' ); - } + // Lose input focus when pressing enter + if ( event.which === 13 ) { + this.$el.trigger( 'blur' ); + } - this.collection.doSearch( event.target.value ); + this.collection.doSearch( event.target.value ); - // if search is initiated and key is not return - if ( this.searching && event.which !== 13 ) { - options.replace = true; - } else { - this.searching = true; - } + // if search is initiated and key is not return + if ( this.searching && event.which !== 13 ) { + options.replace = true; + } else { + this.searching = true; + } - // Update the URL hash - if ( event.target.value ) { - themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options ); - } else { - themes.router.navigate( themes.router.baseUrl( '' ) ); - } - }, + // Update the URL hash + if ( event.target.value ) { + themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options ); + } else { + themes.router.navigate( themes.router.baseUrl( '' ) ); + } + }, - pushState: function( event ) { - var url = themes.router.baseUrl( '' ); + pushState: function( event ) { + var url = themes.router.baseUrl( '' ); - if ( event.target.value ) { - url = themes.router.baseUrl( themes.router.searchPath + event.target.value ); - } + if ( event.target.value ) { + url = themes.router.baseUrl( themes.router.searchPath + event.target.value ); + } - this.searching = false; - themes.router.navigate( url ); + this.searching = false; + themes.router.navigate( url ); - } -}); + } + }); // Sets up the routes events for relevant url queries // Listens to [theme] and [search] params -themes.Router = Backbone.Router.extend({ + themes.Router = Backbone.Router.extend({ - routes: { - 'themes.php?theme=:slug': 'theme', - 'themes.php?search=:query': 'search', - 'themes.php?s=:query': 'search', - 'themes.php': 'themes', - '': 'themes' - }, + routes: { + 'themes.php?theme=:slug': 'theme', + 'themes.php?search=:query': 'search', + 'themes.php?s=:query': 'search', + 'themes.php': 'themes', + '': 'themes' + }, - baseUrl: function( url ) { - return 'themes.php' + url; - }, + baseUrl: function( url ) { + return 'themes.php' + url; + }, - themePath: '?theme=', - searchPath: '?search=', + themePath: '?theme=', + searchPath: '?search=', - search: function( query ) { - $( '.wp-filter-search' ).val( query ); - }, + search: function( query ) { + $( '.wp-filter-search' ).val( query ); + }, - themes: function() { - $( '.wp-filter-search' ).val( '' ); - }, + themes: function() { + $( '.wp-filter-search' ).val( '' ); + }, - navigate: function() { - if ( Backbone.history._hasPushState ) { - Backbone.Router.prototype.navigate.apply( this, arguments ); + navigate: function() { + if ( Backbone.history._hasPushState ) { + Backbone.Router.prototype.navigate.apply( this, arguments ); + } } - } -}); + }); // Execute and setup the application -themes.Run = { - init: function() { - // Initializes the blog's theme library view - // Create a new collection with data - this.themes = new themes.Collection( themes.data.themes ); + themes.Run = { + init: function() { + // Initializes the blog's theme library view + // Create a new collection with data + this.themes = new themes.Collection( themes.data.themes ); - // Set up the view - this.view = new themes.view.Appearance({ - collection: this.themes - }); + // Set up the view + this.view = new themes.view.Appearance({ + collection: this.themes + }); - this.render(); - }, + this.render(); + }, - render: function() { + render: function() { - // Render results - this.view.render(); - this.routes(); + // Render results + this.view.render(); + this.routes(); - Backbone.history.start({ - root: themes.data.settings.adminUrl, - pushState: true, - hashChange: false - }); - }, + Backbone.history.start({ + root: themes.data.settings.adminUrl, + pushState: true, + hashChange: false + }); + }, - routes: function() { - var self = this; - // Bind to our global thx object - // so that the object is available to sub-views - themes.router = new themes.Router(); + routes: function() { + var self = this; + // Bind to our global thx object + // so that the object is available to sub-views + themes.router = new themes.Router(); - // Handles theme details route event - themes.router.on( 'route:theme', function( slug ) { - self.view.view.expand( slug ); - }); + // Handles theme details route event + themes.router.on( 'route:theme', function( slug ) { + self.view.view.expand( slug ); + }); - themes.router.on( 'route:themes', function() { - self.themes.doSearch( '' ); - self.view.trigger( 'theme:close' ); - }); + themes.router.on( 'route:themes', function() { + self.themes.doSearch( '' ); + self.view.trigger( 'theme:close' ); + }); - // Handles search route event - themes.router.on( 'route:search', function() { - $( '.wp-filter-search' ).trigger( 'keyup' ); - }); + // Handles search route event + themes.router.on( 'route:search', function() { + $( '.wp-filter-search' ).trigger( 'keyup' ); + }); - this.extraRoutes(); - }, + this.extraRoutes(); + }, - extraRoutes: function() { - return false; - } -}; + extraRoutes: function() { + return false; + } + }; // Extend the main Search view -themes.view.InstallerSearch = themes.view.Search.extend({ + themes.view.InstallerSearch = themes.view.Search.extend({ - events: { - 'keyup': 'search' - }, + events: { + 'keyup': 'search' + }, - // Handles Ajax request for searching through themes in public repo - search: function( event ) { + // Handles Ajax request for searching through themes in public repo + search: function( event ) { - // Tabbing or reverse tabbing into the search input shouldn't trigger a search - if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) { - return; - } + // Tabbing or reverse tabbing into the search input shouldn't trigger a search + if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) { + return; + } - this.collection = this.options.parent.view.collection; + this.collection = this.options.parent.view.collection; - // Clear on escape. - if ( event.type === 'keyup' && event.which === 27 ) { - event.target.value = ''; - } + // Clear on escape. + if ( event.type === 'keyup' && event.which === 27 ) { + event.target.value = ''; + } - _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value ); - }, + _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value ); + }, - doSearch: _.debounce( function( value ) { - var request = {}; + doSearch: _.debounce( function( value ) { + var request = {}; - request.search = value; + request.search = value; - // Intercept an [author] search. - // - // If input value starts with `author:` send a request - // for `author` instead of a regular `search` - if ( value.substring( 0, 7 ) === 'author:' ) { - request.search = ''; - request.author = value.slice( 7 ); - } + // Intercept an [author] search. + // + // If input value starts with `author:` send a request + // for `author` instead of a regular `search` + if ( value.substring( 0, 7 ) === 'author:' ) { + request.search = ''; + request.author = value.slice( 7 ); + } - // Intercept a [tag] search. - // - // If input value starts with `tag:` send a request - // for `tag` instead of a regular `search` - if ( value.substring( 0, 4 ) === 'tag:' ) { - request.search = ''; - request.tag = [ value.slice( 4 ) ]; - } + // Intercept a [tag] search. + // + // If input value starts with `tag:` send a request + // for `tag` instead of a regular `search` + if ( value.substring( 0, 4 ) === 'tag:' ) { + request.search = ''; + request.tag = [ value.slice( 4 ) ]; + } - $( '.filter-links li > a.current' ).removeClass( 'current' ); - $( 'body' ).removeClass( 'show-filters filters-applied' ); + $( '.filter-links li > a.current' ).removeClass( 'current' ); + $( 'body' ).removeClass( 'show-filters filters-applied' ); - // Get the themes by sending Ajax POST request to api.wordpress.org/themes - // or searching the local cache - this.collection.query( request ); + // Get the themes by sending Ajax POST request to api.wordpress.org/themes + // or searching the local cache + this.collection.query( request ); - // Set route - themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } ); - }, 300 ) -}); + // Set route + themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } ); + }, 300 ) + }); -themes.view.Installer = themes.view.Appearance.extend({ + themes.view.Installer = themes.view.Appearance.extend({ - el: '#wpbody-content .wrap', + el: '#wpbody-content .wrap', - // Register events for sorting and filters in theme-navigation - events: { - 'click .filter-links li > a': 'onSort', - 'click .theme-filter': 'onFilter', - 'click .drawer-toggle': 'moreFilters', - 'click .filter-drawer .apply-filters': 'applyFilters', - 'click .filter-group [type="checkbox"]': 'addFilter', - 'click .filter-drawer .clear-filters': 'clearFilters', - 'click .filtered-by': 'backToFilters' - }, + // Register events for sorting and filters in theme-navigation + events: { + 'click .filter-links li > a': 'onSort', + 'click .theme-filter': 'onFilter', + 'click .drawer-toggle': 'moreFilters', + 'click .filter-drawer .apply-filters': 'applyFilters', + 'click .filter-group [type="checkbox"]': 'addFilter', + 'click .filter-drawer .clear-filters': 'clearFilters', + 'click .filtered-by': 'backToFilters' + }, - // Initial render method - render: function() { - var self = this; + // Initial render method + render: function() { + var self = this; - this.search(); - this.uploader(); + this.search(); + this.uploader(); - this.collection = new themes.Collection(); + this.collection = new themes.Collection(); - // Bump `collection.currentQuery.page` and request more themes if we hit the end of the page. - this.listenTo( this, 'theme:end', function() { + // Bump `collection.currentQuery.page` and request more themes if we hit the end of the page. + this.listenTo( this, 'theme:end', function() { - // Make sure we are not already loading - if ( self.collection.loadingThemes ) { - return; - } + // Make sure we are not already loading + if ( self.collection.loadingThemes ) { + return; + } - // Set loadingThemes to true and bump page instance of currentQuery. - self.collection.loadingThemes = true; - self.collection.currentQuery.page++; + // Set loadingThemes to true and bump page instance of currentQuery. + self.collection.loadingThemes = true; + self.collection.currentQuery.page++; - // Use currentQuery.page to build the themes request. - _.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } ); - self.collection.query( self.collection.currentQuery.request ); - }); + // Use currentQuery.page to build the themes request. + _.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } ); + self.collection.query( self.collection.currentQuery.request ); + }); - this.listenTo( this.collection, 'query:success', function() { - $( 'body' ).removeClass( 'loading-content' ); - $( '.theme-browser' ).find( 'div.error' ).remove(); - }); + this.listenTo( this.collection, 'query:success', function() { + $( 'body' ).removeClass( 'loading-content' ); + $( '.theme-browser' ).find( 'div.error' ).remove(); + }); - this.listenTo( this.collection, 'query:fail', function() { - $( 'body' ).removeClass( 'loading-content' ); - $( '.theme-browser' ).find( 'div.error' ).remove(); - $( '.theme-browser' ).find( 'div.themes' ).before( '

' + l10n.error + '

' ); - }); + this.listenTo( this.collection, 'query:fail', function() { + $( 'body' ).removeClass( 'loading-content' ); + $( '.theme-browser' ).find( 'div.error' ).remove(); + $( '.theme-browser' ).find( 'div.themes' ).before( '

' + l10n.error + '

' ); + }); - if ( this.view ) { - this.view.remove(); - } + if ( this.view ) { + this.view.remove(); + } - // Set ups the view and passes the section argument - this.view = new themes.view.Themes({ - collection: this.collection, - parent: this - }); + // Set ups the view and passes the section argument + this.view = new themes.view.Themes({ + collection: this.collection, + parent: this + }); - // Reset pagination every time the install view handler is run - this.page = 0; + // Reset pagination every time the install view handler is run + this.page = 0; - // Render and append - this.$el.find( '.themes' ).remove(); - this.view.render(); - this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' ); - }, + // Render and append + this.$el.find( '.themes' ).remove(); + this.view.render(); + this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' ); + }, - // 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 } ); - }, + // 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 - onSort: function( event ) { - var $el = $( event.target ), - sort = $el.data( 'sort' ); + // Sorting navigation + onSort: function( event ) { + var $el = $( event.target ), + sort = $el.data( 'sort' ); - event.preventDefault(); + event.preventDefault(); - $( 'body' ).removeClass( 'filters-applied show-filters' ); + $( 'body' ).removeClass( 'filters-applied show-filters' ); - // Bail if this is already active - if ( $el.hasClass( this.activeClass ) ) { - return; - } + // Bail if this is already active + if ( $el.hasClass( this.activeClass ) ) { + return; + } - this.sort( sort ); + this.sort( sort ); - // Trigger a router.naviagte update - themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) ); - }, + // Trigger a router.naviagte update + themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) ); + }, - sort: function( sort ) { - this.clearSearch(); + sort: function( sort ) { + this.clearSearch(); - $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass ); - $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass ); + $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass ); + $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass ); - this.browse( sort ); - }, + this.browse( sort ); + }, - // Filters and Tags - onFilter: function( event ) { - var request, - $el = $( event.target ), - filter = $el.data( 'filter' ); + // Filters and Tags + onFilter: function( event ) { + var request, + $el = $( event.target ), + filter = $el.data( 'filter' ); - // Bail if this is already active - if ( $el.hasClass( this.activeClass ) ) { - return; - } + // Bail if this is already active + if ( $el.hasClass( this.activeClass ) ) { + return; + } - $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass ); - $el.addClass( this.activeClass ); + $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass ); + $el.addClass( this.activeClass ); - if ( ! filter ) { - return; - } + if ( ! filter ) { + return; + } - // Construct the filter request - // using the default values - filter = _.union( filter, this.filtersChecked() ); - request = { tag: [ filter ] }; + // Construct the filter request + // using the default values + filter = _.union( filter, this.filtersChecked() ); + request = { tag: [ filter ] }; - // Get the themes by sending Ajax POST request to api.wordpress.org/themes - // or searching the local cache - this.collection.query( request ); - }, + // Get the themes by sending Ajax POST request to api.wordpress.org/themes + // or searching the local cache + this.collection.query( request ); + }, - // Clicking on a checkbox to add another filter to the request - addFilter: function() { - this.filtersChecked(); - }, + // Clicking on a checkbox to add another filter to the request + addFilter: function() { + this.filtersChecked(); + }, - // Applying filters triggers a tag request - applyFilters: function( event ) { - var name, - tags = this.filtersChecked(), - request = { tag: tags }, - filteringBy = $( '.filtered-by .tags' ); + // Applying filters triggers a tag request + applyFilters: function( event ) { + var name, + tags = this.filtersChecked(), + request = { tag: tags }, + filteringBy = $( '.filtered-by .tags' ); - if ( event ) { - event.preventDefault(); - } + if ( event ) { + event.preventDefault(); + } - $( 'body' ).addClass( 'filters-applied' ); - $( '.filter-links li > a.current' ).removeClass( 'current' ); - filteringBy.empty(); + $( 'body' ).addClass( 'filters-applied' ); + $( '.filter-links li > a.current' ).removeClass( 'current' ); + filteringBy.empty(); - _.each( tags, function( tag ) { - name = $( 'label[for="filter-id-' + tag + '"]' ).text(); - filteringBy.append( '' + name + '' ); - }); + _.each( tags, function( tag ) { + name = $( 'label[for="filter-id-' + tag + '"]' ).text(); + filteringBy.append( '' + name + '' ); + }); - // Get the themes by sending Ajax POST request to api.wordpress.org/themes - // or searching the local cache - this.collection.query( request ); - }, + // Get the themes by sending Ajax POST request to api.wordpress.org/themes + // or searching the local cache + this.collection.query( request ); + }, - // Get the checked filters - // @return {array} of tags or false - filtersChecked: function() { - var items = $( '.filter-group' ).find( ':checkbox' ), - tags = []; + // Get the checked filters + // @return {array} of tags or false + filtersChecked: function() { + var items = $( '.filter-group' ).find( ':checkbox' ), + tags = []; - _.each( items.filter( ':checked' ), function( item ) { - tags.push( $( item ).prop( 'value' ) ); - }); + _.each( items.filter( ':checked' ), function( item ) { + tags.push( $( item ).prop( 'value' ) ); + }); - // When no filters are checked, restore initial state and return - if ( tags.length === 0 ) { - $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' ); - $( '.filter-drawer .clear-filters' ).hide(); - $( 'body' ).removeClass( 'filters-applied' ); - return false; - } + // When no filters are checked, restore initial state and return + if ( tags.length === 0 ) { + $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' ); + $( '.filter-drawer .clear-filters' ).hide(); + $( 'body' ).removeClass( 'filters-applied' ); + return false; + } - $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); - $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); + $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); + $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); - return tags; - }, + return tags; + }, - activeClass: 'current', + activeClass: 'current', - // Overwrite search container class to append search - // in new location - searchContainer: $( '.wp-filter .search-form' ), + // Overwrite search container class to append search + // in new location + searchContainer: $( '.wp-filter .search-form' ), - uploader: function() { - $( 'a.upload' ).on( 'click', function( event ) { + uploader: function() { + $( 'a.upload' ).on( 'click', function( event ) { + event.preventDefault(); + $( 'body' ).addClass( 'show-upload-theme' ); + themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } ); + }); + $( 'a.browse-themes' ).on( 'click', function( event ) { + event.preventDefault(); + $( 'body' ).removeClass( 'show-upload-theme' ); + themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); + }); + }, + + // Toggle the full filters navigation + moreFilters: function( event ) { event.preventDefault(); - $( 'body' ).addClass( 'show-upload-theme' ); - themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } ); - }); - $( 'a.browse-themes' ).on( 'click', function( event ) { - event.preventDefault(); - $( 'body' ).removeClass( 'show-upload-theme' ); - themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); - }); - }, - // Toggle the full filters navigation - moreFilters: function( event ) { - event.preventDefault(); + if ( $( 'body' ).hasClass( 'filters-applied' ) ) { + return this.backToFilters(); + } - if ( $( 'body' ).hasClass( 'filters-applied' ) ) { - return this.backToFilters(); - } + // If the filters section is opened and filters are checked + // run the relevant query collapsing to filtered-by state + if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) { + return this.addFilter(); + } - // If the filters section is opened and filters are checked - // run the relevant query collapsing to filtered-by state - if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) { - return this.addFilter(); - } + this.clearSearch(); - this.clearSearch(); + themes.router.navigate( themes.router.baseUrl( '' ) ); + $( 'body' ).toggleClass( 'show-filters' ); + }, - themes.router.navigate( themes.router.baseUrl( '' ) ); - $( 'body' ).toggleClass( 'show-filters' ); - }, + // Clears all the checked filters + // @uses filtersChecked() + clearFilters: function( event ) { + var items = $( '.filter-group' ).find( ':checkbox' ), + self = this; - // Clears all the checked filters - // @uses filtersChecked() - clearFilters: function( event ) { - var items = $( '.filter-group' ).find( ':checkbox' ), - self = this; + event.preventDefault(); - event.preventDefault(); + _.each( items.filter( ':checked' ), function( item ) { + $( item ).prop( 'checked', false ); + return self.filtersChecked(); + }); + }, - _.each( items.filter( ':checked' ), function( item ) { - $( item ).prop( 'checked', false ); - return self.filtersChecked(); - }); - }, + backToFilters: function( event ) { + if ( event ) { + event.preventDefault(); + } - backToFilters: function( event ) { - if ( event ) { - event.preventDefault(); + $( 'body' ).removeClass( 'filters-applied' ); + }, + + clearSearch: function() { + $( '#wp-filter-search-input').val( '' ); } + }); - $( 'body' ).removeClass( 'filters-applied' ); - }, + themes.InstallerRouter = Backbone.Router.extend({ + routes: { + 'theme-install.php?theme=:slug': 'preview', + 'theme-install.php?browse=:sort': 'sort', + 'theme-install.php?upload': 'upload', + 'theme-install.php?search=:query': 'search', + 'theme-install.php': 'sort' + }, - clearSearch: function() { - $( '#wp-filter-search-input').val( '' ); - } -}); + baseUrl: function( url ) { + return 'theme-install.php' + url; + }, -themes.InstallerRouter = Backbone.Router.extend({ - routes: { - 'theme-install.php?theme=:slug': 'preview', - 'theme-install.php?browse=:sort': 'sort', - 'theme-install.php?upload': 'upload', - 'theme-install.php?search=:query': 'search', - 'theme-install.php': 'sort' - }, + themePath: '?theme=', + browsePath: '?browse=', + searchPath: '?search=', - baseUrl: function( url ) { - return 'theme-install.php' + url; - }, + search: function( query ) { + $( '.wp-filter-search' ).val( query ); + }, - themePath: '?theme=', - browsePath: '?browse=', - searchPath: '?search=', - - search: function( query ) { - $( '.wp-filter-search' ).val( query ); - }, - - navigate: function() { - if ( Backbone.history._hasPushState ) { - Backbone.Router.prototype.navigate.apply( this, arguments ); + navigate: function() { + if ( Backbone.history._hasPushState ) { + Backbone.Router.prototype.navigate.apply( this, arguments ); + } } - } -}); + }); -themes.RunInstaller = { + themes.RunInstaller = { - init: function() { - // Set up the view - // Passes the default 'section' as an option - this.view = new themes.view.Installer({ - section: 'featured', - SearchView: themes.view.InstallerSearch - }); + init: function() { + // Set up the view + // Passes the default 'section' as an option + this.view = new themes.view.Installer({ + section: 'featured', + SearchView: themes.view.InstallerSearch + }); - // Render results - this.render(); + // Render results + this.render(); - }, + }, - render: function() { + render: function() { - // Render results - this.view.render(); - this.routes(); + // Render results + this.view.render(); + this.routes(); - Backbone.history.start({ - root: themes.data.settings.adminUrl, - pushState: true, - hashChange: false - }); - }, + Backbone.history.start({ + root: themes.data.settings.adminUrl, + pushState: true, + hashChange: false + }); + }, - routes: function() { - var self = this, - request = {}; + routes: function() { + 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(); + // Bind to our global `wp.themes` object + // so that the router is available to sub-views + themes.router = new themes.InstallerRouter(); - // Handles `theme` route event - // Queries the API for the passed theme slug - themes.router.on( 'route:preview', function( slug ) { - request.theme = slug; - self.view.collection.query( request ); - }); + // Handles `theme` route event + // Queries the API for the passed theme slug + themes.router.on( 'route:preview', function( slug ) { + request.theme = slug; + self.view.collection.query( request ); + }); - // 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'; - } - self.view.sort( sort ); - self.view.trigger( 'theme:close' ); - }); + // 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'; + } + self.view.sort( sort ); + 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' ); - }); + // Support the `upload` route by going straight to upload section + themes.router.on( 'route:upload', function() { + $( 'a.upload' ).trigger( 'click' ); + }); - // The `search` route event. The router populates the input field. - themes.router.on( 'route:search', function() { - $( '.wp-filter-search' ).focus().trigger( 'keyup' ); - }); + // The `search` route event. The router populates the input field. + themes.router.on( 'route:search', function() { + $( '.wp-filter-search' ).focus().trigger( 'keyup' ); + }); - this.extraRoutes(); - }, + this.extraRoutes(); + }, - extraRoutes: function() { - return false; - } -}; + extraRoutes: function() { + return false; + } + }; // Ready... -$( document ).ready(function() { - if ( themes.isInstall ) { - themes.RunInstaller.init(); - } else { - themes.Run.init(); - } + $( document ).ready(function() { + if ( themes.isInstall ) { + themes.RunInstaller.init(); + } else { + themes.Run.init(); + } - $( '.broken-themes .delete-theme' ).on( 'click', function() { - return confirm( _wpThemeSettings.settings.confirmDelete ); + $( '.broken-themes .delete-theme' ).on( 'click', function() { + return confirm( _wpThemeSettings.settings.confirmDelete ); + }); }); -}); })( jQuery ); @@ -1703,4 +1703,4 @@ }; $(window).resize(function(){ tb_position(); }); -}); +}); \ No newline at end of file Index: src/wp-admin/themes.php =================================================================== --- src/wp-admin/themes.php (revision 31285) +++ src/wp-admin/themes.php (working copy) @@ -43,11 +43,11 @@ // Help tab: Overview if ( current_user_can( 'switch_themes' ) ) { $help_overview = '

' . __( 'This screen is used for managing your installed themes. Aside from the default theme(s) included with your WordPress installation, themes are designed and developed by third parties.' ) . '

' . - '

' . __( 'From this screen you can:' ) . '

' . - '' . - '

' . __( 'The current theme is displayed highlighted as the first theme.' ) . '

'; + '

' . __( 'From this screen you can:' ) . '

' . + '' . + '

' . __( 'The current theme is displayed highlighted as the first theme.' ) . '

'; get_current_screen()->add_help_tab( array( 'id' => 'overview', @@ -106,11 +106,11 @@ 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ), 'adminUrl' => parse_url( admin_url(), PHP_URL_PATH ), ), - 'l10n' => array( - 'addNew' => __( 'Add New Theme' ), - 'search' => __( 'Search Installed Themes' ), - 'searchPlaceholder' => __( 'Search installed themes...' ), // placeholder (no ellipsis) - ), + 'l10n' => array( + 'addNew' => __( 'Add New Theme' ), + 'search' => __( 'Search Installed Themes' ), + 'searchPlaceholder' => __( 'Search installed themes...' ), // placeholder (no ellipsis) + ), ) ); add_thickbox(); @@ -120,188 +120,190 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' ); ?> -
-

- - - - -

- -

- -

Visit site' ), home_url( '/' ) ); ?>

- -

Visit site' ), home_url( '/' ) ); ?>

-

- -

- +
+

+
+ +
+ +
-$ct = wp_get_theme(); + +

+ +

Visit site' ), home_url( '/' ) ); ?>

+ +

Visit site' ), home_url( '/' ) ); ?>

+

+ +

+ errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) { - echo '

' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '

'; -} + $ct = wp_get_theme(); -/* -// Certain error codes are less fatal than others. We can still display theme information in most cases. -if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() ) - && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?> -*/ + if ( $ct->errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) { + echo '

' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '

'; + } - // Pretend you didn't see this. - $current_theme_actions = array(); - if ( is_array( $submenu ) && isset( $submenu['themes.php'] ) ) { - foreach ( (array) $submenu['themes.php'] as $item) { - $class = ''; - if ( 'themes.php' == $item[2] || 'theme-editor.php' == $item[2] || 0 === strpos( $item[2], 'customize.php' ) ) - continue; - // 0 = name, 1 = capability, 2 = file - if ( ( strcmp($self, $item[2]) == 0 && empty($parent_file)) || ($parent_file && ($item[2] == $parent_file)) ) - $class = ' current'; - if ( !empty($submenu[$item[2]]) ) { - $submenu[$item[2]] = array_values($submenu[$item[2]]); // Re-index. - $menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]); - if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook)) - $current_theme_actions[] = "{$item[0]}"; - else - $current_theme_actions[] = "{$item[0]}"; - } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) { - $menu_file = $item[2]; + /* + // Certain error codes are less fatal than others. We can still display theme information in most cases. + if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() ) + && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?> + */ - if ( current_user_can( 'customize' ) ) { - if ( 'custom-header' === $menu_file ) { - $current_theme_actions[] = "{$item[0]}"; - } elseif ( 'custom-background' === $menu_file ) { - $current_theme_actions[] = "{$item[0]}"; + // Pretend you didn't see this. + $current_theme_actions = array(); + if ( is_array( $submenu ) && isset( $submenu['themes.php'] ) ) { + foreach ( (array) $submenu['themes.php'] as $item) { + $class = ''; + if ( 'themes.php' == $item[2] || 'theme-editor.php' == $item[2] || 0 === strpos( $item[2], 'customize.php' ) ) + continue; + // 0 = name, 1 = capability, 2 = file + if ( ( strcmp($self, $item[2]) == 0 && empty($parent_file)) || ($parent_file && ($item[2] == $parent_file)) ) + $class = ' current'; + if ( !empty($submenu[$item[2]]) ) { + $submenu[$item[2]] = array_values($submenu[$item[2]]); // Re-index. + $menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]); + if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook)) + $current_theme_actions[] = "{$item[0]}"; + else + $current_theme_actions[] = "{$item[0]}"; + } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) { + $menu_file = $item[2]; + + if ( current_user_can( 'customize' ) ) { + if ( 'custom-header' === $menu_file ) { + $current_theme_actions[] = "{$item[0]}"; + } elseif ( 'custom-background' === $menu_file ) { + $current_theme_actions[] = "{$item[0]}"; + } } - } - if ( false !== ( $pos = strpos( $menu_file, '?' ) ) ) { - $menu_file = substr( $menu_file, 0, $pos ); - } + if ( false !== ( $pos = strpos( $menu_file, '?' ) ) ) { + $menu_file = substr( $menu_file, 0, $pos ); + } - if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) { - $current_theme_actions[] = "{$item[0]}"; - } else { - $current_theme_actions[] = "{$item[0]}"; + if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) { + $current_theme_actions[] = "{$item[0]}"; + } else { + $current_theme_actions[] = "{$item[0]}"; + } } } } - } -?> + ?> -
-
+
+
- -
- -
- -
- -
- - -
+ foreach ( $themes as $theme ) : + $aria_action = esc_attr( $theme['id'] . '-action' ); + $aria_name = esc_attr( $theme['id'] . '-name' ); + ?> +
+ +
+ +
+ +
+ + +
- -

- -

- + +

+ +

+ -
+
- - - - - - - - - - - + + + + + + + + + + + -
+
- -
- -
- -
-
-
-
+ +
+ +
+ +
+
+
+
-

+

- true ) ) ) { -?> + true ) ) ) { + ?> -
-

-

+
+

+

- - - - - - - - - - - - - - - get_stylesheet(); - $delete_url = add_query_arg( array( - 'action' => 'delete', - 'stylesheet' => urlencode( $stylesheet ), - ), admin_url( 'themes.php' ) ); - $delete_url = wp_nonce_url( $delete_url, 'delete-theme_' . $stylesheet ); + - - - - -
get( 'Name' ) ? $broken_theme->display( 'Name' ) : $broken_theme->get_stylesheet(); ?>errors()->get_error_message(); ?>
-
+ + + + + + + + + + + + + + get_stylesheet(); + $delete_url = add_query_arg( array( + 'action' => 'delete', + 'stylesheet' => urlencode( $stylesheet ), + ), admin_url( 'themes.php' ) ); + $delete_url = wp_nonce_url( $delete_url, 'delete-theme_' . $stylesheet ); + ?> + + + + +
get( 'Name' ) ? $broken_theme->display( 'Name' ) : $broken_theme->get_stylesheet(); ?>errors()->get_error_message(); ?>
+
- -
+ + - + <# if ( data.hasUpdate ) { #> +
+ <# } #> + - + -