macros.njk

{% macro event( tag, title, url, start_date, end_date, zone, location, internal_url="" ) %}
  <{{ tag }} class="event">
    {% set the_url %}{% if internal_url != "" %}{{ internal_url }}{% else %}{{ url }}{% endif %}{% endset %}
    <a class="event__title" href="{{ the_url }}">{{ title | widont }}</a><br>
    {% set dates %}{{ start_date | machineDate }}|{{ end_date | machineDate }}|{{ zone }}{% endset %}
    <b class="event__timing">{% DateRange dates, "time" %}</b><br>
    <b class="event__location">{{ location }}</b>
  </{{tag}}>
{% endmacro %}

{% macro want( block_tag, additional_classes, url, title_tag, title, submitter ) %}
  <{{ block_tag }} class="want {{ additional_classes }}">
    <{{ title_tag }}><a class="want__title" href="{{ url }}">{{ title | markdownify | widont | safe }}</a></{{ title_tag }}>
    <p class="want__meta">Submitted by {{ submitter }}</p>
  </{{ block_tag }}>
{% endmacro %}

{% macro label( text, name ) %}
  <label class="question__label" for="field-{{ name }}">{{ text | widont }}</label>
{% endmacro %}

{% macro field( type, name, data ) %}
  <br>
  <input class="question__field"
        type="{{ type }}"
        name="{{ name }}"
        id="field-{{ name }}"
        {% if data.required %}required aria-required="true"{% endif %}
        {% if data.placeholder %}placeholder="{{ data.placeholder }}"{% endif %}
        {% if data.pattern %}pattern="{{ data.pattern }}"{% endif %}
        {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
        {% if data.autocomplete %}autocomplete="{{ data.autocomplete }}"{% endif %}
        {% if data.autocorrect %}autocorrect="{{ data.autocorrect }}"{% endif %}
        {% if data.spellcheck %}spellcheck="{{ data.spellcheck }}"{% endif %}
        {% if data.autocapitalize %}autocapitalize="{{ data.autocapitalize }}"{% endif %}
        >
  {% if data.description %}
    <br>
    <em class="question__description" id="description-{{ name }}">{{ data.description | widont }}</em>
  {% endif %}
{% endmacro %}

{% macro confirm( text, name, data ) %}
  <label for="field-{{ name }}" class="question--confirm">
    <input class="question__field question__field--confirm"
          type="checkbox"
          name="{{ name }}"
          id="field-{{ name }}"
          value="1"
          {% if data.required %}required aria-required="true"{% endif %}
          {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
          >
    {{ text }}
  </label>
  {% if data.description %}
    <br>
    <em class="question__description" id="description-{{ name }}">{{ data.description | widont }}</em>
  {% endif %}
{% endmacro %}

{% macro select( name, options, data ) %}
  <br>
  <select id="field-{{ name }}"
          name="{{ name }}"
          {% if data.required %}required aria-required="true"{% endif %}
          {% if data.multiple %}multiple{% endif %}
          {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
          >
    {% for option in data.options_before %}
      <option>{{ option }}</option>
    {% endfor %}
    {% for option in options %}
      <option>{{ option }}</option>
    {% endfor %}
    {% for option in data.options_after %}
      <option>{{ option }}</option>
    {% endfor %}
  </select>
  {% if data.description %}
    <br>
    <em class="question__description" id="description-{{ name }}">{{ data.description | widont }}</em>
  {% endif %}
{% endmacro %}

{% macro textarea( name, data ) %}
  <br>
  <textarea id="field-{{ name }}"
            name="{{ name }}"
            rows="10"
            cols="100"
            {% if data.required %}required aria-required="true"{% endif %}
            {% if data.autocorrect %}autocorrect="{{ data.autocorrect }}"{% endif %}
            {% if data.spellcheck %}spellcheck="{{ data.spellcheck }}"{% endif %}
            {% if data.autocapitalize %}autocapitalize="{{ data.autocapitalize }}"{% endif %}
            {% if data.description %}aria-describedby="description-{{ name }}"{% endif %}
            ></textarea>
  {% if data.description %}
    <br>
    <em class="question__description" id="description-{{ name }}">{{ data.description | widont }}</em>
  {% endif %}
{% endmacro %}

{% macro button( text ) %}
  <button type="submit">{{ text }}</button>
{% endmacro %}

{% macro paginate( what, pagination ) %}
  <nav class="pagination" aria-label="Pages">
    <strong>{{ what }} {{ (pagination.pageNumber + 1) }}&nbsp;of&nbsp;{{ pagination.hrefs.length }}</strong>
    {% if pagination.href.previous %}<a href="{{ pagination.href.previous }}" rel="prev">← Previous {{ what }}</a>{% endif %}
    {% if pagination.href.next %}<a href="{{ pagination.href.next }}" rel="next">Next {{ what }} →</a>{% endif %}
  </nav>
{% endmacro %}