Changeset 1009

Timestamp:

11/26/2014 07:14:45 PM (10 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:

• content-single.php (modified) (1 diff)
• functions.php (modified) (2 diffs)
• js/theme.js (modified) (3 diffs)
• style.css (modified) (2 diffs)
• view-templates/theme-single.php (modified) (2 diffs)

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

@@ -40 +40 @@
                 <?php echo implode( ', ', $theme->tags ); ?>
             </p>
-        </div>å
+        </div>
     </div>
 

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

@@ -38 +38 @@
     wp_enqueue_style( 'wporg-themes-style', get_stylesheet_uri() );
 
+
+    wp_enqueue_script( 'google-jsapi', '//www.google.com/jsapi', array(), null );
+
     wp_enqueue_script( 'theme', self_admin_url( 'js/theme.js' ), array( 'wp-backbone' ), false, 1 );
     wp_enqueue_script( 'wporg-theme', get_template_directory_uri() . '/js/theme.js', array( 'theme' ), false, 1 );
@@ -55 +58 @@
             'upload'            => __( 'Upload Theme' ),
             'back'              => __( 'Back' ),
-            '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>.' )
+            '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>.' ),
+
+            // Downloads Graph
+            'date'      => __( 'Date' ),
+            'downloads' => __( 'Downloads' ),
         ),
         'installedThemes' => array(),

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"]});
 
     _.extend( wp.themes.view.Appearance.prototype, {
@@ -33 +34 @@
         },
 
+        render: function() {
+            var data = this.model.toJSON();
+            this.$el.html( this.html( data ) );
+            // Renders active theme styles
+            this.activeTheme();
+            // Set up navigation events
+            this.navigation();
+            // Checks screenshot size
+            this.screenshotCheck( this.$el );
+            // Contain "tabbing" inside the overlay
+            this.containFocus( this.$el );
+            this.renderDownloadsGraph();
+        },
+
         preview: function( event ) {
             var self = this,
@@ -163 +178 @@
                 $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
             }
+        },
+
+        screenshotCheck: function( el ) {
+            var image = new Image();
+            image.src = el.find( '.screenshot img' ).attr( 'src' );
+        },
+
+        renderDownloadsGraph: function() {
+            var self = this;
+
+            $.getJSON( 'https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=' + self.model.get( 'id' ) + '&limit=230&callback=?', function( downloads ) {
+                var data = new google.visualization.DataTable(),
+                    count = 0,
+                    sml;
+
+                data.addColumn('string', _wpThemeSettings.l10n.date);
+                data.addColumn('number', _wpThemeSettings.l10n.downloads);
+
+                $.each(downloads, function (key, value) {
+                    data.addRow();
+                    data.setValue(count, 0, new Date(key).toLocaleDateString() );
+                    data.setValue(count, 1, Number(value));
+                    count++;
+                });
+
+                sml = data.getNumberOfRows() < 225;
+
+                new google.visualization.ColumnChart(document.getElementById('theme-download-stats-' + self.model.get( 'id' ) )).draw(data, {
+                    colors: ['#253578'],
+                    legend: {
+                        position: 'none'
+                    },
+                    titlePosition: 'in',
+                    axisTitlesPosition: 'in',
+                    chartArea: {
+                        height: 280,
+                        left: sml ? 30 : 0,
+                        width: sml ? '80%' : '100%'
+                    },
+                    hAxis: {
+                        textStyle: {color: 'black', fontSize: 9}
+                    },
+                    vAxis: {
+                        format: '###,###',
+                        textPosition: sml ? 'out' : 'in',
+                        viewWindowMode: 'explicit',
+                        viewWindow: {min: 0}
+                    },
+                    bar: {
+                        groupWidth: ( data.getNumberOfRows() > 100 ) ? "100%" : null
+                    },
+                    height: 350
+                });
+            });
         }
     });

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

@@ -53 +53 @@
 }
 .theme-overlay .theme-wrap {
-    right: 190px;
+    left: 30px;
     top: 3%;
 }
@@ -69 +69 @@
 }
 
+.theme-overlay .theme-about > div {
+    margin-bottom: 75px;
+}
+
+.theme-overlay .theme-info {
+    float: right;
+}
 .theme-overlay .theme-name {
     display: inline-block;
+}
+
+.theme-overlay .theme-screenshots {
+    float: none;
+}
+
+.theme-overlay .theme-downloads,
+.theme-overlay .theme-devs {
+    width: 55%;
+}
+
+.theme-overlay .theme-devs {
+    font-size: 1.4em;
+}
+
+.theme-overlay .theme-devs h5 {
+    margin: 1em 0 0 0;
+}
+.theme-overlay .theme-devs li {
+    line-height: 1.5;
 }
 

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

@@ -8 +8 @@
         </div>
         <div class="theme-about">
-            <div class="theme-screenshots">
-                <# if ( data.screenshot_url ) { #>
-                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
-                <# } else { #>
-                <div class="screenshot blank"></div>
-                <# } #>
-            </div>
-
             <div class="theme-info hentry">
                 <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
@@ -47 +39 @@
                 </p>
                 <# } #>
+            </div><!-- .theme-info -->
+
+            <div class="theme-screenshots">
+                <# if ( data.screenshot_url ) { #>
+                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
+                <# } else { #>
+                <div class="screenshot blank"></div>
+                <# } #>
+            </div><!-- .theme-screenshot -->
+
+            <div class="theme-downloads">
+                <h4><?php _e( 'Downloads Per Day' ); ?></h4>
+                <div id="theme-download-stats-{{data.id}}" class="chart"></div>
+            </div>
+
+            <div class="theme-devs">
+                <h4><?php _e( 'Developers', 'wporg-themes' ); ?></h4>
+                <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
+                <ul class="unmarked-list">
+                    <li>
+                        <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
+                            <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;" />
+                            <?php _e( 'Development Log', 'wporg' ); ?>
+                        </a>
+                    </li>
+                </ul>
+
+                <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
+                <ul class="unmarked-list">
+                    <li><a href='//themes.trac.wordpress.org/log/{{data.id}}/' rel='nofollow'><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
+                    <li><a href='//themes.svn.wordpress.org/{{data.id}}/' rel='nofollow'><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
+                    <li><a href='//themes.trac.wordpress.org/browser/{{data.id}}/' rel='nofollow'><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
+                </ul>
             </div>
         </div>