1 /* global _wpThemeSettings, confirm */
2 window.wp = window.wp || {};
6 // Set up our namespace...
8 themes = wp.themes = wp.themes || {};
10 // Store the theme data and settings for organized and quick access
11 // themes.data.settings, themes.data.themes, themes.data.l10n
12 themes.data = _wpThemeSettings;
13 l10n = themes.data.l10n;
15 // Setup app structure
16 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
18 themes.model = Backbone.Model.extend({});
20 // Main view controller for themes.php
21 // Unifies and renders all available views
22 themes.view.Appearance = wp.Backbone.View.extend({
24 el: '#wpbody-content .wrap .theme-browser',
27 // Pagination instance
30 // Sets up a throttler for binding to 'scroll'
31 initialize: function() {
32 // Scroller checks how far the scroll position is
33 _.bindAll( this, 'scroller' );
35 // Bind to the scroll event and throttle
36 // the results from this.scroller
37 this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
40 // Main render control
42 // Setup the main theme view
43 // with the current theme collection
44 this.view = new themes.view.Themes({
45 collection: this.collection,
49 // Render search form.
54 this.$el.empty().append( this.view.el ).addClass('rendered');
55 this.$el.append( '<br class="clear"/>' );
58 // Search input and view
59 // for current theme collection
64 // Don't render the search if there is only one theme
65 if ( themes.data.themes.length === 1 ) {
69 view = new themes.view.Search({ collection: self.collection });
71 // Render and append after screen title
74 .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
78 // Checks when the user gets close to the bottom
79 // of the mage and triggers a theme:scroll event
80 scroller: function() {
84 bottom = this.window.scrollTop() + self.window.height();
85 threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
86 threshold = Math.round( threshold * 0.9 );
88 if ( bottom > threshold ) {
89 this.trigger( 'theme:scroll' );
94 // Set up the Collection for our theme data
95 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
96 themes.Collection = Backbone.Collection.extend({
103 // Controls searching on the current theme collection
104 // and triggers an update event
105 doSearch: function( value ) {
107 // Don't do anything if we've already done this search
108 // Useful because the Search handler fires multiple times per keystroke
109 if ( this.terms === value ) {
113 // Updates terms with the value passed
116 // If we have terms, run a search...
117 if ( this.terms.length > 0 ) {
118 this.search( this.terms );
121 // If search is blank, show all themes
122 // Useful for resetting the views when you clean the input
123 if ( this.terms === '' ) {
124 this.reset( themes.data.themes );
127 // Trigger an 'update' event
128 this.trigger( 'update' );
131 // Performs a search within the collection
133 search: function( term ) {
134 var match, results, haystack;
136 // Start with a full collection
137 this.reset( themes.data.themes, { silent: true } );
139 // The RegExp object to match
141 // Consider spaces as word delimiters and match the whole string
142 // so matching terms can be combined
143 term = term.replace( ' ', ')(?=.*' );
144 match = new RegExp( '^(?=.*' + term + ').+', 'i' );
147 // _.filter and .test
148 results = this.filter( function( data ) {
149 haystack = _.union( data.get( 'name' ), data.get( 'description' ), data.get( 'author' ), data.get( 'tags' ) );
151 if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
152 data.set( 'displayAuthor', true );
155 return match.test( haystack );
158 this.reset( results );
161 // Paginates the collection with a helper method
162 // that slices the collection
163 paginate: function( instance ) {
164 var collection = this;
165 instance = instance || 0;
167 // Themes per instance are set at 15
168 collection = _( collection.rest( 15 * instance ) );
169 collection = _( collection.first( 15 ) );
175 // This is the view that controls each theme item
176 // that will be displayed on the screen
177 themes.view.Theme = wp.Backbone.View.extend({
179 // Wrap theme data on a div.theme element
182 // Reflects which theme view we have
183 // 'grid' (default) or 'detail'
186 // The HTML template for each element to be rendered
187 html: themes.template( 'theme' ),
191 'touchend': 'expand',
192 'touchmove': 'preventExpand'
198 var data = this.model.toJSON();
199 // Render themes using the html template
200 this.$el.html( this.html( data ) );
201 // Renders active theme styles
204 if ( this.model.get( 'displayAuthor' ) ) {
205 this.$el.addClass( 'display-author' );
209 // Adds a class to the currently active theme
210 // and to the overlay in detailed view mode
211 activeTheme: function() {
212 if ( this.model.get( 'active' ) ) {
213 this.$el.addClass( 'active' );
217 // Single theme overlay screen
218 // It's shown when clicking a theme
219 expand: function( event ) {
222 // Bail if the user scrolled on a touch device
223 if ( this.touchDrag === true ) {
224 return this.touchDrag = false;
227 event = event || window.event;
229 // Prevent the modal from showing when the user clicks
230 // one of the direct action buttons
231 if ( $( event.target ).is( '.theme-actions a' ) ) {
235 this.trigger( 'theme:expand', self.model.cid );
238 preventExpand: function() {
239 this.touchDrag = true;
243 // Theme Details view
244 // Set ups a modal overlay with the expanded theme data
245 themes.view.Details = wp.Backbone.View.extend({
247 // Wrap theme data on a div.theme element
248 className: 'theme-overlay',
252 'click .delete-theme': 'deleteTheme',
253 'click .left': 'previousTheme',
254 'click .right': 'nextTheme'
257 // The HTML template for the theme overlay
258 html: themes.template( 'theme-single' ),
261 var data = this.model.toJSON();
262 this.$el.html( this.html( data ) );
263 // Renders active theme styles
265 // Set up navigation events
267 // Checks screenshot size
268 this.screenshotCheck( this.$el );
271 // Adds a class to the currently active theme
272 // and to the overlay in detailed view mode
273 activeTheme: function() {
274 // Check the model has the active property
275 this.$el.toggleClass( 'active', this.model.get( 'active' ) );
278 // Single theme overlay screen
279 // It's shown when clicking a theme
280 collapse: function( event ) {
284 event = event || window.event;
286 // Prevent collapsing detailed view when there is only one theme available
287 if ( themes.data.themes.length === 1 ) {
291 // Detect if the click is inside the overlay
292 // and don't close it unless the target was
293 // the div.back button
294 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
296 // Add a temporary closing class while overlay fades out
297 $( 'body' ).addClass( 'closing-overlay' );
299 // With a quick fade out animation
300 this.$el.fadeOut( 130, function() {
301 // Clicking outside the modal box closes the overlay
302 $( 'body' ).removeClass( 'theme-overlay-open closing-overlay' );
303 // Handle event cleanup
306 // Get scroll position to avoid jumping to the top
307 scroll = document.body.scrollTop;
309 // Clean the url structure
310 themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
312 // Restore scroll position
313 document.body.scrollTop = scroll;
318 // Handles .disabled classes for next/previous buttons
319 navigation: function() {
321 // Disable Left/Right when at the start or end of the collection
322 if ( this.model.cid === this.model.collection.at(0).cid ) {
323 this.$el.find( '.left' ).addClass( 'disabled' );
325 if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
326 this.$el.find( '.right' ).addClass( 'disabled' );
330 // Performs the actions to effectively close
331 // the theme details overlay
332 closeOverlay: function() {
335 this.trigger( 'theme:collapse' );
338 // Confirmation dialoge for deleting a theme
339 deleteTheme: function() {
340 return confirm( themes.data.settings.confirmDelete );
343 nextTheme: function() {
345 self.trigger( 'theme:next', self.model.cid );
348 previousTheme: function() {
350 self.trigger( 'theme:previous', self.model.cid );
353 // Checks if the theme screenshot is the old 300px width version
354 // and adds a corresponding class if it's true
355 screenshotCheck: function( el ) {
356 var screenshot, image;
358 screenshot = el.find( '.screenshot img' );
360 image.src = screenshot.attr( 'src' );
363 if ( image.width && image.width <= 300 ) {
364 el.addClass( 'small-screenshot' );
369 // Controls the rendering of div.themes,
370 // a wrapper that will hold all the theme elements
371 themes.view.Themes = wp.Backbone.View.extend({
374 $overlay: $( 'div.theme-overlay' ),
376 // Number to keep track of scroll position
377 // while in theme-overlay mode
380 // The theme count element
381 count: $( '.theme-count' ),
383 initialize: function( options ) {
387 this.parent = options.parent;
389 // Set current view to [grid]
390 this.setView( 'grid' );
392 // Move the active theme to the beginning of the collection
395 // When the collection is updated by user input...
396 this.listenTo( self.collection, 'update', function() {
397 self.parent.page = 0;
402 this.listenTo( this.parent, 'theme:scroll', function() {
403 self.renderThemes( self.parent.page );
406 // Bind keyboard events.
407 $('body').on( 'keyup', function( event ) {
408 if ( ! self.overlay ) {
412 // Pressing the right arrow key fires a theme:next event
413 if ( event.keyCode === 39 ) {
414 self.overlay.nextTheme();
417 // Pressing the left arrow key fires a theme:previous event
418 if ( event.keyCode === 37 ) {
419 self.overlay.previousTheme();
422 // Pressing the escape key fires a theme:collapse event
423 if ( event.keyCode === 27 ) {
424 self.overlay.collapse( event );
429 // Manages rendering of theme pages
430 // and keeping theme count in sync
432 // Clear the DOM, please
435 // If the user doesn't have switch capabilities
436 // or there is only one theme in the collection
437 // render the detailed view of the active theme
438 if ( themes.data.themes.length === 1 ) {
440 // Constructs the view
441 this.singleTheme = new themes.view.Details({
442 model: this.collection.models[0]
445 // Render and apply a 'single-theme' class to our container
446 this.singleTheme.render();
447 this.$el.addClass( 'single-theme' );
448 this.$el.append( this.singleTheme.el );
451 // Generate the themes
452 // Using page instance
453 this.renderThemes( this.parent.page );
455 // Display a live theme count for the collection
456 this.count.text( this.collection.length );
459 // Iterates through each instance of the collection
460 // and renders each theme module
461 renderThemes: function( page ) {
464 self.instance = self.collection.paginate( page );
466 // If we have no more themes bail
467 if ( self.instance.length === 0 ) {
471 // Make sure the add-new stays at the end
473 $( '.add-new-theme' ).remove();
476 // Loop through the themes and setup each theme view
477 self.instance.each( function( theme ) {
478 self.theme = new themes.view.Theme({
482 // Render the views...
484 // and append them to div.themes
485 self.$el.append( self.theme.el );
487 // Binds to theme:expand to show the modal box
488 // with the theme details
489 self.listenTo( self.theme, 'theme:expand', self.expand, self );
492 // 'Add new theme' element shown at the end of the grid
493 if ( themes.data.settings.canInstall ) {
494 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>' );
500 // Grabs current theme and puts it at the beginning of the collection
501 currentTheme: function() {
505 current = self.collection.findWhere({ active: true });
507 // Move the active theme to the beginning of the collection
509 self.collection.remove( current );
510 self.collection.add( current, { at:0 } );
515 setView: function( view ) {
519 // Renders the overlay with the ThemeDetails view
520 // Uses the current model data
521 expand: function( id ) {
524 // Set the current theme model
525 this.model = self.collection.get( id );
527 // Trigger a route update for the current model
528 themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
530 // Sets this.view to 'detail'
531 this.setView( 'detail' );
532 $( 'body' ).addClass( 'theme-overlay-open' );
534 // Set up the theme details view
535 this.overlay = new themes.view.Details({
539 this.overlay.render();
540 this.$overlay.html( this.overlay.el );
542 // Bind to theme:next and theme:previous
543 // triggered by the arrow keys
545 // Keep track of the current model so we
546 // can infer an index position
547 this.listenTo( this.overlay, 'theme:next', function() {
548 // Renders the next theme on the overlay
549 self.next( [ self.model.cid ] );
552 .listenTo( this.overlay, 'theme:previous', function() {
553 // Renders the previous theme on the overlay
554 self.previous( [ self.model.cid ] );
558 // This method renders the next theme on the overlay modal
559 // based on the current position in the collection
560 // @params [model cid]
561 next: function( args ) {
565 // Get the current theme
566 model = self.collection.get( args[0] );
567 // Find the next model within the collection
568 nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
570 // Sanity check which also serves as a boundary test
571 if ( nextModel !== undefined ) {
573 // We have a new theme...
575 this.overlay.closeOverlay();
577 // Trigger a route update for the current model
578 self.theme.trigger( 'theme:expand', nextModel.cid );
583 // This method renders the previous theme on the overlay modal
584 // based on the current position in the collection
585 // @params [model cid]
586 previous: function( args ) {
588 model, previousModel;
590 // Get the current theme
591 model = self.collection.get( args[0] );
592 // Find the previous model within the collection
593 previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
595 if ( previousModel !== undefined ) {
597 // We have a new theme...
599 this.overlay.closeOverlay();
601 // Trigger a route update for the current model
602 self.theme.trigger( 'theme:expand', previousModel.cid );
608 // Search input view controller.
609 themes.view.Search = wp.Backbone.View.extend({
612 className: 'theme-search',
615 placeholder: l10n.searchPlaceholder,
626 // Runs a search on the theme collection.
627 search: function( event ) {
629 if ( event.type === 'keyup' && event.which === 27 ) {
630 event.target.value = '';
633 this.collection.doSearch( event.target.value );
635 // Update the URL hash
636 if ( event.target.value ) {
637 themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
639 themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
644 // Sets up the routes events for relevant url queries
645 // Listens to [theme] and [search] params
646 themes.routes = Backbone.Router.extend({
648 initialize: function() {
649 this.routes = _.object([
653 baseUrl: function( url ) {
654 return themes.data.settings.root + url;
658 // Execute and setup the application
661 // Initializes the blog's theme library view
662 // Create a new collection with data
663 this.themes = new themes.Collection( themes.data.themes );
666 this.view = new themes.view.Appearance({
667 collection: this.themes
678 // Set the initial theme
679 if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
680 this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
683 // Set the initial search
684 if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
685 $( '.theme-search' ).val( themes.data.settings.search );
686 this.themes.doSearch( themes.data.settings.search );
689 // Start the router if browser supports History API
690 if ( window.history && window.history.pushState ) {
691 // Calls the routes functionality
692 Backbone.history.start({ pushState: true, silent: true });
697 // Bind to our global thx object
698 // so that the object is available to sub-views
699 themes.router = new themes.routes();
704 jQuery( document ).ready(
706 // Bring on the themes
707 _.bind( themes.Run.init, themes.Run )
713 // Align theme browser thickbox
715 jQuery(document).ready( function($) {
716 tb_position = function() {
717 var tbWindow = $('#TB_window'),
718 width = $(window).width(),
719 H = $(window).height(),
720 W = ( 1040 < width ) ? 1040 : width,
723 if ( $('body.admin-bar').length ) {
724 adminbar_height = parseInt( jQuery('#wpadminbar').css('height'), 10 );
727 if ( tbWindow.size() ) {
728 tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
729 $('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
730 tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
731 if ( typeof document.body.style.maxWidth !== 'undefined' ) {
732 tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
737 $(window).resize(function(){ tb_position(); });