FORM show area

by Daniel Beff

HTML

<div class="widget-editoria_texto core-form cf">
			<div class="core-form-left">
				<span style="visibility:hidden; color: red; font-weight: bold;" id="msg_validacao">Alert: Preencher pelo menos 1 destaque</span>
				<table border="1">
					<tbody>
						<tr>
							<td><label>Título</label></td>
							<td>
								<input type="text" value="" name="titulo" size="100">
							</td>
						</tr>
						<tr>
							<td><label>Texto</label></td>
							<td>
								<input type="text" value="" name="texto" size="100">
							</td>
						</tr>

						<tr>
							<td><label>Tags</label></td>
							<td>
								<input class="input-tag" type="text" value="" name="tags" size="100">
							</td>
						</tr>
						<tr>
							<td><label>Alinhamento do texto</label></td>
							<td>
								<select id="alinhamento" name="alinhamento">
									<option value="left">Esquerda Esquerda Esquerda Esquerda</option>
									<option value="right">Direita</option>
								</select>
							</td>
						</tr>
					</tbody>
				</table>

				<div id="lista_destaques">
					<input type="hidden" id="qtd_destaques" value="2" name="qtd_destaques">
					<label>Destaques</label><br>

					<table id="destaques-0" class="destaque">
						<tr>
							<td><label>Titulo</label></td>
							<td><input name="destaques-0-titulo" id="destaques-0-titulo"></td>
						</tr>
						<tr>
							<td><label>Imagem</label></td>
							<td><input name="destaques-0-imagem" id="destaques-0-imagem"></td>
						</tr>
						<tr>
							<td><label>Link</label></td>
							<td><input name="destaques-0-link" id="destaques-0-link"></td>
						</tr>
						<tr>
							<td><label>Chapéu</label></td>
							<td><input name="destaques-0-chapeu" id="destaques-0-chapeu"></td>
						</tr>
						<tr>

							<td>
								<br>
								<a class="lookup bt" href="/lookup/materia?widget_class=EditoriaTextoWidget">Procurar</a>
							</td>
							<td>
								<br>
								<a class="bt red" onclick="removerDestaque('destaques-0')"...

CSS

/*
			azul padrão
			#0f68d4
			#2e7fe8 globocore
		*/

		/*clear fix*/
		.cf:before,.cf:after { content: " ";display: table; }
		.cf:after {clear: both;}
		.cf {*zoom: 1;}

		.core-form{
			-webkit-font-smoothing: antialiased;
			font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
			/*font-weight: 300;*/
			color:#333;
			font-size: 13px;
		}
		.core-form-left{
			width:500px;
			height:100%;
			float:left;
			height:auto;
			overflow: auto;
		}
		.core-form-right{
			float:left;
		}

		/*reset core form*/

		/*animacao e css3*/
		.core-form input,
		.core-form textarea,
		.core-form	.bt
		{
			transition: all 0.5s;
			-moz-transition: all 0.5s; 
			-webkit-transition: all 0.5s; 
			-o-transition: all 0.5s; 
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-o-border-radius: 4px;
			-ms-border-radius: 4px;
			-khtml-border-radius: 4px;
			border-radius: 4px;
			width:300px;
		}
		.core-form ul{
			list-style: none;
			padding:0px;
			margin-top: 10px; 
		}
		.core-form li{
			margin-bottom:3px;
			padding:10px;
			width: auto;
			display: block;
		}
		.core-form table{
			padding:0px;
			border:none;
		}
		.core-form td, .core-form tr{
			border:none;
			padding:3px 0px;
		}
		.core-form label{
			color:#2e7fe8;
			font-weight: bold;font-size: 16px;
		}
		.core-form select{
			margin: 20px 0;
		}
		.core-form input {
			border:1px solid #ccc;
			outline:none;
			padding:10px;
			font-size: 12px;
		}
		.core-form input.input-tag{
			font-weight: bold;
			color: #2e7fe8;
		} 
		.core-form input:focus {
			border:1px solid #2e7fe8;
		}
		.core-form	.bt{
			padding:10px 15px;
			background-color:#2e7fe8;
			color:#fff;
			text-decoration: none;
			cursor:pointer;
			font-size: 13px;
			font-weight: bold;
		}
		.core-form	.bt:hover{
			background-color:#3e92e8;
		}

		.core-form	.bt.red{
			background-color:#db2b2b;
		}
		.core-form	.bt.red:hover{
			background-color:#db4e4e;
		}
		.core-form .destaque...

JavaScript

function add_destaque(){
			var indice = parseInt($("#qtd_destaques").val());
			$("#qtd_destaques").val(indice + 1);

			var prefixo = "destaques-" + indice;
			$("#lista_destaques").append("<li id='" + prefixo + "'></li>");
			$("#" + prefixo).append("<span>Titulo</span> <input id='" + prefixo + "-titulo' name='" + prefixo + "-titulo' />");
			$("#" + prefixo).append("<span>Imagem</span> <input id='" + prefixo + "-imagem' name='" + prefixo + "-imagem' />");
			$("#" + prefixo).append("<span>Link</span> <input id='" + prefixo + "-link' name='" + prefixo + "-link' />");
			$("#" + prefixo).append("<span>Chapéu</span> <input id='" + prefixo + "-chapeu' name='" + prefixo + "-chapeu' />");
			$("#" + prefixo).append('{% lookup_link "materia" %}');
			$("#" + prefixo).append('<a href="#" onclick="removerDestaque(\''+prefixo+'\')">Remover</a></br>');

			load_image();
		}

		function removerDestaque(id){
			$("#" + id).remove();

		//atualizar o indice se for o ultimo item da lista
		var indice = parseInt($("#qtd_destaques").val()) -1;
		var prefixo = "destaques-" + indice;

		if(prefixo == id){
			$("#qtd_destaques").val(indice - 1);
		}

		load_image();
	}

	function load_image(){
		$("#imagem_preview").remove();
		var qtd = $("#lista_destaques li").size();
		if(qtd > 0){
			var alinhamento = $("#alinhamento").val();

			var src_imagem = STATIC_URL + "globosatcore/images/widgets/editoria_texto/" + alinhamento + "_" + qtd + "_destaques.jpg";

			$("#div_imagem_preview").append("<img id='imagem_preview' src='" +src_imagem + "' />");			
		}
	}

	$("#alinhamento").change(function(){
		load_image();
	});

	$("#btn_adiciona_destaque").click(function(){
		var qtd = $("#lista_destaques li").size();
		if(qtd < 4){
			add_destaque();
		}
	});

	$("a.lookup").bind('click', function() {
		idField = $(this).parent().attr("id");
	});

	var idField = null;
	function handleDataEditoriaTextoWidget(prefixo, datah){
		$("#" + idField+"-titulo").val(datah.fields.titulo);
		$("#" +...