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.
-
Um
alertvariável: responsável por direcionar o próprio alerta. -
UMA
dismissAlertButtonvariável: responsável por direcionar obuttonelemento dentro do.alertdiv.
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:
- Verificaremos se o botão de dispensa está presente e, em caso afirmativo, ouviremos um evento de clique nele.
- Se o evento de clique for acionado, adicionamos o
alert-hiddenclasse para o alerta. - Com
localStoragechamamos desetIteme passar um par chave-valor dehideAlertetrue. - Se a página for recarregada, nós imediatamente conectamos em “localStorage” novamente para chamar o
getItemmé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!
[ad_2]
