Skip to content

Instantly share code, notes, and snippets.

@rtivital
Created November 28, 2015 17:06
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 rtivital/17715a385460b314eb50 to your computer and use it in GitHub Desktop.
Save rtivital/17715a385460b314eb50 to your computer and use it in GitHub Desktop.
;(function(window){
var S = function(selector, context) {
return new DOM(selector, context);
};
var DOM = function(selector, context) {
var currentContext = document;
if (context) {
if (context.nodeType) {
currentContext = context;
} else {
currentContext = document.querySelector(context);
}
}
if (!selector) {
this.length = 0;
return this;
}
if (typeof selector === 'object' && selector.nodeName) {
this.length = 1;
this[0] = selector;
return this;
}
var nodes;
if (typeof selector !== 'string') {
nodes = selector;
} else {
nodes = currentContext.querySelectorAll(selector.trim());
}
var nodesLength = nodes.length, i;
for(i = 0; i < nodesLength; i = i + 1) {
this[i] = nodes[i];
}
this.length = nodesLength;
return this;
};
window.S = S;
S.fn = DOM.prototype;
}(window));
S.split = function(str, rule) {
rule = rule || ' ';
return str.trim().split(rule);
};
S.isString = function(str) {
return typeof str === 'string';
};
S.isObject = function(obj) {
return typeof obj === 'object' && obj !== null;
};
S.isArray = function(arr) {
return Array.isArray(arr);
}
S.test = function(feature) {
return !!this[0][feature];
};
S._classes = function(action) {
return function (classes) {
if (!classes) return this;
if (S.isString(classes)) classes = S.split(classes);
var l = classes.length;
if (!S.isArray(classes) || l === 0) return this;
if (this[0].classList) {
return this.each(function() {
var self = this;
classes.forEach(function(cl) {
self.classList[action](cl);
});
});
}
return this.each(function() {
var self = this;
classes.forEach(function(cl) {
if (action === 'add') self.className += ' ' + cl;
if (action === 'remove') self.className.replace(new RegExp('(^|\\b)' + cl + '(\\b|$)', 'gi'), ' ');
});
});
}
};
S.fn.toArray = function() {
var elementsArray = [];
this.each(function(){
elementsArray.push(this);
});
return elementsArray;
};
S.fn.each = function(callback) {
var l = this.length, i;
for (i = 0; i < l; i = i + 1) {
callback.call(this[i], i, this[i]);
}
return this;
};
S.fn.html = function(string) {
if (string) {
return this.each(function() {
this.innerHTML = string;
});
}
return this[0].innerHTML;
};
S.fn.text = function(string) {
if (string) {
return this.each(function() {
this.textContent = string;
});
}
return this[0].textContent.trim();
};
S.fn.append = function(selector) {
if (S.isString(selector)) {
return this.each(function() {
this.insertAdjacentHTML('beforeend', selector);
});
} else {
return this.each(function(){
var self = this;
S(selector).each(function(name, value) {
self.insertAdjacentHTML('beforeend', value.outerHTML);
});
});
}
};
S.fn.css = function(properties, value) {
if (S.isString(properties)) {
if (value) {
return this.each(function(){
this.style[properties] = value;
});
}
else {
return window.getComputedStyle(this[0])[properties];
}
}
if (S.isObject(properties)) {
return this.each(function() {
for (var property in properties) {
this.style[property] = properties[property];
}
});
}
};
S.fn.show = function() {
return this.css('display', 'block');
};
S.fn.hide = function() {
return this.css('display', 'none');
};
S.fn.next = function() {
return S(this[0].nextElementSibling);
};
S.fn.prev = function() {
return S(this[0].previousElementSibling);
};
S.fn.addClass = S._classes('add');
S.fn.removeClass = S._classes('remove');
S.fn.hasClass = function(className) {
if (!className) return false;
if (S.test('classList')) return this[0].classList.contains(className);
else return new RegExp('(^| )' + className + '( |$)', 'gi').test(this[0].className);
};
S.fn.toggleClass = function(className) {
return this.each(function() {
var Sthis = S(this);
if (Sthis.hasClass(className)) Sthis.removeClass(className);
else Sthis.addClass(className);
});
};
S.fn.on = function(type, handler) {
if (this[0].addEventListener) {
return this.each(function() {
this.addEventListener(type, handler);
});
} else {
return this.each(function() {
var self = this;
self.attachEvent('on' + type, function(){
handler.call(self);
});
});
}
};
S.fn.off = function(type, handler) {
if (this[0].removeEventListener) {
return this.each(function() {
this.removeEventListener(type, handler);
});
} else {
return this.each(function() {
this.detachEvent('on' + type, handler)
});
}
}
S.fn.fullHeight = function() {
var element = this[0],
height = window.getComputedStyle(element).height;
if (height === 'auto' || height === '0px') {
S(element).css('display', 'block');
var styles = window.getComputedStyle(element);
var properties = {
height: styles.height,
paddingTop: styles.paddingTop,
paddingBottom: styles.paddingBottom,
marginTop: styles.marginTop,
marginBottom: styles.marginBottom
};
S(element).css('display', 'none');
}
return properties;
};
S.fn.slide = function(direction, duration) {
duration = duration || 250;
return this.each(function(){
var Sthis = S(this);
var fullHeight = Sthis.fullHeight();
Sthis.css({
transition: 'all '+ duration +'ms linear'
});
if (direction === 'down') {
Sthis.css({
display: 'block',
height: 0,
paddingTop: 0,
paddingBottom: 0,
marginTop: 0,
marginBottom: 0
});
}
Sthis.css({
display: 'block',
height: 0,
paddingTop: 0,
paddingBottom: 0,
marginTop: 0,
marginBottom: 0,
transition: 'all '+ duration +'ms linear'
});
setTimeout(function(){
console.log(fullHeight);
Sthis.css({
height: fullHeight.height,
paddingTop: fullHeight.paddingTop,
paddingBottom: fullHeight.paddingBottom,
marginTop: fullHeight.marginTop,
marginBottom: fullHeight.marginBottom
});
}, 0);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment