field.html.twig 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. {% if not field.validate.ignore %}
  2. {% set field_name = (scope ~ field.name)|fieldName %}
  3. {% set vertical = field.style == 'vertical' %}
  4. {% if not blueprints or (blueprints.schema.type(field.type)['input@'] ?? true) is same as(true) %}
  5. {% set toggleable = field.toggleable ?? false %}
  6. {% if toggleable %}
  7. {% set originalValue = originalValue is defined ? originalValue : value %}
  8. {% set toggleableChecked = originalValue is not null and originalValue is not empty %}
  9. {% elseif field.overridable %}
  10. {% set toggleable = true %}
  11. {% set default = form.getDefaultValue(field.name) ?? field.default %}
  12. {% set toggleableChecked = value != default %}
  13. {% endif %}
  14. {% set cookie_name = 'forms-' ~ form.name ~ '-' ~ field.name %}
  15. {% set value = value ?? (get_cookie(cookie_name) is not null ? get_cookie(cookie_name) : field.default) %}
  16. {% if (field.yaml or field.validate.type == 'yaml') and value is iterable %}
  17. {% set value = value|toYaml %}
  18. {% endif %}
  19. {% else %}
  20. {% set toggleable = false %}
  21. {% endif %}
  22. {# DEPRECATED: Needed by old form fields; remove when backwards compatibility breaks are allowed #}
  23. {% set isDisabledToggleable = toggleable and not toggleableChecked %}
  24. {% set errors = attribute(form.messages, field.name) %}
  25. {% set required = client_side_validation and field.validate.required in ['on', 'true', 1] %}
  26. {% set autofocus = (inline_errors == false) and field.autofocus in ['on', 'true', 1] %}
  27. {% if inline_errors and errors %}
  28. {% set autofocus = true %}
  29. {% endif %}
  30. {% block field %}
  31. <div class="form-field {{ form_field_outer_classes }} {{ field.outerclasses }} {% if errors %} has-errors{% endif %} {% block outer_field_classes %}{% endblock %} {% if toggleable %} form-field-toggleable{% endif %}">
  32. {% block contents %}
  33. {% if field.label is not same as(false) and field.display_label is not same as(false) %}
  34. <div class="{{ form_field_outer_label_classes ?: 'form-label' }} {{ field.labelclasses }}">
  35. {% if toggleable %}
  36. {% include 'forms/default/toggleable.html.twig' with {field_name: field_name, field: field, checked: toggleableChecked} %}
  37. {% endif %}
  38. <label class="{{ form_field_label_classes ?: 'inline' }} {{ toggleable ? 'toggleable' }}" {% if field.id is defined %}for="{{ toggleable ? 'toggleable_' ~ field.name : field.id|e }}" {% endif %} >
  39. {% block label %}
  40. {% if field.help %}
  41. {% if field.markdown %}
  42. <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|t|markdown(false)|e }}">{{ field.label|markdown(false)|default(field.name|capitalize)|t }}</span>
  43. {% else %}
  44. <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|t|e }}">{{ field.label|default(field.name|capitalize)|t }}</span>
  45. {% endif %}
  46. {% else %}
  47. {% if field.markdown %}
  48. {{ field.label|markdown(false)|default(field.name|capitalize)|t }}
  49. {% else %}
  50. {{ field.label|default(field.name|capitalize)|t|e('html_attr') }}
  51. {% endif %}
  52. {% endif %}
  53. {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
  54. {% endblock %}
  55. </label>
  56. </div>
  57. {% endif %}
  58. <div class="{{ form_field_outer_data_classes ?: 'form-data' }} {{ field.dataclasses }}"
  59. {% block global_attributes %}
  60. data-grav-field="{{ field.type }}"
  61. data-grav-disabled="{{ toggleable and toggleableChecked }}"
  62. data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
  63. {% endblock %}
  64. >
  65. {% block group %}
  66. {% block input %}
  67. <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
  68. {% block prepend %}{% endblock prepend %}
  69. <input
  70. {# required attribute structures #}
  71. name="{{ (scope ~ field.name)|fieldName }}"
  72. value="{{ value|join(', ')|e('html_attr') }}"
  73. {# input attribute structures #}
  74. {% block input_attributes %}
  75. class="{{ form_field_input_classes }} {{ field.classes }} {{ field.size }}"
  76. {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
  77. {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
  78. {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
  79. {% if field.placeholder %}placeholder="{{ field.placeholder|t|e('html_attr') }}"{% endif %}
  80. {% if autofocus %}autofocus="autofocus"{% endif %}
  81. {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
  82. {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
  83. {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete }}"{% endif %}
  84. {% if field.autocapitalize in ['off', 'characters', 'words', 'sentences'] %}autocapitalize="{{ field.autocapitalize }}"{% endif %}
  85. {% if field.inputmode in ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'] %}inputmode="{{ field.inputmode }}"{% endif %}
  86. {% if field.spellcheck in ['true', 'false'] %}spellcheck="{{ field.spellcheck }}"{% endif %}
  87. {% if field.attributes is defined %}
  88. {% for attribute in field.attributes %}
  89. {{ attribute.name }}="{{ attribute.value|e }}"
  90. {% endfor %}
  91. {% endif %}
  92. {% if required %}required="required"{% endif %}
  93. {% if field.validate.pattern %}pattern="{{ field.validate.pattern|e }}"{% endif %}
  94. {% if field.validate.message %}title="{{ field.validate.message|t|e }}"
  95. {% elseif field.title is defined %}title="{{ field.title|t|e }}" {% endif %}
  96. {% if field.datasets %}
  97. {% for datakey, datavalue in field.datasets %}
  98. data-{{ datakey }}="{{ datavalue|e('html_attr') }}"
  99. {% endfor %}
  100. {% endif %}
  101. {% endblock %}
  102. />
  103. {% block append %}{% endblock append %}
  104. {% if inline_errors and errors %}
  105. <div class="{{ form_errors_classes ?: 'form-errors' }}">
  106. <p class="form-message"><i class="fa fa-exclamation-circle"></i> {{ errors|first }}</p>
  107. </div>
  108. {% endif %}
  109. </div>
  110. {% endblock %}
  111. {% endblock %}
  112. {% if field.description %}
  113. <div class="form-extra-wrapper {{ field.wrapper_classes }}">
  114. <span class="form-description">
  115. {% if field.markdown %}
  116. {{ field.description|t|markdown(false)|raw }}
  117. {% else %}
  118. {{ field.description|t|raw }}
  119. {% endif %}
  120. </span>
  121. </div>
  122. {% endif %}
  123. </div>
  124. {% endblock %}
  125. </div>
  126. {% endblock %}
  127. {% endif %}