WordPress.org

Make WordPress Core

Changeset 28049


Ignore:
Timestamp:
04/08/2014 04:23:26 PM (4 years ago)
Author:
nacin
Message:

Theme installer keyboard fixes. Updates [28033] and [28036].

props matveb.
see #27521.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/themes.css

    r28038 r28049  
    10781078
    10791079/* Already installed theme */
    1080 .theme-browser .theme.is-installed {
    1081     cursor: default;
    1082 }
    10831080.theme-browser .theme .theme-installed {
    10841081    background: #0074a2;
     
    10871084    content: '\f147';
    10881085}
    1089 .theme-browser .theme.is-installed .theme-actions .button-primary,
    1090 .theme-browser.rendered .theme.is-installed .more-details {
     1086.theme-browser .theme.is-installed .theme-actions .button-primary {
    10911087    display: none !important;
    1092 }
    1093 .theme-browser.rendered .theme.is-installed:hover .theme-screenshot img,
    1094 .theme-browser.rendered .theme.is-installed:focus .theme-screenshot img {
    1095     opacity: 1 !important;
    10961088}
    10971089
  • trunk/src/wp-admin/js/theme.js

    r28047 r28049  
    443443    },
    444444
    445     // Handles .disabled classes for previous/next buttons in theme installer preview
    446     setNavButtonsState: function() {
    447         var $themeInstaller = $( '.theme-install-overlay' ),
    448             current = _.isUndefined( this.current ) ? this.model : this.current;
    449 
    450         // Disable previous at the zero position
    451         if ( 0 === this.model.collection.indexOf( current ) ) {
    452             $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
    453         }
    454 
    455         // Disable next if the next model is undefined
    456         if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
    457             $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
    458         }
    459     },
    460 
    461445    preview: function( event ) {
    462446        var self = this,
     
    497481        // Render the view and append it.
    498482        preview.render();
     483        this.setNavButtonsState();
    499484        $( 'div.wrap' ).append( preview.el );
    500485
     
    536521            current = self.model;
    537522
     523            // Bail early if we are at the beginning of the collection
     524            if ( self.model.collection.indexOf( self.current ) === 0 ) {
     525                return;
     526            }
     527
    538528            // If we have ventured away from current model update the current model position.
    539529            if ( ! _.isUndefined( self.current ) ) {
     
    560550            $( '.previous-theme' ).focus();
    561551        });
    562         self.setNavButtonsState();
     552
     553        this.listenTo( preview, 'preview:close', function() {
     554            self.current = self.model
     555        });
     556    },
     557
     558    // Handles .disabled classes for previous/next buttons in theme installer preview
     559    setNavButtonsState: function() {
     560        var $themeInstaller = $( '.theme-install-overlay' ),
     561            current = _.isUndefined( this.current ) ? this.model : this.current;
     562
     563        // Disable previous at the zero position
     564        if ( 0 === this.model.collection.indexOf( current ) ) {
     565            $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
     566        }
     567
     568        // Disable next if the next model is undefined
     569        if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
     570            $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
     571        }
    563572    }
    564573});
     
    739748        'click .collapse-sidebar': 'collapse',
    740749        'click .previous-theme': 'previousTheme',
    741         'click .next-theme': 'nextTheme'
     750        'click .next-theme': 'nextTheme',
     751        'keyup': 'keyEvent'
    742752    },
    743753
     
    753763
    754764        this.$el.fadeIn( 200, function() {
    755             $( 'body' )
    756                 .addClass( 'theme-installer-active full-overlay-active' )
    757                 .on( 'keyup.overlay', function( event ) {
    758                     // The escape key closes the preview
    759                     if ( event.keyCode === 27 ) {
    760                         self.close();
    761                     }
    762                     // The right arrow key, next theme
    763                     if ( event.keyCode === 39 ) {
    764                         self.nextTheme();
    765                     }
    766 
    767                     // The left arrow key, previous theme
    768                     if ( event.keyCode === 37 ) {
    769                         self.previousTheme();
    770                     }
    771                 });
     765            $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
    772766            $( '.close-full-overlay' ).focus();
    773767        });
     
    776770    close: function() {
    777771        this.$el.fadeOut( 200, function() {
    778             $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' );
     772            $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
    779773
    780774            // Return focus to the theme div
     
    785779
    786780        themes.router.navigate( themes.router.baseUrl( '' ) );
     781        this.trigger( 'preview:close' );
    787782        return false;
    788783    },
     
    792787        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    793788        return false;
     789    },
     790
     791    keyEvent: function( event ) {
     792        // The escape key closes the preview
     793        if ( event.keyCode === 27 ) {
     794            this.undelegateEvents();
     795            this.close();
     796        }
     797        // The right arrow key, next theme
     798        if ( event.keyCode === 39 ) {
     799            _.once( this.nextTheme() );
     800        }
     801
     802        // The left arrow key, previous theme
     803        if ( event.keyCode === 37 ) {
     804            this.previousTheme();
     805        }
    794806    }
    795807});
Note: See TracChangeset for help on using the changeset viewer.