Tutorial – Como criar um banner expansível

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

Existem 2 formatos expandable:

Single Expandable – onde a animação da parte retraída e a expandida ocorrem no mesmo html
Expandable Banner – onde a animação da parte retraída ocorre em um index.html e a animação da parte expandida ocorre em outro index.html

Painel fechado – Single Expandable

Dentro do index.html da pasta raiz altere a seguinte linha com o size da parte expandida que necessitar:

<script>if(0)EB.initExpansionParams(0, 0, 728, 200);</script>

Ainda no index.html, dentro da div ‘<div id=”banner”>’ insira o seu código html5.

	<div id="banner">
		<div class="brand-logo"></div>
		<div class="label"><strong>HTML5 Single Expandable:</strong> 728x90</div>
		<div class="buttons">
			<button id="expandButton" class="expand-button">Expand</button>
		</div>
		<!-- inserir HTML5 aqui -->
	</div>

Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function initializeCreative(event){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.

function initializeCreative(event) {
	try { //try/catch just in case localPreview.js is not included
		if (window.localPreview) {
			window.initializeLocalPreview(); //in localPreview.js
		}
	}
	catch (e) {}

	//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
	typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);

	window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
	initializeGlobalVariables();
	initializeCloseButton();
	addEventListeners();
	//inserir a sua função da parte retraída aqui
}

Painel aberto – Single Expandable

Ainda no index.html, dentro da div ‘<div id=”panel”>’ insira o seu código html5.

	<div id="panel">
		<div class="brand-logo"></div>
		<div class="label"><strong>HTML5 Single Expandable:</strong> 728x200</div>
		<div class="buttons">
			<button id="closeButton" class="close-button">Close</button>
			<button id="userActionButton" class="useraction-button">UserAction</button>
			<button id="clickthroughButton" class="clickthrough-button">ClickThrough</button>
		</div>
        <!-- inserir o HTML5 da parte expandida aqui -->
	</div>

Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function handleExpandButtonClick(){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.

function handleExpandButtonClick() {
	EB.expand();
	EB.API.setStyle(bannerDiv, {
		display: "none"
	});
	EB.API.setStyle(panelDiv, {
		display: "block"
	});
	// inserir a sua função da parte expandida aqui
}

Painel fechado – Expandable

Dentro do index.html da pasta raiz altere a seguinte linha com o size da parte expandida que necessitar:

<script>if(0)EB.initExpansionParams(0, 0, 728, 200);</script>

Dentro do index.html do diretório raiz, insira a animação dentro da div ‘banner’.

	<div id="banner">
		<div class="brand-logo"></div>
		<div class="label"><strong>HTML5 Expandable Banner</strong> 728x90</div>
		<div class="buttons">
			<button id="expandButton" class="expand-button">Expand</button>
		</div>
        <!-- inserir conteudo HTML5 aqui -->
	</div>

Dentro do arquivo ‘scripts/script.js’, vá até a função ‘function initializeCreative(event){…}’ e dentro dela coloca a sua função que será responsável por disparar a animação do banner no final do código.

function initializeCreative(event) {
	try { //try/catch just in case localPreview.js is not included
		if (window.localPreview) {
			window.initializeLocalPreview(); //in localPreview.js
		}
	}
	catch (e) {}

	//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
	typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);

	window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
	initializeGlobalVariables();
	initializeCloseButton();
	addEventListeners();
	// inserir funcao de disparo de animação parte fechada
}

Painel Aberto – Expandable

Dentro do diretório ‘panels/expand/’, no index.html, insira seu conteúdo HTML5 no local indicado.

	<div id="expansion">
		<div class="brand-logo"></div>
		<div class="label"><strong>HTML5 Expandable Banner</strong> 728x200</div>
		<div class="buttons">
			<button id="closeButton" class="close-button">Close</button>
			<button id="userActionButton" class="useraction-button">UserAction</button>
			<button id="clickthroughButton" class="clickthrough-button">ClickThrough</button>
		</div>
        <!-- inserir seu conteudo HTML5 aqui -->
	</div>

E dentro do diretório ‘panels/expand/scripts’, no script.js, insira o código que dispara a animação da parte aberta dentro da função abaixo:

function initializeCreative(event) {
	try { //try/catch just in case localPreview.js is not included
		if (window.localPreview) {
			window.initializeLocalPreview(); //in localPreview.js
		}
	}
	catch (e) {}

	//Workaround (from QB6573) for Async EB Load where Modernizr isn't properly initialized
	typeof Modernizr === "object" && (Modernizr.touch = Modernizr.touch || "ontouchstart" in window);

	window.registerInteraction = function() {}; //overwrite rI function because it will never actually be called
	initializeGlobalVariables();
	initializeCloseButton();
	addEventListeners();
	// inserir funcao que dispara a animacao da parte expandida aqui
}

Alteração no size e estilo

Para alteração de tamanhos, cores, estilos de botões, painéis, e demais elementos, deve ser editado o arquivo ‘styles/style.css’ de cada painel ou componente.

#banner {
	position: absolute;
	display: block;
	width: 728px;
	height: 90px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	box-shadow: 0px 0px 0px 1px #666666 inset;	
}

#panel {
	position: absolute;
	display: none;
	width: 728px;
	height: 200px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	box-shadow: 0px 0px 0px 1px #666666 inset;		
}

Efetuando Testes Em Sua Máquina

Para efetuar os devidos testes, deve-se abrir em seu navegador o index.html e testar o banner para validar se a animação, expansão e comandos de clique estão disparando corretamente.

Para verificar se o botão de clique não apresenta problemas basta adicionar esta linha de código dentro da função do botão de clique
console.log(‘teste_botao_de_clique’);

function handleClickthroughButtonClick() {
	EB.clickthrough();
	console.log('teste_botao_de_clique')
}

Feito isto ao clicar no botão de clique, dentro do console do navegador deverá ser observado o disparo do teste conforme print abaixo:

Escondendo elementos

Nunca delete um elemento do index.html se não souber remover sua referência dentro do script.js, do contrário o código poderá parar de funcionar por erro de javascript.

Para evitar estes erros, encontre o elemento dentro de seu respectivo style.css e adicione o comando:
display:none;

Veja exemplo abaixo:

.label {
	font-size: 11px;
	color: #0D2A4D;
	position: absolute;
	left: 10px;
	top: 36px;
	display:none;
}