Categoria: AMP Accelerated mobile pages

Nesse post vamos ver como implementar um light-box em nossa aplicação AMP, light-box é um dos recursos mais usados desde a popularização do JavaScript. Na maioria das vezes usado para focar a exibição de elementos gráficos ou mensagens. A plataforma amp disponibiliza três componentes para exibição de light-box amp-lightbox, amp-image-lightbox e amp-lightbox-gallery.

Cada um desses componentes possui uma aplicação específica, Para esse tutorial iremos abordar o componente amp-lightbox.

amp-lightbox

Esse componente quando utilizado seu elemento filho será exibido em uma modal quando acionado através de um evento de clique. Com isso temos que ter um segundo elemento para ativa-lo, um botão poderá ser uma alternativa. O componente possui alguns comportamentos já pre definidos, por exemplo, quando o usuário pressionar a tecla “esc” o light-box será fechado. Um alternativa é incluir um elemento com a ação close no light-box.

O componente amp-lightbox é um componente extended assim precisamos carregar o script relacionado:

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

Com essa introdução vamos criar o nosso primeiro exemplo, baseado no projeto the best caipirinha, vamos utilizar o light-box para trazer mais informações sobre os items da nossa receita, por exemplo, descrição sobre cana de açúcar com isso temos o seguinte código:

<button on="tap:sugarcane-wiki">sugarcane</button>

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
                <p>
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
                </p>
</amp-lightbox>

Apenas com o botão e o componente amp-lighbox temos nosso light box somente com a funcionalidade como podemos ver na imagem abaixo:

Agora é hora de adicionar a parte visual, para isso precisamos adicionar o estilo para o nosso elementos com isso vamos criar classes para estilizar nossos elementos em nosso CSS e aciona-los em nosso elementos HTML:

CSS

.lightbox {
        align-items: center;
        background: rgba(0, 0, 0, 0.8);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 2em;
      }

      .lightbox_p {
        color: #fff;
        font-size: 1.5em;
        font-weight: 500;
      }

HMTL

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
                </p>
                <p class="lightbox_p">source: wikipedia</p>
              </div>
            </amp-lightbox>

Adicionando o estilo temos o seguinte resultado:

Apenas adicionando o botão para abrir o light-box, para fechar precisamos pressionar a tecla “esc” mas isso pode não ser intuitivo para os nossos usuários com isso vamos adicionar um botão fechar dentro de nosso light-box.

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
                </p>
                <p class="lightbox_p">source: wikipedia</p>
                <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
              </div>
            </amp-lightbox>

Adicionamos um botão com a ação de close sobre o light-box, falando em ações o componente amp-lightbox aceita duas ações open e close. Por padrão ele aciona a ação de open por isso que no botão para abrir o light-box não especificamos a ação. Agora para realizar a estilização do nosso botão vamos adicioar o seguinte CSS:

.lightbox_close {
        position: absolute;
        right: 32px;
        top: 32px;
        width: 32px;
        height: 32px;
        opacity: 0.7;
        text-indent: -999px;
        overflow: hidden;
        border: none;
        background: transparent;
      }

      .lightbox_close:hover {
        opacity: 1;
      }

      .lightbox_close::before,
      .lightbox_close::after {
        background-color: #fff;
        content: '';
        position: absolute;
        left: 16px;
        top: 0;
        height: 33px;
        width: 3px;
      }

      .lightbox_close::before {
        transform: rotate(45deg);
      }

      .lightbox_close::after {
        transform: rotate(-45deg);
      }

E o resultado será o seguinte:

Outro opção que poderíamos incluir se o usuário fechasse o light-box clicando no background com isso adicionamos o evento de clique no elemento com o class “lighbox”:

<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
              <div class="lightbox"
                on="tap:sugarcane-wiki.close"
                role="button"
                tabindex="0">
                <p class="lightbox_p">
                  Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
                </p>
                <p class="lightbox_p">source: wikipedia</p>
              </div>
              <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
            </amp-lightbox>

No código acima adicionei o evento de tap no elemento lightbox também adicionei duas propriedades por questões de acessibilidade “role” e “tabindex” para tornar a div clicável e não interferir na ordem lógica dos elementos para leitores de tela.

Atributos

Então vimos alguns exemplos práticos com light-box agora vamos ver alguns atributos:

• animate-in (opcional): define o estilo de animação de abertura do light-box. Por default sua aparição vai ser feita por fade-in. Mas temos disponíveis: fade-in, fly-in-bottom e fly-in-top.
• close-button (obrigatório para AMP ads): renderiza um botão no to do lightbox. Ele é somente válido e obrigatório para AMP ads.
• id (obrigatório): valor único para identificar o lightbox.
• layout (obrigatório): deve ser definido como nodisplay.
• scrollable (opcional): Quando este atributo é definido o conteúdo do light-box pode ter rolagem horizontal habilitada quando necessário.

O tipos de animações com animate-in eu vou deixar para mostrar em uma vídeo aula no meu canal, mas caso queira saber mais sobre AMP confira a página com outros tutoriais na página da categoria AMP.

Em breve estarei adicionando mais posts sobre os componentes amp, qualquer dúvida deixe um comentário e até o próximo vídeo.