Created
September 5, 2017 07:03
Star
You must be signed in to star a gist
pridjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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; | |
}; | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment