ember-legacy-class-transform
Version:
The default blueprint for ember-cli addons.
78 lines • 3.44 kB
JavaScript
// Patch: Adjacent text node merging fix
// Browsers: IE, Edge, Firefox w/o inspector open
// Reason: These browsers will merge adjacent text nodes. For exmaple given
// <div>Hello</div> with div.insertAdjacentHTML(' world') browsers
// with proper behavior will populate div.childNodes with two items.
// These browsers will populate it with one merged node instead.
// Fix: Add these nodes to a wrapper element, then iterate the childNodes
// of that wrapper and move the nodes to their target location. Note
// that potential SVG bugs will have been handled before this fix.
// Note that this fix must only apply to the previous text node, as
// the base implementation of `insertHTMLBefore` already handles
// following text nodes correctly.
export function domChanges(document, DOMChangesClass) {
if (!document) return DOMChangesClass;
if (!shouldApplyFix(document)) {
return DOMChangesClass;
}
return class DOMChangesWithTextNodeMergingFix extends DOMChangesClass {
constructor(document) {
super(document);
this.uselessComment = document.createComment('');
}
insertHTMLBefore(parent, nextSibling, html) {
if (html === null) {
return super.insertHTMLBefore(parent, nextSibling, html);
}
let didSetUselessComment = false;
let nextPrevious = nextSibling ? nextSibling.previousSibling : parent.lastChild;
if (nextPrevious && nextPrevious instanceof Text) {
didSetUselessComment = true;
parent.insertBefore(this.uselessComment, nextSibling);
}
let bounds = super.insertHTMLBefore(parent, nextSibling, html);
if (didSetUselessComment) {
parent.removeChild(this.uselessComment);
}
return bounds;
}
};
}
export function treeConstruction(document, TreeConstructionClass) {
if (!document) return TreeConstructionClass;
if (!shouldApplyFix(document)) {
return TreeConstructionClass;
}
return class TreeConstructionWithTextNodeMergingFix extends TreeConstructionClass {
constructor(document) {
super(document);
this.uselessComment = this.createComment('');
}
insertHTMLBefore(parent, reference, html) {
if (html === null) {
return super.insertHTMLBefore(parent, reference, html);
}
let didSetUselessComment = false;
let nextPrevious = reference ? reference.previousSibling : parent.lastChild;
if (nextPrevious && nextPrevious instanceof Text) {
didSetUselessComment = true;
parent.insertBefore(this.uselessComment, reference);
}
let bounds = super.insertHTMLBefore(parent, reference, html);
if (didSetUselessComment) {
parent.removeChild(this.uselessComment);
}
return bounds;
}
};
}
function shouldApplyFix(document) {
let mergingTextDiv = document.createElement('div');
mergingTextDiv.innerHTML = 'first';
mergingTextDiv.insertAdjacentHTML('beforeend', 'second');
if (mergingTextDiv.childNodes.length === 2) {
// It worked as expected, no fix required
return false;
}
return true;
}