Changeset 1296

Timestamp:

02/24/2015 04:48:58 AM (12 years ago)

Author:

obenland

Message:

WP.org Themes: Update document title according to current view.

Also improves UX when closing a modal, URL and title are now agnostic of the
last index view.

See #745, #850.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes

Files:

• functions.php (modified) (2 diffs)
• js/theme.js (modified) (8 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

@@ -73 +73 @@
                         'themes'   => false,
                         'settings' => array(
+                                'title'      => __( 'WordPress › %s « Free WordPress Themes', 'wporg-themes' ),
                                 'isMobile'   => wp_is_mobile(),
                                 'isInstall'  => true,
@@ -188 +189 @@
                 $theme->authorurl          = $user->user_nicename;
                 $theme->authordispname = wp_kses( $user->display_name, $themes_allowedtags );
-                
+
                 $theme->author         = wp_kses( $theme->author,      $themes_allowedtags );
                 $theme->version        = wp_kses( $theme->version,     $themes_allowedtags );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

@@ -1 +1 @@
 ( function ( $, wp ) {
         google.load("visualization", "1", {packages:["corechart"]});
+
+        wp.themes.utils = {
+                title: function ( item ) {
+                        var title = $( 'title' );
+
+                        title.html( wp.themes.data.settings.title.replace( '%s', item ) );
+                }
+        };
 
         _.extend( wp.themes.view.Appearance.prototype, {
@@ -19 +27 @@
                         // Trigger a route update for the current model
                         wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.themePath + this.model.id ) );
+                        wp.themes.utils.title( this.model.attributes.name );
 
                         // Sets this.view to 'detail'
@@ -54 +63 @@
                 el: '#themes',
 
+                sort: function( sort ) {
+                        var sorter = $( '.filter-links [data-sort="' + sort + '"]' );
+                        this.clearSearch();
+
+                        $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
+                        sorter.addClass( this.activeClass );
+                        wp.themes.utils.title( sorter.text() );
+
+                        this.browse( sort );
+                },
+
                 // Applying filters triggers a tag request.
                 applyFilters: function( event ) {
-                        var name,
+                        var names = [],
+                                name,
                                 tags = this.filtersChecked(),
                                 request = { tag: tags },
@@ -71 +92 @@
                         _.each( tags, function( tag ) {
                                 name = $( 'label[for="filter-id-' + tag + '"]' ).text();
+                                names.push( name );
                                 filteringBy.append( '<span class="tag">' + name + '</span>' );
                         });
 
                         wp.themes.router.navigate( wp.themes.router.baseUrl( 'tag/' + tags.join( '+' ) ) );
+                        wp.themes.utils.title( names.join( ', ' ) );
 
                         // Get the themes by sending Ajax POST request to api.wordpress.org/themes
@@ -439 +462 @@
                                 }
                         });
+                },
+
+                // Single theme overlay screen
+                // It's shown when clicking a theme
+                collapse: function( event ) {
+                        var self = this,
+                                scroll, sorter;
+
+                        event = event || window.event;
+
+                        // Prevent collapsing detailed view when there is only one theme available
+                        if ( wp.themes.data.themes.length === 1 ) {
+                                return;
+                        }
+
+                        // Detect if the click is inside the overlay
+                        // and don't close it unless the target was
+                        // the div.back button
+                        if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
+
+                                // Add a temporary closing class while overlay fades out
+                                $( 'body' ).addClass( 'closing-overlay' );
+
+                                // With a quick fade out animation
+                                this.$el.fadeOut( 130, function() {
+                                        // Clicking outside the modal box closes the overlay
+                                        $( 'body' ).removeClass( 'closing-overlay' );
+                                        // Handle event cleanup
+                                        self.closeOverlay();
+
+                                        // Get scroll position to avoid jumping to the top
+                                        scroll = document.body.scrollTop;
+
+                                        sorter = $( '.filter-links .current' );
+
+                                        // Clean the url structure
+                                        wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.browsePath + sorter.data( 'sort' ) ) );
+                                        wp.themes.utils.title( sorter.text() );
+
+                                        // Restore scroll position
+                                        document.body.scrollTop = scroll;
+
+                                        // Return focus to the theme div
+                                        if ( wp.themes.focusedTheme ) {
+                                                wp.themes.focusedTheme.focus();
+                                        }
+                                });
+                        }
                 }
         });
@@ -497 +568 @@
         _.extend( wp.themes.view.InstallerSearch.prototype, {
                 doSearch: _.debounce( function( value ) {
-                        var request = {};
+                        var request = {},
+                                sort = 'featured';
 
                         request.search = value;
@@ -528 +600 @@
                         // Set route
                         if ( value ) {
+                                wp.themes.utils.title( value );
                                 wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.searchPath + value ), { replace: true } );
                         } else {
-                                wp.themes.router.navigate( wp.themes.router.baseUrl( '' ) );
+                                wp.themes.router.navigate( wp.themes.router.baseUrl( themes.router.browsePath + sort ) );
+                                this.parent.sort( sort );
                         }
                 }, 300 )
@@ -582 +656 @@
                                 request.author = author;
                                 self.view.collection.query( request );
+                                wp.themes.utils.title( author );
                         });
                 }