Created
May 9, 2013 20:24
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| }; |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Need to check for support of classList and use those functions instead for supported browsers
if('classList' in document.createElement('a')) {
// use classList API
}