Crie um alerta dispensável com JavaScript (e localStorage)

Infelizmente, sempre exibir um alerta ocupa muito espaço na tela. Podemos resolver isso tornando-o descartável. Hoje, vamos construir um do zero usando localStorage e JavaScript.

O que estamos criando

O exemplo neste caso é um site primitivo tipo portfólio com rodapé, navegação e área de conteúdo. Na parte superior da janela de visualização, exibimos um alerta solicitando que o visitante se inscreva. Em um mundo fictício, o site que criamos pode ter conteúdo premium disponível apenas para assinantes.

Veja como funciona nosso alerta na caneta abaixo; embora, depois de descartá-lo, você não poderá mais vê-lo neste navegador, então há uma captura de tela abaixo para lembrá-lo:

captura de tela do nosso alerta descartávelcaptura de tela do nosso alerta descartávelcaptura de tela do nosso alerta descartável

1. Adicione a marcação

Na parte superior da página, adicionarei a marcação HTML de alerta. O código é posicionado após o body tag em seu documento HTML.

O alerta é um div com um role="alert" opção que informa ao navegador e aos recursos de acessibilidade que o conteúdo deve sinalizar ao usuário final.

Nós adicionamos um button elemento que está envolvendo um SVG ícone de onde copiei heróis, uma biblioteca de ícones de código aberto. o button O elemento será responsável por acionar a dispensa do alerta quando clicado, e adicionaremos a lógica para fazer esse trabalho surgir.

Conteúdo de demonstração

Abaixo do alerta, adicionaremos algum conteúdo de espaço reservado para imitar o site do portfólio.

Nós renderizamos a navegação compartilhada dentro do header e a footer blocos. Cada nav tem um aria-label="Main" atributo para significar que eles são os mesmos controles em dois locais.

o main elemento contém conteúdo de espaço reservado e um div elemento com a classe callout. O callout é um upsell para que os visitantes do site vejam o conteúdo da página.

2. Estilizando a página

Para manter as coisas compatíveis com o tema, vou aproveitar as variáveis ​​CSS neste guia para que você possa ajustar as cores do seu lado.

Os estilos de alerta seguem as variáveis.

o .alert elemento botão está absolutamente posicionado dentro do .alert div. Nosso botão fixa o botão no lado direito do alerta e se desloca ligeiramente do topo.

Ocultação mais organizada do alerta

Você pode notar um transform propriedade no .alert classe. E o mesmo transform propriedade no alert-hidden classe. Nós estaremos alternando o alert-hidden classe com JavaScript chegando. o transform propriedade combinada com transition nos dá uma maneira mais eficiente de mostrar e ocultar o alerta com uma boa animação. Usando o scaleY(0) abordagem, podemos alternar gradualmente a aparência.

Vale a pena notar que poderíamos alternar a aparência com um display mas fazer isso com JavaScript não deixa espaço para animações, caso você queira tê-las.

Estilos Adicionais

Aqui estão alguns estilos adicionais para abordar os outros componentes da página. Em sua maioria, são fundamentais. O contêiner de texto explicativo tem algumas propriedades definidas para destacá-lo mais do que o restante do conteúdo da página.

3. Ignorando o alerta

Com JavaScript, podemos nos conectar ao navegador do API de eventos para ouvir as mudanças. Um evento típico usado é o evento “click”.

Antes de podermos ouvir o evento, precisamos informar ao JavaScript sobre o elemento que ele precisa procurar no DOM.

  1. Um alert variável: responsável por direcionar o próprio alerta.
  2. UMA dismissAlertButton variável: responsável por direcionar o button elemento dentro do .alert div.

Em seguida, precisamos ouvir o evento “click” mencionado anteriormente, para saber quando descartar o alerta. Podemos fazer isso usando o addEventListener() método no botão.

Podemos usar o prático console.log() utilitário para testar as coisas. O botão deve registrar Clicou! para o console do seu navegador.

4. Evitando a lógica padrão

Para qualquer uso do addEventListener método, obtemos uma instância livre do próprio objeto de evento para uso dentro do método. Isso é importante para casos em que você pode precisar substituir os padrões do navegador. Normalmente, é uma boa ideia evitar a lógica padrão de um elemento que você está direcionando com JavaScript.

Em seguida, devemos alternar a visibilidade do alerta. Podemos fazer isso de duas maneiras, mas, conforme mencionado na seção CSS, usaremos uma abordagem mais animada.

Aqui adicionamos o alert-hidden classe, o que efetivamente faz com que o alerta desapareça ao clicar no botão. Funciona!

Você pode notar que eu adicionei alguma lógica condicional para verificar se o dismissAlertButton não é null. Se houvesse uma página sem o botão, nosso JavaScript renderia um erro. Para corrigir esse problema, você pode adicionar uma verificação condicional para garantir que o elemento esteja na página. Um simples if declaração deve fazer o trabalho.

5. Salvando o estado local

Infelizmente, o alerta é exibido novamente quando você recarrega a página após clicar no botão dispensar. Podemos resolver isso com algo chamado localStorageintegrado aos navegadores modernos.

localStorage permite que você salve temporariamente alguns dados do navegador. Não se destina a ser um verdadeiro armazenamento de dados como um banco de dados, mas funciona de maneira semelhante.

Nós vamos alavancar localStorage para definir um novo par de chave e valor no navegador. Então podemos verificar se esse valor está definido antes de exibir o alerta.

A API é relativamente simples. No final, aqui está o código final.

Aqui está o que está acontecendo:

  1. Verificaremos se o botão de dispensa está presente e, em caso afirmativo, ouviremos um evento de clique nele.
  2. Se o evento de clique for acionado, adicionamos o alert-hidden classe para o alerta.
  3. Com localStoragechamamos de setItem e passar um par chave-valor de hideAlert e true.
  4. Se a página for recarregada, nós imediatamente conectamos em “localStorage” novamente para chamar o getItem método visando o mesmo par de chave e valor definido anteriormente e ocultar o alerta com CSS via JavaScript.

Algumas limitações

localStorage é uma excelente solução para coisas simples. Conforme você trabalha com meu exemplo, você pode notar uma ligeira oscilação quando um navegador carrega novamente, e localStorage valores são definidos.

Essa é uma desvantagem da abordagem, pois o HTML e o CSS geralmente são carregados antes de executar o JavaScript. A única maneira de contornar isso é uma solução renderizada do lado do servidor em que o código é dinâmico em relação a um valor real com suporte de banco de dados.

Considerações finais

Elementos descartáveis ​​são uma ótima maneira de chamar a atenção e limpar o espaço da tela muito necessário. Os visitantes do seu site apreciam a capacidade de descartar algo, mesmo que seja útil saber!

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

cinco × 1 =

- Ana Pereira -spot_img

Últimos Artigos