Merge pull request #3755 from tchak/add-dom3-polyfill
Polyfill insertAdjacentElement on old browsers
This commit is contained in:
commit
d61db76039
3 changed files with 124 additions and 0 deletions
|
@ -3,3 +3,5 @@
|
|||
// required by the browsers we support will be included.
|
||||
import '@babel/polyfill';
|
||||
import 'dom4';
|
||||
import './polyfills/insertAdjacentElement';
|
||||
import './polyfills/dataset';
|
||||
|
|
75
app/javascript/shared/polyfills/dataset.js
Normal file
75
app/javascript/shared/polyfills/dataset.js
Normal file
|
@ -0,0 +1,75 @@
|
|||
/*
|
||||
@preserve dataset polyfill for IE < 11. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset and http://caniuse.com/#search=dataset
|
||||
|
||||
@author ShirtlessKirk copyright 2015
|
||||
@license WTFPL (http://www.wtfpl.net/txt/copying)
|
||||
*/
|
||||
|
||||
const dash = /-([a-z])/gi;
|
||||
const dataRegEx = /^data-(.+)/;
|
||||
const hasEventListener = !!document.addEventListener;
|
||||
const test = document.createElement('_');
|
||||
const DOMAttrModified = 'DOMAttrModified';
|
||||
|
||||
let mutationSupport = false;
|
||||
|
||||
function clearDataset(event) {
|
||||
delete event.target._datasetCache;
|
||||
}
|
||||
|
||||
function toCamelCase(string) {
|
||||
return string.replace(dash, function(_, letter) {
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
}
|
||||
|
||||
function getDataset() {
|
||||
const dataset = {};
|
||||
|
||||
for (let attribute of this.attributes) {
|
||||
let match = attribute.name.match(dataRegEx);
|
||||
if (match) {
|
||||
dataset[toCamelCase(match[1])] = attribute.value;
|
||||
}
|
||||
}
|
||||
|
||||
return dataset;
|
||||
}
|
||||
|
||||
function mutation() {
|
||||
if (hasEventListener) {
|
||||
test.removeEventListener(DOMAttrModified, mutation, false);
|
||||
} else {
|
||||
test.detachEvent(`on${DOMAttrModified}`, mutation);
|
||||
}
|
||||
|
||||
mutationSupport = true;
|
||||
}
|
||||
|
||||
if (!test.dataset) {
|
||||
if (hasEventListener) {
|
||||
test.addEventListener(DOMAttrModified, mutation, false);
|
||||
} else {
|
||||
test.attachEvent(`on${DOMAttrModified}`, mutation);
|
||||
}
|
||||
|
||||
// trigger event (if supported)
|
||||
test.setAttribute('foo', 'bar');
|
||||
|
||||
Object.defineProperty(Element.prototype, 'dataset', {
|
||||
get: mutationSupport
|
||||
? function get() {
|
||||
if (!this._datasetCache) {
|
||||
this._datasetCache = getDataset.call(this);
|
||||
}
|
||||
|
||||
return this._datasetCache;
|
||||
}
|
||||
: getDataset
|
||||
});
|
||||
|
||||
if (mutationSupport && hasEventListener) {
|
||||
// < IE9 supports neither
|
||||
document.addEventListener(DOMAttrModified, clearDataset, false);
|
||||
}
|
||||
}
|
47
app/javascript/shared/polyfills/insertAdjacentElement.js
Normal file
47
app/javascript/shared/polyfills/insertAdjacentElement.js
Normal file
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
Updated w/ insertAdjacentElement
|
||||
@author Dan Levy @justsml
|
||||
2016-06-23
|
||||
|
||||
Credit: @lyleunderwood - afterend patch/fix
|
||||
|
||||
2011-10-10
|
||||
|
||||
By Eli Grey, http://eligrey.com
|
||||
Public Domain.
|
||||
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
|
||||
*/
|
||||
|
||||
function insertAdjacentElement(position, elem) {
|
||||
const _this = this;
|
||||
const parent = this.parentNode;
|
||||
let node, first;
|
||||
|
||||
switch (position.toLowerCase()) {
|
||||
case 'beforebegin':
|
||||
while ((node = elem.firstChild)) {
|
||||
parent.insertBefore(node, _this);
|
||||
}
|
||||
break;
|
||||
case 'afterbegin':
|
||||
first = _this.firstChild;
|
||||
while ((node = elem.lastChild)) {
|
||||
first = _this.insertBefore(node, first);
|
||||
}
|
||||
break;
|
||||
case 'beforeend':
|
||||
while ((node = elem.firstChild)) {
|
||||
_this.appendChild(node);
|
||||
}
|
||||
break;
|
||||
case 'afterend':
|
||||
parent.insertBefore(elem, _this.nextSibling);
|
||||
break;
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
// Method missing in Firefox < 48
|
||||
if (!HTMLElement.prototype.insertAdjacentElement) {
|
||||
HTMLElement.prototype.insertAdjacentElement = insertAdjacentElement;
|
||||
}
|
Loading…
Reference in a new issue