Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dataset polyfill for IE < 11
/*
* @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)
*/
/*global define: false, module: false */
/*jslint nomen: true, regexp: true, unparam: true */
(function datasetModule(global, definition) { // non-exporting module magic dance
'use strict';
var
amd = 'amd',
exports = 'exports'; // keeps the method names for CommonJS / AMD from being compiled to single character variable
if (typeof define === 'function' && define[amd]) {
define(function definer() {
return definition(global);
});
} else if (typeof module === 'function' && module[exports]) {
module[exports] = definition(global);
} else {
definition(global);
}
}(this, function datasetPolyfill(global) {
'use strict';
var
attribute,
attributes,
counter,
dash,
dataRegEx,
document = global.document,
hasEventListener,
length,
match,
mutationSupport,
test = document.createElement('_'),
DOMAttrModified = 'DOMAttrModified';
function clearDataset(event) {
delete event.target._datasetCache;
}
function toCamelCase(string) {
return string.replace(dash, function (m, letter) {
return letter.toUpperCase();
});
}
function getDataset() {
var
dataset = {};
attributes = this.attributes;
for (counter = 0, length = attributes.length; counter < length; counter += 1) {
attribute = attributes[counter];
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 !== undefined) {
return;
}
dash = /\-([a-z])/ig;
dataRegEx = /^data\-(.+)/;
hasEventListener = !!document.addEventListener;
mutationSupport = false;
if (hasEventListener) {
test.addEventListener(DOMAttrModified, mutation, false);
} else {
test.attachEvent('on' + DOMAttrModified, mutation);
}
// trigger event (if supported)
test.setAttribute('foo', 'bar');
Object.defineProperty(global.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);
}
}));
@Grawl
Copy link

Grawl commented Jul 23, 2019

it works

@ShirtlessKirk
Copy link
Author

ShirtlessKirk commented Jul 25, 2019

I feel sorry for you that you have to support IE < 11. Still, glad this helps.

@Grawl
Copy link

Grawl commented Jul 25, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment