Implemented AJAX skeleton with configurable poll interval

Gulpfile.js

@@ -7,6 +7,7 @@ const phpunit = require('gulp-phpunit');
 const exec = require('child_process').exec;
 const phpcs = require('gulp-phpcs');
 const cleanCSS = require('gulp-clean-css');
+const minify = require('gulp-minify');
 const argv = require('yargs').argv;
 
 const config = require('./package.json');
@@ -52,7 +53,7 @@ gulp.task('test-cs', function (cb) {
 // Bundle files as required for plugin distribution.
 gulp.task('bundle', ['clean'], function () {
 	console.log('Collecting files for package dist/' + config.name + config.version + ' ...');
-	return gulp.src(['**/*.php', 'styles/*.css', '!test/**', '!vendor/**', 'README.md', 'LICENSE.md'], {base: './'})
+	return gulp.src(['**/*.php', 'styles/*.css', 'scripts/*.js', '!test/**', '!vendor/**', 'README.md', 'LICENSE.md'], {base: './'})
 		.pipe(copy('./dist/' + finalName + '/' + config.name));
 });
 
@@ -69,12 +70,33 @@ gulp.task('minify-css', function () {
 	}
 });
 
+// Minify JavaScript.
+gulp.task('minify-js', function () {
+	if (!dev) {
+		console.log('Minifying JS ...');
+		return gulp.src('./dist/' + finalName + '/' + config.name + '/scripts/**/*.js')
+			.pipe(minify({
+				ext             : {
+					source: '.js',
+					min   : '.js'
+				},
+				ignoreFiles     : ['*.min.js'],
+				noSource        : true,
+				preserveComments: 'some'
+			}))
+			.pipe(gulp.dest('./dist/' + finalName + '/' + config.name + '/scripts'));
+	} else {
+		console.log('Development flag detected, not minifying JS ...');
+	}
+});
+
+
 // Create a ZIP package of the relevant files for plugin distribution.
-gulp.task('package', ['bundle'], function () {
+gulp.task('package', ['minify-js', 'minify-css', 'bundle'], function () {
 	console.log('Building package dist/' + config.name + config.version + '.zip ...');
 	return gulp.src('./dist/' + config.name + '.' + config.version + '/**')
 		.pipe(zip(finalName + '.zip'))
 		.pipe(gulp.dest('./dist'));
 });
 
-gulp.task('default', ['clean', 'compose', 'test', 'test-cs', 'bundle', 'minify-css', 'package']);
+gulp.task('default', ['clean', 'compose', 'test', 'test-cs', 'bundle', 'minify-css', 'minify-css', 'package']);

includes/class-wpliveticker2-admin.php

@@ -77,6 +77,13 @@ class WPLiveticker2_Admin extends WPLiveticker2 {
 			'wplt2-settings-page',
 			'wplt2_settings_general' );
 
+		add_settings_field(
+			'poll_interval',
+			__( 'AJAX poll interval', 'wplt2' ),
+			array( 'WPLiveticker2_Admin', 'settings_poll_interval_field' ),
+			'wplt2-settings-page',
+			'wplt2_settings_general' );
+
 		add_settings_field(
 			'enable_css',
 			__( 'Default CSS Styles', 'wplt2' ),
@@ -131,6 +138,21 @@ class WPLiveticker2_Admin extends WPLiveticker2 {
 		echo '<p class="description">' . esc_html__( 'Disable this option to not use AJAX update. This means all liveticker widgets and shortcodes are only updated once on site load.', 'wplt2' ) . '</p>';
 	}
 
+	/**
+	 * Render AJAX poll interval field.
+	 *
+	 * @return void
+	 */
+	public static function settings_poll_interval_field() {
+		$pollInterval = self::$_options['poll_interval'];
+
+		echo '<label for="' . esc_attr( self::OPTION ) . '[poll_interval]">';
+		echo '<input type="number" name="' . esc_attr( self::OPTION ) . '[poll_interval]" value="' . esc_attr( $pollInterval ) . '"/> ';
+		esc_html_e( 'seconds', 'wplt2' );
+		echo '</label>';
+		echo '<p class="description">' . esc_html__( 'Interval (in seconds) to update ticker if AJAX is enabled.', 'wplt2' ) . '</p>';
+	}
+
 	/**
 	 * Render default style field.
 	 *
@@ -182,6 +204,13 @@ class WPLiveticker2_Admin extends WPLiveticker2 {
 	 */
 	public static function validate_settings( $input ) {
 		$defaults = self::default_options();
-		return wp_parse_args( $input, $defaults );
+		$result   = wp_parse_args( $input, $defaults );
+		foreach ( $defaults as $k => $v ) {
+			if ( is_int( $v ) ) {
+				$result[ $k ] = intval( $result[ $k ] );
+			}
+		}
+
+		return $result;
 	}
 }

includes/class-wpliveticker2.php

@@ -48,14 +48,19 @@ class WPLiveticker2 {
 	 * @return void
 	 */
 	public static function init() {
-		// Skip on autosave or AJAX.
+		// Skip on autosave.
-		if ( ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
+		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
 			return;
 		}
 
 		// Load plugin options.
 		self::update_options();
 
+		// Skip on AJAX if not enabled disabled.
+		if ( ( ! isset( self::$_options['enable_ajax'] ) || 1 !== self::$_options['enable_ajax'] ) && ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
+			return;
+		}
+
 		// Load Textdomain.
 		load_plugin_textdomain( 'wplt2', false, dirname( plugin_basename( __FILE__ ) ) . '/lang/' );
 
@@ -68,9 +73,13 @@ class WPLiveticker2 {
 		// Enqueue styles.
 		add_action( 'wp_footer', array( 'WPLiveticker2', 'enqueue_styles' ) );
 
+		// Enqueue JavaScript.
+		add_action( 'wp_footer', array( 'WPLiveticker2', 'enqueue_scripts' ) );
+
 		// Add AJAX hook if configured.
 		if ( 1 === self::$_options['enable_ajax'] ) {
 			add_action( 'wp_ajax_wplt2_update-ticks', array( 'WPLiveticker2', 'ajax_update' ) );
+			add_action( 'wp_ajax_nopriv_wplt2_update-ticks', array( 'WPLiveticker2', 'ajax_update' ) );
 		}
 
 		// Admin only actions.
@@ -167,7 +176,13 @@ class WPLiveticker2 {
 				$atts['limit'] = - 1;
 			}
 
-			$output = '<ul class="wplt2_ticker">';
+			$output = '<ul class="wplt2-ticker';
+			if ( 1 === self::$_options['enable_ajax'] ) {
+				$output .= ' wplt2-ticker-ajax" '
+				           . 'data-wplt2-ticker="' . $atts['ticker'] . '" '
+				           . 'data-wplt2-limit="' . $atts['limit'];
+			}
+			$output .= '">';
 
 			$args = array(
 				'post_type'      => 'wplt2_tick',
@@ -195,6 +210,7 @@ class WPLiveticker2 {
 
 			// Show RSS feed link, if configured.
 			if ( 1 === self::$_options['show_feed'] ) {
+				// TODO
 				$output .= '<a href="/feed/liveticker/' . esc_html( $atts['ticker'] ) . '"><img class="wplt2_rss" src="/wp-content/plugins/wp-liveticker2/images/rss.jpg" alt="RSS" /></a>';
 			}
 		}// End if().
@@ -208,10 +224,37 @@ class WPLiveticker2 {
 	public static function enqueue_styles() {
 		// Only add if shortcode is present.
 		if ( self::$shortcode_present ) {
-			wp_enqueue_style( 'wplt-css', WPLT2_BASE . 'styles/wp-liveticker2.css', '', self::VERSION, 'all' );
+			wp_enqueue_style(
+				'wplt-css',
+				WPLT2_BASE . 'styles/wp-liveticker2.css',
+				'',
+				self::VERSION, 'all'
+			);
 		}
 	}
 
+	/**
+	 * Register frontend JS.
+	 */
+	public static function enqueue_scripts() {
+		wp_enqueue_script(
+			'wplt2-js',
+			WPLT2_BASE . 'scripts/wp-liveticker2.js',
+			array( 'jquery' ),
+			self::VERSION
+		);
+
+		// Add endpoint to script.
+		wp_localize_script(
+			'wplt2-js',
+			'ajax_object',
+			array(
+				'ajax_url'      => admin_url( 'admin-ajax.php' ),
+				'poll_interval' => self::$_options['poll_interval'] * 1000,
+			)
+		);
+	}
+
 	/**
 	 * Process Ajax upload file
 	 *
@@ -219,41 +262,52 @@ class WPLiveticker2 {
 	 */
 	public static function ajax_update() {
 		// TODO: re-enable security checks.
-//		check_ajax_referer( 'wplt_ajax_get_new_ticks' );
+		//		check_ajax_referer( 'wplt2_update-ticks' );
 
-		// Timestamp for request.
+		// Extract update requests.
-		$slug = $_REQUEST['sl'];
+		if ( isset( $_POST['update'] ) && is_array( $_POST['update'] ) ) {
-		$time = $_REQUEST['ts'];
+			foreach ( $_POST['update'] as $updateReq ) {
+				if ( isset ( $updateReq['s'] ) ) {
+					$slug     = $updateReq['s'];
+					$limit    = ( isset ( $updateReq['l'] ) ) ? intval( $updateReq['l'] ) : - 1;
+					$lastPoll = ( isset ( $updateReq['t'] ) ) ? intval( $updateReq['t'] ) : 0;
 
-		if ( $slug ) {
+					// TODO: fetch updates, render and add to result.
-			// get new ticks from database
+				}
-			$args = array(
-				'post_type'      => 'wplt_tick',
-				'posts_per_page' => '-1',
-				'tax_query'      => array(
-					array(
-						'taxonomy' => 'wplt_ticker',
-						'field'    => 'slug',
-						'terms'    => $slug
-					)
-				)
-			);
-
-			$wp_query = new WP_Query( $args );
-			$output   = '';
-
-			while ( $wp_query->have_posts() ) {
-				$wp_query->the_post();
-				$output .= '<li class="wplt_tick">'
-				           . '<p><span class="wplt_tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>'
-				           . '<span class="wplt_tick_title">' . get_the_title() . '</span></p>'
-				           . '<p class="wplt_tick_content">' . get_the_content() . '</p></li>';
 			}
-
-			// Echo success response
-			echo $output;
 		}
-		die();
+
+		exit;
+
+		//		if ( $slug ) {
+		//			// get new ticks from database
+		//			$args = array(
+		//				'post_type'      => 'wplt_tick',
+		//				'posts_per_page' => '-1',
+		//				'tax_query'      => array(
+		//					array(
+		//						'taxonomy' => 'wplt_ticker',
+		//						'field'    => 'slug',
+		//						'terms'    => $slug
+		//					)
+		//				)
+		//			);
+		//
+		//			$wp_query = new WP_Query( $args );
+		//			$output   = '';
+		//
+		//			while ( $wp_query->have_posts() ) {
+		//				$wp_query->the_post();
+		//				$output .= '<li class="wplt2-tick">'
+		//				           . '<p><span class="wplt2-tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>'
+		//				           . '<span class="wplt2-tick-title">' . get_the_title() . '</span></p>'
+		//				           . '<p class="wplt2-tick-content">' . get_the_content() . '</p></li>';
+		//			}
+		//
+		//			// Echo success response
+		//			echo $output;
+		//		}
+		//		die();
 	}
 
 	/**
@@ -276,6 +330,7 @@ class WPLiveticker2 {
 	protected static function default_options() {
 		return array(
 			'enable_ajax'    => 1,
+			'poll_interval'  => 60,
 			'enable_css'     => 1,
 			'show_feed'      => 0,
 			'reset_settings' => 0,

includes/scripts.php

@@ -1,19 +0,0 @@
-<?php
-/**
- * @package Scripts
- */
-
-// Exit if accessed directly
-if ( !defined( 'ABSPATH' ) ) exit;
-
-/**
- * Enqueue scripts and styles if shortcode present
- * @return bool
- */
-function wplt_enqueue_scripts() {
-	global $post;
-	// Register frontend CSS
-	if ( has_shortcode( $post->post_content, 'liveticker') )
-		wp_enqueue_style( 'wplt-css', WPLT_PLUGIN_URL . 'includes/css/wp-liveticker2.css', '', WPLT_VERSION, 'all' );
-}
-add_action( 'wp_enqueue_scripts', 'wplt_enqueue_scripts' );

package.json

@@ -13,6 +13,7 @@
     "gulp-phpunit": "^0.24.1",
     "gulp-phpcs": "^2.1.0",
     "gulp-clean-css": "^3.9.0",
+    "gulp-minify": "^2.1.0",
     "child_process": "^1.0.2",
     "yargs": "^10.0.3"
   }

scripts/wp-liveticker2.js

@@ -0,0 +1,29 @@
+jQuery(document).ready(function ($) {
+	// Trigger periodic update of livetickers.
+	setTimeout(wplt2_update_ticker, ajax_object.poll_interval);
+});
+
+function wplt2_update_ticker() {
+	// Get ticker to update.
+	const ticker = jQuery("ul.wplt2-ticker-ajax");
+	if (ticker.length > 0) {
+		setTimeout(wplt2_update_ticker, ajax_object.poll_interval);
+		// Extract ticker-slug, limit and timestamp of last poll.
+		const updateReq = jQuery.map(ticker, function (e, i) {
+			return {s: jQuery(e).data('wplt2Ticker'), l: jQuery(e).data('wplt2Limit'), t: jQuery(e).data('wplt2Last')};
+		});
+
+		// Issue AJAX request.
+		jQuery.post(
+			ajax_object.ajax_url,
+			{
+				'action': 'wplt2_update-ticks',
+				'update': updateReq
+			},
+			function (res) {
+				// TODO: Update markup.
+				setTimeout(wplt2_update_ticker, ajax_object.poll_interval);
+			}
+		);
+	}
+}