Last active
December 20, 2015 14:49
-
-
Save antoineMoPa/6149384 to your computer and use it in GitHub Desktop.
Small javascript library that does most of the things I need from jQuery
This file contains 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 shortcutLib; | |
if(typeof q !== 'undefined'){ | |
shortcutLib.previousQ = q; | |
} | |
(function(q){ | |
var rootElement = document; | |
var q = function(arg){ | |
this.element == null; | |
this.elements == null; | |
if(arg instanceof q){ | |
arg.utils = q.utils; | |
return arg; | |
} | |
this.elements = arg; | |
return this; | |
} | |
//Selectors | |
q.fn = q.prototype; | |
q.sa = function(selector){ | |
return new q(rootElement.querySelectorAll(selector)) | |
} | |
q.c = function(classNames){ | |
return new q(rootElement.getElementsByClassName(classNames)) | |
} | |
q.id = function(id){ | |
return new q([rootElement.getElementById(id)]) | |
} | |
q.tag = function(tagName){ | |
return new q(rootElement.getElementsByTagName(tagName)) | |
} | |
q.fn.before = function(content){ | |
var q = this; | |
if(typeof(content) == "string"){ | |
content = q.utils.HTMLStringToFragment(content); | |
} | |
q.each(function(){ | |
rootElement.body.insertBefore(content, this.element); | |
}); | |
return this; | |
} | |
q.fn.after = function(content){ | |
var q = this; | |
if(typeof(content) == "string"){ | |
content = q.utils.html(content); | |
} | |
q.each(function(){ | |
this.element. | |
parentNode. | |
insertBefore( | |
content, | |
this.element.nextSibling | |
); | |
}); | |
return this; | |
} | |
q.fn.append = function(content){ | |
var q = this; | |
if(typeof(content) == "string"){ | |
content = q.utils.html(content); | |
} | |
q.each(function(){ | |
this.element.appendChild(content); | |
}); | |
return this; | |
} | |
q.fn.prepend = function(content){ | |
var q = this; | |
if(typeof(content) == "string"){ | |
content = q.utils.html(content); | |
} | |
q.each(function(){ | |
if(this.element.firstChild){ | |
this.element.insertBefore(content,this.element.firstChild); | |
} | |
else{ | |
this.element.appendChild(content); | |
} | |
}); | |
return this; | |
} | |
q.fn.remove = function(){ | |
var q = this; | |
q.each(function(){ | |
this.element.parentNode.removeChild(this.element) | |
}) | |
return this | |
} | |
//Element Manipulation | |
q.fn.text = function(newText){ | |
var q = this; | |
if(typeof newText === 'undefined'){ | |
var text = ""; | |
q.each(function(){ | |
text += this.element.textContent; | |
}) | |
return text | |
} | |
else{ | |
q.each(function(){ | |
console.log(this.element); | |
this.element.textContent = newText; | |
}) | |
} | |
return this; | |
} | |
//classes | |
q.fn.addClass = function(className){ | |
var q = this; | |
q.each(function(){ | |
this.element.className.replace(className,""); | |
this.element.className += " "+className; | |
}); | |
return this; | |
} | |
q.fn.removeClass = function(className){ | |
var q = this; | |
q.each(function(){ | |
this.element.className = this.element.className.replace(className,""); | |
}); | |
return this; | |
} | |
q.fn.toggleClass = function(className){ | |
var q = this; | |
q.each(function(){ | |
if(this.element.className.indexOf(className) != -1){ | |
this.element.className.replace(className,""); | |
} | |
else{ | |
this.element.className.replace(className,""); | |
this.element.className += " "+className; | |
} | |
}); | |
return this; | |
} | |
//Events | |
q.fn.on = function(eventType,callback){ | |
var q = this; | |
q.each(function(){ | |
this.element.addEventListener(eventType,callback); | |
}); | |
return this; | |
} | |
//Styling | |
q.fn.css = function(rules){ | |
var q = this; | |
for(rule in rules){ | |
q.each(function(){ | |
this.element.style[rule] = rules[rule]; | |
}) | |
} | |
return this; | |
} | |
q.fn.hide = function(){ | |
this.each(function(){ | |
this.attr("data-display",this.element.style.display) | |
this.element.style.display = "none"; | |
}) | |
return this | |
} | |
q.fn.show = function(){ | |
this.each(function(){ | |
this.element.style.display = this.attr("data-display") | |
}) | |
return this; | |
} | |
//Data | |
q.fn.attr = function(attribute,value){ | |
if (typeof value === 'undefined'){ | |
return this.elements[0].getAttribute(attribute); | |
} | |
else{ | |
this.elements[0].setAttribute(attribute,value); | |
return this; | |
} | |
} | |
//Access dom | |
q.fn.item = function(index){ | |
return this.elements[index]; | |
} | |
q.fn.each = function(callback){ | |
var q = this; | |
for(var i = 0; i < this.elements.length; i++ ){ | |
this.element = this.elements[i]; | |
if(callback.call(this) == -1){ | |
return this | |
} | |
} | |
return this | |
} | |
//Utilities | |
q.utils = function(){}; | |
q.utils.html = function (htmlString){ | |
var frag = rootElement.createDocumentFragment(), | |
temp = rootElement.createElement('div'); | |
temp.innerHTML = htmlString; | |
while (temp.firstChild) { | |
frag.appendChild(temp.firstChild); | |
} | |
return frag; | |
} | |
q.utils.merge = function (object,defaults){ | |
if(typeof object === 'undefined'){ | |
return defaults; | |
} | |
for(var setting in defaults){ | |
if(typeof object[setting] === 'undefined'){ | |
object[setting] = defaults[setting]; | |
} | |
} | |
return object; | |
} | |
q.utils.nodeList = function(domElement){ | |
console.log(domElement); | |
var fragment = rootElement.createDocumentFragment(); | |
fragment.appendChild(domElement); | |
return fragment.childNodes; | |
} | |
q.utils.l = function(message){ | |
console.log(message); | |
} | |
q.utils.addStyle = function (style){ | |
if(typeof(style) == "string"){ | |
var css = rootElement.createElement("style"); | |
css.type = "text/css"; | |
css.innerHTML = style; | |
q.tag("head").append(css); | |
} | |
} | |
shortcutLib = q; | |
})(shortcutLib); | |
q = shortcutLib; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment