stklcode/wp-liveticker
1
0
Fork 0
Code Issues Releases 7 Activity

Refactored JavaScript without use of jQuery

Browse Source
This commit is contained in:
Stefan Kalscheuer 2018-10-16 20:51:47 +02:00
parent b8d371999d
commit c3cc5b1b84
1 changed files with 100 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
scripts/wp-liveticker2.js
View File

@ -4,93 +4,136 @@ function WPLT2() {
/**
* Initialize WP-Liveticker 2 JS component.
*
* @return void
*/
WPLT2.init = function () {
// Get ticker elements
WPLT2.ticker = jQuery("ul.wplt2-ticker-ajax").map(function () {
return {s: jQuery(this).data('wplt2Ticker'), e: this};
});
WPLT2.widgets = jQuery("ul.wplt2-widget-ajax").map(function () {
return {s: jQuery(this).data('wplt2Ticker'), e: this};
});
// Get ticker elements.
WPLT2.ticker = [].map.call(
document.querySelectorAll( 'ul.wplt2-ticker-ajax' ),
function( elem ) {
return {
s: elem.getAttribute( 'data-wplt2-ticker' ),
l: elem.getAttribute( 'data-wplt2-limit' ),
t: elem.getAttribute( 'data-wplt2-last' ),
e: elem
};
}
);
// Get widget elements.
WPLT2.widgets = [].map.call(
document.querySelectorAll( 'ul.wplt2-widget-ajax' ),
function( elem ) {
return {
w: elem.getAttribute( 'data-wplt2-ticker' ),
l: elem.getAttribute( 'data-wplt2-limit' ),
t: elem.getAttribute( 'data-wplt2-last' ),
e: elem
};
}
);
// Extract AJAX settings.
WPLT2.ajaxURL = ajax_object.ajax_url;
WPLT2.nonce = ajax_object.nonce;
WPLT2.pollInterval = ajax_object.poll_interval;
// Trigger update, if necessary.
if ((WPLT2.ticker.length > 0 || WPLT2.widgets.length) && WPLT2.pollInterval > 0) {
setTimeout(WPLT2.update, WPLT2.pollInterval);
if ( ( WPLT2.ticker.length > 0 || WPLT2.widgets.length ) && WPLT2.pollInterval > 0 ) {
setTimeout( WPLT2.update, WPLT2.pollInterval );
}
};
/**
* Update liveticker on current page via AJAX call.
*
* @return void
*/
WPLT2.update = function () {
// Extract ticker-slug, limit and timestamp of last poll.
const updateReq = jQuery.merge(
jQuery.map(WPLT2.ticker, function (e, i) {
return {s: e.s, l: jQuery(e.e).data('wplt2Limit'), t: jQuery(e.e).data('wplt2Last')};
}),
jQuery.map(WPLT2.widgets, function (e, i) {
return {w: e.s, l: jQuery(e.e).data('wplt2Limit'), t: jQuery(e.e).data('wplt2Last')};
})
);
var updateReq = 'action=wplt2_update-ticks&_ajax_nonce=' + WPLT2.nonce;
var i;
var j;
for ( i = 0; i < WPLT2.ticker.length; i++ ) {
updateReq = updateReq +
'&update[' + i + '][s]=' + WPLT2.ticker[ i ].s +
'&update[' + i + '][l]=' + WPLT2.ticker[ i ].l +
'&update[' + i + '][t]=' + WPLT2.ticker[ i ].t;
}
for ( j = 0; j < WPLT2.widgets.length; j++ ) {
updateReq = updateReq +
'&update[' + ( i + j ) + '][w]=' + WPLT2.widgets[ j ].w +
'&update[' + ( i + j ) + '][l]=' + WPLT2.widgets[ j ].l +
'&update[' + ( i + j ) + '][t]=' + WPLT2.widgets[ j ].t;
}
// Issue AJAX request.
jQuery.post(
WPLT2.ajaxURL,
{
'action' : 'wplt2_update-ticks',
'_ajax_nonce': WPLT2.nonce,
'update' : updateReq
},
function (res) {
var xhr = new XMLHttpRequest();
xhr.open( 'POST', WPLT2.ajaxURL, true );
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded;' );
xhr.onreadystatechange = function() {
if( XMLHttpRequest.DONE === this.readyState && 200 === this.status ) {
try {
const update = JSON.parse(res);
if (update) {
jQuery.each(update, function (i, u) {
jQuery.each(WPLT2.ticker, function (j, t) {
if (t.s === u.s) {
WPLT2.updateHTML(t.e, u.h, u.t);
}
});
jQuery.each(WPLT2.widgets, function (j, t) {
if (t.s === u.w) {
WPLT2.updateHTML(t.e, u.h, u.t);
}
});
});
var update = JSON.parse( this.responseText );
if ( update ) {
update.forEach(
function( u ) {
WPLT2.ticker.forEach(
function( t ) {
if ( t.s === u.s ) {
// Update last poll timestamp.
t.t = u.t;
// Update HTML markup.
WPLT2.updateHTML( t, u );
}
}
);
WPLT2.widgets.forEach( function ( t ) {
if ( t.w === u.w ) {
t.t = u.t;
WPLT2.updateHTML( t, u );
}
} );
}
);
}
// Re-trigger update.
setTimeout(WPLT2.update, WPLT2.pollInterval);
} catch (e) {
console.warn('WP-Liveticker 2 AJAX update failed, stopping automatic updates.')
setTimeout( WPLT2.update, WPLT2.pollInterval );
} catch ( e ) {
console.warn( 'WP-Liveticker 2 AJAX update failed, stopping automatic updates.' )
}
}
);
};
xhr.send( updateReq );
};
/**
* Do actual update of HTML code.
*
* @param e The element.
* @param h The new HTML code.
* @param t Timestamp of update.
* @param t Ticker or Widget reference.
* @param u Update entity.
* @return void
*/
WPLT2.updateHTML = function(e, h, t) {
WPLT2.updateHTML = function( t, u ) {
// Prepend HTML of new ticks.
jQuery(e).prepend(h);
t.e.innerHTML = u.h + t.e.innerHTML;
t.e.setAttribute( 'data-wplt2-last', u.t );
// Remove tail, if limit is set.
const l = jQuery(e).data('wplt2Limit');
if (l > 0) {
jQuery(e).find('li').slice(l).remove();
if ( t.l > 0 ) {
[].slice.call( t.e.getElementsByTagName( 'li' ), t.l ).forEach(
function( li ) {
li.remove();
}
);
}
// Update last poll timestamp.
jQuery(e).data('wplt2Last', t);
};
jQuery(document).ready(function ($) {
// Trigger periodic update of livetickers.
WPLT2.init();
});
document.addEventListener(
'DOMContentLoaded',
function() {
// Trigger periodic update of livetickers.
WPLT2.init();
}
);