bbquery.js

(function(){
	window.bbQuery = function(selector){
		//can only select one element by id. Make it able to select ids, classes, and by plain tag name ie. "header"
		//and return multiple elements when more than one is selected
		//example usage: bbQuery("#lol") - bbQuery(".container") - bbQuery("h1")

		// checks to see if there are spaces in the selector, then parse it for multi node matches.
		if( /\s/.test(selector) ) return new Element( selectors['multi'](selector) );

		// breaks the selector match from string, then set what kind of match to perform.
		var type = selector[0] in selectors ? selector[0] : 'tag';

		return new Element( selectors[type](selector) );
	}

	var selectors = {
		'#': function( selector ){
			selector = selector.slice(1);

			return document.getElementById(selector);
		},
		'.': function( selector ){
			selector = selector.slice(1);
			var out = [];

			var elements = document.getElementsByClassName(selector)
			for( var i=0; i< elements.length; i++ ){
				out.push(new Element(elements[i]));
			}

			return out;
		},
		'tag': function(selector){
			var out = [];

			var elements = document.getElementsByTagName(selector);
			for( var i=0; i< elements.length; i++ ){
				out.push(new Element(elements[i]));
			}

			return out;
		},
		'multi': function (selectors){
			var out = [];

			selectors.split(' ').forEach(function(selector){
				out.push(bbQuery(selector));
			});

			return out;
		}
	}

	var Element = function(element){
		this.element = element;
	}

	var checkArray = function(that, method, args){
		if(Array.isArray(that.element)){
			that.each(function(element){
				console.log(element)
				element[method].apply(element, args);
			});
			return true;
		}
		return false;
	};

	Element.prototype.html = function(html){
		if(checkArray( this, 'html', arguments )) return this;
		if(html){
			this.element.innerHTML = html;

			return this;
		} else {

			return this.element.innerHTML;
		}
	};

	Element.prototype.css = function(key, value){
		if(!arguments || checkArray(this, 'css', arguments)) return this;
		if(key && value){
			this.element.setAttribute("style", key + ":" + value);

			return this;
		} else if(key) {
			var style = window.getComputedStyle(this.element);

			return style.getPropertyValue(key);
		}
	};

	Element.prototype.append = function(html){
		if(checkArray(this, 'append', arguments)) return this;
		if(html){
			this.element.innerHTML += html;

			return this;
		} else {

			return this.element.innerHTML;
		}
	};

	Element.prototype.addClass = function(classes){
		if(!arguments || checkArray( this, 'addClass', arguments )) return this;
		this.element.classList.add.apply(this.element.classList, arguments);

		return this;
	};

	Element.prototype.removeClass = function(classes){
		if(!arguments || checkArray( this, 'remove', arguments )) return this;
		this.element.classList.remove.apply(this.element.classList, arguments);

		return this;
	};

	Element.prototype.data = function(key, value){
		if(!arguments || checkArray( this, 'data', arguments )) return this;

		if(arguments.length === 1) return this.element.getAttribute('data-'+key);
		else if(arguments.length === 2) this.element.setAttribute('data-'+key, value);

		return this;
	};

	Element.prototype.remove = function(){
		if(checkArray( this, 'remove' )) return null;
		this.element.remove();

		return this;
	};

	Element.prototype.each = function(callback){
		var items = Array.isArray(this.element) ? this.element : [this.element];
		items.forEach(callback);

		return this;
	};

})();