Skip to content

Instantly share code, notes, and snippets.

@garystorey
Created May 9, 2013 20:24
Show Gist options
  • Select an option

  • Save garystorey/5550297 to your computer and use it in GitHub Desktop.

Select an option

Save garystorey/5550297 to your computer and use it in GitHub Desktop.
Super simple chainable JavaScript Object for events, selecting, and add/remove CSS classes and HTML elements.
var gs = {
/***********************/
/* Class Manipulation */
/***********************/
addClass : function(el, clsName) {
var tmp;
if (!gs.hasClass(el,clsName)) {
tmp = el.className + " " + clsName;
el.className = gs.trim(tmp);
}
return this;
},
removeClass : function(el, clsName) {
if (gs.hasClass(el,clsName)) {
var reg = new RegExp('(\\s|^)'+clsName+'(\\s|$)');
el.className = gs.trim(el.className);
}
return this;
},
hasClass : function(el,clsName) {
return el.className.match(new RegExp('(\\s|^)'+clsName+'(\\s|$)'));
},
toggleClass : function(el, clsName) {
if (gs.hasClass(el, clsName)) {
gs.removeClass(el, clsName);
} else {
gs.addClass(el, clsName);
}
return this;
},
/***************************/
/* Element Manipulation */
/**************************/
addElement : function (obj) {
var el, txt, parent, prop;
if (!obj.tag) { obj.tagName = 'div'; } else { obj.tagName = obj.tag.toLowerCase(); }
el = document.createElement(obj.tagName);
delete obj.tagName;
for (prop in obj ) {
prop = prop.toLowerCase();
switch(prop) {
case 'text' :
el.appendChild(document.createTextNode(obj.text));
break;
case 'class':
gs.addClass(el,obj['class']);
break;
default:
el[prop] = obj[prop];
}
}
return el;
},
removeElement : function (obj) {
var parent;
parent = obj.parentNode;
parent.removeChild(obj);
return this;
},
/***************************/
/* Event Management */
/**************************/
addEvent : function (obj) {
var el = obj.el , evt = obj.event, callback = obj.callback, bubble = obj.allowBubble || false;
if (el.addEventListener) {
el.addEventListener(evt,callback,bubble);
} else if (el.attachEvent) {
el["e"+evt+callback]=callback;
el[evt+callback] = function() { el["e"+evt+callback](window.event);};
el.attachEvent("on"+evt,el[evt+callback]);
}
return this;
},
removeEvent : function (obj) {
var el = obj.el ,
evt = obj.event,
callback = obj.callback,
bubble = obj.allowBubble || false;
if(el.removeEventListener) {
el.removeEventListener(evt, callback, bubble);
} else if(el.detachEvent) {
el.detachEvent("on" + evt, el[evt+callback]);
el[evt + callback] = null;
el["e" + evt + callback] = null;
}
return this;
},
triggerEvent : function (obj) {
var e, el= obj.el, evt = obj.event;
if (document.createEvent) {
e = document.createEvent("HTMLEvents");
e.initEvent(evt, true, true);
} else {
e = document.createEventObject();
e.eventType = evt;
}
e.eventName = evt;
if (document.createEvent) {
el.dispatchEvent(e);
} else {
el.fireEvent("on" + e.eventType, e);
}
return this;
},
/************************/
/* Helper Functins */
/************************/
trim : function (txt) {
return txt.replace(/^\s+|\s+$/g,"");
},
getID : function(sel) {
if (!document.querySelector) {
return document.getElementByID(sel.replace("#",''));
}
return document.querySelector(sel);
},
get : function(sel) {
var tmp=sel.charAt(0);
if (tmp === '#') { return gs.getID(sel); }
if (document.querySelectorAll) {
return document.querySelectorAll(sel);
} else {
if( tmp !== '.' ) {
return document.getElementsByTagName(sel);
}
return document.getElementsByClassName(sel.replace('.',''));
}
return undefined;
}
};
@garystorey
Copy link
Author

Need to check for support of classList and use those functions instead for supported browsers

if('classList' in document.createElement('a')) {
// use classList API
}

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