199 lines
6.5 KiB
JavaScript
199 lines
6.5 KiB
JavaScript
var wpp_params = null;
|
|
var WordPressPopularPosts = (function(){
|
|
|
|
"use strict";
|
|
|
|
var noop = function(){};
|
|
var supportsShadowDOMV1 = !! HTMLElement.prototype.attachShadow;
|
|
|
|
var get = function( url, params, callback, additional_headers ){
|
|
callback = ( 'function' === typeof callback ) ? callback : noop;
|
|
ajax( "GET", url, params, callback, additional_headers );
|
|
};
|
|
|
|
var post = function( url, params, callback, additional_headers ){
|
|
callback = ( 'function' === typeof callback ) ? callback : noop;
|
|
ajax( "POST", url, params, callback, additional_headers );
|
|
};
|
|
|
|
var ajax = function( method, url, params, callback, additional_headers ){
|
|
/* Create XMLHttpRequest object and set variables */
|
|
var xhr = new XMLHttpRequest(),
|
|
target = url,
|
|
args = params,
|
|
valid_methods = ["GET", "POST"],
|
|
headers = {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
};
|
|
|
|
method = -1 != valid_methods.indexOf( method ) ? method : "GET";
|
|
|
|
/* Set request headers */
|
|
if ( 'POST' == method ) {
|
|
headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
|
}
|
|
|
|
if ( 'object' == typeof additional_headers && Object.keys(additional_headers).length ) {
|
|
headers = Object.assign({}, headers, additional_headers);
|
|
}
|
|
|
|
/* Set request method and target URL */
|
|
xhr.open( method, target + ( 'GET' == method ? '?' + args : '' ), true );
|
|
|
|
for (const key in headers) {
|
|
if ( headers.hasOwnProperty(key) ) {
|
|
xhr.setRequestHeader( key, headers[key] );
|
|
}
|
|
}
|
|
|
|
/* Hook into onreadystatechange */
|
|
xhr.onreadystatechange = function() {
|
|
if ( 4 === xhr.readyState && 200 <= xhr.status && 300 > xhr.status ) {
|
|
if ( 'function' === typeof callback ) {
|
|
callback.call( undefined, xhr.response );
|
|
}
|
|
}
|
|
};
|
|
|
|
/* Send request */
|
|
xhr.send( ( 'POST' == method ? args : null ) );
|
|
};
|
|
|
|
var theme = function(wpp_list) {
|
|
if ( supportsShadowDOMV1 ) {
|
|
let base_styles = document.createElement('style'),
|
|
dummy_list = document.createElement('ul');
|
|
|
|
dummy_list.innerHTML = '<li><a href="#"></a></li>';
|
|
wpp_list.parentNode.appendChild(dummy_list);
|
|
|
|
let dummy_list_item_styles = getComputedStyle(dummy_list.querySelector('li')),
|
|
dummy_link_item_styles = getComputedStyle(dummy_list.querySelector('li a'));
|
|
|
|
base_styles.innerHTML = '.wpp-list li {font-size: '+ dummy_list_item_styles.fontSize +'}';
|
|
base_styles.innerHTML += '.wpp-list li a {color: '+ dummy_link_item_styles.color +'}';
|
|
|
|
wpp_list.parentNode.removeChild(dummy_list);
|
|
|
|
let wpp_list_sr = wpp_list.attachShadow({mode: "open"});
|
|
|
|
wpp_list_sr.append(base_styles);
|
|
|
|
while(wpp_list.firstElementChild) {
|
|
wpp_list_sr.append(wpp_list.firstElementChild);
|
|
}
|
|
}
|
|
};
|
|
|
|
return {
|
|
get: get,
|
|
post: post,
|
|
ajax: ajax,
|
|
theme: theme
|
|
};
|
|
|
|
})();
|
|
|
|
(function(){
|
|
try {
|
|
var wpp_json = document.querySelector("script#wpp-json"),
|
|
do_request = true;
|
|
|
|
wpp_params = JSON.parse(wpp_json.textContent);
|
|
|
|
if ( wpp_params.ID ) {
|
|
if ( '1' == wpp_params.sampling_active ) {
|
|
var num = Math.floor(Math.random() * wpp_params.sampling_rate) + 1;
|
|
do_request = ( 1 === num );
|
|
}
|
|
|
|
if ( do_request ) {
|
|
WordPressPopularPosts.post(
|
|
wpp_params.ajax_url,
|
|
"_wpnonce=" + wpp_params.token + "&wpp_id=" + wpp_params.ID + "&sampling=" + wpp_params.sampling_active + "&sampling_rate=" + wpp_params.sampling_rate,
|
|
function( response ) {
|
|
wpp_params.debug&&window.console&&window.console.log&&window.console.log(JSON.parse(response));
|
|
}
|
|
);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("WPP: Couldn't read JSON data");
|
|
}
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var widget_placeholders = document.querySelectorAll('.wpp-widget-placeholder, .wpp-widget-block-placeholder'),
|
|
w = 0;
|
|
|
|
while ( w < widget_placeholders.length ) {
|
|
fetchWidget(widget_placeholders[w]);
|
|
w++;
|
|
}
|
|
|
|
var sr = document.querySelectorAll('.popular-posts-sr');
|
|
|
|
if ( sr.length ) {
|
|
for( var s = 0; s < sr.length; s++ ) {
|
|
WordPressPopularPosts.theme(sr[s]);
|
|
}
|
|
}
|
|
|
|
function fetchWidget(widget_placeholder) {
|
|
let widget_id_attr = widget_placeholder.getAttribute('data-widget-id'),
|
|
method = 'GET',
|
|
url = '',
|
|
headers = {},
|
|
params = '';
|
|
|
|
if ( widget_id_attr ) {
|
|
url = wpp_params.ajax_url + '/widget/' + widget_id_attr.split('-')[1];
|
|
params = 'is_single=' + wpp_params.ID + ( wpp_params.lang ? '&lang=' + wpp_params.lang : '' );
|
|
} else {
|
|
method = 'POST';
|
|
url = wpp_params.api_url + '/v2/widget?is_single=' + wpp_params.ID + ( wpp_params.lang ? '&lang=' + wpp_params.lang : '' );
|
|
headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
|
|
let json_tag = widget_placeholder.parentNode.querySelector('script[type="application/json"]');
|
|
|
|
if ( json_tag ) {
|
|
let args = JSON.parse(json_tag.textContent);
|
|
params = JSON.stringify(args);
|
|
}
|
|
}
|
|
|
|
WordPressPopularPosts.ajax(
|
|
method,
|
|
url,
|
|
params,
|
|
function(response) {
|
|
renderWidget(response, widget_placeholder);
|
|
},
|
|
headers
|
|
);
|
|
}
|
|
|
|
function renderWidget(response, widget_placeholder) {
|
|
widget_placeholder.insertAdjacentHTML('afterend', JSON.parse(response).widget);
|
|
|
|
let parent = widget_placeholder.parentNode,
|
|
sr = parent.querySelector('.popular-posts-sr'),
|
|
json_tag = parent.querySelector('script[type="application/json"]');
|
|
|
|
if ( json_tag )
|
|
parent.removeChild(json_tag);
|
|
|
|
parent.removeChild(widget_placeholder);
|
|
parent.classList.add('wpp-ajax');
|
|
|
|
if ( sr ) {
|
|
WordPressPopularPosts.theme(sr);
|
|
}
|
|
|
|
let event = new Event("wpp-onload", {"bubbles": true, "cancelable": false});
|
|
parent.dispatchEvent(event);
|
|
}
|
|
});
|