add JavaScript i18n, fix typo and brand names (#280)

* Add JavaScript i18n to properly handle JavaScript strings, including
  plurals, variables, etc.
* Fix typo "referer"
* Fix "Statify" brand name

inc/class-statify-dashboard.php

@@ -126,26 +126,13 @@ public static function add_js(): void {
 		wp_register_script(
 			'statify_chart_js',
 			plugins_url( 'js/dashboard.min.js', STATIFY_FILE ),
-			array( 'wp-api-fetch', 'chartist_tooltip_js' ),
+			array( 'wp-api-fetch', 'chartist_tooltip_js', 'wp-i18n' ),
 			self::$_plugin_version,
 			true
 		);
 
-		// Localize strings.
-		wp_localize_script(
-			'statify_chart_js',
-			'statifyDashboard',
-			array(
-				'i18n'  => array(
-					'error'        => esc_html__( 'Error loading data.', 'statify' ),
-					'nodata'       => esc_html__( 'No data available.', 'statify' ),
-					'pageview'     => esc_html__( 'Pageview', 'statify' ),
-					'pageviews'    => esc_html__( 'Pageviews', 'statify' ),
-					'since'        => esc_html__( 'since', 'statify' ),
-					'today'        => esc_html__( 'today', 'statify' ),
-				),
-			)
-		);
+		// Sets translated strings for the script.
+		wp_set_script_translations( 'statify_chart_js', 'statify' );
 	}
 
 

inc/class-statify-settings.php

@@ -91,7 +91,7 @@ public static function register_settings(): void {
 		);
 		add_settings_field(
 			'statify-show-widget-roles',
-			__( 'Which user role(s) should see the statify dashboard widget?', 'statify' ),
+			__( 'Which user role(s) should see the Statify dashboard widget?', 'statify' ),
 			array( __CLASS__, 'options_show_widget_roles' ),
 			'statify',
 			'statify-dashboard'

js/dashboard.js

@@ -53,7 +53,9 @@
 			.catch(() => {
 				// Failed to load.
 				chartElem.innerHTML =
-					'<p>' + statifyDashboard.i18n.error + '</p>';
+					'<p>' +
+					wp.i18n.__('Error loading data.', 'statify') +
+					'</p>';
 			});
 	}
 
@@ -72,7 +74,8 @@
 		let fullWidth = true;
 		let pointRadius = 4;
 		if (labels.length === 0) {
-			root.innerHTML = '<p>' + statifyDashboard.i18n.nodata + '</p>';
+			root.innerHTML =
+				'<p>' + wp.i18n.__('No data available.', 'statify') + '</p>';
 			return;
 		} else if (root.clientWidth < labels.length * 4) {
 			// Make chart scrollable, if 2px points are overlapping.
@@ -137,12 +140,16 @@
 						cx: [d.x],
 						cy: [d.y],
 						r: [pointRadius],
-						'ct:value':
-							d.value.y +
-							' ' +
-							(d.value.y > 1
-								? statifyDashboard.i18n.pageviews
-								: statifyDashboard.i18n.pageview),
+						'ct:value': wp.i18n.sprintf(
+							/* translators: %s: Number of page views. */
+							wp.i18n._n(
+								'%s Page view',
+								'%s Page views',
+								d.value.y,
+								'statify'
+							),
+							d.value.y
+						),
 						'ct:meta': labels[d.index],
 					},
 					'ct-point'
@@ -201,7 +208,7 @@
 			data.today +
 			'</td>' +
 			'<td class="t">' +
-			statifyDashboard.i18n.today +
+			wp.i18n.__('today', 'statify') +
 			'</td>';
 		if (rows.length > 0) {
 			table.replaceChild(row, rows[0]);
@@ -214,9 +221,11 @@
 			data.alltime +
 			'</td>' +
 			'<td class="t">' +
-			statifyDashboard.i18n.since +
-			' ' +
-			data.since +
+			wp.i18n.sprintf(
+				/* translators: %s: Date. */
+				wp.i18n.__('since %s', 'statify'),
+				data.since
+			) +
 			'</td>';
 		if (rows.length > 1) {
 			table.replaceChild(row, rows[1]);
@@ -228,8 +237,8 @@
 		}
 	}
 
-	// Abort if config or target element is not present.
-	if (typeof statifyDashboard !== 'undefined' && chartElem) {
+	// Abort if target element is not present.
+	if (chartElem) {
 		// Bind update function to "refresh" button.
 		if (refreshBtn) {
 			refreshBtn.addEventListener('click', (evt) => {

views/widget-front.php

@@ -21,7 +21,7 @@ class_exists( 'Statify' ) || exit;
 <?php if ( $limit > 0 ) : ?>
 
 	<div class="table referrer">
-		<p class="sub"><?php esc_html_e( 'Top referers', 'statify' ); ?></p>
+		<p class="sub"><?php esc_html_e( 'Top referrers', 'statify' ); ?></p>
 		<table>
 			<tbody>
 				<?php for ( $i = 0; $i < $limit; $i++ ) { ?>