Changeset 5428

Timestamp:

04/29/2017 02:34:10 PM (9 years ago)

Author:

ocean90

Message:

Plugin Directory: Use the new library loader for Google Charts.

Prevents a warning in Chrome about the use of document.write, see ​https://www.chromestatus.com/feature/5718547946799104.

Location:

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

Files:

• functions.php (modified) (1 diff)
• js/stats.js (modified) (2 diffs)

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

@@ -77 +77 @@
 
         if ( get_query_var( 'plugin_advanced' ) ) {
-                wp_enqueue_script( 'google-jsapi', 'https://www.google.com/jsapi', array(), false, true );
-                wp_enqueue_script( 'wporg-plugins-stats', get_template_directory_uri() . '/js/stats.js', array( 'jquery', 'google-jsapi' ), '20170328', true );
+                wp_enqueue_script( 'google-charts-loader', 'https://www.gstatic.com/charts/loader.js', array(), false, true );
+                wp_enqueue_script( 'wporg-plugins-stats', get_template_directory_uri() . '/js/stats.js', array( 'jquery', 'google-charts-loader' ), '20170328', true );
 
                 wp_localize_script( 'wporg-plugins-stats', 'pluginStats', array(

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

@@ -1 +1 @@
 /* globals google:object */
-google.load( 'visualization', '1', { packages: ['corechart'] } );
+google.charts.load( 'current', {
+        packages: [ 'corechart' ]
+});
 
 ( function( $, settings ) {
         $( function () {
                 $.getJSON('https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=' + settings.slug + '&limit=267&callback=?', function( downloads ) {
-                        var data = new google.visualization.DataTable(),
-                                count = 0,
-                                sml;
+                        google.charts.setOnLoadCallback( function() {
+                                var data = new google.visualization.DataTable(),
+                                        count = 0,
+                                        sml;
 
-                        data.addColumn( 'date', settings.l10n.date );
-                        data.addColumn( 'number', settings.l10n.downloads );
+                                data.addColumn( 'date', settings.l10n.date );
+                                data.addColumn( 'number', settings.l10n.downloads );
 
-                        $.each( downloads, function( key, value ) {
-                                data.addRow();
-                                data.setValue( count, 0, new Date( key ) );
-                                data.setValue( count, 1, Number( value ) );
-                                count++;
-                        } );
+                                $.each( downloads, function( key, value ) {
+                                        data.addRow();
+                                        data.setValue( count, 0, new Date( key ) );
+                                        data.setValue( count, 1, Number( value ) );
+                                        count++;
+                                } );
 
-                        sml = data.getNumberOfRows() < 225;
+                                sml = data.getNumberOfRows() < 225;
 
-                        new google.visualization.LineChart( document.getElementById( 'plugin-download-stats' ) ).draw( data, {
-                                colors: ['#253578'],
-                                legend: { position: 'none' },
-                                titlePosition: 'in',
-                                axisTitlesPosition: 'in',
-                                chartArea: {
-                                        height: 280,
-                                        left: ( sml ? 50 : 0 ),
-                                        width: ( sml ? 482 : '100%' )
-                                },
-                                hAxis: {
-                                        textStyle: { color: 'black', fontSize: 9 },
-                                        format: 'MMM y'
-                                },
-                                vAxis: {
-                                        format: '###,###',
-                                        textPosition: ( sml ? 'out' : 'in' ),
-                                        viewWindowMode: 'explicit',
-                                        viewWindow: { min: 0 }
-                                },
-                                bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
-                                height: 350,
-                                width: 532,
-                                curveType: 'function'
+                                new google.visualization.LineChart( document.getElementById( 'plugin-download-stats' ) ).draw( data, {
+                                        colors: ['#253578'],
+                                        legend: { position: 'none' },
+                                        titlePosition: 'in',
+                                        axisTitlesPosition: 'in',
+                                        chartArea: {
+                                                height: 280,
+                                                left: ( sml ? 50 : 0 ),
+                                                width: ( sml ? 482 : '100%' )
+                                        },
+                                        hAxis: {
+                                                textStyle: { color: 'black', fontSize: 9 },
+                                                format: 'MMM y'
+                                        },
+                                        vAxis: {
+                                                format: '###,###',
+                                                textPosition: ( sml ? 'out' : 'in' ),
+                                                viewWindowMode: 'explicit',
+                                                viewWindow: { min: 0 }
+                                        },
+                                        bar: { groupWidth: ( data.getNumberOfRows() > 100 ? '100%' : null ) },
+                                        height: 350,
+                                        width: 532,
+                                        curveType: 'function'
+                                } );
                         } );
                 } );
@@ -72 +76 @@
                         }
 
-                        var barHeaders  = [ '' ],
-                                barValues   = [ '' ],
-                                versionList = [],
-                                index       = 0,
-                                data, formatter;
+                        google.charts.setOnLoadCallback( function() {
+                                var barHeaders  = [ '' ],
+                                        barValues   = [ '' ],
+                                        versionList = [],
+                                        index       = 0,
+                                        data, formatter;
 
-                        // Gather and sort the list of versions.
-                        $.each( versions, function( version ) {
-                                versionList.push( version );
-                        } );
+                                // Gather and sort the list of versions.
+                                $.each( versions, function( version ) {
+                                        versionList.push( version );
+                                } );
 
-                        // Sort the version list by version.
-                        versionList.sort( function( a, b ) {
-                                a = a.split( '.' );
-                                b = b.split( '.' );
-                                return ( a[0] !== b[0] ) ? a[0]-b[0] : a[1]-b[1];
-                        } );
+                                // Sort the version list by version.
+                                versionList.sort( function( a, b ) {
+                                        a = a.split( '.' );
+                                        b = b.split( '.' );
+                                        return ( a[0] !== b[0] ) ? a[0]-b[0] : a[1]-b[1];
+                                } );
 
-                        // Move 'other' versions to the beginning.
-                        if ( 'other' === versionList[ versionList.length - 1 ] ) {
-                                versionList.unshift( versionList.pop() );
-                        }
+                                // Move 'other' versions to the beginning.
+                                if ( 'other' === versionList[ versionList.length - 1 ] ) {
+                                        versionList.unshift( versionList.pop() );
+                                }
 
-                        // Add all the versions
-                        versionList.forEach( function( version ) {
-                                barHeaders.push( version );
-                                barValues.push( versions[ version ] );
-                        } );
+                                // Add all the versions
+                                versionList.forEach( function( version ) {
+                                        barHeaders.push( version );
+                                        barValues.push( versions[ version ] );
+                                } );
 
-                        data = google.visualization.arrayToDataTable([
-                                barHeaders,
-                                barValues
-                        ]);
+                                data = google.visualization.arrayToDataTable([
+                                        barHeaders,
+                                        barValues
+                                ]);
 
-                        // Format it as percentages
-                        formatter = new google.visualization.NumberFormat( {
-                                fractionDigits: 1,
-                                suffix: '%'
-                        } );
+                                // Format it as percentages
+                                formatter = new google.visualization.NumberFormat( {
+                                        fractionDigits: 1,
+                                        suffix: '%'
+                                } );
 
-                        $.each( barValues, function( value ) {
-                                if ( barValues[ value ] ) {
-                                        formatter.format( data, ++index );
-                                }
-                        } );
+                                $.each( barValues, function( value ) {
+                                        if ( barValues[ value ] ) {
+                                                formatter.format( data, ++index );
+                                        }
+                                } );
 
-                        new google.visualization.BarChart( document.getElementById( 'plugin-version-stats' ) ).draw( data, {
-                                legend: {
-                                        position: 'bottom'
-                                },
-                                chartArea: {
-                                        left: '0',
-                                        width: '100%',
-                                        height: '80%',
-                                        top: '10%'
-                                },
-                                hAxis: {
-                                        gridlines: {
-                                                color: 'transparent'
-                                        }
-                                },
-                                isStacked: true
+                                new google.visualization.BarChart( document.getElementById( 'plugin-version-stats' ) ).draw( data, {
+                                        legend: {
+                                                position: 'bottom'
+                                        },
+                                        chartArea: {
+                                                left: '0',
+                                                width: '100%',
+                                                height: '80%',
+                                                top: '10%'
+                                        },
+                                        hAxis: {
+                                                gridlines: {
+                                                        color: 'transparent'
+                                                }
+                                        },
+                                        isStacked: true
+                                } );
                         } );
                 } );