WordPress.org

Making WordPress.org

Changeset 1009


Ignore:
Timestamp:
11/26/2014 07:14:45 PM (6 years ago)
Author:
obenland
Message:

WP.org Themes: Add Downloads and Developer sections.

Adds the downloads graph and developer links to the single view modal.
We still need to add the today/yesterday/last week/total download counts to the
API if we wanted to display them as well, but this is a good start.

See #745.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
5 edited

Legend:

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

    r1006 r1009  
    4040                <?php echo implode( ', ', $theme->tags ); ?>
    4141            </p>
    42         </div>å
     42        </div>
    4343    </div>
    4444
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

    r1001 r1009  
    3838    wp_enqueue_style( 'wporg-themes-style', get_stylesheet_uri() );
    3939
     40
     41    wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array(), null );
     42
    4043    wp_enqueue_script( 'theme', self_admin_url( 'js/theme.js' ), array( 'wp-backbone' ), false, 1 );
    4144    wp_enqueue_script( 'wporg-theme', get_template_directory_uri() . '/js/theme.js', array( 'theme' ), false, 1 );
     
    5558            'upload'            => __( 'Upload Theme' ),
    5659            'back'              => __( 'Back' ),
    57             'error'             => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' )
     60            'error'             => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ),
     61
     62            // Downloads Graph
     63            'date'      => __( 'Date' ),
     64            'downloads' => __( 'Downloads' ),
    5865        ),
    5966        'installedThemes' => array(),
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1006 r1009  
    11( function ( $, wp ) {
     2    google.load("visualization", "1", {packages:["corechart"]});
    23
    34    _.extend( wp.themes.view.Appearance.prototype, {
     
    3334        },
    3435
     36        render: function() {
     37            var data = this.model.toJSON();
     38            this.$el.html( this.html( data ) );
     39            // Renders active theme styles
     40            this.activeTheme();
     41            // Set up navigation events
     42            this.navigation();
     43            // Checks screenshot size
     44            this.screenshotCheck( this.$el );
     45            // Contain "tabbing" inside the overlay
     46            this.containFocus( this.$el );
     47            this.renderDownloadsGraph();
     48        },
     49
    3550        preview: function( event ) {
    3651            var self = this,
     
    163178                $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
    164179            }
     180        },
     181
     182        screenshotCheck: function( el ) {
     183            var image = new Image();
     184            image.src = el.find( '.screenshot img' ).attr( 'src' );
     185        },
     186
     187        renderDownloadsGraph: function() {
     188            var self = this;
     189
     190            $.getJSON( 'https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=' + self.model.get( 'id' ) + '&limit=230&callback=?', function( downloads ) {
     191                var data = new google.visualization.DataTable(),
     192                    count = 0,
     193                    sml;
     194
     195                data.addColumn('string', _wpThemeSettings.l10n.date);
     196                data.addColumn('number', _wpThemeSettings.l10n.downloads);
     197
     198                $.each(downloads, function (key, value) {
     199                    data.addRow();
     200                    data.setValue(count, 0, new Date(key).toLocaleDateString() );
     201                    data.setValue(count, 1, Number(value));
     202                    count++;
     203                });
     204
     205                sml = data.getNumberOfRows() < 225;
     206
     207                new google.visualization.ColumnChart(document.getElementById('theme-download-stats-' + self.model.get( 'id' ) )).draw(data, {
     208                    colors: ['#253578'],
     209                    legend: {
     210                        position: 'none'
     211                    },
     212                    titlePosition: 'in',
     213                    axisTitlesPosition: 'in',
     214                    chartArea: {
     215                        height: 280,
     216                        left: sml ? 30 : 0,
     217                        width: sml ? '80%' : '100%'
     218                    },
     219                    hAxis: {
     220                        textStyle: {color: 'black', fontSize: 9}
     221                    },
     222                    vAxis: {
     223                        format: '###,###',
     224                        textPosition: sml ? 'out' : 'in',
     225                        viewWindowMode: 'explicit',
     226                        viewWindow: {min: 0}
     227                    },
     228                    bar: {
     229                        groupWidth: ( data.getNumberOfRows() > 100 ) ? "100%" : null
     230                    },
     231                    height: 350
     232                });
     233            });
    165234        }
    166235    });
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r1006 r1009  
    5353}
    5454.theme-overlay .theme-wrap {
    55     right: 190px;
     55    left: 30px;
    5656    top: 3%;
    5757}
     
    6969}
    7070
     71.theme-overlay .theme-about > div {
     72    margin-bottom: 75px;
     73}
     74
     75.theme-overlay .theme-info {
     76    float: right;
     77}
    7178.theme-overlay .theme-name {
    7279    display: inline-block;
     80}
     81
     82.theme-overlay .theme-screenshots {
     83    float: none;
     84}
     85
     86.theme-overlay .theme-downloads,
     87.theme-overlay .theme-devs {
     88    width: 55%;
     89}
     90
     91.theme-overlay .theme-devs {
     92    font-size: 1.4em;
     93}
     94
     95.theme-overlay .theme-devs h5 {
     96    margin: 1em 0 0 0;
     97}
     98.theme-overlay .theme-devs li {
     99    line-height: 1.5;
    73100}
    74101
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r1006 r1009  
    88        </div>
    99        <div class="theme-about">
    10             <div class="theme-screenshots">
    11                 <# if ( data.screenshot_url ) { #>
    12                 <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
    13                 <# } else { #>
    14                 <div class="screenshot blank"></div>
    15                 <# } #>
    16             </div>
    17 
    1810            <div class="theme-info hentry">
    1911                <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
     
    4739                </p>
    4840                <# } #>
     41            </div><!-- .theme-info -->
     42
     43            <div class="theme-screenshots">
     44                <# if ( data.screenshot_url ) { #>
     45                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
     46                <# } else { #>
     47                <div class="screenshot blank"></div>
     48                <# } #>
     49            </div><!-- .theme-screenshot -->
     50
     51            <div class="theme-downloads">
     52                <h4><?php _e( 'Downloads Per Day' ); ?></h4>
     53                <div id="theme-download-stats-{{data.id}}" class="chart"></div>
     54            </div>
     55
     56            <div class="theme-devs">
     57                <h4><?php _e( 'Developers', 'wporg-themes' ); ?></h4>
     58                <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     59                <ul class="unmarked-list">
     60                    <li>
     61                        <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
     62                            <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;" />
     63                            <?php _e( 'Development Log', 'wporg' ); ?>
     64                        </a>
     65                    </li>
     66                </ul>
     67
     68                <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     69                <ul class="unmarked-list">
     70                    <li><a href='//themes.trac.wordpress.org/log/{{data.id}}/' rel='nofollow'><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     71                    <li><a href='//themes.svn.wordpress.org/{{data.id}}/' rel='nofollow'><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     72                    <li><a href='//themes.trac.wordpress.org/browser/{{data.id}}/' rel='nofollow'><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     73                </ul>
    4974            </div>
    5075        </div>
Note: See TracChangeset for help on using the changeset viewer.