WordPress.org

Make WordPress Core

Changeset 28049


Ignore:
Timestamp:
04/08/14 16:23:26 (15 months 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.