field.html.twig 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. {% if not field.validate.ignore %}
  2. {% if not blueprints or (blueprints.schema.type(field.type)['input@'] ?? true) is same as(true) %}
  3. {% set default = field.default %}
  4. {% set toggleable = field.toggleable ?? false %}
  5. {% if toggleable %}
  6. {% set originalValue = originalValue ?? value %}
  7. {% set toggleableChecked = originalValue is not null %}
  8. {% endif %}
  9. {% set has_value = value is not null %}
  10. {% if not has_value %}
  11. {% set value = default %}
  12. {% endif %}
  13. {% if (field.yaml or field.validate.type == 'yaml') and value is iterable %}
  14. {% set value = value|toYaml %}
  15. {% endif %}
  16. {% else %}
  17. {% set toggleable = false %}
  18. {% endif %}
  19. {% set vertical = field.style == 'vertical' %}
  20. {% set field_name = (scope ~ field.name)|fieldName %}
  21. {% set show_label = field.label is not same as(false) and field.display_label is not same as(false) %}
  22. {# DEPRECATED: Needed by old form fields; remove when backwards compatibility breaks are allowed #}
  23. {% set isDisabledToggleable = toggleable and not toggleableChecked %}
  24. {% block field %}
  25. <div class="form-field grid{% if vertical %} vertical{% endif %}{% if toggleable %} form-field-toggleable{% endif %} {{ field.outerclasses }} {{ field.field_classes }}">
  26. {% block contents %}
  27. {% if show_label %}
  28. <div class="form-label{% if not vertical %} block size-1-3{% endif %}">
  29. {% if toggleable %}
  30. <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field_name }}">
  31. <input type="checkbox"
  32. id="toggleable_{{ field.name }}"
  33. {% if toggleableChecked %}value="1"{% endif %}
  34. name="toggleable_{{ field_name }}"
  35. {% if toggleableChecked %}checked="checked"{% endif %}
  36. >
  37. <label for="toggleable_{{ field.name }}"></label>
  38. </span>
  39. {% endif %}
  40. <label{{ (toggleable ? ' class="toggleable" for="toggleable_' ~ field.name ~ '"')|raw }}>
  41. {% block label %}
  42. {% if field.help %}
  43. {% if field.markdown %}
  44. <span class="hint--bottom" data-hint="{{ field.help|t|markdown(false) }}">{{ field.label|t|markdown(false)|raw }}</span>
  45. {% else %}
  46. <span class="hint--bottom" data-hint="{{ field.help|t }}">{{ field.label|t|raw }} <i class="hint-icon fa fa-question-circle" aria-hidden="true"></i></span>
  47. {% endif %}
  48. {% else %}
  49. {% if field.markdown %}
  50. {{ field.label|t|markdown(false)|raw }}
  51. {% else %}
  52. {{ field.label|t|raw }}
  53. {% endif %}
  54. {% endif %}
  55. {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
  56. {% endblock %}
  57. </label>
  58. {% if field.sublabel %}
  59. <div class="form-sublabel">
  60. {% if field.markdown %}
  61. {{ field.sublabel|t|markdown(false)|raw }}
  62. {% else %}
  63. {{ field.sublabel|t|raw }}
  64. {% endif %}
  65. </div>
  66. {% endif %}
  67. </div>
  68. {% endif %}
  69. <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
  70. {% block global_attributes %}
  71. data-grav-field="{{ field.type }}"
  72. data-grav-disabled="{{ toggleableChecked }}"
  73. data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
  74. {% endblock %}
  75. >
  76. {% block group %}
  77. {% block input %}
  78. <div class="form-input-wrapper {{ field.size }} {{ field.wrapper_classes }}">
  79. {% block prepend %}{% endblock prepend %}
  80. {% set input_value = value is iterable ? value|join(',') : value|string %}
  81. <input
  82. {# required attribute structures #}
  83. name="{{ field_name }}"
  84. value="{{ input_value }}"
  85. {% if field.key %}
  86. data-key-observe="{{ (scope ~ field_name)|fieldName }}"
  87. {% endif %}
  88. {# input attribute structures #}
  89. {% block input_attributes %}
  90. {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
  91. {% if field.id is defined %}id="{{ field.id }}" {% endif %}
  92. {% if field.style is defined %}style="{{ field.style }}" {% endif %}
  93. {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
  94. {% if field.placeholder %}placeholder="{{ field.placeholder|t }}"{% endif %}
  95. {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
  96. {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
  97. {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
  98. {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete }}"{% endif %}
  99. {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
  100. {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
  101. {% if field.validate.message %}title="{{ field.validate.message|t }}"
  102. {% elseif field.title is defined %}title="{{ field.title|t }}" {% endif %}
  103. {% endblock %}
  104. />
  105. {% block append %}{% endblock append %}
  106. </div>
  107. {% endblock %}
  108. {% endblock %}
  109. {% if field.description %}
  110. <div class="form-extra-wrapper {{ field.wrapper_classes }}">
  111. <span class="form-description">
  112. {% if field.markdown %}
  113. {{ field.description|t|markdown(false)|raw }}
  114. {% else %}
  115. {{ field.description|t|raw }}
  116. {% endif %}
  117. </span>
  118. </div>
  119. {% endif %}
  120. </div>
  121. {% endblock %}
  122. </div>
  123. {% endblock %}
  124. {% endif %}