components-showcase.j2

{% set components = ['carousel', 'animation', 'accordion', 'autocomplete'] %}

<article class="ap-components-showcase">
  <div class="ap-components-showcase-buttons" role="list">
    <button [class]="[componentsShowcase] == 'carousel' ? 'ap-button' : 'ap-button --inactive' " on="tap:AMP.setState({componentsShowcase: 'carousel' })" class="ap-button">{{ _('Carousel') }}</button>
    <button [class]="[componentsShowcase] == 'animation' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'animation' })" class="ap-button --inactive">{{ _('Animation') }}</button>
    <button [class]="[componentsShowcase] == 'accordion' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'accordion' })" class="ap-button --inactive">{{ _('Accordion') }}</button>
    <button [class]="[componentsShowcase] == 'autocomplete' ? 'ap-button' : 'ap-button --inactive'" on="tap:AMP.setState({componentsShowcase: 'autocomplete' })" class="ap-button --inactive">{{ _('Autocomplete') }}</button>
  </div>

  <div class="ap-components-showcase-demos">
    {% for component in components %}
    {% set showcase_code_path = "/shared/components-showcase/amp-" ~ component ~ ".html" %}
    {% set component_doc = g.doc('/content/amp-dev/documentation/components/amp-'~component, locale=doc.locale).url.path %}

    <div [class]="componentsShowcase == '{{component}}' ? 'ap-components-showcase-demo --{{component}} show' : 'ap-components-showcase-demo hide' " class="{% if loop.first %}ap-components-showcase-demo show{% else %}ap-components-showcase-demo hide{% endif %}">
      <div class="ap-components-showcase-demo-code" title={{"amp-"~component}}>
        <div class="ap-code-snippet">
          {% set code_snippet = g.doc(showcase_code_path).content %}
          {{ doc.pod.markdown.convert('```html\n' + code_snippet + '\n```')|safe }}
        </div>

         <a href="{{component_doc | safe}}" class="ap-m-lnk grap-lnk">
          <div class="ap-a-ico ap-m-lnk-icon">
            {% do doc.icons.useIcon('icons/internal.svg') %}
            <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg>
          </div>
          <span class="ap-m-lnk-text">All about this component</span>
        </a>
      </div>

      <div class="ap-components-showcase-demo-ui --{{component | safe}}" title={{"<amp-"~component~">"}}>

      {% if component == 'animation' %}
        <div class="scale-image-window">
          <amp-img id="animatedImage" width="450" height="300" layout="responsive" src="/static/samples/img/elephant.jpg" alt="{{ _('Picture of an elephant') }}"></amp-img>
        </div>
        <button on="tap:scaleUpAnimation.restart" class="ap-button anim-button">{{ _('Click to scale up the image') }}</button>
        <amp-animation id="scaleUpAnimation" layout="nodisplay">
          <script type="application/json">
            {
              "duration": "0.5s",
              "fill": "both",
              "direction": "normal",
              "animations": [
                {
                  "selector": "#animatedImage",

                  "keyframes": [
                    { "transform": "scale(1)" },
                    { "transform": "scale(1.2)" },
                    { "transform": "scale(1)" }
                  ]
                }
              ]
            }
          </script>
        </amp-animation>
      {% else %}
        {{ code_snippet|safe }}
      {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
</article>