benqus/UIElement

## index.html
<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src='js/UIElement.min.js'></script>
        <script src='js/unitTest.js'></script>
    </head>
    <body></body>
</html>

## UIElement
/**
 * UIElement class
 * @param [tagName] {String} the nodeName of the HTMLElement to bind to
 * @param [ctx] {Function} this function will be called to decorate the new instance
 */
var UIElement = function (arg, ctx) {
    var element,
        context;

    //only one argument given
    if (typeof arg === 'function' || !arg) {
            element = document.createElement('div');
            context = arg;
    }

    //both arguments given
    else
    if (typeof arg === 'string') {
        element = document.createElement(arg);
        context = ctx;
    }

    /**
     * UIElement constructor
     */
    function UIElement() {
        /**
         * returns the HTMLElement to append or to modify
         */
        this.getHTMLElement = function () {
            return element;
        };

        if (typeof context === 'function') {
            context.call(this);
        }
    };

    //setting up the prototype
    UIElement.prototype = element;

    //return the new instance
    return new UIElement();
};

## UIElement.min.js
var UIElement=function(a,b){function UIElement(){this.getHTMLElement=function(){return c};if(typeof d==="function"){d.call(this)}}var c,d;if(typeof a==="function"||!a){c=document.createElement("div");d=a}else if(typeof a==="string"){c=document.createElement(a);d=b}UIElement.prototype=c;return new UIElement}

## unitTest.js
//UNIT TEST
window.onload = function () {

    //UIELement class instantiation test
    console.log("UIELement class instantiation test");

    var a = new UIElement('a', function () {
        this.personName = 'customName';
    });

    var b = new UIElement(function () {
        this.personName = 'secondCustomName';
    });

    var c = new UIElement('strong');


    console.log('instanceof HTMLAnchorElement', a instanceof HTMLAnchorElement); //true
    console.log('instanceof HTMLDivElement', b instanceof HTMLDivElement);    //true
    console.log('instanceof HTMLElement', c instanceof HTMLElement);       //true

    console.log('APPENDING: ', document.body.appendChild(b.getHTMLElement()));
    b.textContent = b.personName;

    console.log('a: ', a.getHTMLElement());
    console.log('b: ', b.getHTMLElement());
    console.log('c: ', c.getHTMLElement());

    console.log('a.personName: ', a.personName);  //"customName"
    console.log('b.personName: ', b.personName);  //"secondCustomName"
    console.log('c.personName: ', c.personName);  //undefined


    //View class inheritance test
    console.log("View class inheritance test");
    var View = function (name) {

        function View() {
            this.personName = name;
            this.age = 26;
        }

        View.prototype = new UIElement();

        return new View();
    }

    console.log(new View("Bence")); //prototype should be UIElement and HTMLDivElement


    //working with jQuery
    console.log(
        'Setting class of the instance "$(a).attr({\'class\':\'myClass\'})": ',
        $(a).attr({'class':'myClass'})
    );
    console.log('getting the HTMLElement: ', $(a)[0].getHTMLElement());
    console.log('instance attribute: ', a.personName);
};
	<!doctype html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script src='js/UIElement.min.js'></script>
	<script src='js/unitTest.js'></script>
	</head>
	<body></body>
	</html>
	/**
	* UIElement class
	* @param [tagName] {String} the nodeName of the HTMLElement to bind to
	* @param [ctx] {Function} this function will be called to decorate the new instance
	*/
	var UIElement = function (arg, ctx) {
	var element,
	context;

	//only one argument given
	if (typeof arg === 'function' \|\| !arg) {
	element = document.createElement('div');
	context = arg;
	}

	//both arguments given
	else
	if (typeof arg === 'string') {
	element = document.createElement(arg);
	context = ctx;
	}

	/**
	* UIElement constructor
	*/
	function UIElement() {
	/**
	* returns the HTMLElement to append or to modify
	*/
	this.getHTMLElement = function () {
	return element;
	};

	if (typeof context === 'function') {
	context.call(this);
	}
	};

	//setting up the prototype
	UIElement.prototype = element;

	//return the new instance
	return new UIElement();
	};
	//UNIT TEST
	window.onload = function () {

	//UIELement class instantiation test
	console.log("UIELement class instantiation test");

	var a = new UIElement('a', function () {
	this.personName = 'customName';
	});

	var b = new UIElement(function () {
	this.personName = 'secondCustomName';
	});

	var c = new UIElement('strong');


	console.log('instanceof HTMLAnchorElement', a instanceof HTMLAnchorElement); //true
	console.log('instanceof HTMLDivElement', b instanceof HTMLDivElement); //true
	console.log('instanceof HTMLElement', c instanceof HTMLElement); //true

	console.log('APPENDING: ', document.body.appendChild(b.getHTMLElement()));
	b.textContent = b.personName;

	console.log('a: ', a.getHTMLElement());
	console.log('b: ', b.getHTMLElement());
	console.log('c: ', c.getHTMLElement());

	console.log('a.personName: ', a.personName); //"customName"
	console.log('b.personName: ', b.personName); //"secondCustomName"
	console.log('c.personName: ', c.personName); //undefined


	//View class inheritance test
	console.log("View class inheritance test");
	var View = function (name) {

	function View() {
	this.personName = name;
	this.age = 26;
	}

	View.prototype = new UIElement();

	return new View();
	}

	console.log(new View("Bence")); //prototype should be UIElement and HTMLDivElement


	//working with jQuery
	console.log(
	'Setting class of the instance "$(a).attr({\'class\':\'myClass\'})": ',
	$(a).attr({'class':'myClass'})
	);
	console.log('getting the HTMLElement: ', $(a)[0].getHTMLElement());
	console.log('instance attribute: ', a.personName);
	};