wrap frontend JS into IIFE to
Exposing the liveticker functionality to a public namespace is not necessary, so it is now wrapped into an anonymous function.
This commit is contained in:
parent
b88e1c2903
commit
acf3b010f1
@ -3,180 +3,185 @@
|
|||||||
*
|
*
|
||||||
* @class
|
* @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.
|
* Initialize iveticker JS component.
|
||||||
*
|
*
|
||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
scLiveticker.init = function() {
|
var init = function() {
|
||||||
var updateNow = false;
|
var updateNow = false;
|
||||||
|
|
||||||
// Opt out if AJAX pobject not present.
|
// Opt out if AJAX pobject not present.
|
||||||
if ( 'undefined' === typeof sclivetickerAjax ) {
|
if ( 'undefined' === typeof sclivetickerAjax ) {
|
||||||
return;
|
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.
|
// Extract AJAX settings.
|
||||||
scLiveticker.widgets = [].map.call(
|
ajaxURL = sclivetickerAjax.ajax_url;
|
||||||
document.querySelectorAll( 'div.wp-widget-scliveticker-ticker.sclt-ajax' ),
|
nonce = sclivetickerAjax.nonce;
|
||||||
function( elem ) {
|
pollInterval = sclivetickerAjax.poll_interval;
|
||||||
var list = elem.querySelector( 'ul' );
|
|
||||||
var last = Number( elem.getAttribute( 'data-sclt-last' ) );
|
|
||||||
|
|
||||||
if ( ! list ) {
|
// Get ticker elements.
|
||||||
list = document.createElement( 'ul' );
|
ticker = [].map.call(
|
||||||
elem.appendChild( list );
|
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 ) {
|
if ( ! list ) {
|
||||||
updateNow = true;
|
list = document.createElement( 'ul' );
|
||||||
}
|
elem.appendChild( list );
|
||||||
|
|
||||||
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 ) {
|
if ( 0 === last ) {
|
||||||
// eslint-disable-next-line no-console
|
updateNow = true;
|
||||||
console.warn( 'Liveticker AJAX update failed, stopping automatic updates.' );
|
}
|
||||||
|
|
||||||
|
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.
|
* Update liveticker on current page via AJAX call.
|
||||||
*
|
*
|
||||||
* @param {Object} t Ticker or Widget reference.
|
* @return {void}
|
||||||
* @param {number} t.l Limit of entries to display.
|
*/
|
||||||
* @param {HTMLElement} t.e HTML element of the ticker/widget.
|
var update = function() {
|
||||||
* @param {Object} u Update entity.
|
// Extract ticker-slug, limit and timestamp of last poll.
|
||||||
* @param {string} u.h HTML code to append.
|
var updateReq = 'action=sclt_update-ticks&_ajax_nonce=' + nonce;
|
||||||
* @param {number} u.t Timetsamp of last update.
|
var i, j;
|
||||||
* @return {void}
|
var xhr = new XMLHttpRequest();
|
||||||
*/
|
|
||||||
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.
|
for ( i = 0; i < ticker.length; i++ ) {
|
||||||
if ( 0 < t.l ) {
|
updateReq = updateReq +
|
||||||
[].slice.call( t.e.getElementsByTagName( 'li' ), t.l ).forEach(
|
'&update[' + i + '][s]=' + ticker[ i ].s +
|
||||||
function( li ) {
|
'&update[' + i + '][l]=' + ticker[ i ].l +
|
||||||
li.remove();
|
'&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',
|
* Do actual update of HTML code.
|
||||||
function() {
|
*
|
||||||
scLiveticker.init(); // Trigger periodic update of livetickers.
|
* @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.
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}() );
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user