2013-11-13 15:58:05 -05:00
|
|
|
/* global _wpThemeSettings, confirm */
|
|
|
|
window.wp = window.wp || {};
|
|
|
|
|
|
|
|
( function($) {
|
|
|
|
|
|
|
|
// Set up our namespace...
|
2013-11-20 14:44:12 -05:00
|
|
|
var themes, l10n;
|
|
|
|
themes = wp.themes = wp.themes || {};
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Store the theme data and settings for organized and quick access
|
2013-11-20 14:44:12 -05:00
|
|
|
// themes.data.settings, themes.data.themes, themes.data.l10n
|
2013-11-13 15:58:05 -05:00
|
|
|
themes.data = _wpThemeSettings;
|
2013-11-20 14:44:12 -05:00
|
|
|
l10n = themes.data.l10n;
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
// Shortcut for isInstall check
|
|
|
|
themes.isInstall = !! themes.data.settings.isInstall;
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Setup app structure
|
|
|
|
_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
themes.Model = Backbone.Model.extend({
|
|
|
|
// Adds attributes to the default data coming through the .org themes api
|
|
|
|
// Map `id` to `slug` for shared code
|
|
|
|
initialize: function() {
|
|
|
|
var install, preview;
|
|
|
|
|
|
|
|
// Install url for the theme
|
|
|
|
// using the install nonce
|
|
|
|
install = {
|
|
|
|
action: 'install-theme',
|
|
|
|
theme: this.get( 'slug' ),
|
|
|
|
_wpnonce: themes.data.settings._nonceInstall
|
|
|
|
};
|
|
|
|
|
|
|
|
// Build the url query
|
|
|
|
install = themes.data.settings.updateURI + '?' + $.param( install );
|
|
|
|
|
|
|
|
// Preview url for the theme
|
|
|
|
preview = {
|
|
|
|
tab: 'theme-information',
|
|
|
|
theme: this.get( 'slug' )
|
|
|
|
};
|
|
|
|
|
|
|
|
preview = themes.data.settings.installURI + '?' + $.param( preview );
|
|
|
|
|
|
|
|
// Set the attributes
|
|
|
|
this.set({
|
|
|
|
installURI: install,
|
|
|
|
previewURI: preview,
|
2014-03-11 20:29:15 -04:00
|
|
|
// slug is for installation, id is for existing.
|
|
|
|
id: this.get( 'slug' ) || this.get( 'id' )
|
2014-03-11 03:47:15 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Main view controller for themes.php
|
|
|
|
// Unifies and renders all available views
|
|
|
|
themes.view.Appearance = wp.Backbone.View.extend({
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
el: '#wpbody-content .wrap .theme-browser',
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
window: $( window ),
|
|
|
|
// Pagination instance
|
|
|
|
page: 0,
|
|
|
|
|
|
|
|
// Sets up a throttler for binding to 'scroll'
|
2014-03-11 03:47:15 -04:00
|
|
|
initialize: function( options ) {
|
2013-11-29 00:14:09 -05:00
|
|
|
// Scroller checks how far the scroll position is
|
|
|
|
_.bindAll( this, 'scroller' );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
|
2013-11-29 00:14:09 -05:00
|
|
|
// Bind to the scroll event and throttle
|
|
|
|
// the results from this.scroller
|
|
|
|
this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// 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
|
|
|
|
});
|
2013-11-20 14:44:12 -05:00
|
|
|
|
|
|
|
// Render search form.
|
|
|
|
this.search();
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Render and append
|
|
|
|
this.view.render();
|
No-JavaScript and no-Customizer support for the new Themes screen.
JavaScript is rarely disabled, but graceful degradation is still important. For example, syntax errors can occur, usually with major WP updates that overhaul entire experiences and update external libraries combined with themes or plugins doing weird or old things. If this error is due to their current theme, a user needs to be able to access the themes screen to switch away from the theme. A more subtle issue could make things painful to diagnose.
This commit renders the grid in PHP (the template is duplicated, but it lightweight, fairly mundane, and easy to sync). On Backbone render, the grid is then re-rendered from JavaScript so searches can occur. Customize and Live Preview is disabled if JS fails to kick in. If JS is disabled, old-school "Preview" links are displayed.
No-Customizer support: The customizer is only supported when the browser supports postMessage (IE8+), and if the frontend is a different domain, CORS (IE10+). We use the .hide-if-no-customize class for this. Pre-customize "Preview" links should use .hide-if-customize.
The .load-customize class should be used to declare a link that opens the customizer. This enables customize-loader.js to intercept this link and load the customizer on top of the current window, making for a smoother experience.
fixes #25964.
Built from https://develop.svn.wordpress.org/trunk@26726
git-svn-id: http://core.svn.wordpress.org/trunk@26615 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-06 11:11:10 -05:00
|
|
|
this.$el.empty().append( this.view.el ).addClass('rendered');
|
2013-11-29 00:17:11 -05:00
|
|
|
this.$el.append( '<br class="clear"/>' );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
// Defines search element container
|
|
|
|
searchContainer: $( '#wpbody h2:first' ),
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Search input and view
|
|
|
|
// for current theme collection
|
|
|
|
search: function() {
|
|
|
|
var view,
|
|
|
|
self = this;
|
|
|
|
|
2013-12-04 19:16:10 -05:00
|
|
|
// Don't render the search if there is only one theme
|
|
|
|
if ( themes.data.themes.length === 1 ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
view = new this.SearchView({
|
|
|
|
collection: self.collection,
|
|
|
|
parent: this
|
|
|
|
});
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Render and append after screen title
|
|
|
|
view.render();
|
2014-03-11 03:47:15 -04:00
|
|
|
this.searchContainer
|
2013-12-09 02:41:10 -05:00
|
|
|
.append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
|
|
|
|
.append( view.el );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// 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 );
|
|
|
|
|
|
|
|
if ( bottom > threshold ) {
|
|
|
|
this.trigger( 'theme:scroll' );
|
2012-08-22 20:04:18 -04:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
2012-08-22 20:04:18 -04:00
|
|
|
});
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Set up the Collection for our theme data
|
|
|
|
// @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
|
|
|
|
themes.Collection = Backbone.Collection.extend({
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
model: themes.Model,
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Search terms
|
|
|
|
terms: '',
|
|
|
|
|
|
|
|
// Controls searching on the current theme collection
|
|
|
|
// and triggers an update event
|
|
|
|
doSearch: function( value ) {
|
|
|
|
|
2013-12-02 02:16:10 -05:00
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// 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 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' );
|
|
|
|
},
|
2013-12-01 19:55:09 -05:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Performs a search within the collection
|
|
|
|
// @uses RegExp
|
|
|
|
search: function( term ) {
|
2013-12-05 14:15:11 -05:00
|
|
|
var match, results, haystack;
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Start with a full collection
|
2013-12-05 14:15:11 -05:00
|
|
|
this.reset( themes.data.themes, { silent: true } );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// The RegExp object to match
|
|
|
|
//
|
|
|
|
// Consider spaces as word delimiters and match the whole string
|
|
|
|
// so matching terms can be combined
|
|
|
|
term = term.replace( ' ', ')(?=.*' );
|
|
|
|
match = new RegExp( '^(?=.*' + term + ').+', 'i' );
|
|
|
|
|
|
|
|
// Find results
|
|
|
|
// _.filter and .test
|
2013-12-05 14:15:11 -05:00
|
|
|
results = this.filter( function( data ) {
|
2014-01-08 16:29:10 -05:00
|
|
|
haystack = _.union( data.get( 'name' ), data.get( 'id' ), data.get( 'description' ), data.get( 'author' ), data.get( 'tags' ) );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2013-12-05 14:57:11 -05:00
|
|
|
if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
|
2013-11-13 15:58:05 -05:00
|
|
|
data.set( 'displayAuthor', true );
|
|
|
|
}
|
|
|
|
|
|
|
|
return match.test( haystack );
|
|
|
|
});
|
|
|
|
|
2013-12-05 14:15:11 -05:00
|
|
|
this.reset( results );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// 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 15
|
|
|
|
collection = _( collection.rest( 15 * instance ) );
|
|
|
|
collection = _( collection.first( 15 ) );
|
|
|
|
|
|
|
|
return collection;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// This is the view that controls each theme item
|
|
|
|
// that will be displayed on the screen
|
|
|
|
themes.view.Theme = wp.Backbone.View.extend({
|
|
|
|
|
|
|
|
// Wrap theme data on a div.theme element
|
|
|
|
className: 'theme',
|
|
|
|
|
|
|
|
// 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' ),
|
|
|
|
|
|
|
|
events: {
|
2014-03-11 03:47:15 -04:00
|
|
|
'click': themes.isInstall ? 'preview': 'expand',
|
|
|
|
'click .preview': 'preview',
|
|
|
|
'keydown': themes.isInstall ? 'preview': 'expand',
|
|
|
|
'touchend': themes.isInstall ? 'preview': 'expand',
|
2013-12-09 14:38:10 -05:00
|
|
|
'touchmove': 'preventExpand'
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
2013-12-09 14:38:10 -05:00
|
|
|
touchDrag: false,
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
render: function() {
|
|
|
|
var data = this.model.toJSON();
|
|
|
|
// Render themes using the html template
|
2014-01-22 16:00:11 -05:00
|
|
|
this.$el.html( this.html( data ) ).attr({
|
|
|
|
tabindex: 0,
|
|
|
|
'aria-describedby' : data.id + '-action ' + data.id + '-name'
|
|
|
|
});
|
2014-01-08 16:35:09 -05:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Renders active theme styles
|
|
|
|
this.activeTheme();
|
|
|
|
|
|
|
|
if ( this.model.get( 'displayAuthor' ) ) {
|
|
|
|
this.$el.addClass( 'display-author' );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 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' );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// Single theme overlay screen
|
|
|
|
// It's shown when clicking a theme
|
|
|
|
expand: function( event ) {
|
|
|
|
var self = this;
|
|
|
|
|
2014-01-08 16:35:09 -05:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2013-12-09 14:38:10 -05:00
|
|
|
// Bail if the user scrolled on a touch device
|
|
|
|
if ( this.touchDrag === true ) {
|
|
|
|
return this.touchDrag = false;
|
|
|
|
}
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Prevent the modal from showing when the user clicks
|
|
|
|
// one of the direct action buttons
|
2013-12-01 19:55:09 -05:00
|
|
|
if ( $( event.target ).is( '.theme-actions a' ) ) {
|
2013-11-13 15:58:05 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2014-01-08 16:35:09 -05:00
|
|
|
// Set focused theme to current element
|
|
|
|
themes.focusedTheme = this.$el;
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
this.trigger( 'theme:expand', self.model.cid );
|
2013-12-09 14:38:10 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
preventExpand: function() {
|
|
|
|
this.touchDrag = true;
|
2014-03-11 03:47:15 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
preview: function( event ) {
|
|
|
|
// Bail if the user scrolled on a touch device
|
|
|
|
if ( this.touchDrag === true ) {
|
|
|
|
return this.touchDrag = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
event = event || window.event;
|
|
|
|
|
|
|
|
var preview = new themes.view.Preview({
|
|
|
|
model: this.model
|
|
|
|
});
|
|
|
|
|
|
|
|
preview.render();
|
|
|
|
$( 'div.wrap' ).append( preview.el );
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
2013-07-05 11:15:58 -04:00
|
|
|
});
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Theme Details view
|
|
|
|
// Set ups a modal overlay with the expanded theme data
|
|
|
|
themes.view.Details = wp.Backbone.View.extend({
|
|
|
|
|
|
|
|
// Wrap theme data on a div.theme element
|
2013-11-20 14:44:12 -05:00
|
|
|
className: 'theme-overlay',
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
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' ),
|
|
|
|
|
|
|
|
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();
|
2013-12-06 14:42:11 -05:00
|
|
|
// Checks screenshot size
|
|
|
|
this.screenshotCheck( this.$el );
|
2014-01-08 16:35:09 -05:00
|
|
|
// Contain "tabbing" inside the overlay
|
|
|
|
this.containFocus( this.$el );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// 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
|
2013-11-20 14:44:12 -05:00
|
|
|
this.$el.toggleClass( 'active', this.model.get( 'active' ) );
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
2014-01-08 16:35:09 -05:00
|
|
|
// 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 );
|
|
|
|
|
|
|
|
$el.on( 'keydown.wp-themes', function( event ) {
|
|
|
|
|
|
|
|
// 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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Single theme overlay screen
|
|
|
|
// It's shown when clicking a theme
|
|
|
|
collapse: function( event ) {
|
|
|
|
var self = this,
|
|
|
|
scroll;
|
|
|
|
|
|
|
|
event = event || window.event;
|
|
|
|
|
2013-12-04 23:57:10 -05:00
|
|
|
// Prevent collapsing detailed view when there is only one theme available
|
|
|
|
if ( themes.data.themes.length === 1 ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Detect if the click is inside the overlay
|
|
|
|
// and don't close it unless the target was
|
|
|
|
// the div.back button
|
2014-01-08 16:35:09 -05:00
|
|
|
if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// 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
|
2014-02-26 19:18:13 -05:00
|
|
|
$( 'body' ).removeClass( 'closing-overlay' );
|
2013-11-13 15:58:05 -05:00
|
|
|
// Handle event cleanup
|
|
|
|
self.closeOverlay();
|
|
|
|
|
|
|
|
// Get scroll position to avoid jumping to the top
|
|
|
|
scroll = document.body.scrollTop;
|
|
|
|
|
|
|
|
// Clean the url structure
|
2014-02-25 14:22:13 -05:00
|
|
|
themes.router.navigate( themes.router.baseUrl( '' ) );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Restore scroll position
|
|
|
|
document.body.scrollTop = scroll;
|
2014-01-08 16:35:09 -05:00
|
|
|
|
|
|
|
// Return focus to the theme div
|
|
|
|
if ( themes.focusedTheme ) {
|
|
|
|
themes.focusedTheme.focus();
|
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-12-06 22:11:10 -05:00
|
|
|
// Handles .disabled classes for next/previous buttons
|
2013-11-13 15:58:05 -05:00
|
|
|
navigation: function() {
|
2013-12-01 00:59:11 -05:00
|
|
|
|
|
|
|
// 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' );
|
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// Performs the actions to effectively close
|
|
|
|
// the theme details overlay
|
|
|
|
closeOverlay: function() {
|
2014-02-26 19:18:13 -05:00
|
|
|
$( 'body' ).removeClass( 'theme-overlay-open' );
|
2013-11-13 15:58:05 -05:00
|
|
|
this.remove();
|
|
|
|
this.unbind();
|
|
|
|
this.trigger( 'theme:collapse' );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Confirmation dialoge for deleting a theme
|
|
|
|
deleteTheme: function() {
|
|
|
|
return confirm( themes.data.settings.confirmDelete );
|
|
|
|
},
|
|
|
|
|
|
|
|
nextTheme: function() {
|
|
|
|
var self = this;
|
|
|
|
self.trigger( 'theme:next', self.model.cid );
|
|
|
|
},
|
|
|
|
|
|
|
|
previousTheme: function() {
|
|
|
|
var self = this;
|
|
|
|
self.trigger( 'theme:previous', self.model.cid );
|
2013-12-06 14:42:11 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// Checks if the theme screenshot is the old 300px width version
|
|
|
|
// and adds a corresponding class if it's true
|
|
|
|
screenshotCheck: function( el ) {
|
2013-12-07 02:52:11 -05:00
|
|
|
var screenshot, image;
|
2013-12-06 14:42:11 -05:00
|
|
|
|
|
|
|
screenshot = el.find( '.screenshot img' );
|
|
|
|
image = new Image();
|
|
|
|
image.src = screenshot.attr( 'src' );
|
|
|
|
|
|
|
|
// Width check
|
2013-12-06 20:59:10 -05:00
|
|
|
if ( image.width && image.width <= 300 ) {
|
2013-12-07 02:52:11 -05:00
|
|
|
el.addClass( 'small-screenshot' );
|
2013-12-06 14:42:11 -05:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
2012-08-22 20:04:18 -04:00
|
|
|
});
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
// Theme Preview view
|
|
|
|
// Set ups a modal overlay with the expanded theme data
|
|
|
|
themes.view.Preview = wp.Backbone.View.extend({
|
|
|
|
|
|
|
|
className: 'wp-full-overlay expanded',
|
|
|
|
el: '#theme-installer',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .close-full-overlay': 'close',
|
|
|
|
'click .collapse-sidebar': 'collapse'
|
|
|
|
},
|
|
|
|
|
|
|
|
// The HTML template for the theme preview
|
|
|
|
html: themes.template( 'theme-preview' ),
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var data = this.model.toJSON();
|
|
|
|
this.$el.html( this.html( data ) );
|
|
|
|
|
|
|
|
themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } );
|
|
|
|
|
|
|
|
this.$el.fadeIn( 200, function() {
|
|
|
|
$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
close: function() {
|
|
|
|
this.$el.fadeOut( 200, function() {
|
|
|
|
$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
|
|
|
|
});
|
|
|
|
|
|
|
|
themes.router.navigate( themes.router.baseUrl( '' ) );
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
|
|
|
|
collapse: function() {
|
|
|
|
this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
// Controls the rendering of div.themes,
|
2013-11-13 15:58:05 -05:00
|
|
|
// a wrapper that will hold all the theme elements
|
|
|
|
themes.view.Themes = wp.Backbone.View.extend({
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
className: 'themes',
|
2013-12-06 22:11:10 -05:00
|
|
|
$overlay: $( 'div.theme-overlay' ),
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Number to keep track of scroll position
|
|
|
|
// while in theme-overlay mode
|
|
|
|
index: 0,
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// The theme count element
|
2013-11-20 14:44:12 -05:00
|
|
|
count: $( '.theme-count' ),
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// Set up parent
|
|
|
|
this.parent = options.parent;
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
self.currentTheme();
|
|
|
|
self.render( this );
|
|
|
|
});
|
|
|
|
|
|
|
|
this.listenTo( this.parent, 'theme:scroll', function() {
|
|
|
|
self.renderThemes( self.parent.page );
|
|
|
|
});
|
2013-12-06 22:11:10 -05:00
|
|
|
|
2014-02-25 14:22:13 -05:00
|
|
|
this.listenTo( this.parent, 'theme:close', function() {
|
|
|
|
if ( self.overlay ) {
|
|
|
|
self.overlay.closeOverlay();
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
2013-12-06 22:11:10 -05:00
|
|
|
// Bind keyboard events.
|
|
|
|
$('body').on( 'keyup', function( event ) {
|
2013-12-09 02:07:10 -05:00
|
|
|
if ( ! self.overlay ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2013-12-06 22:11:10 -05:00
|
|
|
// Pressing the right arrow key fires a theme:next event
|
|
|
|
if ( event.keyCode === 39 ) {
|
|
|
|
self.overlay.nextTheme();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Pressing the left arrow key fires a theme:previous event
|
|
|
|
if ( event.keyCode === 37 ) {
|
|
|
|
self.overlay.previousTheme();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Pressing the escape key fires a theme:collapse event
|
|
|
|
if ( event.keyCode === 27 ) {
|
|
|
|
self.overlay.collapse( event );
|
|
|
|
}
|
|
|
|
});
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
// Manages rendering of theme pages
|
|
|
|
// and keeping theme count in sync
|
|
|
|
render: function() {
|
|
|
|
// Clear the DOM, please
|
|
|
|
this.$el.html( '' );
|
|
|
|
|
2013-12-04 19:16:10 -05:00
|
|
|
// 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 ) {
|
|
|
|
|
|
|
|
// Constructs the view
|
|
|
|
this.singleTheme = new themes.view.Details({
|
|
|
|
model: this.collection.models[0]
|
|
|
|
});
|
|
|
|
|
|
|
|
// Render and apply a 'single-theme' class to our container
|
|
|
|
this.singleTheme.render();
|
|
|
|
this.$el.addClass( 'single-theme' );
|
|
|
|
this.$el.append( this.singleTheme.el );
|
|
|
|
}
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Generate the themes
|
|
|
|
// Using page instance
|
|
|
|
this.renderThemes( this.parent.page );
|
|
|
|
|
|
|
|
// Display a live theme count for the collection
|
|
|
|
this.count.text( this.collection.length );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Iterates through each instance of the collection
|
|
|
|
// and renders each theme module
|
|
|
|
renderThemes: function( page ) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
self.instance = self.collection.paginate( page );
|
|
|
|
|
|
|
|
// If we have no more themes bail
|
|
|
|
if ( self.instance.length === 0 ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Make sure the add-new stays at the end
|
|
|
|
if ( page >= 1 ) {
|
2013-11-20 14:44:12 -05:00
|
|
|
$( '.add-new-theme' ).remove();
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
// Loop through the themes and setup each theme view
|
|
|
|
self.instance.each( function( theme ) {
|
|
|
|
self.theme = new themes.view.Theme({
|
|
|
|
model: theme
|
2012-08-22 20:04:18 -04:00
|
|
|
});
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Render the views...
|
|
|
|
self.theme.render();
|
2013-11-20 14:44:12 -05:00
|
|
|
// and append them to div.themes
|
2013-11-13 15:58:05 -05:00
|
|
|
self.$el.append( self.theme.el );
|
|
|
|
|
|
|
|
// Binds to theme:expand to show the modal box
|
|
|
|
// with the theme details
|
|
|
|
self.listenTo( self.theme, 'theme:expand', self.expand, self );
|
|
|
|
});
|
|
|
|
|
|
|
|
// 'Add new theme' element shown at the end of the grid
|
2013-11-20 09:09:10 -05:00
|
|
|
if ( themes.data.settings.canInstall ) {
|
2013-11-21 04:46:10 -05:00
|
|
|
this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + l10n.addNew + '</h3></a></div>' );
|
2013-11-20 09:09:10 -05:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
this.parent.page++;
|
|
|
|
},
|
|
|
|
|
|
|
|
// Grabs current theme and puts it at the beginning of the collection
|
|
|
|
currentTheme: function() {
|
|
|
|
var self = this,
|
|
|
|
current;
|
|
|
|
|
|
|
|
current = self.collection.findWhere({ active: true });
|
|
|
|
|
|
|
|
// Move the active theme to the beginning of the collection
|
|
|
|
if ( current ) {
|
|
|
|
self.collection.remove( current );
|
|
|
|
self.collection.add( current, { at:0 } );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// Sets current view
|
|
|
|
setView: function( view ) {
|
|
|
|
return view;
|
|
|
|
},
|
|
|
|
|
|
|
|
// Renders the overlay with the ThemeDetails view
|
|
|
|
// Uses the current model data
|
|
|
|
expand: function( id ) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// Set the current theme model
|
|
|
|
this.model = self.collection.get( id );
|
|
|
|
|
|
|
|
// Trigger a route update for the current model
|
2014-02-25 14:22:13 -05:00
|
|
|
themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Sets this.view to 'detail'
|
|
|
|
this.setView( 'detail' );
|
2013-11-20 14:44:12 -05:00
|
|
|
$( 'body' ).addClass( 'theme-overlay-open' );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Set up the theme details view
|
|
|
|
this.overlay = new themes.view.Details({
|
2013-11-20 14:44:12 -05:00
|
|
|
model: self.model
|
2013-11-13 15:58:05 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
this.overlay.render();
|
2013-12-06 22:11:10 -05:00
|
|
|
this.$overlay.html( this.overlay.el );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Bind to theme:next and theme:previous
|
|
|
|
// triggered by the arrow keys
|
|
|
|
//
|
2013-11-20 14:44:12 -05:00
|
|
|
// Keep track of the current model so we
|
|
|
|
// can infer an index position
|
2013-11-13 15:58:05 -05:00
|
|
|
this.listenTo( this.overlay, 'theme:next', function() {
|
|
|
|
// Renders the next theme on the overlay
|
2013-11-20 14:44:12 -05:00
|
|
|
self.next( [ self.model.cid ] );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
})
|
|
|
|
.listenTo( this.overlay, 'theme:previous', function() {
|
|
|
|
// Renders the previous theme on the overlay
|
2013-11-20 14:44:12 -05:00
|
|
|
self.previous( [ self.model.cid ] );
|
2013-11-13 15:58:05 -05:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// This method renders the next theme on the overlay modal
|
|
|
|
// based on the current position in the collection
|
2013-11-20 14:44:12 -05:00
|
|
|
// @params [model cid]
|
2013-11-13 15:58:05 -05:00
|
|
|
next: function( args ) {
|
|
|
|
var self = this,
|
|
|
|
model, nextModel;
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Get the current theme
|
|
|
|
model = self.collection.get( args[0] );
|
2013-11-20 14:44:12 -05:00
|
|
|
// Find the next model within the collection
|
|
|
|
nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Sanity check which also serves as a boundary test
|
|
|
|
if ( nextModel !== undefined ) {
|
|
|
|
|
|
|
|
// We have a new theme...
|
2013-11-20 14:44:12 -05:00
|
|
|
// Close the overlay
|
|
|
|
this.overlay.closeOverlay();
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Trigger a route update for the current model
|
2013-12-06 22:11:10 -05:00
|
|
|
self.theme.trigger( 'theme:expand', nextModel.cid );
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// This method renders the previous theme on the overlay modal
|
|
|
|
// based on the current position in the collection
|
2013-11-20 14:44:12 -05:00
|
|
|
// @params [model cid]
|
2013-11-13 15:58:05 -05:00
|
|
|
previous: function( args ) {
|
|
|
|
var self = this,
|
|
|
|
model, previousModel;
|
|
|
|
|
|
|
|
// Get the current theme
|
|
|
|
model = self.collection.get( args[0] );
|
2013-11-20 14:44:12 -05:00
|
|
|
// Find the previous model within the collection
|
|
|
|
previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
if ( previousModel !== undefined ) {
|
|
|
|
|
|
|
|
// We have a new theme...
|
2013-11-20 14:44:12 -05:00
|
|
|
// Close the overlay
|
|
|
|
this.overlay.closeOverlay();
|
2013-11-13 15:58:05 -05:00
|
|
|
|
|
|
|
// Trigger a route update for the current model
|
2013-12-06 22:11:10 -05:00
|
|
|
self.theme.trigger( 'theme:expand', previousModel.cid );
|
|
|
|
|
2012-08-22 20:04:18 -04:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
// Search input view controller.
|
2013-11-13 15:58:05 -05:00
|
|
|
themes.view.Search = wp.Backbone.View.extend({
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
tagName: 'input',
|
|
|
|
className: 'theme-search',
|
2013-12-31 05:44:11 -05:00
|
|
|
id: 'theme-search-input',
|
2014-02-25 14:22:13 -05:00
|
|
|
searching: false,
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
attributes: {
|
2013-12-09 02:41:10 -05:00
|
|
|
placeholder: l10n.searchPlaceholder,
|
2013-11-29 17:20:10 -05:00
|
|
|
type: 'search'
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
events: {
|
|
|
|
'input': 'search',
|
|
|
|
'keyup': 'search',
|
|
|
|
'change': 'search',
|
2014-02-25 14:22:13 -05:00
|
|
|
'search': 'search',
|
|
|
|
'blur': 'pushState'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
|
|
|
|
this.parent = options.parent;
|
|
|
|
|
|
|
|
this.listenTo( this.parent, 'theme:close', function() {
|
|
|
|
this.searching = false;
|
|
|
|
} );
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
// Runs a search on the theme collection.
|
|
|
|
search: function( event ) {
|
2014-02-25 14:22:13 -05:00
|
|
|
var options = {};
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
// Clear on escape.
|
|
|
|
if ( event.type === 'keyup' && event.which === 27 ) {
|
|
|
|
event.target.value = '';
|
|
|
|
}
|
2013-12-01 19:48:09 -05:00
|
|
|
|
2014-03-15 01:14:15 -04:00
|
|
|
// Lose input focus when pressing enter
|
|
|
|
if ( event.which === 13 ) {
|
|
|
|
this.$el.trigger( 'blur' );
|
|
|
|
}
|
|
|
|
|
2013-11-20 14:44:12 -05:00
|
|
|
this.collection.doSearch( event.target.value );
|
2013-12-01 19:48:09 -05:00
|
|
|
|
2014-02-25 14:22:13 -05:00
|
|
|
// if search is initiated and key is not return
|
|
|
|
if ( this.searching && event.which !== 13 ) {
|
|
|
|
options.replace = true;
|
|
|
|
} else {
|
|
|
|
this.searching = true;
|
|
|
|
}
|
|
|
|
|
2013-12-01 19:48:09 -05:00
|
|
|
// Update the URL hash
|
2013-12-01 20:51:09 -05:00
|
|
|
if ( event.target.value ) {
|
2014-02-25 14:22:13 -05:00
|
|
|
themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
|
2013-12-01 20:51:09 -05:00
|
|
|
} else {
|
2014-02-25 14:22:13 -05:00
|
|
|
themes.router.navigate( themes.router.baseUrl( '' ) );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
pushState: function( event ) {
|
|
|
|
var url = themes.router.baseUrl( '' );
|
|
|
|
|
|
|
|
if ( event.target.value ) {
|
|
|
|
url = themes.router.baseUrl( '?search=' + event.target.value );
|
2013-12-01 20:51:09 -05:00
|
|
|
}
|
2014-02-25 14:22:13 -05:00
|
|
|
|
|
|
|
this.searching = false;
|
|
|
|
themes.router.navigate( url );
|
|
|
|
|
2012-08-22 20:04:18 -04:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
// Sets up the routes events for relevant url queries
|
|
|
|
// Listens to [theme] and [search] params
|
2014-03-11 03:47:15 -04:00
|
|
|
themes.Router = Backbone.Router.extend({
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2014-02-25 14:22:13 -05:00
|
|
|
routes: {
|
|
|
|
'themes.php?theme=:slug': 'theme',
|
|
|
|
'themes.php?search=:query': 'search',
|
|
|
|
'themes.php?s=:query': 'search',
|
|
|
|
'themes.php': 'themes',
|
|
|
|
'': 'themes'
|
2013-12-06 22:11:10 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
baseUrl: function( url ) {
|
2014-02-25 14:22:13 -05:00
|
|
|
return 'themes.php' + url;
|
|
|
|
},
|
|
|
|
|
|
|
|
search: function( query ) {
|
|
|
|
$( '.theme-search' ).val( query );
|
|
|
|
},
|
|
|
|
|
|
|
|
themes: function() {
|
|
|
|
$( '.theme-search' ).val( '' );
|
2013-11-13 15:58:05 -05:00
|
|
|
}
|
2014-02-25 14:22:13 -05:00
|
|
|
|
2012-08-22 20:04:18 -04:00
|
|
|
});
|
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// 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 );
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Set up the view
|
|
|
|
this.view = new themes.view.Appearance({
|
|
|
|
collection: this.themes
|
|
|
|
});
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2014-02-25 14:22:13 -05:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
// Render results
|
|
|
|
this.view.render();
|
|
|
|
this.routes();
|
|
|
|
|
2014-02-25 14:22:13 -05:00
|
|
|
Backbone.history.start({
|
|
|
|
root: themes.data.settings.adminUrl,
|
|
|
|
pushState: true,
|
|
|
|
hashChange: false
|
|
|
|
});
|
2013-11-13 15:58:05 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
routes: function() {
|
2014-02-25 14:22:13 -05:00
|
|
|
var self = this;
|
2013-11-13 15:58:05 -05:00
|
|
|
// Bind to our global thx object
|
|
|
|
// so that the object is available to sub-views
|
2014-03-11 03:47:15 -04:00
|
|
|
themes.router = new themes.Router();
|
2014-02-25 14:22:13 -05:00
|
|
|
|
|
|
|
// 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' );
|
|
|
|
});
|
|
|
|
|
|
|
|
// Handles search route event
|
|
|
|
themes.router.on( 'route:search', function( query ) {
|
|
|
|
self.view.trigger( 'theme:close' );
|
|
|
|
self.themes.doSearch( query );
|
|
|
|
});
|
2014-03-11 03:47:15 -04:00
|
|
|
|
|
|
|
this.extraRoutes();
|
|
|
|
},
|
|
|
|
|
|
|
|
extraRoutes: function() {
|
|
|
|
return false;
|
2012-08-22 20:04:18 -04:00
|
|
|
}
|
2013-11-13 15:58:05 -05:00
|
|
|
};
|
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
// Extend the main Search view
|
|
|
|
themes.view.InstallerSearch = themes.view.Search.extend({
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'keyup': 'search'
|
|
|
|
},
|
|
|
|
|
|
|
|
// Handles Ajax request for searching through themes in public repo
|
|
|
|
search: function( event ) {
|
|
|
|
this.collection = this.options.parent.view.collection;
|
|
|
|
|
|
|
|
// Clear on escape.
|
|
|
|
if ( event.type === 'keyup' && event.which === 27 ) {
|
|
|
|
event.target.value = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
_.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
|
|
|
|
},
|
|
|
|
|
|
|
|
doSearch: function( value ) {
|
|
|
|
var request = {},
|
|
|
|
self = this;
|
|
|
|
|
|
|
|
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 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 ) ];
|
|
|
|
}
|
|
|
|
|
|
|
|
// Send Ajax POST request to api.wordpress.org/themes
|
|
|
|
themes.view.Installer.prototype.apiCall( request ).done( function( data ) {
|
|
|
|
// Update the collection with the queried data
|
|
|
|
self.collection.reset( data.themes );
|
|
|
|
// Trigger a collection refresh event to render the views
|
|
|
|
self.collection.trigger( 'update' );
|
|
|
|
|
|
|
|
// Un-spin it
|
|
|
|
$( 'body' ).removeClass( 'loading-themes' );
|
|
|
|
$( '.theme-browser' ).find( 'div.error' ).remove();
|
|
|
|
}).fail( function() {
|
|
|
|
$( '.theme-browser' ).find( 'div.error' ).remove();
|
|
|
|
$( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
|
|
|
|
});
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
themes.view.Installer = themes.view.Appearance.extend({
|
|
|
|
|
|
|
|
el: '#wpbody-content .wrap',
|
|
|
|
|
|
|
|
// Register events for sorting and filters in theme-navigation
|
|
|
|
events: {
|
|
|
|
'click .theme-section': 'onSort',
|
|
|
|
'click .theme-filter': 'onFilter',
|
|
|
|
'click .more-filters': 'moreFilters'
|
|
|
|
},
|
|
|
|
|
|
|
|
// Send Ajax POST request to api.wordpress.org/themes
|
|
|
|
apiCall: function( request ) {
|
|
|
|
return $.ajax({
|
|
|
|
url: 'https://api.wordpress.org/themes/info/1.1/?action=query_themes',
|
|
|
|
|
|
|
|
// We want JSON data
|
|
|
|
dataType: 'json',
|
|
|
|
type: 'POST',
|
|
|
|
crossDomain: true,
|
|
|
|
|
|
|
|
// Request data
|
|
|
|
data: {
|
|
|
|
action: 'query_themes',
|
|
|
|
request: _.extend({
|
|
|
|
per_page: 36,
|
|
|
|
fields: {
|
|
|
|
description: true,
|
|
|
|
tested: true,
|
|
|
|
requires: true,
|
|
|
|
rating: true,
|
|
|
|
downloaded: true,
|
|
|
|
downloadLink: true,
|
|
|
|
last_updated: true,
|
|
|
|
homepage: true,
|
|
|
|
num_ratings: true
|
|
|
|
}
|
|
|
|
}, request)
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeSend: function() {
|
|
|
|
// Spin it
|
|
|
|
$( 'body' ).addClass( 'loading-themes' );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// Handles all the rendering of the public theme directory
|
|
|
|
browse: function( section ) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
// @todo Cache the collection after fetching based on the section
|
|
|
|
this.collection = new themes.Collection();
|
|
|
|
|
|
|
|
// Create a new collection with the proper theme data
|
|
|
|
// for each section
|
|
|
|
this.apiCall({ browse: section }).done( function( data ) {
|
|
|
|
// Update the collection with the queried data
|
|
|
|
self.collection.reset( data.themes );
|
|
|
|
// Trigger a collection refresh event to render the views
|
|
|
|
self.collection.trigger( 'update' );
|
|
|
|
|
|
|
|
// Un-spin it
|
|
|
|
$( 'body' ).removeClass( 'loading-themes' );
|
|
|
|
$( '.theme-browser' ).find( 'div.error' ).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,
|
|
|
|
section: section,
|
|
|
|
parent: this
|
|
|
|
});
|
|
|
|
|
|
|
|
// 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' );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Initial render method
|
|
|
|
render: function() {
|
|
|
|
this.search();
|
|
|
|
this.uploader();
|
|
|
|
return this.browse( this.options.section );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Sorting navigation
|
|
|
|
onSort: function( event ) {
|
|
|
|
var $el = $( event.target ),
|
|
|
|
sort = $el.data( 'sort' );
|
|
|
|
|
|
|
|
// Bail if this is already active
|
|
|
|
if ( $el.hasClass( this.activeClass ) ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.sort( sort );
|
|
|
|
|
|
|
|
// Trigger a router.naviagte update
|
|
|
|
themes.router.navigate( themes.router.baseUrl( '?sort=' + sort ) );
|
|
|
|
},
|
|
|
|
|
|
|
|
sort: function( sort ) {
|
|
|
|
$( '#theme-search-input' ).val( '' );
|
|
|
|
|
|
|
|
$( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
|
|
|
|
$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
|
|
|
|
|
|
|
|
this.browse( sort );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Filters and Tags
|
|
|
|
onFilter: function( event ) {
|
|
|
|
var request,
|
|
|
|
$el = $( event.target ),
|
|
|
|
filter = $el.data( 'filter' ),
|
|
|
|
self = this;
|
2013-11-13 15:58:05 -05:00
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
// Bail if this is already active
|
|
|
|
if ( $el.hasClass( this.activeClass ) ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
|
|
|
|
$el.addClass( this.activeClass );
|
|
|
|
|
|
|
|
if ( ! filter ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Construct the filter request
|
|
|
|
// using the default values
|
|
|
|
|
|
|
|
// @todo Cache the collection after fetching based on the filter
|
|
|
|
request = { tag: [ filter ] };
|
|
|
|
|
|
|
|
// Send Ajax POST request to api.wordpress.org/themes
|
|
|
|
this.apiCall( request ).done( function( data ) {
|
|
|
|
// Update the collection with the queried data
|
|
|
|
self.collection.reset( data.themes );
|
|
|
|
// Trigger a collection refresh event to render the views
|
|
|
|
self.collection.trigger( 'update' );
|
|
|
|
|
|
|
|
// Un-spin it
|
|
|
|
$( 'body' ).removeClass( 'loading-themes' );
|
|
|
|
$( '.theme-browser' ).find( 'div.error' ).remove();
|
|
|
|
}).fail( function() {
|
|
|
|
$( '.theme-browser' ).find( 'div.error' ).remove();
|
|
|
|
$( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
|
|
|
|
});
|
|
|
|
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
|
|
|
|
activeClass: 'current',
|
|
|
|
|
|
|
|
// Overwrite search container class to append search
|
|
|
|
// in new location
|
|
|
|
searchContainer: $( '.theme-navigation' ),
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2014-03-11 03:47:15 -04:00
|
|
|
uploader: function() {
|
|
|
|
$( 'a.upload.button' ).on( 'click', function() {
|
|
|
|
$( '.upload-theme' )
|
|
|
|
.toggleClass( 'opened' )
|
|
|
|
.hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
moreFilters: function() {
|
|
|
|
$( 'body' ).toggleClass( 'more-filters-opened' );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
themes.InstallerRouter = Backbone.Router.extend({
|
|
|
|
routes: {
|
|
|
|
'theme-install.php?theme=:slug': 'preview',
|
|
|
|
'theme-install.php(?sort=:sort)': 'sort',
|
|
|
|
'': 'sort'
|
|
|
|
},
|
|
|
|
|
|
|
|
baseUrl: function( url ) {
|
|
|
|
return 'theme-install.php' + url;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
});
|
|
|
|
|
|
|
|
// Render results
|
|
|
|
this.render();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
|
|
|
|
// Render results
|
|
|
|
this.view.render();
|
|
|
|
this.routes();
|
|
|
|
|
|
|
|
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.InstallerRouter();
|
|
|
|
|
|
|
|
// Handles theme details route event
|
|
|
|
themes.router.on( 'route:theme', function( slug ) {
|
|
|
|
self.view.view.expand( slug );
|
|
|
|
});
|
|
|
|
|
|
|
|
themes.router.on( 'route:sort', function( sort ) {
|
|
|
|
if ( ! sort ) {
|
|
|
|
sort = 'featured';
|
|
|
|
}
|
|
|
|
self.view.sort( sort );
|
|
|
|
self.view.trigger( 'theme:close' );
|
|
|
|
});
|
|
|
|
|
|
|
|
this.extraRoutes();
|
|
|
|
},
|
|
|
|
|
|
|
|
extraRoutes: function() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Ready...
|
|
|
|
$( document ).ready(function() {
|
|
|
|
if ( themes.isInstall ) {
|
|
|
|
themes.RunInstaller.init();
|
|
|
|
} else {
|
|
|
|
themes.Run.init();
|
|
|
|
}
|
|
|
|
});
|
2012-08-22 20:04:18 -04:00
|
|
|
|
2013-11-13 15:58:05 -05:00
|
|
|
})( jQuery );
|
2013-11-22 03:06:09 -05:00
|
|
|
|
|
|
|
// Align theme browser thickbox
|
|
|
|
var tb_position;
|
|
|
|
jQuery(document).ready( function($) {
|
|
|
|
tb_position = function() {
|
|
|
|
var tbWindow = $('#TB_window'),
|
|
|
|
width = $(window).width(),
|
|
|
|
H = $(window).height(),
|
|
|
|
W = ( 1040 < width ) ? 1040 : width,
|
|
|
|
adminbar_height = 0;
|
|
|
|
|
2014-02-24 19:26:13 -05:00
|
|
|
if ( $('#wpadminbar').length ) {
|
|
|
|
adminbar_height = parseInt( $('#wpadminbar').css('height'), 10 );
|
2013-11-22 03:06:09 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
if ( tbWindow.size() ) {
|
|
|
|
tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
|
|
|
|
$('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
|
|
|
|
tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
|
|
|
|
if ( typeof document.body.style.maxWidth !== 'undefined' ) {
|
|
|
|
tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
$(window).resize(function(){ tb_position(); });
|
|
|
|
});
|