WordPress.org

Make WordPress Core

Changeset 27937


Ignore:
Timestamp:
04/03/2014 11:52:45 PM (5 years ago)
Author:
nacin
Message:

Theme Installer: Fix sorting, counts, keyboard navigation; add prev/next to previews.

props matveb.
see #27055.

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

Legend:

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

    r27918 r27937  
    12901290    padding: 4px 8px;
    12911291}
     1292.more-filters-container .filtering-by a {
     1293    margin-left: 10px;
     1294}
    12921295body.filters-applied .more-filters-container .filters-group,
    1293 body.filters-applied .more-filters-container a,
     1296body.filters-applied .more-filters-container a.button,
    12941297body.filters-applied .more-filters-container br {
    12951298    display: none !important;
     
    15101513    z-index: 10;
    15111514    overflow: auto;
    1512     background: transparent;
     1515    background: #eee;
    15131516    border-right: none;
    15141517}
     
    16711674.wp-full-overlay.collapsed .collapse-sidebar-label {
    16721675    display: none;
     1676}
     1677
     1678.wp-full-overlay .theme-navigation {
     1679    padding: 10px 20px;
     1680    position: absolute;
     1681        bottom: 10px;
     1682    text-align: left;
     1683}
     1684.wp-full-overlay .theme-navigation .next-theme {
     1685    float: right;
    16731686}
    16741687
     
    17511764.install-theme-info {
    17521765    display: none;
    1753     padding: 10px 20px 20px;
     1766    padding: 10px 20px 60px;
    17541767}
    17551768
  • trunk/src/wp-admin/js/theme.js

    r27896 r27937  
    215215        return collection;
    216216    },
     217
     218    count: false,
    217219
    218220    // Handles requests for more themes
     
    230232            query, isPaginated, count;
    231233
     234        // Store current query request args
     235        // for later use with the event `theme:end`
     236        this.currentQuery.request = request;
     237
    232238        // Search the query cache for matches.
    233239        query = _.find( queries, function( query ) {
     
    245251
    246252        // Otherwise, send a new API call and add it to the cache.
    247         if ( ! query ) {
     253        if ( ! query && ! isPaginated ) {
    248254            query = this.apiCall( request ).done( function( data ) {
    249255                // Update the collection with the queried data.
     
    261267
    262268                // Store the results and the query request
    263                 queries.push( { themes: data.themes, request: request } );
     269                queries.push( { themes: data.themes, request: request, total: count } );
    264270            }).fail( function() {
    265271                self.trigger( 'query:fail' );
     
    290296            // Only trigger an update event since we already have the themes
    291297            // on our cached object
     298            if ( _.isNumber( query.total ) ) {
     299                this.count = query.total;
     300            }
     301
     302            if ( ! query.total ) {
     303                this.count = this.length;
     304            }
     305
    292306            this.reset( query.themes );
    293307            this.trigger( 'update' );
     
    306320    // Send Ajax POST request to api.wordpress.org/themes
    307321    apiCall: function( request, paginated ) {
    308         // Store current query request args
    309         // for later use with the event `theme:end`
    310         this.currentQuery.request = request;
    311322
    312323        // Ajax request to .org API
     
    442453
    443454    preview: function( event ) {
     455        var self = this,
     456            current;
     457
    444458        // Bail if the user scrolled on a touch device
    445459        if ( this.touchDrag === true ) {
     
    461475        event = event || window.event;
    462476
     477        // Set focus to current theme.
     478        themes.focusedTheme = this.$el;
     479
     480        // Construct a new Preview view.
    463481        var preview = new themes.view.Preview({
    464482            model: this.model
    465483        });
    466484
     485        // Render the view and append it.
    467486        preview.render();
    468487        $( 'div.wrap' ).append( preview.el );
     488
     489        // Listen to our preview object
     490        // for `theme:next` and `theme:previous` events.
     491        this.listenTo( preview, 'theme:next', function() {
     492
     493            // Keep local track of current theme model.
     494            current = self.model;
     495
     496            // If we have ventured away from current model update the current model position.
     497            if ( ! _.isUndefined( self.current ) ) {
     498                current = self.current;
     499            }
     500
     501            // Get previous theme model.
     502            self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
     503
     504            // If we have no more themes, bail.
     505            if ( _.isUndefined( self.current ) ) {
     506                return self.current = current;
     507            }
     508
     509            // Construct a new Preview view.
     510            preview = new themes.view.Preview({
     511                model: self.current
     512            });
     513
     514            // Render and append.
     515            preview.render();
     516            $( 'div.wrap' ).append( preview.el );
     517        })
     518        .listenTo( preview, 'theme:previous', function() {
     519
     520            // Keep track of current theme model.
     521            current = self.model;
     522
     523            // If we have ventured away from current model update the current model position.
     524            if ( ! _.isUndefined( self.current ) ) {
     525                current = self.current;
     526            }
     527
     528            // Get previous theme model.
     529            self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
     530
     531            // If we have no more themes, bail.
     532            if ( _.isUndefined( self.current ) ) {
     533                return;
     534            }
     535
     536            // Construct a new Preview view.
     537            preview = new themes.view.Preview({
     538                model: self.current
     539            });
     540
     541            // Render and append.
     542            preview.render();
     543            $( 'div.wrap' ).append( preview.el );
     544        });
    469545    }
    470546});
     
    634710// Theme Preview view
    635711// Set ups a modal overlay with the expanded theme data
    636 themes.view.Preview = wp.Backbone.View.extend({
     712themes.view.Preview = themes.view.Details.extend({
    637713
    638714    className: 'wp-full-overlay expanded',
     
    641717    events: {
    642718        'click .close-full-overlay': 'close',
    643         'click .collapse-sidebar': 'collapse'
     719        'click .collapse-sidebar': 'collapse',
     720        'click .previous-theme': 'previousTheme',
     721        'click .next-theme': 'nextTheme'
    644722    },
    645723
     
    655733        this.$el.fadeIn( 200, function() {
    656734            $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
     735            $( '.close-full-overlay' ).focus();
    657736        });
    658737    },
     
    661740        this.$el.fadeOut( 200, function() {
    662741            $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
     742
     743            // Return focus to the theme div
     744            if ( themes.focusedTheme ) {
     745                themes.focusedTheme.focus();
     746            }
    663747        });
    664748
     
    783867
    784868        // Display a live theme count for the collection
    785         this.count.text( this.collection.length );
     869        this.count.text( this.collection.count ? this.collection.count : this.collection.length );
    786870    },
    787871
     
    11441228        }
    11451229
     1230        $( '.theme-section.current' ).removeClass( 'current' );
     1231        $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
     1232
    11461233        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    11471234        // or searching the local cache
     
    11621249        'click [type="checkbox"]': 'filtersChecked',
    11631250        'click .clear-filters': 'clearFilters',
    1164         'click .feature-name': 'filterSection'
     1251        'click .feature-name': 'filterSection',
     1252        'click .filtering-by a': 'backToFilters'
    11651253    },
    11661254
     
    12981386
    12991387        $( 'body' ).addClass( 'filters-applied' );
     1388        $( '.theme-section.current' ).removeClass( 'current' );
    13001389        filteringBy.empty();
    13011390
     
    13561445
    13571446        if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
    1358             return $( 'body' ).removeClass( 'filters-applied' );
     1447            return this.backToFilters();
    13591448        }
    13601449
     
    13851474            return self.filtersChecked();
    13861475        });
     1476    },
     1477
     1478    backToFilters: function() {
     1479        $( 'body' ).removeClass( 'filters-applied' );
    13871480    }
    13881481});
  • trunk/src/wp-admin/theme-install.php

    r27896 r27937  
    146146                <span><?php _e( 'Filtering by:' ); ?></span>
    147147                <div class="tags"></div>
     148                <a href="#"><?php _e( 'Edit' ); ?></a>
    148149            </div>
    149150        </div>
    150151    </div>
    151152    <div class="theme-browser"></div>
    152     <div class="theme-overlay"></div>
    153153    <div id="theme-installer" class="wp-full-overlay expanded"></div>
    154154
     
    225225                <span class="collapse-sidebar-arrow"></span>
    226226            </a>
     227            <div class="theme-navigation">
     228                <a class="previous-theme button" href="#"><?php _e( 'Previous' ); ?></a>
     229                <a class="next-theme button" href="#"><?php _e( 'Next' ); ?></a>
     230            </div>
    227231        </div>
    228232    </div>
Note: See TracChangeset for help on using the changeset viewer.