Script crashes with custom validate function
baseten opened this issue · 2 comments
baseten commented
When using a custom validate function and the polyfill (either in IE10 / IE11 or forcing polyfill to true), if some use tags return false from the validate function, then the for loop inside the oninterval
function will never complete. This can be fixed by adding another else statement to increase the index:
function oninterval() {
// while the index exists in the live <use> collection
for (// get the cached <use> index
var index = 0; index < uses.length; ) {
// get the current <use>
var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent);
if (svg) {
var src = use.getAttribute("xlink:href") || use.getAttribute("href");
if (polyfill && (!opts.validate || opts.validate(src, svg, use))) {
// remove the <use> element
parent.removeChild(use);
// parse the src and get the url and id
var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#");
// if the link is external
if (url.length) {
// get the cached xhr request
var xhr = requests[url];
// ensure the xhr request exists
xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
xhr._embeds.push({
parent: parent,
svg: svg,
id: id
}), // prepare the xhr ready state change event
loadreadystatechange(xhr);
} else {
// embed the local id into the svg
embed(parent, document.getElementById(id));
}
}
else {
// new index increment
++index;
}
} else {
// increase the index when the previous value was not "valid"
++index;
}
}
// continue the interval
requestAnimationFrame(oninterval, 67);
}
BenDTU commented
Can confirm the above fix works, but also means that svg4everybody is constantly polling for uses that might need to be validated.
timeiscoffee commented
#141 merged