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