Making WordPress.org

Changeset 1006


Ignore:
Timestamp:
11/25/2014 08:49:42 PM (10 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:
2 deleted
9 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

    r1001 r1006  
    1 <?php
    2 include_once ABSPATH . '/wp-admin/includes/theme.php';
    3 $theme = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
    4 ?>
     1<?php global $theme; ?>
    52
    63<div class="theme-backdrop"></div>
    74<div class="theme-wrap">
    85    <div class="theme-header">
     6        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    97        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    108        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    11         <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    129    </div>
    1310    <div class="theme-about">
     
    1613        </div>
    1714
    18         <div class="theme-info">
    19             <h3 class="theme-name"><?php the_title(); ?><span
    20                     class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
    21             </h3>
    22             <h4 class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></h4>
     15        <div class="theme-info hentry">
     16            <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
     17            <span class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
     18            <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
    2319
    24             <p class="theme-description"><?php the_content(); ?></p>
     20            <p class="theme-description entry-summary"><?php the_content(); ?></p>
    2521
    2622            <div class="rating rating-<?php echo round( $theme->rating, -1 ); ?>">
     
    3531
    3632            <div class="theme-stats">
    37                 <div><strong><?php _e( 'Last updated:' ); ?></strong> <?php echo $theme->last_updated; ?></div>
     33                <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated"><?php echo $theme->last_updated; ?></span></div>
    3834                <div><strong><?php _e( 'Downloads:' ); ?></strong> <?php echo $theme->downloaded; ?></div>
    3935                <div><a href="<?php echo esc_url( $theme->homepage ); ?>"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
    4036            </div>
    4137
    42                 <p class="theme-tags">
    43                     <span><?php _e( 'Tags:' ); ?></span>
    44                     <?php echo implode( ', ', $theme->tags ); ?>
    45                 </p>
    46         </div>
     38            <p class="theme-tags">
     39                <span><?php _e( 'Tags:' ); ?></span>
     40                <?php echo implode( ', ', $theme->tags ); ?>
     41            </p>
     42        </div>å
    4743    </div>
    4844
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content.php

    r1001 r1006  
    1 <?php global $theme; ?>
    2 <article class="theme">
     1<?php global $theme; var_dump($theme);?>
     2<article id="post-<?php echo $theme->slug; ?>" class="theme hentry">
    33    <div class="theme-screenshot">
    44        <img src="<?php echo esc_url( $theme->screenshot_url ); ?>" alt="">
    55    </div>
    6     <a href="/<?php echo $theme->slug; ?>" class="more-details"><?php _ex( 'More Info', 'theme' ); ?></a>
    7     <div class="theme-author"><?php printf( __( 'By %s' ), $theme->author ); ?></div>
    8     <h3 class="theme-name"><?php echo $theme->name; ?></h3>
     6    <a class="more-details url" href="/<?php echo $theme->slug; ?>" rel="bookmark"><?php _ex( 'More Info', 'theme' ); ?></a>
     7    <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></div>
     8    <h3 class="theme-name entry-title"><?php echo $theme->name; ?></h3>
    99
    1010    <div class="theme-actions">
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/header.php

    r1001 r1006  
    256256</head>
    257257
    258 <body id="wordpress-org" >
     258<body id="wordpress-org" <?php body_class(); ?>>
    259259<div id="wporg-header">
    260260    <div class="wrapper">
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php

    r1001 r1006  
    1212 */
    1313
     14$template_part = is_single() ? 'single' : 'index';
    1415include ABSPATH . 'wp-admin/includes/theme.php';
    15 $themes = themes_api( 'query_themes', array(
    16     'per_page' => 15,
    17     'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' )  : 'search',
    18 ) );
     16if ( is_single() ) {
     17    $themes = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
     18} else {
     19    $themes = themes_api( 'query_themes', array(
     20        'per_page' => 15,
     21        'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured',
     22        'fields'   => 'tags',
     23    ) );
     24}
    1925
    2026get_header();
     
    4248                <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
    4349            </div>
     50
    4451            <?php foreach ( get_theme_feature_list() as $feature_name => $features ) : ?>
    4552            <div class="filter-group">
     
    5562            </div>
    5663            <?php endforeach; ?>
     64
    5765            <div class="filtered-by">
    5866                <span><?php _e( 'Filtering by:' ); ?></span>
     
    6169            </div>
    6270        </div>
     71    </div><!-- .wp-filter -->
     72
     73    <div class="theme-browser content-filterable">
     74        <div class="themes">
     75            <?php
     76                if ( ! is_wp_error( $themes ) ) :
     77                    foreach ( $themes->themes as $theme ) :
     78                        get_template_part( 'content', $template_part );
     79                    endforeach;
     80                endif;
     81            ?>
     82        </div>
    6383    </div>
    64     <div class="theme-browser content-filterable">
    65         <?php
    66             if ( ! is_wp_error( $themes ) ) :
    67                 foreach ( $themes->themes as $theme ) :
    68                     get_template_part( 'content', 'index' );
    69                 endforeach;
    70             endif;
    71         ?>
    72     </div>
     84    <div class="theme-install-overlay"></div>
    7385    <div class="theme-overlay"></div>
    7486
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1001 r1006  
    1717            'keyup': 'addFocus',
    1818            'touchmove': 'preventExpand'
     19        },
     20    });
     21
     22//  wp.themes.view.Preview.prototype = wp.themes.view.Details.prototype;
     23
     24    _.extend( wp.themes.view.Details.prototype, {
     25        events: {
     26            'click': 'collapse',
     27            'click .delete-theme': 'deleteTheme',
     28            'click .left': 'previousTheme',
     29            'click .right': 'nextTheme',
     30            'click .button-secondary': 'preview',
     31            'keydown .button-secondary': 'preview',
     32            'touchend .button-secondary': 'preview'
     33        },
     34
     35        preview: function( event ) {
     36            var self = this,
     37                current, preview;
     38
     39            // Bail if the user scrolled on a touch device
     40            if ( this.touchDrag === true ) {
     41                return this.touchDrag = false;
     42            }
     43
     44            // Allow direct link path to installing a theme.
     45            if ( $( event.target ).hasClass( 'button-primary' ) ) {
     46                return;
     47            }
     48
     49            // 'enter' and 'space' keys expand the details view when a theme is :focused
     50            if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
     51                return;
     52            }
     53
     54            // pressing enter while focused on the buttons shouldn't open the preview
     55            if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
     56                return;
     57            }
     58
     59            event.preventDefault();
     60
     61            event = event || window.event;
     62
     63            // Set focus to current theme.
     64            wp.themes.focusedTheme = this.$el;
     65
     66            // Construct a new Preview view.
     67            preview = new wp.themes.view.Preview({
     68                model: this.model
     69            });
     70
     71            // Render the view and append it.
     72            preview.render();
     73            this.setNavButtonsState();
     74
     75            // Hide previous/next navigation if there is only one theme
     76            if ( this.model.collection.length === 1 ) {
     77                preview.$el.addClass( 'no-navigation' );
     78            } else {
     79                preview.$el.removeClass( 'no-navigation' );
     80            }
     81
     82            preview.$el.addClass( 'wp-full-overlay expanded' );
     83
     84            // Append preview
     85            $( '.theme-install-overlay' ).append( preview.el );
     86
     87            // Listen to our preview object
     88            // for `theme:next` and `theme:previous` events.
     89            this.listenTo( preview, 'theme:next', function() {
     90
     91                // Keep local track of current theme model.
     92                current = self.model;
     93
     94                // If we have ventured away from current model update the current model position.
     95                if ( ! _.isUndefined( self.current ) ) {
     96                    current = self.current;
     97                }
     98
     99                // Get next theme model.
     100                self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
     101
     102                // If we have no more themes, bail.
     103                if ( _.isUndefined( self.current ) ) {
     104                    self.options.parent.parent.trigger( 'theme:end' );
     105                    return self.current = current;
     106                }
     107
     108                preview.model = self.current;
     109
     110                // Render and append.
     111                preview.render();
     112                this.setNavButtonsState();
     113                $( '.next-theme' ).focus();
     114            })
     115                .listenTo( preview, 'theme:previous', function() {
     116
     117                    // Keep track of current theme model.
     118                    current = self.model;
     119
     120                    // Bail early if we are at the beginning of the collection
     121                    if ( self.model.collection.indexOf( self.current ) === 0 ) {
     122                        return;
     123                    }
     124
     125                    // If we have ventured away from current model update the current model position.
     126                    if ( ! _.isUndefined( self.current ) ) {
     127                        current = self.current;
     128                    }
     129
     130                    // Get previous theme model.
     131                    self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
     132
     133                    // If we have no more themes, bail.
     134                    if ( _.isUndefined( self.current ) ) {
     135                        return;
     136                    }
     137
     138                    preview.model = self.current;
     139
     140                    // Render and append.
     141                    preview.render();
     142                    this.setNavButtonsState();
     143                    $( '.previous-theme' ).focus();
     144                });
     145
     146            this.listenTo( preview, 'preview:close', function() {
     147                self.current = self.model;
     148            });
     149        },
     150
     151        // Handles .disabled classes for previous/next buttons in theme installer preview
     152        setNavButtonsState: function() {
     153            var $themeInstaller = $( '.theme-install-overlay' ),
     154                current = _.isUndefined( this.current ) ? this.model : this.current;
     155
     156            // Disable previous at the zero position
     157            if ( 0 === this.model.collection.indexOf( current ) ) {
     158                $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
     159            }
     160
     161            // Disable next if the next model is undefined
     162            if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
     163                $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
     164            }
    19165        }
    20166    });
    21 
    22     wp.themes.view.Preview.prototype = wp.themes.view.Details.prototype;
    23167
    24168    _.extend( wp.themes.InstallerRouter.prototype, {
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r1001 r1006  
    1010*/
    1111
    12 #themes {
    13     font-family: 'Open Sans', sans-serif;
    14 }
    1512body {
    1613    background: #f1f1f1;
     
    5754.theme-overlay .theme-wrap {
    5855    right: 190px;
     56    top: 3%;
     57}
     58
     59.admin-bar .theme-overlay .theme-wrap {
     60    top: calc(3% + 32px);
     61}
     62
     63@media only screen and (max-width: 782px) {
     64    .theme-overlay .theme-wrap {
     65        bottom: 3%;
     66        left: 10px;
     67        right: 10px;
     68    }
     69}
     70
     71.theme-overlay .theme-name {
     72    display: inline-block;
     73}
     74
     75.theme-install-overlay iframe {
     76    border: 0;
     77    height: 100%;
     78    width: 100%;
     79    z-index: 20;
     80    -webkit-transition: opacity 0.3s;
     81    transition: opacity 0.3s;
    5982}
    6083
     
    208231.wp-filter .drawer-toggle:before {
    209232    display: inline-block;
    210     vertical-align: top;
     233    vertical-align: sub;
    211234    content: "\f111";
    212235    margin: 0 5px 0 0;
     
    214237    height: 16px;
    215238    color: #777;
    216     -webkit-transition: color .1s ease-in 0;
    217     transition: color .1s ease-in 0;
     239    -webkit-transition: color .1s ease-in;
     240    transition: color .1s ease-in;
    218241    font-family: "dashicons";
    219242    font-size: 16px;
     
    433456}
    434457
    435 .theme-browser .button,
    436 .theme-overlay .button {
     458.wrap .button {
    437459    display: inline-block;
    438460    text-decoration: none;
     
    453475}
    454476
    455 .theme-browser .button-primary,
    456 .theme-overlay .button-primary {
     477.wrap .button-primary {
    457478    background: #2ea2cc;
    458479    border-color: #0074a2;
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-preview.php

    r1001 r1006  
    55            <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
    66            <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
     7            <a href="#" class="button button-primary theme-install"><?php _e( 'Download' ); ?></a>
    78        </div>
    89        <div class="wp-full-overlay-sidebar-content">
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r1001 r1006  
    33    <div class="theme-wrap">
    44        <div class="theme-header">
     5            <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    56            <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    67            <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    7             <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    88        </div>
    99        <div class="theme-about">
     
    1616            </div>
    1717
    18             <div class="theme-info">
    19                 <h3 class="theme-name">
    20                     {{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span>
    21                 </h3>
    22                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
     18            <div class="theme-info hentry">
     19                <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
     20                <span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span>
     21                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{{ data.author }}}</span>' ); ?></h4>
    2322
    24                 <p class="theme-description">{{{ data.description }}}</p>
     23                <p class="theme-description entry-summary">{{{ data.description }}}</p>
    2524
    2625                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     
    3534
    3635                <div class="theme-stats">
    37                     <div><strong><?php _e( 'Last updated:' ); ?></strong> {{ data.last_updated }}</div>
     36                    <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated">{{ data.last_updated }}</span></div>
    3837                    <div><strong><?php _e( 'Downloads:' ); ?></strong> {{ data.downloaded }}</div>
    3938                    <div><a href="{{ data.homepage }}"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
     
    4443                    <span><?php _e( 'Tags:' ); ?></span>
    4544                    <# _.each( data.tags, function( tag ) { #>
    46                         {{{ tag }}}
     45                        <a href="">{{{ tag }}}</a>
    4746                    <# }); #>
    4847                </p>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme.php

    r1001 r1006  
    77    <div class="theme-screenshot blank"></div>
    88    <# } #>
    9     <span class="more-details"><?php _ex( 'More Info', 'theme' ); ?></span>
    10     <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
    11     <h3 class="theme-name">{{ data.name }}</h3>
     9    <span class="more-details "><?php _ex( 'More Info', 'theme' ); ?></span>
     10    <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author }}</span>' ); ?></div>
     11    <h3 class="theme-name entry-title">{{ data.name }}</h3>
    1212
    1313    <div class="theme-actions">
Note: See TracChangeset for help on using the changeset viewer.