Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple utility for manipulating attribute values like you would with classes.
/**
* Allows manipulation of attribute values in the same way that is commonly done with classes.
* Written as a helper for http://amcss.github.io/
* Use setPrefix() if you want to prefix all your attributes with "am-" or "data-am-", etc.
* @see https://github.com/yui/yui3/blob/master/src/dom/js/dom-class.js
* @exports attr
* @example
* attr.setPrefix(node, 'css-');
* attr.toggle(node, 'badge');
* attr.toggle(node, 'badge', 'large');
*/
(function() {
var prefix = '';
var attr = {
has: function(node, attribute, value) {
attribute = prefix + attribute;
var nodeAttr = node.getAttribute(attribute);
if (nodeAttr === null) {
return false;
} else if (value === undefined) {
return true;
} else {
var re = new RegExp('(?:^|\\s+)' + value + '(?:\\s+|$)');
return re.test(nodeAttr);
}
},
add: function(node, attribute, value) {
if (!this.has(node, attribute, value)) {
attribute = prefix + attribute;
node.setAttribute(attribute, [node.getAttribute(attribute), value].join(' ').trim());
}
},
remove: function(node, attribute, value) {
var prefixedAttr = prefix + attribute;
if (value === undefined) {
node.removeAttribute(prefixedAttr);
} else if (this.has(node, attribute, value)) {
node.setAttribute(prefixedAttr, node.getAttribute(prefixedAttr).replace(new RegExp('(?:^|\\s+)' + value + '(?:\\s+|$)'), ' ').trim());
if (this.has(node, attribute, value) ) { // in case of multiple adjacent
this.remove(node, prefixedAttr, value);
}
}
},
toggle: function(node, attribute, value) {
var has = !(this.has(node, attribute, value));
var func = (has) ? this.add : this.remove;
func.apply(this, arguments);
},
setPrefix: function(newPrefix) {
prefix = newPrefix;
}
};
// AMD
if (typeof define === 'function' && define.amd) {
define(function() {
return attr;
});
} else {
this.attr = attr;
}
})();
/* https://gist.github.com/chrisbateman/c3cf0bc3744817c9f98f/ */
(function(){var d="",f={has:function(a,b,c){b=d+b;a=a.getAttribute(b);return null===a?!1:void 0===c?!0:(new RegExp("(?:^|\\s+)"+c+"(?:\\s+|$)")).test(a)},add:function(a,b,c){this.has(a,b,c)||(b=d+b,a.setAttribute(b,[a.getAttribute(b),c].join(" ").trim()))},remove:function(a,b,c){var e=d+b;void 0===c?a.removeAttribute(e):this.has(a,b,c)&&(a.setAttribute(e,a.getAttribute(e).replace(new RegExp("(?:^|\\s+)"+c+"(?:\\s+|$)")," ").trim()),this.has(a,b,c)&&this.remove(a,e,c))},toggle:function(a,b,c){(this.has(a,
b,c)?this.remove:this.add).apply(this,arguments)},setPrefix:function(a){d=a}};"function"===typeof define&&define.amd?define(function(){return f}):this.attr=f})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment