Changeset 1006

Timestamp:

11/25/2014 08:49:42 PM (9 years ago)

Author:

obenland

Message:

WP.org Themes: Make theme previews work.

• Consolidates data handling for index and single.
• Makes Previews play nicely with Modals.
• Streamlines some UI aspects between Previews and Modals.

Location:

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

Files:

• content-single.php (modified) (3 diffs)
• content.php (modified) (1 diff)
• header.php (modified) (1 diff)
• index.php (modified) (4 diffs)
• js/theme.js (modified) (1 diff)
• single.php (deleted)
• style.css (modified) (6 diffs)
• theme.js (deleted)
• view-templates/theme-preview.php (modified) (1 diff)
• view-templates/theme-single.php (modified) (4 diffs)
• view-templates/theme.php (modified) (1 diff)

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

@@ -1 @@
-<?php
-include_once ABSPATH . '/wp-admin/includes/theme.php';
-$theme = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
-?>
+<?php global $theme; ?>
 
 <div class="theme-backdrop"></div>
 <div class="theme-wrap">
     <div class="theme-header">
+        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
         <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
         <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
-        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
     </div>
     <div class="theme-about">
@@ -16 +13 @@
         </div>
 
-        <div class="theme-info">
-            <h3 class="theme-name"><?php the_title(); ?><span
-                    class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
-            </h3>
-            <h4 class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></h4>
+        <div class="theme-info hentry">
+            <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
+            <span class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
+            <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
 
-            <p class="theme-description"><?php the_content(); ?></p>
+            <p class="theme-description entry-summary"><?php the_content(); ?></p>
 
             <div class="rating rating-<?php echo round( $theme->rating, -1 ); ?>">
@@ -35 +31 @@
 
             <div class="theme-stats">
-                <div><strong><?php _e( 'Last updated:' ); ?></strong> <?php echo $theme->last_updated; ?></div>
+                <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated"><?php echo $theme->last_updated; ?></span></div>
                 <div><strong><?php _e( 'Downloads:' ); ?></strong> <?php echo $theme->downloaded; ?></div>
                 <div><a href="<?php echo esc_url( $theme->homepage ); ?>"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
             </div>
 
-                <p class="theme-tags">
-                    <span><?php _e( 'Tags:' ); ?></span>
-                    <?php echo implode( ', ', $theme->tags ); ?>
-                </p>
-        </div>
+            <p class="theme-tags">
+                <span><?php _e( 'Tags:' ); ?></span>
+                <?php echo implode( ', ', $theme->tags ); ?>
+            </p>
+        </div>å
     </div>
 

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

@@ -1 @@
-<?php global $theme; ?>
-<article class="theme">
+<?php global $theme; var_dump($theme);?>
+<article id="post-<?php echo $theme->slug; ?>" class="theme hentry">
     <div class="theme-screenshot">
         <img src="<?php echo esc_url( $theme->screenshot_url ); ?>" alt="">
     </div>
-    <a href="/<?php echo $theme->slug; ?>" class="more-details"><?php _ex( 'More Info', 'theme' ); ?></a>
-    <div class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></div>
-    <h3 class="theme-name"><?php echo $theme->name; ?></h3>
+    <a class="more-details url" href="/<?php echo $theme->slug; ?>" rel="bookmark"><?php _ex( 'More Info', 'theme' ); ?></a>
+    <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></div>
+    <h3 class="theme-name entry-title"><?php echo $theme->name; ?></h3>
 
     <div class="theme-actions">

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

@@ -256 +256 @@
 </head>
 
-<body id="wordpress-org" >
+<body id="wordpress-org" <?php body_class(); ?>>
 <div id="wporg-header">
     <div class="wrapper">

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

@@ -12 +12 @@
  */
 
+$template_part = is_single() ? 'single' : 'index';
 include ABSPATH . 'wp-admin/includes/theme.php';
-$themes = themes_api( 'query_themes', array(
-    'per_page' => 15,
-    'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' )  : 'search',
-) );
+if ( is_single() ) {
+    $themes = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
+} else {
+    $themes = themes_api( 'query_themes', array(
+        'per_page' => 15,
+        'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured',
+        'fields'   => 'tags',
+    ) );
+}
 
 get_header();
@@ -42 +48 @@
                 <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
             </div>
+
             <?php foreach ( get_theme_feature_list() as $feature_name => $features ) : ?>
             <div class="filter-group">
@@ -55 +62 @@
             </div>
             <?php endforeach; ?>
+
             <div class="filtered-by">
                 <span><?php _e( 'Filtering by:' ); ?></span>
@@ -61 +69 @@
             </div>
         </div>
+    </div><!-- .wp-filter -->
+
+    <div class="theme-browser content-filterable">
+        <div class="themes">
+            <?php
+                if ( ! is_wp_error( $themes ) ) :
+                    foreach ( $themes->themes as $theme ) :
+                        get_template_part( 'content', $template_part );
+                    endforeach;
+                endif;
+            ?>
+        </div>
     </div>
-    <div class="theme-browser content-filterable">
-        <?php
-            if ( ! is_wp_error( $themes ) ) :
-                foreach ( $themes->themes as $theme ) :
-                    get_template_part( 'content', 'index' );
-                endforeach;
-            endif;
-        ?>
-    </div>
+    <div class="theme-install-overlay"></div>
     <div class="theme-overlay"></div>
 

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

@@ -17 +17 @@
             'keyup': 'addFocus',
             'touchmove': 'preventExpand'
+        },
+    });
+
+//  wp.themes.view.Preview.prototype = wp.themes.view.Details.prototype;
+
+    _.extend( wp.themes.view.Details.prototype, {
+        events: {
+            'click': 'collapse',
+            'click .delete-theme': 'deleteTheme',
+            'click .left': 'previousTheme',
+            'click .right': 'nextTheme',
+            'click .button-secondary': 'preview',
+            'keydown .button-secondary': 'preview',
+            'touchend .button-secondary': 'preview'
+        },
+
+        preview: function( event ) {
+            var self = this,
+                current, preview;
+
+            // Bail if the user scrolled on a touch device
+            if ( this.touchDrag === true ) {
+                return this.touchDrag = false;
+            }
+
+            // Allow direct link path to installing a theme.
+            if ( $( event.target ).hasClass( 'button-primary' ) ) {
+                return;
+            }
+
+            // 'enter' and 'space' keys expand the details view when a theme is :focused
+            if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                return;
+            }
+
+            // pressing enter while focused on the buttons shouldn't open the preview
+            if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
+                return;
+            }
+
+            event.preventDefault();
+
+            event = event || window.event;
+
+            // Set focus to current theme.
+            wp.themes.focusedTheme = this.$el;
+
+            // Construct a new Preview view.
+            preview = new wp.themes.view.Preview({
+                model: this.model
+            });
+
+            // Render the view and append it.
+            preview.render();
+            this.setNavButtonsState();
+
+            // Hide previous/next navigation if there is only one theme
+            if ( this.model.collection.length === 1 ) {
+                preview.$el.addClass( 'no-navigation' );
+            } else {
+                preview.$el.removeClass( 'no-navigation' );
+            }
+
+            preview.$el.addClass( 'wp-full-overlay expanded' );
+
+            // Append preview
+            $( '.theme-install-overlay' ).append( preview.el );
+
+            // Listen to our preview object
+            // for `theme:next` and `theme:previous` events.
+            this.listenTo( preview, 'theme:next', function() {
+
+                // Keep local track of current theme model.
+                current = self.model;
+
+                // If we have ventured away from current model update the current model position.
+                if ( ! _.isUndefined( self.current ) ) {
+                    current = self.current;
+                }
+
+                // Get next theme model.
+                self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
+
+                // If we have no more themes, bail.
+                if ( _.isUndefined( self.current ) ) {
+                    self.options.parent.parent.trigger( 'theme:end' );
+                    return self.current = current;
+                }
+
+                preview.model = self.current;
+
+                // Render and append.
+                preview.render();
+                this.setNavButtonsState();
+                $( '.next-theme' ).focus();
+            })
+                .listenTo( preview, 'theme:previous', function() {
+
+                    // Keep track of current theme model.
+                    current = self.model;
+
+                    // Bail early if we are at the beginning of the collection
+                    if ( self.model.collection.indexOf( self.current ) === 0 ) {
+                        return;
+                    }
+
+                    // If we have ventured away from current model update the current model position.
+                    if ( ! _.isUndefined( self.current ) ) {
+                        current = self.current;
+                    }
+
+                    // Get previous theme model.
+                    self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
+
+                    // If we have no more themes, bail.
+                    if ( _.isUndefined( self.current ) ) {
+                        return;
+                    }
+
+                    preview.model = self.current;
+
+                    // Render and append.
+                    preview.render();
+                    this.setNavButtonsState();
+                    $( '.previous-theme' ).focus();
+                });
+
+            this.listenTo( preview, 'preview:close', function() {
+                self.current = self.model;
+            });
+        },
+
+        // Handles .disabled classes for previous/next buttons in theme installer preview
+        setNavButtonsState: function() {
+            var $themeInstaller = $( '.theme-install-overlay' ),
+                current = _.isUndefined( this.current ) ? this.model : this.current;
+
+            // Disable previous at the zero position
+            if ( 0 === this.model.collection.indexOf( current ) ) {
+                $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+            }
+
+            // Disable next if the next model is undefined
+            if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
+                $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+            }
         }
     });
-
-    wp.themes.view.Preview.prototype = wp.themes.view.Details.prototype;
 
     _.extend( wp.themes.InstallerRouter.prototype, {

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

@@ -10 +10 @@
 */
 
-#themes {
-    font-family: 'Open Sans', sans-serif;
-}
 body {
     background: #f1f1f1;
@@ -57 +54 @@
 .theme-overlay .theme-wrap {
     right: 190px;
+    top: 3%;
+}
+
+.admin-bar .theme-overlay .theme-wrap {
+    top: calc(3% + 32px);
+}
+
+@media only screen and (max-width: 782px) {
+    .theme-overlay .theme-wrap {
+        bottom: 3%;
+        left: 10px;
+        right: 10px;
+    }
+}
+
+.theme-overlay .theme-name {
+    display: inline-block;
+}
+
+.theme-install-overlay iframe {
+    border: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 20;
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
 }
 
@@ -208 +231 @@
 .wp-filter .drawer-toggle:before {
     display: inline-block;
-    vertical-align: top;
+    vertical-align: sub;
     content: "\f111";
     margin: 0 5px 0 0;
@@ -214 +237 @@
     height: 16px;
     color: #777;
-    -webkit-transition: color .1s ease-in 0;
-    transition: color .1s ease-in 0;
+    -webkit-transition: color .1s ease-in;
+    transition: color .1s ease-in;
     font-family: "dashicons";
     font-size: 16px;
@@ -433 +456 @@
 }
 
-.theme-browser .button,
-.theme-overlay .button {
+.wrap .button {
     display: inline-block;
     text-decoration: none;
@@ -453 +475 @@
 }
 
-.theme-browser .button-primary,
-.theme-overlay .button-primary {
+.wrap .button-primary {
     background: #2ea2cc;
     border-color: #0074a2;

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

@@ -5 +5 @@
             <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
             <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
+            <a href="#" class="button button-primary theme-install"><?php _e( 'Download' ); ?></a>
         </div>
         <div class="wp-full-overlay-sidebar-content">

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

@@ -3 +3 @@
     <div class="theme-wrap">
         <div class="theme-header">
+            <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
             <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
             <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
-            <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
         </div>
         <div class="theme-about">
@@ -16 +16 @@
             </div>
 
-            <div class="theme-info">
-                <h3 class="theme-name">
-                    {{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span>
-                </h3>
-                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
+            <div class="theme-info hentry">
+                <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
+                <span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span>
+                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{{ data.author }}}</span>' ); ?></h4>
 
-                <p class="theme-description">{{{ data.description }}}</p>
+                <p class="theme-description entry-summary">{{{ data.description }}}</p>
 
                 <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
@@ -35 +34 @@
 
                 <div class="theme-stats">
-                    <div><strong><?php _e( 'Last updated:' ); ?></strong> {{ data.last_updated }}</div>
+                    <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated">{{ data.last_updated }}</span></div>
                     <div><strong><?php _e( 'Downloads:' ); ?></strong> {{ data.downloaded }}</div>
                     <div><a href="{{ data.homepage }}"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
@@ -44 +43 @@
                     <span><?php _e( 'Tags:' ); ?></span>
                     <# _.each( data.tags, function( tag ) { #>
-                        {{{ tag }}}
+                        <a href="">{{{ tag }}}</a>
                     <# }); #>
                 </p>

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>
-    <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
-    <h3 class="theme-name">{{ data.name }}</h3>
+    <span class="more-details "><?php _ex( 'More Info', 'theme' ); ?></span>
+    <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author }}</span>' ); ?></div>
+    <h3 class="theme-name entry-title">{{ data.name }}</h3>
 
     <div class="theme-actions">