<div id="responsive-embed-budget_by_dollar"></div>
<script type=text/javascript>
(function(jQuery) {
if (typeof jQuery !== 'undefined' && typeof jQuery.getScript === 'function') {
// add randomness to id to support for multiple graphic instances in one story
var el = document.getElementById("responsive-embed-budget_by_dollar");
el.id = el.id + "-" + Math.random().toString(36).substr(2,5);
jQuery.getScript("//pym.nprapps.org/pym.v1.min.js").done(function () {
jQuery(function () { // Wait for page load
var pymParent = new pym.Parent(
el.id,
'http://f.benlk.com/graphics/budget_by_dollar/child.html',
{}
);
jQuery.getScript("//carebot.nprapps.org/carebot-tracker.v0.min.js").done(function () {
var tracker = new CarebotTracker.VisibilityTracker(el.id, function(result) {
// Ignore Carebot events to empty embeds, keeps listening after unloading the page
if (pymParent.el.getElementsByTagName('iframe').length !== 0) {
pymParent.sendMessage('on-screen', result.bucket);
}
});
// Check if there is already an scroll tracker somewhere on the page
if (!document.querySelector("[data-carebot-scroll]")) {
pymParent.el.setAttribute("data-carebot-scroll", "");
var scrollTracker = new CarebotTracker.ScrollTracker('storytext', function(percent, seconds) {
// Ignore Carebot events to empty embeds, keeps listening after unloading the page
if (pymParent.el.getElementsByTagName('iframe').length !== 0) {
pymParent.sendMessage('scroll-depth', JSON.stringify({percent: percent,seconds: seconds}));
}
});
}
});
});
});
} else {
console.error('could not load graphic: jQuery is not on the page.');
}
})(window.jQuery);
</script>
Do we want this plugin to handle that? Do we want to make a different plugin, supporting the same shortcode, that does a different type of initialization?