Eventos com AMP e trabalhando com amp-sidebar

Para esse post implementaremos um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos com AMP e o segundo é o componente amp-sidebar.

Preparando o exercício para eventos com AMP

Para nosso exercício aplicaremos no nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas, mas nas versões mobile temos o menu sempre cobrindo o nosso conteúdo, como podemos observar na imagem abaixo:

Como solução para o nosso problema, vamos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o eventos com AMP de click do usuário. Como efetuamos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener, mas com AMP utilizaremos o atributo on.

atributo “on”

Com AMP para acompanhar eventos com AMP de tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos com AMP podemos definir ações específicas chamadas de actions, por exemplo:

<button on="tap:menu.hide">Code language: HTML, XML (xml)

No código acima temos um botão que está a acompanhar a ação de tap e quando realizado o elemento com id menu onde será realizada a ação de hide para esse código funcionar precisamos de elemento com o id menu exemplo:

<div id="menu">Meu menu</div>
<button on="tap:menu.hide">Fechar o menu</button>Code language: HTML, XML (xml)

Ações

No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos os componentes AMP e elementos HTML que são elas:

• hide
• show
• toggleVisibility
• toggleClass
• scrollTo
• focus

Alguns componentes possuem ações e eventos com AMP específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.

amp-sidebar

Agora que temos uma introdução a ações e eventos com AMP implementaremos esses novos recursos a nossa aplicação, primeiramente adicionaremos o componente amp-sidebar na nossa aplicação ele irá necessitar um script extra:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>Code language: HTML, XML (xml)

O componente amp-sidebar oculta o conteúdo destinado a um acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.

amp-sidebar possui um comportamento bem específico:

• O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
• amp-sidebar deve conter um componente HTML válido.
• layout nodisplay é obrigatório
• É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
• A ação de zoom é desabilitada para preservar o seu funcionamento.
• A largura da sidebar pode ser ajustado via CSS, mas respeitando uma largura mínima de 45px.

Depois da introdução ao componente vamos a sua utilização:

  <button class="recipe__header__menuBtn" on='tap:sidebar-menu.toggle'>Menu</button>    
  <amp-sidebar id="sidebar-menu" side="left" layout="nodisplay">
          <nav class="recipe__navigation nav">
            <ul class="recipe__navigation__menu">
              <li class="recipe__navigation__item">
                <a href="#about">About</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#ingredients">Ingredients</a>
              </li>
              <li class="recipe__navigation__item">
                <a href="#steps">Steps to Make It</a>
              </li>
            </ul>
          </nav>
        </amp-sidebar>
Code language: HTML, XML (xml)

No código acima temos um botão responsável por invocar a exibição da nossa sidebar, inicialmente ela estará no estado nodisplay, acompanhamos os eventos com AMP de tap e quando pressionado ele irá realizar ação de toggle no nosso amp-sidebar com id sidebar-menu.

Todo o efeito de animação já será definido pelo componente e depois que o código é aplicado na nossa aplicação o resultado será o seguinte:

No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Mais posts sobre AMP você encontra na página da categoria e caso tenha alguma dúvida só deixar um comentário.

Conteúdo relacionado

• Mitos sobre AMP para WordPress
• Criando light-box com AMP: amp-lightbox
• Criando menu acordeão com AMP: amp-accordion