kai.infodb/common/components.js

// Adapted from: https://github.com/tsoding/grecha.js/blob/master/grecha.js

function tag(name) {
	var result = document.createElement(name);
	for (var i = 1; i < arguments.length; i++) {
		var child = arguments[i];
		if (child instanceof Node) {
			result.appendChild(child)
		} else {
			result.appendChild(document.createTextNode(child ? child.toString() : ''))
		}
	}

	result.att$ = function(name, value) {
		this.setAttribute(name, value);
		return this;
	};

	result.value$ = function(value) {
		this.value = value;
		return this;
	}

	result.checked$ = function(value) {
		this.checked = value;
		return this;
	}

	result.id$ = function(name) {
		this.id = name;
		return this;
	};

	result.class$ = function(name) {
		this.classList.add(name);
		return this;
	};

	result.event$ = function(eventName, handler) {
		this.addEventListener(eventName, handler);
		return this;
	};

	result.onclick$ = function(callback) {
		this.onclick = callback;
		return this;
	};

	result.also$ = function(callback) {
		callback(this);
		return this;
	};

	result.let$ = function(callback) {
		return callback(this);
	};

	return result;
}

var MUNDANE_TAGS = ["canvas", "h1", "h2", "h3", "h4", "p", "a", "div", "span", "select", "label", "hr"];
for (var i = 0; i < MUNDANE_TAGS.length; i++) {
	(function (tagName) {
		window[tagName] = function() {
			var args = [tagName];
			for (var j = 0; j < arguments.length; j++) {
				args.push(arguments[j]);
			}
			return tag.apply(null, args);
		}
	})(MUNDANE_TAGS[i]);
}

function a(href) {
	var args = ["a"];
	for (var i = 1; i < arguments.length; i++) {
		args.push(arguments[i]);
	}
	return tag.apply(null, args).att$("href", href);
}

function img(src) {
	return tag("img").att$("src", src);
}

function input(type) {
	return tag("input").att$("type", type);
}