WordPress.org

Make WordPress Core

Changeset 28033


Ignore:
Timestamp:
04/08/2014 03:57:01 AM (4 years 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.