diff --git a/scripts/liveticker.js b/scripts/liveticker.js index c86c735..031c3cc 100644 --- a/scripts/liveticker.js +++ b/scripts/liveticker.js @@ -3,180 +3,185 @@ * * @class */ -function scLiveticker() { -} +( function() { + var ajaxURL = sclivetickerAjax.ajax_url; + var nonce = sclivetickerAjax.nonce; + var pollInterval = sclivetickerAjax.poll_interval; + var ticker; + var widgets; -/** - * Initialize iveticker JS component. - * - * @return {void} - */ -scLiveticker.init = function() { - var updateNow = false; + /** + * Initialize iveticker JS component. + * + * @return {void} + */ + var 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, - }; + // Opt out if AJAX pobject not present. + if ( 'undefined' === typeof sclivetickerAjax ) { + return; } - ); - // 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' ) ); + // Extract AJAX settings. + ajaxURL = sclivetickerAjax.ajax_url; + nonce = sclivetickerAjax.nonce; + pollInterval = sclivetickerAjax.poll_interval; - if ( ! list ) { - list = document.createElement( 'ul' ); - elem.appendChild( list ); - } + // Get ticker elements. + 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 ( 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 ); - } - } - ); - } - ); + if ( ! list ) { + list = document.createElement( 'ul' ); + elem.appendChild( list ); } - 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.' ); + + 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. + 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 < ticker.length || widgets.length ) && 0 < pollInterval ) { + if ( updateNow ) { + update(); + } else { + setTimeout( update, pollInterval ); } } }; - 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 ); + /** + * Update liveticker on current page via AJAX call. + * + * @return {void} + */ + var update = function() { + // Extract ticker-slug, limit and timestamp of last poll. + var updateReq = 'action=sclt_update-ticks&_ajax_nonce=' + nonce; + var i, j; + var xhr = new XMLHttpRequest(); - // Remove tail, if limit is set. - if ( 0 < t.l ) { - [].slice.call( t.e.getElementsByTagName( 'li' ), t.l ).forEach( - function( li ) { - li.remove(); + for ( i = 0; i < ticker.length; i++ ) { + updateReq = updateReq + + '&update[' + i + '][s]=' + ticker[ i ].s + + '&update[' + i + '][l]=' + ticker[ i ].l + + '&update[' + i + '][t]=' + ticker[ i ].t; + } + for ( j = 0; j < widgets.length; j++ ) { + updateReq = updateReq + + '&update[' + ( i + j ) + '][w]=' + widgets[ j ].w + + '&update[' + ( i + j ) + '][l]=' + widgets[ j ].l + + '&update[' + ( i + j ) + '][t]=' + widgets[ j ].t; + } + + // Issue AJAX request. + xhr.open( 'POST', ajaxURL, true ); + xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded;' ); + xhr.onreadystatechange = function() { + var updateResp; + if ( XMLHttpRequest.DONE === this.readyState && 200 === this.status ) { + try { + updateResp = JSON.parse( this.responseText ); + if ( updateResp ) { + updateResp.forEach( + function( u ) { + ticker.forEach( + function( t ) { + if ( t.s === u.s ) { + t.t = u.t; // Update last poll timestamp. + updateHTML( t, u ); // Update HTML markup. + } + } + ); + widgets.forEach( + function( t ) { + if ( t.w === u.w ) { + t.t = u.t; + updateHTML( t, u ); + } + } + ); + } + ); + } + setTimeout( update, pollInterval ); // Re-trigger update. + } catch ( e ) { + // eslint-disable-next-line no-console + console.warn( 'Liveticker AJAX update failed, stopping automatic updates.' ); + } } - ); - } -}; + }; + xhr.send( updateReq ); + }; -document.addEventListener( - 'DOMContentLoaded', - function() { - scLiveticker.init(); // Trigger periodic update of livetickers. - } -); + /** + * 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} + */ + var 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() { + init(); // Trigger periodic update of livetickers. + } + ); +}() );