Skip to content

Instantly share code, notes, and snippets.

@kousherAlam
Last active November 19, 2018 04:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kousherAlam/dc846388a92605e00bf63fcc5cb6a973 to your computer and use it in GitHub Desktop.
Save kousherAlam/dc846388a92605e00bf63fcc5cb6a973 to your computer and use it in GitHub Desktop.
basic dom functionality implemented with prototype
document.addEventListener("DOMContentLoaded", function(){
// write your script here
var demo = _("demo");
demo.html("Hello").addClass("hi").attr('data-name','test')
.css('background-color-is-','black');
// demo.addClass("your anme");
// demo.fadeIn();
// demo.remove();
// demo.hide();
console.log(demo);
});
function _(id){return document.getElementById(id);}
function get(selector){
var elms = document.querySelectorAll(selector);
if(elms != null && elms.length === 1){
return elms[0];
}
return elms;
}
function log(o){console.log(o);}
function warn(o){console.warn(o);}
function err(o){console.error(o);}
function parseCssRule(rule){
var needToCheck = true;
var newArr = [];
while(needToCheck){
var index = rule.indexOf("-");
if(index > 0){
rule = rule.replace("-", "");
var upcase = rule[index] ? rule[index].toUpperCase(): '';
newArr = rule.split("");
newArr[index] ? newArr[index] = upcase : '';
rule = newArr.join("");
}else{
needToCheck = false;
}
}
return rule;
}
HTMLElement.prototype.val = function(val){
if(!val){
return this.value;
}else{
this.value = val;
}
return this;
}
HTMLElement.prototype.attr = function(attr, val){
if(!val){
return this.getAttribute(attr);
}else{
this.setAttribute(attr, val);
}
return this;
}
HTMLElement.prototype.get = function(selector){
var elms = this.querySelectorAll(selector);
if(elms != null && elms.length === 1){
return elms[0];
}
return elms;
}
HTMLElement.prototype.before = function(html){
this.insertAdjacentHTML('beforebegin', html);
return this;
}
HTMLElement.prototype.after = function(html){
this.insertAdjacentHTML('afterend', html);
return this;
}
HTMLElement.prototype.remove = function(){
this.parentNode.removeChild(this);
}
HTMLElement.prototype.fadeIn = function(){
this.style.opacity = 0;
var last = +new Date();
var tick = function() {
this.style.opacity = +this.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
return this;
}
HTMLElement.prototype.on = function(evtname, listener){
this.addEventListener(evtname, listener);
return this;
}
HTMLElement.prototype.hide = function(){
this.css('display', 'none');
return this;
}
HTMLElement.prototype.show = function(){
this.css('display', 'block');
return this;
}
HTMLElement.prototype.html = function(val){
if(!val){
return this.innerHTML;
}else{
this.innerHTML = val;
}
return this;
}
HTMLElement.prototype.css = function(css, val){
var rule = parseCssRule(css);
if(!val){
return this.style[rule];
}else{
this.style[rule] = val;
}
return this;
}
HTMLElement.prototype.addClass = function(className){
if (this.classList){
this.classList.add(className);
}else{
this.className += ' ' + className;
}
return this;
}
HTMLElement.prototype.removeClass = function(className){
if (this.classList){
this.classList.remove(className);
} else {
this.className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
return this;
}
HTMLElement.prototype.hasClass = function(className){
if (this.classList){
return this.classList.contains(className);
}else{
return new RegExp('(^| )' + className + '( |$)', 'gi').test(this.className)
}
}
HTMLElement.prototype.toggleClass = function(className){
if(this.hasClass(className)){
this.removeClass(className);
}else{
this.addClass(className);
}
return this;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment