Skip to content

Instantly share code, notes, and snippets.

@gjohnson
Created August 8, 2010 11:38
Show Gist options
  • Save gjohnson/513926 to your computer and use it in GitHub Desktop.
Save gjohnson/513926 to your computer and use it in GitHub Desktop.
/*
Fun little experiment with custom attributes
Usage:
<div id="foo" data-foo-bar="awesome" data-whatever="cool"></div>
$('#foo').dataSet() // >> {fooBar: 'awesome', whatever: 'cool'}
or
<div id="foo2"></div>
$('#foo2').dataSet({fooBar: 'awesome', whatever: 'cool'}); // >> <div id="foo" data-foo-bar="awesome" data-whatever="cool"></div>
*/
(function($, undefined){
$.fn.dataSet = function (attrMap) {
// helper functions
var normalizeName = function(givenName) {
var parts = givenName.replace('data-', '').split('-'), i;
// http://stackoverflow.com/questions/1026069/capitalize-first-letter-of-string-in-javascript
for (i = 1; i < parts.length; i++) {
parts[i] = parts[i].charAt(0).toUpperCase() + parts[i].slice(1); //
}
return parts.join('');
};
var denormalizeName = function (givenName) {
// TODO
// i need to turn a camelcase name into a hypenated one
// like: fooBar into data-foo-bar
};
// only support one object for now
if (this.length == 1 && attrMap === undefined) {
var elm = this.get(0),
attributes = elm.attributes,
map = {},
i,
pattern = /^data\-/;
if (elm.dataset !== undefined) {
map = elm.dataset;
}
else {
for (i = 0; i < attributes.length; i++){
if (pattern.test(attributes[i].nodeName)) {
map[normalizeName(attributes[i].nodeName)] = attributes[i].nodeValue;
}
}
}
return map;
}
else {
// use the map passed in to set attributes on the element
for (var attr in attrMap) {
if (attrMap.hasOwnProperty(attr)) {
this.attr('data-' + attr, attrMap[attr]);
}
}
return this;
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment