apostrophe/lib/modules/apostrophe-schemas/views/macros.html

The Apostrophe Content Management System.

{%- import "apostrophe-ui:components/fields.html" as commonFields with context -%}
{%- import "fieldset.html" as fieldset with context -%}

{%- macro fields(fields, options = {}) -%}
  {%- set groups = apos.schemas.toGroups(fields) -%}
  <div data-apos-form class="apos-schema{% if groups.length > 1 %} apos-schema--with-tabs{% endif %}">
    {%- if options.tabs != false -%}
      <div class="apos-schema-tabs" data-schema-tabs>
        {%- if groups.length > 1 -%}
          {%- for group in groups -%}
            {%- if group.fields.length -%}
            <div class="apos-schema-tab{% if loop.first %} apos-active{% endif %}" data-apos-open-group="{{ group.name }}">
              {{ __ns('apostrophe', group.label | d('')) }}
            </div>
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    {%- endif -%}
    <div class="apos-schema-groups">
      {%- for group in groups -%}
        {%- if group.fields.length -%}
          <div class="apos-schema-group{% if loop.first %} apos-active{% endif %}" data-apos-group="{{ group.name }}">
            <div class="apos-schema-group-inner">
              {%- for field in group.fields -%}
                {%- if not field.contextual -%}
                  {{ apos.schemas.field(field, options.readOnly) }}
                {%- endif -%}
              {%- endfor -%}
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
{%- endmacro -%}
{# Output a fieldset for the given field, and call the given #}
{# macro to populate it. Usually not called directly #}

{%- macro fieldset(field, bodyMacro) %}
  {{ fieldset.render(field, bodyMacro) }}
{%- endmacro -%}

{# This is used directly to output a text field #}

{%- macro string(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{# Usually passed to fieldset() by text(), this can also be called #}
{# directly if you don't want the fieldset #}

{%- macro stringBody(field, options) -%}
  {%- if field.textarea -%}
    {{ commonFields.textarea(field.name, field.placeholder, field.readOnly, options) }}
  {%- else -%}
    {{ commonFields.string(field.name, field.placeholder, '', field.readOnly, options) }}
  {%- endif -%}
{%- endmacro -%}

{%- macro colorBody(field, options) -%}
    {{ commonFields.color(field.name, field.placeholder, '', field.readOnly, options) }}
{%- endmacro -%}

{%- macro rangeBody(field, options) -%}
    {{ commonFields.range(field.name, field.min, field.max, field.step, field.placeholder, '', field.readOnly, options) }}
{%- endmacro -%}

{%- macro integer(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro float(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro email(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro slug(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro password(field) -%}
  {{ fieldset(field, passwordBody) }}
{%- endmacro -%}

{%- macro passwordBody(field, options) -%}
  <input id="{{ options.id }}" class="apos-field-input apos-field-input-text{% if options.fieldClasses %} {{ options.fieldClasses }}{% endif %}" name="{{ field.name }}" autocomplete="off" type="password"{% if field.readOnly %} disabled{% endif %}{% if options.fieldAttributes %} {{ options.fieldAttributes }}{% endif %}>
{%- endmacro -%}

{%- macro tags(field) -%}
  {{ fieldset(field, tagsBody) }}
{%- endmacro -%}

{%- macro tagsBody(field, options) -%}
  {# Always using this wrapper div makes it easy to use this with #}
  {# selective, and in both standalone and fieldset situations. -Tom #}
  <div class="apos-tags" data-name="{{ field.name }}" data-selective>
    {# Text entry for autocompleting the next item #}
    <ul data-list class="apos-tag-list">
      <li data-item class="apos-tag-list-item">
        {% if not field.readOnly %}<a href="#" class="apos-tag-remove fa fa-remove" data-remove></a>{% endif %}
        <span class="apos-tag-entry" data-label>{{ __ns('apostrophe', 'Example label') }}</span>
        {# Link to remove this choice #}
      </li>
    </ul>
    {% if not field.readOnly %}
      <input id="{{ options.id }}" type="text" name="{{ field.name }}" data-autocomplete placeholder="{{ __ns('apostrophe', 'Type Here') }}" class="apos-field-input apos-field-input-text" />
      <span class="apos-limit-indicator" data-limit-indicator>{{ __ns('apostrophe', 'Limit Reached!') }}</span>
      <a href="#" class="apos-tag-add" data-add><i class="fa fa-plus"></i> {{ __ns('apostrophe', "Add") }}</a>
    {% endif %}

  </div>
{%- endmacro -%}

{# Typically we enhance this with jquery ui datepicker later #}
{%- macro date(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro color(field) -%}
  {{ fieldset(field, colorBody) }}
{%- endmacro -%}

{%- macro range(field) -%}
  {{ fieldset(field, rangeBody) }}
{%- endmacro -%}

{%- macro time(field) -%}
  {{ fieldset(field, stringBody) }}
{%- endmacro -%}

{%- macro checkboxes(field) -%}
  {{ fieldset(field, checkboxesBody) }}
{%- endmacro -%}

{%- macro checkboxesBody(field) -%}
  {%- for choice in field.choices -%}
    <div class="apos-form-checkbox">
      <label class="apos-form-checkbox-label apos-text-small">
        <input class="apos-form-checkbox-input" type="checkbox" name="{{ field.name }}" value="{{ choice.value }}"{% if field.readOnly %} disabled{% endif %}>
        <span class="apos-form-checkbox-indicator"></span>
        {{ __ns('apostrophe', choice.label | d('')) }}
      </label>
    </div>
  {%- endfor -%}
{%- endmacro -%}

{#
  // If you need to include extra fields on a select option
  // format a JSON string in 'data-extra' like this:
  //
  // <option data-extra='{ "myField": "thing" }' > Label </option>
  //
  // Also see the showFields case below in the formSelectStandalone macro.
  // -matt
#}
{%- macro select(field) -%}
  {%- set selectMultiple = ' apos-fieldset-selectize' if field.selectMultiple else '' -%}
  {% set selectFields = ' apos-fieldset-select-show-fields' if apos.utils.containsProperty(field.choices, 'showFields') else '' %}
  {{ fieldset(field | merge({ classes: selectMultiple + selectFields }), selectBody) }}
{%- endmacro -%}

{# Often used directly in a custom fieldset with other controls #}
{%- macro selectBody(field) -%}
  {{ commonFields.select(field.name, field.choices, '', field.readOnly) }}
{%- endmacro -%}

{# Less ambiguous to work with than a checkbox #}
{%- macro boolean(field) -%}
  {% set selectFields = ' apos-fieldset-select-show-fields' if apos.utils.containsProperty(field.choices, 'showFields') else '' %}
  {{ fieldset(field | merge({ classes: selectMultiple }), booleanBody) }}
{%- endmacro -%}

{% macro booleanBody(field) %}
  {{ selectBody(field | merge({ choices: [ { value: '1', label: __ns('apostrophe', 'Yes') }, { value: '0', label: __ns('apostrophe', 'No') }] })) }}
{%- endmacro -%}

{%- macro array(field) -%}
  <fieldset class="apos-field apos-field-{{field.type | css}} apos-field-{{ field.name | css }}"  data-name="{{ field.name }}" {{ field.attributes }}>
    <div class="apos-fieldset-row">
      {#- Cannot be inside the sortable div -#}
      <span class="apos-ui-container" name="{{ field.name }}">
        <label for="{{ field.name }}" class="apos-field-label"></label>
        <label data-array-length></label><br>
        {%- if field.help -%}
          <div class="apos-field-help">{{ __ns('apostrophe', field.help) }}</div>
        {%- elif field.htmlHelp -%}
          <div class="apos-field-help">{{ __ns('apostrophe', field.htmlHelp) | safe }}</div>
        {%- endif -%}
        <a href="#" class="apos-control apos-button" data-apos-edit-array>
          {{ __ns('apostrophe', "Edit %s", __ns('apostrophe', field.label | d(''))) }}
          <i class="fa fa-angle-right"></i>
        </a>
      </span>
    </div>
  </fieldset>
{%- endmacro -%}

{%- macro singleton(field) -%}
  {{ fieldset(field, singletonBody) }}
{%- endmacro -%}

{%- macro singletonBody(field) -%}
  {# js adds this singleton to the dialog #}
  <div data-{{ field.name }}-edit-view></div>
{%- endmacro -%}

{%- macro area(field) -%}
  {{ fieldset(field | merge({ attributes: 'data-editable' }), singletonBody) }}
{%- endmacro -%}

{%- macro areaBody(field) -%}
  {# js adds this area to the dialog #}
  <div data-{{ field.name }}-edit-view></div>
{%- endmacro -%}

{# Currently the join editors can use the same markup, so we have one #}
{# body macro. -Tom #}

{%- macro joinByOne(field) -%}
  {{ fieldset(field, joinBody) }}
{%- endmacro -%}

{%- macro joinByArray(field) -%}
  {{ fieldset(field, joinBody) }}
{%- endmacro -%}

{# ajax populates joins, see apostrophe-docs/views/chooser.html #}
{%- macro joinBody(field) -%}
  <div data-chooser data-read-only="{{ field.readOnly }}">{# ajax populates me #}</div>
{%- endmacro -%}

{%- macro object(field) -%}
  <fieldset class="apos-field apos-field-{{ field.type | css }} apos-field-{{ field.name | css }}" data-name="{{ field.name }}">
  {% for item in field.schema %}
    {{ apos.schemas.field(item, field.readOnly) }}
  {% endfor %}
  </fieldset>
{%- endmacro -%}