simple-ui-builder/dist/ui.js

Build user interface like Lego bricks. UI.input(), UI.button(cb), UI.select(arr) etc. For lazy guys as I am.

!function(){var e=this.UI={};e.input=function(e,t){function n(n){localStorage["input#"+e.id]=o.value.trim(),13===n.keyCode&&t(o.value)}if(e=e||{},t=t||e.cb||function(e){console.log("you pressed enter and input value is >> "+e+" <<")},"function"==typeof e&&"object"==typeof t){var r=e;e=t,t=r}"string"==typeof e&&(e={id:e}),e.id=e.id||"input","string"==typeof e.parent?e.parent=document.querySelector(e.parent):e.parent=e.parent||document.querySelector("#ui")||document.body;var a=document.getElementById(e.id);a&&e.parent.removeChild(a);var o=document.createElement("input");if(o.id=e.id,o.type=e.type||"text",e.placeholder&&(o.placeholder=e.placeholder),o.name=e.name||e.id,void 0!==e["class"]||void 0!==e.className?o.className=e["class"]||e.className:o.className="form-control",e.style)for(var i in e.style){var l=e.style[i];o.style[i]=l}if(o.style.width=o.style.width||"300px",o.style.marginTop=o.style.marginTop||"5px",o.style.marginBottom=o.style.marginBottom||"5px",void 0===e.value?o.value=localStorage["input#"+e.id]||e["default"]||"":o.value=e.value,o.onkeyup=n,o.onchange=n,e.attributes)for(var d in e.attributes){var l=e.attributes[d];o.setAttribute(d,l)}e.parent.appendChild(o)},e.button=function(t,n){if("object"==typeof t)if("function"==typeof n){var r=n;n=t,t=r}else"undefined"==typeof n&&(n=t,t=console.log);if("string"==typeof t)if("function"==typeof n){var a=n;n={innerHTML:t},t=a}else"undefined"==typeof n&&(n={innerHTML:t},t=console.log);n=n||{},t=t||function(e){console.log(e+" clicked")},n.className=void 0!==n["class"]?n["class"]:void 0!==n.className?n.className:"btn btn-default",n.innerHTML=n.innerHTML||n.title||"Action",n.id=n.id||e.slug(n.innerHTML),"string"==typeof n.parent?n.parent=document.querySelector(n.parent):n.parent=n.parent||document.querySelector("#ui")||document.body;var o=document.getElementById(n.id);o&&n.parent.removeChild(o);var i=document.createElement("button");if(i.id=n.id,i.className=n.className,i.innerHTML=n.innerHTML,n.style)for(var l in n.style){var d=n.style[l];i.style[l]=d}if(i.style.margin=i.style.margin||n.margin||"10px",i.onclick=function(){t(i.id)},n.attributes)for(var c in n.attributes){var d=n.attributes[c];i.setAttribute(c,d)}n.parent.appendChild(i)},e.buttons=function(t,n,r){if(!t||!t.length)return console.warn("no array to build buttons!");if("object"==typeof n)if("function"==typeof r){var a=r;r=n,n=a}else"undefined"==typeof r&&(r=n,n=console.log);r=r||{},n=n||function(e){console.log(e+" clicked")},"string"==typeof r&&(r={innerHTML:r,id:r});var o=0,i=t.length;!function l(){var a=t[o];"number"==typeof a&&(a=a.toString());var d={parent:r.parent,innerHTML:a,className:r.className,style:{margin:"2px"}};e.button(n,d),o++,o<i&&l()}()},e.br=function(e){e=e||{},"string"==typeof e?e={parent:document.querySelector(e)}:"number"==typeof e?e={id:e.toString()}:e instanceof HTMLElement&&(e={parent:e}),"string"==typeof e.parent?e.parent=document.querySelector(e.parent):e.parent=e.parent||document.querySelector("#ui")||document.body,e.id=e.id||"br";var t=document.getElementById(e.id);t&&e.parent.removeChild(t);var n=document.createElement("br");n.id=e.id,e.parent.appendChild(n)},e.radio=function(e,t,n){function r(){var a=e[i],o=document.createElement("input");if(o.type="radio",o.id=a,o.name=t.id,t["default"]&&t["default"]==a&&(o.checked=!0),o.onclick=function(){n(o.id)},t.attributes)for(var d in t.attributes){var c=t.attributes[d];o.setAttribute(d,c)}t.parent.appendChild(o),t.parent.appendChild(document.createTextNode(a)),t.br&&t.parent.appendChild(document.createElement("br")),i++,i<l&&r()}if(!e||!e.length)return console.warn("no array to build radios!");if(t=t||{},n=n||t.cb||function(e){console.log("you clicked radio >> "+e+" <<")},"function"==typeof t&&"object"==typeof n){var a=t;t=n,n=a}"string"==typeof t&&(t={parent:document.querySelector(t)}),"string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body,t.id=t.id||"radio";var o=document.getElementById(t.id);o&&t.parent.removeChild(o);var i=0,l=e.length;r()},e.checkbox=function(t,n){if(t=t||{},n=n||t.cb||function(e){console.log("you clicked checkbox >> "+e+" <<")},"function"==typeof t&&"object"==typeof n){var r=t;t=n,n=r}"string"==typeof t&&(t={text:t,id:t}),"string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body,t.id=t.id||"checkbox";var a=document.getElementById(t.id);a&&t.parent.removeChild(a);var o=document.createElement("input");if(o.type="checkbox",o.id=t.id,o.className=t.className,o.checked=Boolean(t.checked),o.onclick=function(){n(o.id+" "+o.checked)},t.attributes)for(var i in t.attributes){var l=t.attributes[i];o.setAttribute(i,l)}if(t.parent.appendChild(o),t.text){var d={parent:t.parent,id:e.slug(t.id)+"-span",innerHTML:t.text},c=document.getElementById(d.id);c&&t.parent.removeChild(c),e.span(d)}},e.checkboxes=function(t,n,r){if(!t||!t.length)return console.warn("no array to build buttons!");if("object"==typeof n)if("function"==typeof r){var a=r;r=n,n=a}else"undefined"==typeof r&&(r=n,n=console.log);"string"==typeof r.parent?r.parent=document.querySelector(r.parent):r.parent=r.parent||document.querySelector("#ui")||document.body,r=r||{},n=n||function(e){console.log(e+" checked")};var o=0,i=t.length;!function l(){var a=t[o];"number"==typeof a&&(a=a.toString());var d={parent:r.parent,checked:Boolean(r.checked),text:a,id:e.slug(a),style:{margin:"2px"}};e.checkbox(n,d),r.br&&r.parent.appendChild(document.createElement("br")),o++,o<i&&l()}()},e.fileReader=function(e,t){if(t=t||{},"function"==typeof t&&"object"==typeof e){var n=t;t=e,e=n}e=e||t.cb||console.log,t.id=t.id||"file-reader","string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body;var r=document.getElementById(t.id);r&&t.parent.removeChild(r);var a=document.createElement("input");if(t.parent.appendChild(a),a.type="file",a.id=t.id,t.multiple&&(a.multiple="multiple"),t.style)for(var o in t.style){var i=t.style[o];a.style[o]=i}if(t.attributes)for(var l in t.attributes){var d=t.attributes[l];a.setAttribute(l,d)}a.onchange=function(n){function r(n){if(!(n>=o)){var l=a[n],d=l.name.split(/\./).pop();if(parent.bypassFileReader)return e(l);i.onload=function(a){var i=a.target.result;t.json&&["{","["].indexOf(i.slice(0,1))!=-1&&(i=JSON.parse(i)),e(i,l,n,o),r(n+1)},["zip","kmz"].indexOf(d)!=-1||t.readAsArrayBuffer?i.readAsArrayBuffer(l):["xls","xlsx"].indexOf(d)!=-1||t.readAsBinaryString?i.readAsBinaryString(l):i.readAsText(l,t.encoding)}}var a=n.target.files,o=a.length,i=new FileReader;r(0)}},e.download=function(e,t){t=t||{},e||console.warn("nothing to save!"),"object"==typeof e&&(e=JSON.stringify(e,null,"\t")),t.id=t.id||t.name||"download-link",t.name=t.name||"renameMe.json",t.type=t.type||"application/json","string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body;var n=document.getElementById(t.id);n&&t.parent.removeChild(n);var r=document.createElement("a");if(t.noBlob){var a=t.type+encodeURIComponent(e);r.href="data:"+a}else{var o=new Blob([e],{type:t.type}),i=URL.createObjectURL(o);r.href=i}if(r.download=t.name,r.textContent=t.name,r.id=t.id,t.style)for(var l in t.style){var d=t.style[l];r.style[l]=d}if(t.attributes)for(var c in t.attributes){var d=t.attributes[c];r.setAttribute(c,d)}t.parent.appendChild(r)},e.span=function(t){if("string"==typeof t&&(t={innerHTML:t}),!t.innerHTML)return"no innerHTML";t.id=t.id||e.slug(t.innerHTML),"string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body;var n=document.getElementById(t.id);n&&t.parent.removeChild(n);var r=document.createElement("span");if(r.innerHTML=t.innerHTML,r.id=t.id,t.className&&(r.className=t.className),t.style)for(var a in t.style){var o=t.style[a];r.style[a]=o}if(t.attributes)for(var i in t.attributes){var o=t.attributes[i];r.setAttribute(i,o)}t.parent.appendChild(r)},e.img=function(e){if("string"==typeof e&&(e={src:e}),!e.src)return"no src";e.id=e.id||"img","string"==typeof e.parent?e.parent=document.querySelector(e.parent):e.parent=e.parent||document.querySelector("#ui")||document.body;var t=document.getElementById(e.id);t&&e.parent.removeChild(t);var n=document.createElement("img");if(n.src=e.src,e.alt&&(n.alt=e.alt),n.id=e.id,e.className&&(n.className=e.className),e.style)for(var r in e.style){var a=e.style[r];n.style[r]=a}if(e.attributes)for(var o in e.attributes){var a=e.attributes[o];n.setAttribute(o,a)}e.parent.appendChild(n)},e.link=function(t){if("string"==typeof t&&(t={href:t,title:t}),!t.href)return"no href";t.innerHTML=t.innerHTML||t.href,t.id=t.id||e.slug(t.innerHTML),"string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body;var n=document.getElementById(t.id);n&&t.parent.removeChild(n);var r=document.createElement("a");if(r.id=t.id,r.href=t.href,t.targetBlank&&(r.target="_blank"),r.innerHTML=t.innerHTML,t.style)for(var a in t.style){var o=t.style[a];r.style[a]=o}if(t.attributes)for(var i in t.attributes){var o=t.attributes[i];r.setAttribute(i,o)}t.parent.appendChild(r)},e.select=function(e,t,n){if(!e||!e.length)return console.warn("no array to build select!");if("function"==typeof n&&"object"==typeof t){var r=n;n=t,t=r}n||"object"!=typeof t||(n=t,t=console.log),n=n||{},n.id=n.id||"","string"==typeof n.parent?n.parent=document.querySelector(n.parent):n.parent=n.parent||document.querySelector("#ui")||document.body;var a=document.getElementById(n.id+"Select");a&&n.parent.removeChild(a),t=t||console.log;var o=document.createElement("select");if(o.className=n.className||"selectpicker",o.id=n.id+"Select",n.style)for(var i in n.style){var l=n.style[i];o.style[i]=l}var d=document.createElement("option");d.innerHTML=n.firstRowText||"select "+n.id,o.appendChild(d);for(var c=0;c<e.length;c++){var s=e[c],u=document.createElement("option");u.id=n.id+"Option",u.innerHTML=n.innerHTML||s,u.value=n.value||s,n["default"]&&n["default"]==s&&(u.selected=!0),o.appendChild(u)}n.parent.appendChild(o),o.onchange=function(){var e=document.querySelector("option#"+n.id+"Option:checked");e&&t(e.value)}},e.textarea=function(e){function t(t){localStorage["textarea#"+e.id]=r.value.trim()}e=e||{},e.id=e.id||"textarea",e.cols=(e.cols||60).toString(),e.rows=(e.rows||12).toString(),e.fontSize=e.fontSize||"12px","string"==typeof e.parent?e.parent=document.querySelector(e.parent):e.parent=e.parent||document.querySelector("#ui")||document.body;var n=document.getElementById(e.id);n&&e.parent.removeChild(n);var r=document.createElement("textarea");if(r.cols=e.cols,r.rows=e.rows,r.id=e.id,r.className=e.className||e["class"]||"form-control",e.style)for(var a in e.style){var o=e.style[a];r.style[a]=o}if(r.style.fontFamily="monospace",r.style.fontSize=e.fontSize,e.attributes)for(var i in e.attributes){var o=e.attributes[i];r.setAttribute(i,o)}e.parent.appendChild(r),r.value=localStorage["textarea#"+e.id]||e.value||"",r.onkeyup=t,r.onchange=t},e.TB=function(t,n){if("function"==typeof n&&"object"==typeof t){var r=n;n=t,t=r}t=t||console.log,n=n||{},"string"==typeof n.parent?n.parent=document.querySelector(n.parent):n.parent=n.parent||document.querySelector("#ui")||document.body,n.className="",e.textarea(n),n.parent.appendChild(document.createElement("br"));var a=n.id,o=document.querySelector("textarea#"+n.id);if(!n.noAction){var i={};i.parent=n.parent,i.id=n.id+"Action",i.innerHTML=n.buttonText||"Action",i.className="",i.style={margin:"0px"},e.button(i,function(){var e=o.value.trim().split(/\n\r?/).filter(function(e){return e});t(e)})}var l={};l.parent=n.parent,l.id=n.id+"Clear",l.innerHTML="Clear",l.className="",l.style={margin:"0px",marginLeft:"5px"},e.button(l,function(){o.value="",localStorage[a]=""})},e.table=function(e,t){e||"object"==typeof e[0]||alert("Argument is not an array with objects"),"object"!=typeof e[0]&&(e=e.map(function(e){return{value:e}}));var n=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;"string"==typeof t&&(t={parent:t}),t=t||{},"boolean"!=typeof t.selectable&&(t.selectable=!1),t.tableId=t.tableId||t.id||"printedTable",t.showColumns=t.showColumns||t.columns||t.cols||[],t.hideColumns=t.hideColumns||[],"string"==typeof t.parent?t.parent=document.querySelector(t.parent):t.parent=t.parent||document.querySelector("#ui")||document.body,"boolean"!=typeof t.hideHead&&(t.hideHead=!1),"boolean"!=typeof t.sortColumns&&(t.sortColumns=!1);var r,a=[],o={},i="";if(0!==t.showColumns.length)a=t.showColumns;else for(var l=0;l<e.length;l++)for(var d in e[l])if(a.indexOf(d)==-1&&t.hideColumns.indexOf(d)==-1){a.push(d);var c=e[l][d];o[d]=!isNaN(c)&&"number"==typeof c}t.sortColumns&&a.sort();var s=document.getElementById(t.tableId);s&&t.parent.removeChild(s);var u=document.createElement("table");if(u.id=t.tableId,t.style)for(var p in t.style){var m=t.style[p];u.style[p]=m}if(u.style.margin=u.style.margin||"10px",u.style.fontFamily=u.style.fontFamily||"monospace",u.style.width=u.style.width||"auto 90%",u.style.borderCollapse=u.style.borderCollapse||"collapse",t.parent.appendChild(u),!t.hideHead){var y=u.createTHead(),f=y.insertRow(0);if(t.selectable){var b=document.createElement("th");b.style.background="#f6f6f6",b.style.padding="3px",b.style.border="1px solid black",r=document.createElement("input"),r.id=t.tableId+"ColCheckbox",r.type="checkbox",r.checked=Boolean(t.checked),b.appendChild(r),f.appendChild(b)}for(var v=0;v<a.length;v++){var h=document.createElement("th");h.style.background="#f6f6f6",h.style.padding="3px",h.style.border="1px solid black",h.appendChild(document.createTextNode(a[v])),f.appendChild(h)}}var g=document.createElement("tbody");if(u.appendChild(g),0!==e.length)for(var C=0;C<e.length;C++){var S=g.insertRow(-1);S.id="r"+C;var x=e[C];if(t.selectable){var k=document.createElement("td");k.style.padding="3px",k.style.border="1px solid black";var E=document.createElement("input");E.className=t.tableId+"RowCheckbox",E.id="r"+C,E.type="checkbox",E.checked=Boolean(t.checked),k.appendChild(E),S.appendChild(k)}for(var q=0;q<a.length;q++){i=x[a[q]],i=void 0!==i&&null!==i?i:"",i.constructor===Array&&(i=i.join(", ")),i.constructor===Object&&(i=JSON.stringify(i)),"string"==typeof i&&(i=i.replace(t.quotes,"'"),n.test(i)&&(i=new Date(i).toLocaleDateString()));var T=document.createElement("td");/<a.+<\/a>/.test(i)?T.appendChild((new DOMParser).parseFromString(i,"text/html").querySelector("a")):/<img.+?>/.test(i)?T.appendChild((new DOMParser).parseFromString(i,"text/html").querySelector("img")):/<input.+?>/.test(i)?T.appendChild((new DOMParser).parseFromString(i,"text/html").querySelector("input")):T.appendChild(document.createTextNode(i)),T.style.padding="3px",T.style.border="1px solid black",S.appendChild(T)}}r&&(r.onchange=function(){for(var e=document.querySelectorAll("."+t.tableId+"RowCheckbox"),n=0;n<e.length;n++)e[n].checked=!e[n].checked})},e.addRow=function(e,t){t=t||{},t.selectable=t.selectable||!1,t.mdl=t.mdl||!1,t.showColumns=t.showColumns||t.cols||t.columns||[],t.tableId=t.tableId||t.id||"printedTable";var n=document.getElementById(t.tableId);n||Table.print([],t);var r=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,a=[],o="";a=0!==t.showColumns.length?t.showColumns:Object.keys(e);var i=document.querySelector("#"+t.tableId).querySelector("tbody"),d=i.insertRow(-1);if(t.selectable){var c=document.createElement("td");t.mdl||(c.style.padding="3px",c.style.border="1px solid black");var s=document.createElement("input");s.className=t.tableId+"RowCheckbox",s.type="checkbox",s.checked=Boolean(t.checked),c.appendChild(s),d.appendChild(c)}for(var u=0;u<a.length;u++){var p=document.createElement("td");t.mdl||(p.style.padding="3px",p.style.border="1px solid black"),o=e[a[u]],o=void 0!==o&&null!==o?o:"",o.constructor===Array?o=o.join(", "):o.constructor===Object?o=JSON.stringify(o):"string"==typeof o&&(o=o.replace(t.quotes,"'"),r.test(o)&&(o=new Date(o).toLocaleDateString())),/<a.+<\/a>/.test(o)?p.appendChild((new DOMParser).parseFromString(o,"text/html").querySelector("a")):/<img.+?>/.test(o)?p.appendChild((new DOMParser).parseFromString(o,"text/html").querySelector("img")):p.appendChild(document.createTextNode(o)),t.mdl?numCol[a[l]]||(p.className="mdl-data-table__cell--non-numeric"):(p.style.padding="3px",p.style.border="1px solid black"),d.appendChild(p)}},e.getTableSel=function(e){for(var t=document.querySelectorAll("."+e+"RowCheckbox"),n=[],r=0;r<t.length;r++)t[r].checked&&n.push(r);return n},e.div=function(e){e=e||{},"string"==typeof e&&(e={id:e}),"string"==typeof e.parent?e.parent=document.querySelector(e.parent):e.parent=e.parent||document.querySelector("#ui")||document.body;var t=document.getElementById(e.id);t&&e.parent.removeChild(t);var n=document.createElement("div");if(n.id=e.id||"div",n.className=e.className,e.attributes)for(var r in e.attributes){var a=e.attributes[r];n.setAttribute(r,a)}e.parent.appendChild(n)},e.appendModal=function(e){e=e||{},e.id=e.id||"modal",e.title=e.title||"Modal title";var t=document.createElement("div");t.id=e.id,t.setAttribute("class","modal fade"),t.setAttribute("role","dialog"),document.body.appendChild(t);var n=document.createElement("div");n.setAttribute("class","modal-dialog"),t.appendChild(n);var r=document.createElement("div");r.setAttribute("class","modal-content"),n.appendChild(r);var a=document.createElement("div");a.setAttribute("class","modal-header"),a.style.padding="10px",r.appendChild(a);var o=document.createElement("button");o.setAttribute("class","close"),o.setAttribute("data-dismiss","modal"),o.innerHTML="&times;",a.appendChild(o);var i=document.createElement("h4");i.setAttribute("class","modal-title"),i.innerHTML=e.title,a.appendChild(i);var l=document.createElement("div");l.id=e.id+"-body",r.appendChild(l);var d=document.createElement("div");d.id=e.id+"-footer",r.appendChild(d)},e.slug=function(e){function t(e){return e.replace(/\-{2,}/g,"-").replace(/_{2,}/g,"_").replace(/[\-\_]+$/g,"").replace(/^[\-\_]+/g,"")}if(e){if("number"==typeof e)return e;var n={"/":"_","\\":"_","а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ж":"zh","з":"z","и":"i","й":"y","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r","с":"s","т":"t","у":"u","ф":"f","х":"kh","ц":"ts","ч":"ch","ш":"sh","щ":"sch","ы":"i","ь":"","ъ":"","э":"e","ю":"yu","я":"ya","ё":"e","є":"e","і":"i","ї":"yi","ґ":"g","+":"-plus"},r=/[^a-z0-9\-_]/gi,a=e.split("").map(function(e){return e=e.toLowerCase(),void 0!==n[e]?n[e]:e}).join(""),o=a.replace(r,"-"),i=t(o);return i}}}();