wp-liveticker/scripts/liveticker.js

/**
 * Contructor of the scLiveticker object.
 *
 * @class
 */
function scLiveticker() {
}

/**
 * Initialize iveticker JS component.
 *
 * @return {void}
 */
scLiveticker.init = function() {
	var updateNow = false;

	// Opt out if AJAX pobject not present.
	if ( 'undefined' === typeof sclivetickerAjax ) {
		return;
	}

	// Extract AJAX settings.
	scLiveticker.ajaxURL = sclivetickerAjax.ajax_url;
	scLiveticker.nonce = sclivetickerAjax.nonce;
	scLiveticker.pollInterval = sclivetickerAjax.poll_interval;

	// Get ticker elements.
	scLiveticker.ticker = [].map.call(
		document.querySelectorAll( 'div.wp-block-scliveticker-ticker.sclt-ajax' ),
		function( elem ) {
			var list = elem.querySelector( 'ul' );
			var last = Number( elem.getAttribute( 'data-sclt-last' ) );

			if ( ! list ) {
				list = document.createElement( 'ul' );
				elem.appendChild( list );
			}

			if ( 0 === last ) {
				updateNow = true;
			}

			return {
				s: elem.getAttribute( 'data-sclt-ticker' ),
				l: elem.getAttribute( 'data-sclt-limit' ),
				t: last,
				e: list,
			};
		}
	);

	// Get widget elements.
	scLiveticker.widgets = [].map.call(
		document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ),
		function( elem ) {
			var list = elem.querySelector( 'ul' );
			var last = Number( elem.getAttribute( 'data-sclt-last' ) );

			if ( ! list ) {
				list = document.createElement( 'ul' );
				elem.appendChild( list );
			}

			if ( 0 === last ) {
				updateNow = true;
			}

			return {
				w: elem.getAttribute( 'data-sclt-ticker' ),
				l: elem.getAttribute( 'data-sclt-limit' ),
				t: last,
				e: list,
			};
		}
	);

	// Trigger update, if necessary.
	if ( ( 0 < scLiveticker.ticker.length || scLiveticker.widgets.length ) && 0 < scLiveticker.pollInterval ) {
		if ( updateNow ) {
			scLiveticker.update();
		} else {
			setTimeout( scLiveticker.update, scLiveticker.pollInterval );
		}
	}
};

/**
 * Update liveticker on current page via AJAX call.
 *
 * @return {void}
 */
scLiveticker.update = function() {
	// Extract ticker-slug, limit and timestamp of last poll.
	var updateReq = 'action=sclt_update-ticks&_ajax_nonce=' + scLiveticker.nonce;
	var i, j;
	var xhr = new XMLHttpRequest();

	for ( i = 0; i < scLiveticker.ticker.length; i++ ) {
		updateReq = updateReq +
			'&update[' + i + '][s]=' + scLiveticker.ticker[ i ].s +
			'&update[' + i + '][l]=' + scLiveticker.ticker[ i ].l +
			'&update[' + i + '][t]=' + scLiveticker.ticker[ i ].t;
	}
	for ( j = 0; j < scLiveticker.widgets.length; j++ ) {
		updateReq = updateReq +
			'&update[' + ( i + j ) + '][w]=' + scLiveticker.widgets[ j ].w +
			'&update[' + ( i + j ) + '][l]=' + scLiveticker.widgets[ j ].l +
			'&update[' + ( i + j ) + '][t]=' + scLiveticker.widgets[ j ].t;
	}

	// Issue AJAX request.
	xhr.open( 'POST', scLiveticker.ajaxURL, true );
	xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded;' );
	xhr.onreadystatechange = function() {
		var update;
		if ( XMLHttpRequest.DONE === this.readyState && 200 === this.status ) {
			try {
				update = JSON.parse( this.responseText );
				if ( update ) {
					update.forEach(
						function( u ) {
							scLiveticker.ticker.forEach(
								function( t ) {
									if ( t.s === u.s ) {
										t.t = u.t;					// Update last poll timestamp.
										scLiveticker.updateHTML( t, u );	// Update HTML markup.
									}
								}
							);
							scLiveticker.widgets.forEach(
								function( t ) {
									if ( t.w === u.w ) {
										t.t = u.t;
										scLiveticker.updateHTML( t, u );
									}
								}
							);
						}
					);
				}
				setTimeout( scLiveticker.update, scLiveticker.pollInterval );		// Re-trigger update.
			} catch ( e ) {
				// eslint-disable-next-line no-console
				console.warn( 'Liveticker AJAX update failed, stopping automatic updates.' );
			}
		}
	};
	xhr.send( updateReq );
};

/**
 * Do actual update of HTML code.
 *
 * @param {Object}      t   Ticker or Widget reference.
 * @param {number}      t.l Limit of entries to display.
 * @param {HTMLElement} t.e HTML element of the ticker/widget.
 * @param {Object}      u   Update entity.
 * @param {string}      u.h HTML code to append.
 * @param {number}      u.t Timetsamp of last update.
 * @return {void}
 */
scLiveticker.updateHTML = function( t, u ) {
	// Prepend HTML of new ticks.
	t.e.innerHTML = u.h + t.e.innerHTML;
	t.e.parentNode.setAttribute( 'data-sclt-last', u.t );

	// Remove tail, if limit is set.
	if ( 0 < t.l ) {
		[].slice.call( t.e.getElementsByTagName( 'li' ), t.l ).forEach(
			function( li ) {
				li.remove();
			}
		);
	}
};

document.addEventListener(
	'DOMContentLoaded',
	function() {
		scLiveticker.init();	// Trigger periodic update of livetickers.
	}
);