Criar 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:

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.

  
    

      📰 Subscribe to view this entire article
      
        
      
    
  

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 icon que copiei do heroicons, 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.

  



  
Curabitur blandit tempus porttitor.
  
Lorem ipsum.....

  

    Sign in or sign up to view this article.
  

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.

:root {
  --primary: #2563eb;
  --bg-light: #f1f5f9;
  --bg-alert: #1d4ed8;
  --bg-callout: #dbeafe;
  --border-base: #cbd5e1;
  --text-base: #475569;
}

.alert {
  background: var(--bg-alert);
  padding: 1rem;
  text-align: center;
  color: white;
  position: relative;
  transform: scaleY(1);
  transition: all ease-in-out 0.3s;
}

.alert button {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 5px;
}

.alert button:hover {
  background: rgba(255, 255, 255, 0.35);
}

.alert-hidden {
  opacity: 0;
  padding: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: all ease-in-out 0.3s;
}

.alert button:focus {
  box-shadow: inset 0 0 0 2px var(--border-base);
}

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.

.header {
  border-bottom: 1px solid var(--border-base);
}

.header,
.footer {
  padding: 1rem;
}

.footer {
  background: var(--bg-light);
  padding: 1rem;
}

.header ul li,
.footer ul li {
  display: inline;
  padding: 0 5px;
}

.main {
  max-width: 767px;
  padding: 1rem;
  margin-left: 2.75rem;
  margin-bottom: 2rem;
}

.callout {
  background: var(--bg-callout);
  padding: 2rem;
  border-radius: 6px;
}

p {
  color: var(--text-base);
  line-height: 1.4;
}

ul {
  list-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}

3. Ignorando o alerta

Com JavaScript, podemos nos conectar à API de eventos do navegador para ouvir as alterações. 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.

const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")

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.

dismissAlertButton.addEventListener("click", (event) => {
  console.log("Clicked!")
})

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.

dismissAlertButton.addEventListener("click", (event) => {
  event.preventDefault()
})

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.

if (dismissAlertButton) {
  dismissAlertButton.addEventListener("click", (event) => {
    event.preventDefault()
    alert.classList.add("alert-hidden")
  })
}

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.

const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")

if (localStorage.getItem("hideAlert")) {
  alert.style.display = "none"
}

if (dismissAlertButton) {
  dismissAlertButton.addEventListener("click", (event) => {
    event.preventDefault()
    alert.classList.add("alert-hidden")
    localStorage.setItem("hideAlert", true)
  })
}

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 baseado em 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!