Como construir popover dinâmico (menus flutuantes) em Divi com Popper.js

Você já ouviu falar da biblioteca chamada Popper.js? Esta biblioteca permite criar popovers em JavaScript. Usar popovers é bastante comum hoje em dia, especialmente porque ajuda a exibir mais informações sobre um elemento específico (botão, link, etc). A razão para considerar o popover dinâmico é principalmente para garantir que ele seja exibido no lugar certo em relação à posição do assunto na tela. Concretamente, se o assunto estiver na parte inferior da tela, o popover será exibido na parte superior. Se estiver localizado na parte superior da tela, o popover será exibido na parte inferior etc.

Neste tutorial, vamos aproveitar o poder do Popper.js no Divi para criar popovers dinâmicos (menus flutuantes) quando um botão é clicado. Isso permitirá que qualquer pessoa crie um popover com elementos Divi para exibir qualquer conteúdo após um clique de botão. Também nos certificaremos de que o popover seja dinâmico, pois ele ajustará sua posição para preservar a visibilidade ideal conforme o usuário interage com sua página.

Aqui está uma ilustração do posicionamento desses popovers ...

Para conseguir isso, precisaremos de CSS e JavaScript personalizados. Mas ainda podemos contar com os poderosos recursos de design do Divi Builder para criar um popover usando qualquer elemento Divi.

Vamos começar!

Antevisão do Menu Flutuante

Aqui está uma rápida olhada no menu flutuante que iremos projetar neste tutorial. Você pode ver como a posição do menu flutuante muda dinamicamente conforme o usuário rola ou altera o tamanho do navegador. Também não perca a pequena seta que também está posicionada para apontar dinamicamente para sua referência (ou, neste caso, o botão).

Criando um Popover com Popper.js In Divi

Como dissemos anteriormente, vamos usar popper.js no Divi para criar um popover posicionado dinamicamente, que é revelado ao clicar no assunto do popover (botão). Com Divi, podemos criar facilmente um menu flutuante e um botão. Posteriormente iremos adicionar o código necessário para que ambos funcionem em harmonia.

A seção

Portanto, começaremos adicionando um ID de cliente à seção regular que está pronta por padrão. Abra as configurações da seção e adicione o seguinte ID:

• CSS ID: popper-section

Crie Popper Popover com Divi Row

A seguir, adicionaremos uma linha de uma coluna à seção. Esta linha se tornará nosso elemento popover Popper que aparece ao clicar em um botão.

Abra as configurações de linha e atualize o estilo da seguinte maneira:

• Cor de fundo: # 333333

• Largura da calha: 2
• Largura: 100%
• Largura máxima: 500px
• Preenchimento: 0px superior, 0px inferior, 0px esquerdo, 0px direito
• Cantos arredondados: 10px

Como esta linha se tornará nosso elemento popover popover, precisamos adicionar um ID CSS para servir como um seletor em nosso código. Também precisamos nos certificar de que a visibilidade permaneça em estouro (está oculta pelos cantos arredondados).

Vá para a guia avançada e atualize o seguinte:

• ID CSS: popper-popup
• Excesso horizontal: visível
• Excesso vertical: visível

Vamos adicionar conteúdo ao Popover Row

Podemos adicionar qualquer módulo (s) que quisermos à nossa linha para preencher o menu flutuante com qualquer conteúdo que quisermos. Para este exemplo, vamos adicionar alguns botões à linha que serve como um menu personalizado que aparece dentro do popover.

Para começar, adicione um módulo de botão à coluna da linha.

Agora vamos adicionar um estilo ao nosso botão. Atualizaremos as configurações do botão da seguinte maneira:

• Alinhamento do botão: centro
• Use estilos personalizados para botão: SIM
• Largura da borda do botão: 1 px
• Cor da borda do botão: # 555555
• Raio da borda do botão: 10 px
• Ícone do botão: veja a captura de tela
• Margem: 20px superior, 20px inferior, 20px à esquerda, 20px à direita
• Preenchimento: 0,5em superior, 0,5em inferior, 2em esquerdo, 2em direito

Importante: Estamos usando margem no módulo para criar espaçamento em vez de usar lacunas de linha porque iremos adicionar uma seta (usando um divisor) que precisa ser posicionada na borda da linha (com posição absoluta). Qualquer preenchimento de linha ou coluna afastará a seta da borda.

Agora, precisamos adicionar o seguinte snippet CSS personalizado ao elemento principal para fazer com que o botão ocupe toda a largura da coluna / linha:

display: block !important

Agora você pode duplicar o botão duas (ou mais) vezes para adicionar mais alguns botões ao menu popover.

Criando a seta popover

Popper.js suporta um posicionamento de seta junto com o popover. Para construir a seta, adicione uma nova divisória sob o último botão de nossa linha.

Nas configurações do divisor, selecione para não mostrar o divisor. Em seguida, na guia avançada, adicione o seguinte ID CSS:

• ID CSS: popper-arrow

Usaremos um CSS externo personalizado para estilizar e posicionar a seta mais tarde.

Criando o botão popover (ou referência)

Os dois elementos principais de um popover incluem o elemento popover (ou popper) e o assunto ao qual o popover se anexa. Você pode usar qualquer elemento Divi como uma referência que gera o popover, mas, neste exemplo, usaremos um botão.

Criando assunto para Popper: Botão

Antes de criar nosso botão, precisamos adicionar uma nova linha de uma coluna em nossa linha popover.

Em seguida, adicione um novo módulo de botão à linha.

Atualize as configurações do botão com alguns estilos básicos da seguinte forma:

• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # a043e8
• Largura da borda do botão: 0 px
• Raio da borda do botão: 10 px

Em seguida, adicione o ID CSS necessário que nos permitirá direcionar e usar o botão como nossa referência popover posteriormente:

• ID CSS: botão popper

Vamos adicionar o código

Agora que nosso popover e botão estão completos, estamos prontos para adicionar o código para fazer a mágica acontecer.

Para fazer isso, adicione um módulo de código sob o módulo de botão de referência na segunda linha.

É importante que o código esteja na parte inferior da página para que funcione.

Primeiro, vamos adicionar o CSS.

Na caixa de conteúdo do código, adicione as tags de estilo necessárias para envolver o CSS em HTML. Em seguida, copie e cole o seguinte CSS entre as tags de estilo:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Em seguida, precisamos acessar a biblioteca popper.js adicionando um script que importa Popper.js de seu CDN (https://unpkg.com/@popperjs/core@2). Sob a marca de estilo de finalização, cole o seguinte script na caixa de código.

Use o seguinte src em uma tag de script para importar a biblioteca:

src="https://unpkg.com/@popperjs/core@2"

Deve ser assim:

Agora vamos importar Popper.js antes de adicionar o código que irá usá-lo. Portanto, após o script apontar para Popper.js, adicione as tags de script necessárias para envolver o Javascript que precisamos adicionar. Em seguida, cole o seguinte Javascript entre as tags do script.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

É isso! Todos nós terminamos. Vamos agora verificar o resultado final.

Pré-visualização do resultado final

Para visualizar o resultado deste tutorial, precisamos criar algum espaço de rolagem para testar a mágica de posicionamento do popover.

Para fazer isso, abra as configurações da seção e adicione alguma margem da seguinte forma:

• Margem: 80 Vh superior, 80 Vh inferior

Esta é a aparência da funcionalidade:

Observe como a posição do popover (e da seta) muda dinamicamente conforme o usuário rola ou altera o tamanho do navegador.

Resumindo

Se você quiser criar um popover usando popper.js no Divi, precisará contar com uma boa dose de Javascript, mas o resultado vale a pena. O posicionamento dinâmico do popover é um ótimo componente de IU que beneficiaria qualquer site. O que você acha disso? Você já experimentou? Nos informe.