Changeset 1452
- Timestamp:
- 03/25/2015 11:34:24 PM (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js
r1450 r1452 120 120 121 121 // Set up the Collection for our theme data 122 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active'...122 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' ... 123 123 themes.Collection = Backbone.Collection.extend({ 124 124 model: themes.Model, … … 385 385 }, 386 386 387 // Adds a class to the currently active theme388 // and to the overlay in detailed view mode389 activeTheme: function() {390 if ( this.model.get( 'active' ) ) {391 this.$el.addClass( 'active' );392 }393 },394 395 387 // Add class of focus to the theme we are focused on. 396 388 addFocus: function() { … … 438 430 preventExpand: function() { 439 431 this.touchDrag = true; 440 },441 442 preview: function( event ) {443 var self = this,444 current, preview;445 446 // Bail if the user scrolled on a touch device447 if ( this.touchDrag === true ) {448 return this.touchDrag = false;449 }450 451 // Allow direct link path to installing a theme.452 if ( $( event.target ).hasClass( 'button-primary' ) ) {453 return;454 }455 456 // 'enter' and 'space' keys expand the details view when a theme is :focused457 if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {458 return;459 }460 461 // pressing enter while focused on the buttons shouldn't open the preview462 if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {463 return;464 }465 466 event.preventDefault();467 468 event = event || window.event;469 470 // Set focus to current theme.471 themes.focusedTheme = this.$el;472 473 // Construct a new Preview view.474 preview = new themes.view.Preview({475 model: this.model476 });477 478 // Render the view and append it.479 preview.render();480 this.setNavButtonsState();481 482 // Hide previous/next navigation if there is only one theme483 if ( this.model.collection.length === 1 ) {484 preview.$el.addClass( 'no-navigation' );485 } else {486 preview.$el.removeClass( 'no-navigation' );487 }488 489 // Append preview490 $( 'div.wrap' ).append( preview.el );491 492 // Listen to our preview object493 // for `theme:next` and `theme:previous` events.494 this.listenTo( preview, 'theme:next', function() {495 496 // Keep local track of current theme model.497 current = self.model;498 499 // If we have ventured away from current model update the current model position.500 if ( ! _.isUndefined( self.current ) ) {501 current = self.current;502 }503 504 // Get next theme model.505 self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );506 507 // If we have no more themes, bail.508 if ( _.isUndefined( self.current ) ) {509 self.options.parent.parent.trigger( 'theme:end' );510 return self.current = current;511 }512 513 preview.model = self.current;514 515 // Render and append.516 preview.render();517 this.setNavButtonsState();518 $( '.next-theme' ).focus();519 })520 .listenTo( preview, 'theme:previous', function() {521 522 // Keep track of current theme model.523 current = self.model;524 525 // Bail early if we are at the beginning of the collection526 if ( self.model.collection.indexOf( self.current ) === 0 ) {527 return;528 }529 530 // If we have ventured away from current model update the current model position.531 if ( ! _.isUndefined( self.current ) ) {532 current = self.current;533 }534 535 // Get previous theme model.536 self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );537 538 // If we have no more themes, bail.539 if ( _.isUndefined( self.current ) ) {540 return;541 }542 543 preview.model = self.current;544 545 // Render and append.546 preview.render();547 this.setNavButtonsState();548 $( '.previous-theme' ).focus();549 });550 551 this.listenTo( preview, 'preview:close', function() {552 self.current = self.model;553 });554 },555 556 // Handles .disabled classes for previous/next buttons in theme installer preview557 setNavButtonsState: function() {558 var $themeInstaller = $( '.theme-install-overlay' ),559 current = _.isUndefined( this.current ) ? this.model : this.current;560 561 // Disable previous at the zero position562 if ( 0 === this.model.collection.indexOf( current ) ) {563 $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );564 }565 566 // Disable next if the next model is undefined567 if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {568 $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );569 }570 432 } 571 433 }); … … 579 441 events: { 580 442 'click': 'collapse', 581 'click .delete-theme': 'deleteTheme',582 443 'click .left': 'previousTheme', 583 444 'click .right': 'nextTheme', … … 603 464 604 465 this.$el.html( this.html( data ) ); 605 // Renders active theme styles606 this.activeTheme();607 466 // Set up navigation events 608 467 this.navigation(); … … 745 604 $themeInstaller.find( '.next-theme' ).addClass( 'disabled' ); 746 605 } 747 },748 749 // Adds a class to the currently active theme750 // and to the overlay in detailed view mode751 activeTheme: function() {752 // Check the model has the active property753 this.$el.toggleClass( 'active', this.model.get( 'active' ) );754 606 }, 755 607 … … 919 771 }, 920 772 921 // Confirmation dialog for deleting a theme922 deleteTheme: function() {923 return confirm( themes.data.settings.confirmDelete );924 },925 926 773 nextTheme: function() { 927 774 var self = this; … … 1041 888 this.setView( 'grid' ); 1042 889 1043 // Move the active theme to the beginning of the collection1044 self.currentTheme();1045 1046 890 // When the collection is updated by user input... 1047 891 this.listenTo( self.collection, 'update', function() { 1048 892 self.parent.page = 0; 1049 self.currentTheme();1050 893 self.render( this ); 1051 894 }); … … 1167 1010 1168 1011 this.parent.page++; 1169 },1170 1171 // Grabs current theme and puts it at the beginning of the collection1172 currentTheme: function() {1173 var self = this,1174 current;1175 1176 current = self.collection.findWhere({ active: true });1177 1178 // Move the active theme to the beginning of the collection1179 if ( current ) {1180 self.collection.remove( current );1181 self.collection.add( current, { at:0 } );1182 }1183 1012 }, 1184 1013 … … 1704 1533 request.theme = slug; 1705 1534 self.view.collection.query( request ); 1706 1707 $( '.close-full-overlay' ).trigger( 'click' );1708 1535 self.view.view.expand( slug ); 1709 1536 });
Note:
See TracChangeset
for help on using the changeset viewer.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)