cfpb/owning-a-home

{# ==========================================================================

   render( data )

   ==========================================================================

   Description:

   Renders the entire form explainer.

   data:               The data structure is as follows:
                       [
                         { 'img': 'url-to-form-img'
                           'terms': [ ... ]
                         }    
                       ]

   ========================================================================== #}

{% macro render( data ) %}
  <div class="explain" aria-controls="form-explainer">
    <ul class="tabs explain_tabs">
      <li class="tab-list active-tab">
        <button class="tab-link tab-link__checklist" data-target="checklist" tabindex="0">
          <span class="cf-icon cf-icon-approved-round"></span>
          <span class="tab-label">Check details</span>
        </button>
      </li>
      <li class="tab-list">
        <button class="tab-link tab-link__definitions" data-target="definitions" tabindex="0">
          <span class="cf-icon cf-icon-help-round"></span>
          <span class="tab-label">Get definitions</span>
        </button>
      </li>
    </ul>
    {{ render_pagination( data ) }}
    {% for page in data %}
    <figure class="explain_page" id="explain_page-{{ loop.index }}" role="tablist" multiselectable="true">
      <div class="image-map explain_image-map">
          
        <div class="image-map_wrapper">
            <div class="form-explainer_page-buttons">
                  <button class="prev btn btn__disabled">
                      <span class="u-visually-hidden">Prev page</span>
                      <span class="cf-icon cf-icon-left"></span>
                  </button>
                  <button class="btn next">
                    <span class="u-visually-hidden">Next page</span>
                    <span class="cf-icon cf-icon-right"></span>
                  </button>
              </div>
          <img class="image-map_image"
               src="{{ page.img }}"
               alt="">
          {{ render_map_points( page.terms, loop.index ) }}
        </div>
      </div>
      <figcaption class="terms explain_terms">
          <div class="expandable-group expandable-group__form-explainer" data-accordion="true">
              {{ render_terms( page.terms, loop.index ) }}
          </div>
      </figcaption>
    </figure>
    {% endfor %}
    
  </div><!-- ./explain -->
{% endmacro %}


{# ==========================================================================

   render_map_points( terms, page_num )

   ==========================================================================

   Description:

   Render a list of expandable terms with definitions.

   terms:              An array of term objects. See item() for info on term
                       objects.

   page_num:           The page that these map points belong to.

   ========================================================================== #}

{% macro render_map_points( terms, page_num ) %}
{% for item in terms %}
  <a class="image-map_overlay image-map_overlay__{{ item.category }}"
     style="{{ 'top:' + item.top + ';' 'left:' + item.left + ';' }}{{ 'width:' + item.width + ';' 'height:' + item.height + ';' if item.width and item.height }}"
     href="{{ '#page-' + page_num|string + '-' + item.category + '-' + item.id }}"
     id="{{ 'image-map_overlay__' + page_num|string + '-' + item.category + '-' + item.id }}"
     tabindex="-1">
    <span class="u-visually-hidden">{{ item.term }}</span>
 </a>
{% endfor %}
{% endmacro %}


{# ==========================================================================

   render_terms( terms, page_num )

   ==========================================================================

   Description:

   Render a list of expandable terms with definitions.

   terms:              An array of term objects. See item() for info on term
                       objects.

   page_num:           The page that these terms belong to.

   ========================================================================== #}

{% macro render_terms( terms, page_num ) %}
{% for item in terms %}
  {{ term( item, loop.index, page_num ) }}
{% endfor %}
{% endmacro %}


{# ==========================================================================

   term( term, index, page_num )

   ==========================================================================

   Description:

   Render an expandable term with a definition.

   item:               A term object. Term objects have the following structure:
                       { 'term': 'Term name',
                         'id': 'a-unique-html-id',
                         'definition': 'This definition can contain HTML.' }

   index:              The term's position within the array.

   page_num:           The page that this term belongs to.

   ========================================================================== #}

{% macro term( item, index, page_num ) %}
{#- Some terms are not expandable -#}
{% if item.definition == '' %}
  <div class="expandable expandable__padded
              expandable__form-explainer
              expandable__form-explainer-{{ item.category }}"
       id="{{ 'page-' + page_num|string + '-' + item.category + '-' + item.id }}"
       tabindex="0">
    <span class="expandable_header">
      <span class="expandable_label">
          <span class="expandable_category expandable_category__{{ item.category }}">
            <span class="u-visually-hidden">{{ item.category }}</span>
          </span>
          {{ item.term }}
      </span>
    </span>
  </div>
{% else %}
  <div class="expandable expandable__padded
              expandable__form-explainer
              expandable__form-explainer-{{ item.category }}"
       id="{{ 'page-' + page_num|string + '-' + item.category + '-' + item.id }}">
    <button class="expandable_header expandable_target" tabindex="0">
      <span class="expandable_header-left expandable_label">
          <span class="expandable_category expandable_category__{{ item.category }}">
            <span class="u-visually-hidden">{{ item.category }}</span>
          </span>
          {{ item.term }}
      </span>
      <span class="expandable_header-right expandable_link">
        <span class="expandable_cue-open">
          <span class="u-visually-hidden">Show</span>
          <span class="cf-icon cf-icon-plus"></span>
        </span>
        <span class="expandable_cue-close">
          <span class="u-visually-hidden">Hide</span>
          <span class="cf-icon cf-icon-minus"></span>
        </span>
      </span>
    </button>
    <div class="expandable_content u-stick" tabindex="0">
      {{ item.definition|safe }}
      {% if item.highlight -%}
        <img class="u-stick_bottom" src="{{ item.highlight }}" alt="">
      {%- endif %}
    </div>
  </div>
{% endif %}
{% endmacro %}


{# ==========================================================================

   render_pagination( pages )

   ==========================================================================

   Description:

   Render pagination.

   pages:              Pages in form

   ========================================================================== #}

{% macro render_pagination( pages ) %}
  <nav class="pagination explain_pagination">
    <span class="form-explainer_nav-label">Viewing page:</span>
    <ul class="form-explainer_page-links">
        {% for page in pages %}
            <li>
                <a class="form-explainer_page-link {{' current-page' if loop.index == 1}}" data-page="{{loop.index}}">{{loop.index}}</a>
            </li>
        {% endfor %}
    </ul>
  </nav>
{% endmacro %}