var// ComponentesEsse =é {
um json que "input":vem {
do banco de dados
var Componentes = {"input": {"Label": "Textbox",
"Tag": "input",
"Attributes": {
"type": "text"
},
"Class": "form-control"
},
"btn": {
{"Label": "Button",
"Tag": "button",
"Attributes": {
"type": "button"
},
"Class": "btn",
"Childrens":[
{
"Type": "text",
"Value": "Botão"
}
]
},
"label": {
"Label": "Label",
"Tag": "label",
"Class": "",
"Childrens":[
{
"Type": "text",
"Value": "Label:"
}
]
},
"form-help":{
"Label": "Form help",
"Tag": "span",
"Class": "help-block",
"Childrens":[
{
"Type": "text",
"Value": "I'm a help text."
}
]
},
"textbox": {
"Label": "Textbox Group",
"Tag": "div",
"Class": "form-group",
"Siblings":[],
"Childrens":[
{
"Type": "component",
"Value":"label"
},
{
"Type": "component",
"Value":"input"
},
{
"Type": "component",
"Value": "form-help"
}
],
"Rules": {
"AllowChilds": false}}};
// Evento dos botões, tem que }
implementar um evento }
};
de Drag n Drop
$(document).on('click', '#componentes .add', function(event){
event.preventDefault();
AddComponent( $(this).data('componente') );
});
// Método que adiciona o componente
function AddComponent(componente, retorna){
retorna = retorna// ==Parâmetro undefinedpara ?recursividade false(adicionar :elementos retorna;filhos)
retorna = retorna == console.log(componente);
undefined ? false : retorna;
if(Componentes == null){
// Componente alert("Osescolhido componentesfoi aindaarmazenado nãona foramvariável carregados");c
var c return= false;Componentes[componente];
}
// Objeto para varregistro cdos =componentes, Componentes[componente];
pode ignorar
var cmp = {
'CID': Date.now(),
'Type': componente
};
// Elemento criado
var $element = $('<'+c.Tag+' />');
$element.addClass(c.Class+" component "+c.EditClass);
// Adiciona todos os atributos padrões no elemento
if (c.Attributes != undefined && c.Attributes.length > 0)
for(attr in c.Attributes)
$element.attr(attr, c.Attributes[attr]);
// Atributo de controle de edição, pode ignorar
$element.attr('data-component', cmp.Type)
.attr('data-cid', cmp.CID);
// Adiciona todos os elementos filhos
if (c.Childrens != undefined && c.Childrens.length > 0){
for(children in c.Childrens){
switch(c.Childrens[children].Type){
case "component":
$element.append( AddComponent(c.Childrens[children].Value, true) );
break;
case "text":
$element.text( c.Childrens[children].Value );
break;
}
}
}
// Verifica se é pra adicionar a área de design ou retornar o elemento
// para ser adicionado a um elemento pai
if (retorna)
return $element;
else
$('#edit-area .active').append($element);
}
/* CSS meramente para demostração*/
#edit-area {
display: block;
margin-bottom:20px;
box-sizing: content-box;
min-height: 200px;
position: relative;
overflow: auto;
background: #E0E0E0;
}
.row{
background:white;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
margin:10px;
padding:5px;
min-height:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-9 col-md-9">
<div id="edit-area">
<div class="row">
<div class="col-lg-12 col-md-12 active"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3" id="componentes">
<div class="list-group">
<button class="add list-group-item" data-componente="textbox">Textbox Group</button>
<button class="add list-group-item" data-componente="input">Input</button>
<button class="add list-group-item" data-componente="btn">Botão</button>
</div>
</div>
</div>
Não tem problema criar novos elementos para o manuseio do componente, pois os componentes são armazenados em objetos (com ids, tipos, propriedades e etc.) e depois salvo no banco de dados os elementos HTML gerados somente são para o visual do designer.