Como alterar o Spry Accordion para exibir o painel em questão aberto

Olá amigos, tudo bem com vocês? Espero que sim.

Este é meu primeiro artigo após o iMasters InterCon 2007. Fiquei muito contente de estar presente no evento, onde tive a oportunidade de conhecer novas pessoas, os novos integrantes da família iMasters, bater um papo descontraído com leitores da coluna, do meu blog e daqueles que já adquiriram alguns dos meus cursos, além de realizar um networking para trabalhos futuros. Foi ótimo estar em contato com vocês.

Hoje, falaremos sobre o Spry Accordion, um dos novos recursos da versão CS3 do Dreamweaver.

O Spry Accordion é um grupo de painéis “dobráveis”, onde cada um deles é visível e aberto por vez. Este tipo de recurso é muito utilizado na exibição de extenso conteúdo em espaços compactos.

O escopo deste artigo refere-se a uma forma de hackear o código do Spry Accordion, afim de exibir em aberto o painel em questão. E não de como criar um Spry Accordion. Como, até o momento, não há uma opção do recurso que nos possibilite tal opção, resolvi adaptar o código.

Um detalhe, hackear um código nada mais é do que modificar ou inventar algumas funcionalidades que não foram pensadas, desenvolvidas ou implementadas pelo autor do código original. Somente.

No Curso Interativo Adobe Dreamweaver CS3 abordo tudo sobre o Spry, inclusive o Spry Accordion. Além de falar sobre uma dica de como definir que um painel padrão fique aberto ao carregar a página. Embora o Dreamweaver CS3 não ofereça tal opção através de sua interface.

Para que possamos alcançar o nosso objetivo, ou seja, exibir o painel em questão do Spry Accordion aberto, vamos realizar o seguinte processo: quando o usuário clicar sobre um determinado painel, será criado um cookie que irá gravar a identificação de tal painel. Dessa forma, saberemos qual o último painel aberto, e com essa informação, poderemos abri-lo ao carregar a página. Simples.

Em um post entitulado como Solução para trabalhar com cookies em JavaScript no meu blog, disponibilizo um código para trabalhar, de forma simples, com cookies via JavaScript. Portanto, iremos incluí-lo junto ao arquivo do Spry Accordion, isto é, SpryAccordion.js. Inclua o código antes da instanciação da variável Spry: var Spry;

Nota: o código será disponibilizado no final do artigo, para você observar com maiores detalhes tais modificações.

Uma vez incluindo o código, w3cookies, podemos criar o cookie que precisamos e saber qual o painel clicado pelo usuário.

Através da inicialização do Spry Accordion é definido uma opção denominada como defaultPanel com o valor zero. O que indica que o painel a ser aberto quando a página carregar será o primeiro, sempre. Vamos mudar esse comportamento, de forma a exibir sempre o último painel clicado. Observe a lógica:

	if ( SpryCurrentPanel = w3cookies.read('SpryCurrentPanel') ) {
		this.defaultPanel = SpryCurrentPanel;
	} else {
		this.defaultPanel = 0;
	}

Dentro de uma condição IF, definimos o valor da variável SpryCurrentPanel com o valor de um cookie, também chamado de SpryCurrentPanel. Se tal cookie já tiver sido criado, teremos algum valor nessa variável. O que nos informa qual painel deveremos deixar aberto. Caso contrário, abriremos o primeiro painel.

Agora, precisamos apenas criar o cookie SpryCurrentPanel quando o usuário abrir o painel desejado. Esse cookie será criado dentro de uma função do Spry Accordion chamada openPanel. Esse função é executada para abrir um painel desejado. Vamos acrescentar o seguinte código no final da função openPanel:

w3cookies.create('SpryCurrentPanel',this.getCurrentPanelIndex(),365);

Nota: Se o arquivo do SpryAccordion.js for a versão 1.6 adicione o código demonstrado acima antes do seguinte código: return panelB;

Ou seja, criamos um cookie chamado SpryCurrentPanel; com o valor do painel em questão, isto é, o painel que acabara de ser exibido; e definimos que o cookie terá uma vida de 365 dias. Observe que utilizamos a função getCurrentPanelIndex do próprio Spry Accordion que nos diz qual o painel em questão.

Pronto. Alcançamos o objetivo desejado: exibir o painel em questão aberto.

Baixe o arquivo SpryAccordion.js com as modificações discutidas neste artigo.

Espero que tenham gostado; um forte abraço a todos.