Changeset 1209

Timestamp:

01/30/2015 10:28:07 PM (8 years ago)

Author:

obenland

Message:

WP.org Themes: Designate More Info as a link to the theme.

This brings the view en par with its PHP implementation.
More importantly, it enables users to right-click the theme
to open it in a new tab.

See ​http://make.wordpress.org/meta/2015/01/23/theme-directory-mockups/
See #745.

Location:

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

Files:

• js/theme.js (modified) (2 diffs)
• view-templates/theme.php (modified) (1 diff)

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

@@ -19 +19 @@
             'touchmove': 'preventExpand'
         },
+
+        render: function() {
+            var data = this.model.toJSON();
+
+            data.permalink = wp.themes.router.baseUrl( data.slug );
+
+            // Render themes using the html template
+            this.$el.html( this.html( data ) ).attr({
+                tabindex: 0,
+                'aria-describedby' : data.id + '-action ' + data.id + '-name'
+            });
+        },
+
+        // Single theme overlay screen
+        // It's shown when clicking a theme
+        expand: function( event ) {
+            var self = this;
+
+            event = event || window.event;
+
+            // 'enter' and 'space' keys expand the details view when a theme is :focused
+            if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                return;
+            }
+
+            // Bail if the user scrolled on a touch device
+            if ( this.touchDrag === true ) {
+                return this.touchDrag = false;
+            }
+
+            // Prevent the modal from showing when the user clicks
+            // one of the direct action buttons
+            if ( $( event.target ).is( '.theme-actions a' ) ) {
+                return;
+            }
+
+            // Set focused theme to current element
+            themes.focusedTheme = this.$el;
+
+            this.trigger( 'theme:expand', self.model.cid );
+            event.preventDefault();
+        }
     });
 
@@ -41 +83 @@
             data.is_outdated = updated.setYear(updated.getYear() + 1902).valueOf() < new Date().valueOf();
 
-            // Make tags clickable and seprated by a comma.
+            // Make tags click-able and separated by a comma.
             data.tags = _.map( data.tags, function( tag ) {
-                return '<a href="'+wp.themes.data.settings.adminUrl+'tag/'+tag+'/">'+tag+'</a>';
+                return '<a href="' + wp.themes.router.baseUrl( 'tag/' + tag ) + '">' + tag + '</a>';
             }).join( ', ' );
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme.php

@@ -7 +7 @@
     <div class="theme-screenshot blank"></div>
     <# } #>
-    <span class="more-details "><?php _ex( 'More Info', 'theme' ); ?></span>
+    <a class="more-details url" href="{{{ data.permalink }}}" rel="bookmark"><?php _ex( 'More Info', 'theme' ); ?></a>
     <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author }}</span>' ); ?></div>
     <h3 class="theme-name entry-title">{{ data.name }}</h3>