Skip to content

Instantly share code, notes, and snippets.

@luvaas
Last active March 15, 2016 05:11
Show Gist options
  • Save luvaas/b546b7fd0f2c448ba615 to your computer and use it in GitHub Desktop.
Save luvaas/b546b7fd0f2c448ba615 to your computer and use it in GitHub Desktop.
Jquery extensions that add missing addClass, removeClass, and hasClass shims for SVG elements
//addClass shim for SVG
var originalAddClass = $.fn.addClass;
$.fn.addClass = function(value) {
var orig = originalAddClass.apply(this, arguments);
if(!value) return orig;
for (var i=0; i<this.length; i++ ) {
var elem = this[ i ];
if ( elem instanceof SVGElement ) {
var newClasses = value.split(' ');
var classes = $(elem).attr('class') || '';
for (var j=0; j<newClasses.length; j++) {
if(!$(elem).hasClass(value)) {
//classname doesn't already exist
classes += ' ' + newClasses[j];
}
};
classes = classes.trim();
if (classes != '') {
$(elem).attr('class', classes);
}
}
}
return orig;
};
//removeClass shim for SVG
var originalRemoveClass = $.fn.removeClass;
$.fn.removeClass = function(value) {
var orig = originalRemoveClass.apply(this, arguments);
for (var i=0; i<this.length; i++ ) {
var elem = this[ i ];
if ( elem instanceof SVGElement ) {
if ( $(elem).attr('class') ) {
var classes = $(elem).attr('class').split(' ');
var classesToRemove = value.split(' ');
for (var j=0; j<classesToRemove.length; j++) {
var index = classes.indexOf(classesToRemove[j]);
if (index > -1) {
//remove the class from the array
classes.splice(index, 1);
}
};
classes = classes.join(' ');
if(classes=='') {
//if there are no more classnames remaining, remove the attribute altogether
$(elem).removeAttr('class');
}
else {
//otherwise, update the classname
$(elem).attr('class', classes);
}
}
}
}
return orig;
};
//hasClass shim for SVG
var originalHasClass = $.fn.hasClass;
$.fn.hasClass = function(value) {
var orig = originalHasClass.apply(this, arguments);
for (var i=0; i<this.length; i++ ) {
var elem = this[ i ];
if ( elem instanceof SVGElement ) {
if ( $(elem).attr('class') ) {
var currentClasses = $(elem).attr('class').split(' ');
var index = currentClasses.indexOf(value);
if(index > -1) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}
}
return orig;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment