wp-admin/js/theme.js

   1 /* global _wpThemeSettings, confirm */
   2 window.wp = window.wp || {};
   3
   4 ( function($) {
   5
   6 // Set up our namespace...
   7 var themes, l10n;
   8 themes = wp.themes = wp.themes || {};
   9
  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;
  14
  15 // Setup app structure
  16 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
  17
  18 themes.model = Backbone.Model.extend({});
  19
  20 // Main view controller for themes.php
  21 // Unifies and renders all available views
  22 themes.view.Appearance = wp.Backbone.View.extend({
  23
  24         el: '#wpbody-content .wrap .theme-browser',
  25
  26         window: $( window ),
  27         // Pagination instance
  28         page: 0,
  29
  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' );
  34
  35                 // Bind to the scroll event and throttle
  36                 // the results from this.scroller
  37                 this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
  38         },
  39
  40         // Main render control
  41         render: function() {
  42                 // Setup the main theme view
  43                 // with the current theme collection
  44                 this.view = new themes.view.Themes({
  45                         collection: this.collection,
  46                         parent: this
  47                 });
  48
  49                 // Render search form.
  50                 this.search();
  51
  52                 // Render and append
  53                 this.view.render();
  54                 this.$el.empty().append( this.view.el ).addClass('rendered');
  55                 this.$el.append( '<br class="clear"/>' );
  56         },
  57
  58         // Search input and view
  59         // for current theme collection
  60         search: function() {
  61                 var view,
  62                         self = this;
  63
  64                 // Don't render the search if there is only one theme
  65                 if ( themes.data.themes.length === 1 ) {
  66                         return;
  67                 }
  68
  69                 view = new themes.view.Search({ collection: self.collection });
  70
  71                 // Render and append after screen title
  72                 view.render();
  73                 $('#wpbody h2:first')
  74                         .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
  75                         .append( view.el );
  76         },
  77
  78         // Checks when the user gets close to the bottom
  79         // of the mage and triggers a theme:scroll event
  80         scroller: function() {
  81                 var self = this,
  82                         bottom, threshold;
  83
  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 );
  87
  88                 if ( bottom > threshold ) {
  89                         this.trigger( 'theme:scroll' );
  90                 }
  91         }
  92 });
  93
  94 // Set up the Collection for our theme data
  95 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
  96 themes.Collection = Backbone.Collection.extend({
  97
  98         model: themes.model,
  99
 100         // Search terms
 101         terms: '',
 102
 103         // Controls searching on the current theme collection
 104         // and triggers an update event
 105         doSearch: function( value ) {
 106
 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 ) {
 110                         return;
 111                 }
 112
 113                 // Updates terms with the value passed
 114                 this.terms = value;
 115
 116                 // If we have terms, run a search...
 117                 if ( this.terms.length > 0 ) {
 118                         this.search( this.terms );
 119                 }
 120
 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 );
 125                 }
 126
 127                 // Trigger an 'update' event
 128                 this.trigger( 'update' );
 129         },
 130
 131         // Performs a search within the collection
 132         // @uses RegExp
 133         search: function( term ) {
 134                 var match, results, haystack;
 135
 136                 // Start with a full collection
 137                 this.reset( themes.data.themes, { silent: true } );
 138
 139                 // The RegExp object to match
 140                 //
 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' );
 145
 146                 // Find results
 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' ) );
 150
 151                         if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
 152                                 data.set( 'displayAuthor', true );
 153                         }
 154
 155                         return match.test( haystack );
 156                 });
 157
 158                 this.reset( results );
 159         },
 160
 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;
 166
 167                 // Themes per instance are set at 15
 168                 collection = _( collection.rest( 15 * instance ) );
 169                 collection = _( collection.first( 15 ) );
 170
 171                 return collection;
 172         }
 173 });
 174
 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({
 178
 179         // Wrap theme data on a div.theme element
 180         className: 'theme',
 181
 182         // Reflects which theme view we have
 183         // 'grid' (default) or 'detail'
 184         state: 'grid',
 185
 186         // The HTML template for each element to be rendered
 187         html: themes.template( 'theme' ),
 188
 189         events: {
 190                 'click': 'expand',
 191                 'touchend': 'expand',
 192                 'touchmove': 'preventExpand'
 193         },
 194
 195         touchDrag: false,
 196
 197         render: function() {
 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
 202                 this.activeTheme();
 203
 204                 if ( this.model.get( 'displayAuthor' ) ) {
 205                         this.$el.addClass( 'display-author' );
 206                 }
 207         },
 208
 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' );
 214                 }
 215         },
 216
 217         // Single theme overlay screen
 218         // It's shown when clicking a theme
 219         expand: function( event ) {
 220                 var self = this;
 221
 222                 // Bail if the user scrolled on a touch device
 223                 if ( this.touchDrag === true ) {
 224                         return this.touchDrag = false;
 225                 }
 226
 227                 event = event || window.event;
 228
 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' ) ) {
 232                         return;
 233                 }
 234
 235                 this.trigger( 'theme:expand', self.model.cid );
 236         },
 237
 238         preventExpand: function() {
 239                 this.touchDrag = true;
 240         }
 241 });
 242
 243 // Theme Details view
 244 // Set ups a modal overlay with the expanded theme data
 245 themes.view.Details = wp.Backbone.View.extend({
 246
 247         // Wrap theme data on a div.theme element
 248         className: 'theme-overlay',
 249
 250         events: {
 251                 'click': 'collapse',
 252                 'click .delete-theme': 'deleteTheme',
 253                 'click .left': 'previousTheme',
 254                 'click .right': 'nextTheme'
 255         },
 256
 257         // The HTML template for the theme overlay
 258         html: themes.template( 'theme-single' ),
 259
 260         render: function() {
 261                 var data = this.model.toJSON();
 262                 this.$el.html( this.html( data ) );
 263                 // Renders active theme styles
 264                 this.activeTheme();
 265                 // Set up navigation events
 266                 this.navigation();
 267                 // Checks screenshot size
 268                 this.screenshotCheck( this.$el );
 269         },
 270
 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' ) );
 276         },
 277
 278         // Single theme overlay screen
 279         // It's shown when clicking a theme
 280         collapse: function( event ) {
 281                 var self = this,
 282                         scroll;
 283
 284                 event = event || window.event;
 285
 286                 // Prevent collapsing detailed view when there is only one theme available
 287                 if ( themes.data.themes.length === 1 ) {
 288                         return;
 289                 }
 290
 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 ) {
 295
 296                         // Add a temporary closing class while overlay fades out
 297                         $( 'body' ).addClass( 'closing-overlay' );
 298
 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
 304                                 self.closeOverlay();
 305
 306                                 // Get scroll position to avoid jumping to the top
 307                                 scroll = document.body.scrollTop;
 308
 309                                 // Clean the url structure
 310                                 themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 311
 312                                 // Restore scroll position
 313                                 document.body.scrollTop = scroll;
 314                         });
 315                 }
 316         },
 317
 318         // Handles .disabled classes for next/previous buttons
 319         navigation: function() {
 320
 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' );
 324                 }
 325                 if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
 326                         this.$el.find( '.right' ).addClass( 'disabled' );
 327                 }
 328         },
 329
 330         // Performs the actions to effectively close
 331         // the theme details overlay
 332         closeOverlay: function() {
 333                 this.remove();
 334                 this.unbind();
 335                 this.trigger( 'theme:collapse' );
 336         },
 337
 338         // Confirmation dialoge for deleting a theme
 339         deleteTheme: function() {
 340                 return confirm( themes.data.settings.confirmDelete );
 341         },
 342
 343         nextTheme: function() {
 344                 var self = this;
 345                 self.trigger( 'theme:next', self.model.cid );
 346         },
 347
 348         previousTheme: function() {
 349                 var self = this;
 350                 self.trigger( 'theme:previous', self.model.cid );
 351         },
 352
 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;
 357
 358                 screenshot = el.find( '.screenshot img' );
 359                 image = new Image();
 360                 image.src = screenshot.attr( 'src' );
 361
 362                 // Width check
 363                 if ( image.width && image.width <= 300 ) {
 364                         el.addClass( 'small-screenshot' );
 365                 }
 366         }
 367 });
 368
 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({
 372
 373         className: 'themes',
 374         $overlay: $( 'div.theme-overlay' ),
 375
 376         // Number to keep track of scroll position
 377         // while in theme-overlay mode
 378         index: 0,
 379
 380         // The theme count element
 381         count: $( '.theme-count' ),
 382
 383         initialize: function( options ) {
 384                 var self = this;
 385
 386                 // Set up parent
 387                 this.parent = options.parent;
 388
 389                 // Set current view to [grid]
 390                 this.setView( 'grid' );
 391
 392                 // Move the active theme to the beginning of the collection
 393                 self.currentTheme();
 394
 395                 // When the collection is updated by user input...
 396                 this.listenTo( self.collection, 'update', function() {
 397                         self.parent.page = 0;
 398                         self.currentTheme();
 399                         self.render( this );
 400                 });
 401
 402                 this.listenTo( this.parent, 'theme:scroll', function() {
 403                         self.renderThemes( self.parent.page );
 404                 });
 405
 406                 // Bind keyboard events.
 407                 $('body').on( 'keyup', function( event ) {
 408                         if ( ! self.overlay ) {
 409                                 return;
 410                         }
 411
 412                         // Pressing the right arrow key fires a theme:next event
 413                         if ( event.keyCode === 39 ) {
 414                                 self.overlay.nextTheme();
 415                         }
 416
 417                         // Pressing the left arrow key fires a theme:previous event
 418                         if ( event.keyCode === 37 ) {
 419                                 self.overlay.previousTheme();
 420                         }
 421
 422                         // Pressing the escape key fires a theme:collapse event
 423                         if ( event.keyCode === 27 ) {
 424                                 self.overlay.collapse( event );
 425                         }
 426                 });
 427         },
 428
 429         // Manages rendering of theme pages
 430         // and keeping theme count in sync
 431         render: function() {
 432                 // Clear the DOM, please
 433                 this.$el.html( '' );
 434
 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 ) {
 439
 440                         // Constructs the view
 441                         this.singleTheme = new themes.view.Details({
 442                                 model: this.collection.models[0]
 443                         });
 444
 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 );
 449                 }
 450
 451                 // Generate the themes
 452                 // Using page instance
 453                 this.renderThemes( this.parent.page );
 454
 455                 // Display a live theme count for the collection
 456                 this.count.text( this.collection.length );
 457         },
 458
 459         // Iterates through each instance of the collection
 460         // and renders each theme module
 461         renderThemes: function( page ) {
 462                 var self = this;
 463
 464                 self.instance = self.collection.paginate( page );
 465
 466                 // If we have no more themes bail
 467                 if ( self.instance.length === 0 ) {
 468                         return;
 469                 }
 470
 471                 // Make sure the add-new stays at the end
 472                 if ( page >= 1 ) {
 473                         $( '.add-new-theme' ).remove();
 474                 }
 475
 476                 // Loop through the themes and setup each theme view
 477                 self.instance.each( function( theme ) {
 478                         self.theme = new themes.view.Theme({
 479                                 model: theme
 480                         });
 481
 482                         // Render the views...
 483                         self.theme.render();
 484                         // and append them to div.themes
 485                         self.$el.append( self.theme.el );
 486
 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 );
 490                 });
 491
 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>' );
 495                 }
 496
 497                 this.parent.page++;
 498         },
 499
 500         // Grabs current theme and puts it at the beginning of the collection
 501         currentTheme: function() {
 502                 var self = this,
 503                         current;
 504
 505                 current = self.collection.findWhere({ active: true });
 506
 507                 // Move the active theme to the beginning of the collection
 508                 if ( current ) {
 509                         self.collection.remove( current );
 510                         self.collection.add( current, { at:0 } );
 511                 }
 512         },
 513
 514         // Sets current view
 515         setView: function( view ) {
 516                 return view;
 517         },
 518
 519         // Renders the overlay with the ThemeDetails view
 520         // Uses the current model data
 521         expand: function( id ) {
 522                 var self = this;
 523
 524                 // Set the current theme model
 525                 this.model = self.collection.get( id );
 526
 527                 // Trigger a route update for the current model
 528                 themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
 529
 530                 // Sets this.view to 'detail'
 531                 this.setView( 'detail' );
 532                 $( 'body' ).addClass( 'theme-overlay-open' );
 533
 534                 // Set up the theme details view
 535                 this.overlay = new themes.view.Details({
 536                         model: self.model
 537                 });
 538
 539                 this.overlay.render();
 540                 this.$overlay.html( this.overlay.el );
 541
 542                 // Bind to theme:next and theme:previous
 543                 // triggered by the arrow keys
 544                 //
 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 ] );
 550
 551                 })
 552                 .listenTo( this.overlay, 'theme:previous', function() {
 553                         // Renders the previous theme on the overlay
 554                         self.previous( [ self.model.cid ] );
 555                 });
 556         },
 557
 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 ) {
 562                 var self = this,
 563                         model, nextModel;
 564
 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 );
 569
 570                 // Sanity check which also serves as a boundary test
 571                 if ( nextModel !== undefined ) {
 572
 573                         // We have a new theme...
 574                         // Close the overlay
 575                         this.overlay.closeOverlay();
 576
 577                         // Trigger a route update for the current model
 578                         self.theme.trigger( 'theme:expand', nextModel.cid );
 579
 580                 }
 581         },
 582
 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 ) {
 587                 var self = this,
 588                         model, previousModel;
 589
 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 );
 594
 595                 if ( previousModel !== undefined ) {
 596
 597                         // We have a new theme...
 598                         // Close the overlay
 599                         this.overlay.closeOverlay();
 600
 601                         // Trigger a route update for the current model
 602                         self.theme.trigger( 'theme:expand', previousModel.cid );
 603
 604                 }
 605         }
 606 });
 607
 608 // Search input view controller.
 609 themes.view.Search = wp.Backbone.View.extend({
 610
 611         tagName: 'input',
 612         className: 'theme-search',
 613
 614         attributes: {
 615                 placeholder: l10n.searchPlaceholder,
 616                 type: 'search'
 617         },
 618
 619         events: {
 620                 'input':  'search',
 621                 'keyup':  'search',
 622                 'change': 'search',
 623                 'search': 'search'
 624         },
 625
 626         // Runs a search on the theme collection.
 627         search: function( event ) {
 628                 // Clear on escape.
 629                 if ( event.type === 'keyup' && event.which === 27 ) {
 630                         event.target.value = '';
 631                 }
 632
 633                 this.collection.doSearch( event.target.value );
 634
 635                 // Update the URL hash
 636                 if ( event.target.value ) {
 637                         themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
 638                 } else {
 639                         themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 640                 }
 641         }
 642 });
 643
 644 // Sets up the routes events for relevant url queries
 645 // Listens to [theme] and [search] params
 646 themes.routes = Backbone.Router.extend({
 647
 648         initialize: function() {
 649                 this.routes = _.object([
 650                 ]);
 651         },
 652
 653         baseUrl: function( url ) {
 654                 return themes.data.settings.root + url;
 655         }
 656 });
 657
 658 // Execute and setup the application
 659 themes.Run = {
 660         init: function() {
 661                 // Initializes the blog's theme library view
 662                 // Create a new collection with data
 663                 this.themes = new themes.Collection( themes.data.themes );
 664
 665                 // Set up the view
 666                 this.view = new themes.view.Appearance({
 667                         collection: this.themes
 668                 });
 669
 670                 this.render();
 671         },
 672
 673         render: function() {
 674                 // Render results
 675                 this.view.render();
 676                 this.routes();
 677
 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 } ) );
 681                 }
 682
 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 );
 687                 }
 688
 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 });
 693                 }
 694         },
 695
 696         routes: function() {
 697                 // Bind to our global thx object
 698                 // so that the object is available to sub-views
 699                 themes.router = new themes.routes();
 700         }
 701 };
 702
 703 // Ready...
 704 jQuery( document ).ready(
 705
 706         // Bring on the themes
 707         _.bind( themes.Run.init, themes.Run )
 708
 709 );
 710
 711 })( jQuery );
 712
 713 // Align theme browser thickbox
 714 var tb_position;
 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,
 721                         adminbar_height = 0;
 722
 723                 if ( $('body.admin-bar').length ) {
 724                         adminbar_height = parseInt( jQuery('#wpadminbar').css('height'), 10 );
 725                 }
 726
 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'});
 733                         }
 734                 }
 735         };
 736
 737         $(window).resize(function(){ tb_position(); });
 738 });