WordPress.org

Make WordPress Core

Changeset 28033


Ignore:
Timestamp:
04/08/14 03:57:01 (17 months ago)
Author:
nacin
Message:

Theme Installer: Disable prev/next buttons on first/last themes, add Esc handling, use IDs.

props adamsilverstein, DH-Shredder.
fixes #27521.

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

Legend:

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

    r28025 r28033  
    17711771 
    17721772#customize-container iframe, 
    1773 #theme-installer iframe { 
     1773.theme-install-overlay iframe { 
    17741774    height: 100%; 
    17751775    width: 100%; 
     
    17871787} 
    17881788 
    1789 #theme-installer { 
     1789.theme-install-overlay { 
    17901790    display: none; 
    17911791} 
    17921792 
    1793 #theme-installer.single-theme { 
     1793.theme-install-overlay.single-theme { 
    17941794    display: block; 
    17951795} 
     
    18041804} 
    18051805 
    1806 #theme-installer .install-theme-info { 
     1806.theme-install-overlay .install-theme-info { 
    18071807    display: block; 
    18081808} 
     
    18471847} 
    18481848 
    1849 #theme-installer .wp-full-overlay-header { 
     1849.theme-install-overlay .wp-full-overlay-header { 
    18501850    margin-top: 9px; 
    18511851} 
    18521852 
    1853 #theme-installer .wp-full-overlay-header .theme-install { 
     1853.theme-install-overlay .wp-full-overlay-header .theme-install { 
    18541854    float: right; 
    18551855    /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ 
     
    18571857} 
    18581858 
    1859 #theme-installer .wp-full-overlay-sidebar { 
     1859.theme-install-overlay .wp-full-overlay-sidebar { 
    18601860    background: #EEE; 
    18611861    border-right: 1px solid #DDD; 
    18621862} 
    18631863 
    1864 #theme-installer .wp-full-overlay-main { 
     1864.theme-install-overlay .wp-full-overlay-main { 
    18651865    background: #fff url(../images/spinner.gif) no-repeat center center; 
    18661866    -webkit-background-size: 20px 20px; 
     
    18851885 
    18861886    .customize-loading #customize-container, 
    1887     #theme-installer .wp-full-overlay-main { 
     1887    .theme-install-overlay .wp-full-overlay-main { 
    18881888        background-image: url(../images/spinner-2x.gif); 
    18891889    } 
  • trunk/src/wp-admin/js/theme.js

    r28025 r28033  
    444444    }, 
    445445 
     446    // Handles .disabled classes for previous/next buttons in theme installer preview 
     447    setNavButtonsState: function() { 
     448        var $themeInstaller = $( '.theme-install-overlay' ), 
     449            current = _.isUndefined( this.current ) ? this.model : this.current; 
     450 
     451        // Disable previous at the zero position 
     452        if ( 0 === this.model.collection.indexOf( current ) ) { 
     453            $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' ); 
     454        } 
     455 
     456        // Disable next if the next model is undefined 
     457        if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) { 
     458            $themeInstaller.find( '.next-theme' ).addClass( 'disabled' ); 
     459        } 
     460    }, 
     461 
    446462    preview: function( event ) { 
    447463        var self = this, 
     
    512528            // Render and append. 
    513529            preview.render(); 
     530            this.setNavButtonsState(); 
    514531            $( 'div.wrap' ).append( preview.el ); 
    515532            $( '.next-theme' ).focus(); 
     
    540557            // Render and append. 
    541558            preview.render(); 
     559            this.setNavButtonsState(); 
    542560            $( 'div.wrap' ).append( preview.el ); 
    543561            $( '.previous-theme' ).focus(); 
    544562        }); 
     563        self.setNavButtonsState(); 
    545564    } 
    546565}); 
     
    677696    }, 
    678697 
    679     // Confirmation dialoge for deleting a theme 
     698    // Confirmation dialog for deleting a theme 
    680699    deleteTheme: function() { 
    681700        return confirm( themes.data.settings.confirmDelete ); 
     
    685704        var self = this; 
    686705        self.trigger( 'theme:next', self.model.cid ); 
     706        return false; 
    687707    }, 
    688708 
     
    690710        var self = this; 
    691711        self.trigger( 'theme:previous', self.model.cid ); 
     712        return false; 
    692713    }, 
    693714 
     
    713734 
    714735    className: 'wp-full-overlay expanded', 
    715     el: '#theme-installer', 
     736    el: '.theme-install-overlay', 
    716737 
    717738    events: { 
     
    726747 
    727748    render: function() { 
    728         var data = this.model.toJSON(); 
     749        var data = this.model.toJSON(), 
     750            self = this; 
    729751        this.$el.html( this.html( data ) ); 
    730752 
     
    732754 
    733755        this.$el.fadeIn( 200, function() { 
    734             $( 'body' ).addClass( 'theme-installer-active full-overlay-active' ); 
     756            $( 'body' ) 
     757                .addClass( 'theme-installer-active full-overlay-active' ) 
     758                .on( 'keyup.overlay', function( event ) { 
     759                    // Pressing the escape key closes the preview 
     760                    if ( event.keyCode === 27 ) { 
     761                        self.close(); 
     762                    } 
     763                }); 
    735764            $( '.close-full-overlay' ).focus(); 
    736765        }); 
     
    739768    close: function() { 
    740769        this.$el.fadeOut( 200, function() { 
    741             $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ); 
     770            $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' ); 
    742771 
    743772            // Return focus to the theme div 
  • trunk/src/wp-admin/theme-install.php

    r28025 r28033  
    159159    </div> 
    160160    <div class="theme-browser"></div> 
    161     <div id="theme-installer" class="wp-full-overlay expanded"></div> 
     161    <div class="theme-install-overlay wp-full-overlay expanded"></div> 
    162162 
    163163    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p> 
Note: See TracChangeset for help on using the changeset viewer.