ID="AMG_CONNECT_BUILT_IN_PACKAGE" PACKAGE[ID] = { name:"Built-in", text:"Built-in components", children:["CONTAINER", "DISPLAY", "INPUT", "MENU"], object:{ setProperty:function(e) { document.getElementById(e.id)[e.key] = e.value; }, getProperty:function(e) { console.log(e); return document.getElementById(e.id)[e.key]; }, setAttribute:function(e) { document.getElementById(e.id).setAttribute(e.key, e.value); }, setStyle:function(e) { $("#"+e.id).css(e.key, e.value); document.getElementById(e.id).style[e.key] = e.value; }, getStyle:function(e) { return $("#"+e.id).css(e.key); }, onclick:function(obj) { document.getElementById(obj.id).onclick = function(e) { obj.value(e); }; }, write_body_start_row:function(e){return '
';}, write_body_end:function(component){return "
";}, write_body_script:function(component){} }; PACKAGE.BUTTON = { name:"Button", text:"button", children:false, parameter:[ {name:"content", text:"Content", input:{type:"0", value:"Button"}, setParameter:function(e) { document.getElementById(e.id).innerHTML = e.value; }, getParameter:function(e){ } }, {name:"background", text:"background", input:{type:"3", value:""}, setParameter:function(e) { document.getElementById(e.id).style.background = e.value; }, getParameter:function(e){ } }, {name:"size", text:"Size", input:{type:"1", option:[{value:"btn-sm", text:"Small"}, {value:"btn-md", text:"Medium"}, {value:"btn-lg", text:"Large"}], value:"btn-sm"}, setParameter:function(e) { function check(value) { switch(value) { case "small": return "btn-sm"; case "medium": return "btn-md"; case "large": return "btn-lg"; } return value; } _class = check(e.value.toLowerCase()); _prev = check(e.previousValue.toLowerCase()) document.getElementById(e.id).classList.remove(_prev); document.getElementById(e.id).classList.add(_class); }, getParameter:function(e){} }, {name:"type", text:"Type", input:{type:"1", option:[{value:"btn-primary", text:"Primary"}, {value:"btn-secondary", text:"Secondary"}, {value:"btn-success", text:"Success"}, {value:"btn-danger", text:"Danger"}, {value:"btn-warning", text:"Warning"}, {value:"btn-info", text:"Info"}, {value:"btn-light", text:"Light"}, {value:"btn-dark", text:"Dark"}], value:"btn-primary" }, setParameter:function(e) { document.getElementById(e.id).classList.add(e.value); }, getParameter:function(e){}} ], callback:[ {name:"click", text:"On click", setCallback:"onclick" }, {name:"mouseover", text:"On mouse over", setCallback:function(obj) { document.getElementById(obj.id).onmouseover = obj.value; } }, {name:"mouseout", text:"On mouse out", setCallback:function(obj) { document.getElementById(obj.id).onmouseout = obj.value; } }, {name:"mouseenter", text:"On mouse enter", value:"/*Enter Your code here*/", setCallback:function(obj) { document.getElementById(obj.id).onmouseenter = obj.value; } } ], write_head_init:function(component){return "";}, write_body_start:function(component){return '";}, write_body_script:function(component){return ""}, add_body_script:function(component){console.log('this is from button '+ component.id);} }; PACKAGE.TEXTBOX = { name:"Textbox", text:"Textbox", children:false, parameter:[ {name:"Property group 1", text:"Property group 1", children:[ {name:"value", text:"value", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:"textbox"}}, {name:"value2", text:"value2", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:"textbox"}}, ]}, {name:"size", text:"Size", input:{type:"1", option:[{value:"form-control-sm", text:"Small"}, {value:"form-control-md", text:"Medium"}, {value:"form-control-lg", text:"Large"}], value:"form-control-sm"}, setParameter:function(e) { document.getElementById(e.id).classList.add(e.value); }}, {name:"placeholder", text:"placeholder", setParameter:"setProperty", getParameter:"getProperty", input:{type:"0", value:""}}, {name:"custom parameter", text:"custom parameter", setParameter:function(e){}, getParameter:function(e){}, input:{type:"custom", value:{}, open:function(e) { let div = document.createElement('div'); let button = document.createElement('button'); button.classList.add("btn", "btn-secondary"); button.innerHTML = "Add"; let table = document.createElement("table"); table.classList.add("table", "table-bordered", "table-condensed", "table-hover"); let tbody = document.createElement("tbody"); table.appendChild(tbody); button.onclick = function(e) { let tr = document.createElement("tr"); let input = document.createElement("input"); input.classList.add("form-control"); let td = document.createElement("td"); td.appendChild(input); tr.appendChild(td); tbody.appendChild(tr); }; div.appendChild(button); div.appendChild(table); e.container.appendChild(div); }, save:function(e){ if(true) { return undefined; } else { return {"value1":"123", "value2":"345"}; } }, } }, { name:"test-checkbox", text:"test-checkbox", setParameter:function(e){}, getParameter:"getProperty", input:{type:"2", option:[{value:"form-control-sm", text:"Small"}, {value:"form-control-md", text:"Medium"}, {value:"form-control-lg", text:"Large"}], value:["form-control-lg", "form-control-sm"]} }, ], callback:[ { name:"change", text:"on change handler", setCallback:function(obj) { document.getElementById(obj.id).onchange = obj.value; } }, { name:"Callback group1", text:"", children:[ {name:"Callback1", "text":"callback 1", setCallback:function(e){}}, {name:"Callback2", "text":"callback 2", setCallback:function(e){}} ] } ], write_head_init:function(component){}, write_body_start:function(component){return '';}, write_body_script:function(component){}, }; PACKAGE.DROPDOWN = { name:"Dropdown", text:"Dropdown", children:false, parameter:[ { name:"option", text:"option", input:{type:"0", value:""}, setParameter:function(obj) { let option = obj.value.split(",").map(d=>d.trim()); let select = document.getElementById(obj.id); select.querySelectorAll("option").forEach(function(d) { select.removeChild(d); }); for(let i=0;i