Changeset 1296

Timestamp:

02/24/2015 04:48:58 AM (10 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 );
             });
         }