pridjs

prid.js

/*
     prid.js 0.0.2

     Eray Arslan
     For all details and documentation: (README.md)
*/

(function(root, factory) {

    if(typeof define === 'function' && define.amd) {

        define(['exports'], function(exports) {
            root.prid = factory(root, exports);
        });

    } else if (typeof exports !== 'undefined') {

        factory(root, exports);

    } else {

        root.prid = factory(root, {});

    }

}(this, function(root, prid) {
    Object.prototype.prid = function(object) {
        var that = this;
        var data;
        this.getData = function() {
            return data;
        };
        var EMPTY = "";
        //
        var createColumn = function(target) {
            var column = document.createElement("td");
            if(typeof target === "string") {
                column.appendChild(document.createTextNode(target));
            } else if(typeof target === "object") {
                column.appendChild(target);
            } return column;
        };

        var createComboBox = function(key, arr, selected) {
            var select = document.createElement("select");
            select.addEventListener("change", function(e) {
                that.getData()[key] = e.target.value;
            });
            select.style.width = "100%";
            for(var i = 0; i<arr.length; i++) {
                var option = document.createElement("option");
                option.setAttribute("value", arr[i]);
                if(typeof selected === "undefined" && i === 0) {
                    option.setAttribute("selected", "selected");
                    that.getData()[key] = arr[i];
                }
                if(typeof selected !== "undefined" && arr[i] === selected) {
                    option.setAttribute("selected", "selected");
                }
                //
                var option_text = document.createTextNode(arr[i]);
                option.appendChild(option_text);
                //
                select.appendChild(option);
            } return select;
        };

        var createTextRow = function(key, value) {
            var row = document.createElement("tr");
            var key_column = createColumn(key);
            //
            var text = document.createElement("input");
            text.addEventListener("change", function(e) {
                that.getData()[key] = e.target.value;
            });
            text.setAttribute("type", "text");
            text.setAttribute("name", key);
            text.setAttribute("autocomplete", "off");
            text.setAttribute("value", value);
            text.style.width = "100%";
            text.style.border = "none";
            //
            var value_column = createColumn(text);
            //
            row.appendChild(key_column);
            row.appendChild(value_column);
            //
            return row;
        };

        var createComboBoxRow = function(key, valueArr, value) {
            var row = document.createElement("tr");
            var key_column = createColumn(key);
            var value_column = createColumn(createComboBox(key, valueArr, value));
            //
            row.appendChild(key_column);
            row.appendChild(value_column);
            //
            return row;
        };

        var createButtonRow = function(key, func) {
            var row = document.createElement("tr");
            //
            var button = document.createElement("button");
            button.style.width = "100%";
            button.addEventListener("click", func);
            var txt_button = document.createTextNode(key);
            button.appendChild(txt_button);
            //
            var value_column = createColumn(button);
            value_column.setAttribute("colspan", "2");
            //
            row.appendChild(value_column);
            //
            return row;
        };

        var prepareHead = function(el) {
            var thead = document.createElement("thead");
            var th_name = document.createElement("th");
            var th_value = document.createElement("th");
            var txt_name = document.createTextNode("name");
            var txt_value = document.createTextNode("value");
            //
            th_name.appendChild(txt_name);
            th_value.appendChild(txt_value);
            //
            thead.appendChild(th_name);
            thead.appendChild(th_value);
            //
            el.appendChild(thead);
        };

        var prepareBody = function(el) {
            var tbody = document.createElement("tbody");
            //
            return el.appendChild(tbody);
        };

        var populatePrid = function(el, data) {
            for (var key in data) {
                if(key === "prid") { continue; }
                var value = data[key];
                if(typeof value === "number") {
                    el.appendChild(createTextRow(key, value));
                } else if(typeof value === "string") {
                    el.appendChild(createTextRow(key, value));
                } else if(typeof value === "boolean") {
                    el.appendChild(createComboBoxRow(key, [true, false], value));
                } else if(typeof value === "function") {
                    el.appendChild(createButtonRow(key, value));
                } else if(typeof value === "object" && typeof value.length !== "undefined" && value.length > 0) {
                    el.appendChild(createComboBoxRow(key, value));
                } else {
                    continue;
                }
            }
        };

        var clearElement = function(el) {
            el.innerHTML = EMPTY;
        };

        if(typeof object.width !== "undefined") {
            this.style.width = object.width;
        }

        if(typeof object.data !== "undefined") {
            data = object.data;

            clearElement(this);
            prepareHead(this);
            populatePrid(prepareBody(this), object.data);
        }

        return this;
    };
}));

test.txt

var target = document.getElementById("target").prid({
    width : "100%",
    data : {
        id : 1,
        nickname : "guguluk",
        isAdmin : true,
        sayHello : function() {
            alert("hi guguluk");
        },
        keywords : ["gugu", "eray", "arslan"],
        smiley : ":D"
    }
});

JSON.stringify(target.getData());