multilevel.html.twig 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. {% extends "forms/field.html.twig" %}
  2. {% block global_attributes %}
  3. data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
  4. data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
  5. data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
  6. {{ parent() }}
  7. {% endblock %}
  8. {% macro renderer(key, content, field, scope, level, parent_key, up_level) %}
  9. {% macro field(value, key, level, globalvars, disable_name, hidden) %}
  10. {% set name = 'data[' ~ globalvars.field.name|replace({'.': ']['}) ~ ']' ~ key %}
  11. <div class="form-row array-field-value_only js__multilevel-field {{ level == 0 ? 'top' : '' }}"
  12. data-grav-array-type="row" {% if (hidden|default(false) == true) %}style="display: none"{% endif %}>
  13. <input
  14. type="text"
  15. {% if (disable_name != true) %}name="{{ name }}"{% endif %}
  16. data-attr-name="{{ name }}"
  17. placeholder="{{ field.placeholder_value|e|tu }}"
  18. style="margin-left: {{ level * 50 }}px"
  19. value="{{ value }}" />
  20. <span class="fa fa-minus js__remove-item"></span>
  21. <span class="fa fa-plus js__add-sibling hidden" data-level="{{level}}"></span>
  22. <span class="fa fa-plus-circle js__add-children hidden" data-level="{{level}}"></span>
  23. </div>
  24. {% endmacro %}
  25. {% if level == 0 %}
  26. {{ _self.field(key, '', level, _context, true, (is_numeric(key) ? true : false)) }}
  27. {% if content is not iterable %}
  28. {% set level2 = level + 1 %}
  29. <div class="children-wrapper">
  30. <div class="element-wrapper">
  31. {{ _self.field(content, '[' ~ key ~ ']', level2, _context) }}
  32. </div>
  33. </div>
  34. {% endif %}
  35. {% endif %}
  36. {% if up_level %}
  37. {% set level = level + 1 %}
  38. {% endif %}
  39. <div class="children-wrapper">
  40. {% set unique_child = (is_array(content) and content.length > 1) ? true : false %}
  41. {% for inner_key, inner_content in content -%}
  42. <div class="element-wrapper">
  43. {% if not is_numeric(inner_key) %}
  44. {% if (content|length > 1) %}
  45. {{ _self.field(inner_key, parent_key, level, _context, true) }}
  46. {% else %}
  47. {{ _self.field(inner_key, parent_key, level, _context) }}
  48. {% endif %}
  49. {% set level2 = level + 1 %}
  50. {% set up_level = true %}
  51. {% else %}
  52. {% set up_level = false %}
  53. {% set level2 = level %}
  54. {% endif %}
  55. {% if inner_content is not iterable %}
  56. {% if not is_numeric(inner_key) %}
  57. <div class="children-wrapper">
  58. <div class="element-wrapper">
  59. {% endif %}
  60. {% set last_key = (is_numeric(inner_key)) ? '' : inner_key %}
  61. {{ _self.field(inner_content, parent_key ~ '[' ~ inner_key ~ ']', level2, _context) }}
  62. {% if not is_numeric(inner_key) %}
  63. </div>
  64. </div>
  65. {% endif %}
  66. {% else %}
  67. {% set inner_parent_key = parent_key ~ '[' ~ inner_key ~ ']' %}
  68. {{ _self.renderer(inner_key, inner_content, field, scope, level, inner_parent_key, up_level) }}
  69. {% endif %}
  70. </div>
  71. {% endfor %}
  72. </div>
  73. {% endmacro %}
  74. {% block input %}
  75. <div data-id="{{random_string()}}" data-grav-multilevel-field data-grav-array-type="container" data-grav-array-mode="value_only"{{ value|length <= 1 ? ' class="one-child"' : '' }}>
  76. {% if value|length %}
  77. {% for key, content in value -%}
  78. <div class="element-wrapper">
  79. {{ _self.renderer(key, content, field, scope, 0, '[' ~ key ~ ']', true) }}
  80. </div>
  81. {% endfor %}
  82. {%- else -%}
  83. {# Empty value, mock the entry field#}
  84. <div class="element-wrapper">
  85. <div class="form-row array-field-value_only js__multilevel-field"
  86. data-grav-array-type="row">
  87. <input
  88. type="text"
  89. name="{{ (scope ~ field.name)|fieldName }}"
  90. placeholder="Enter value"
  91. value="" />
  92. <span class="fa fa-minus js__remove-item"></span>
  93. <span class="fa fa-plus js__add-sibling hidden" data-level="0" ></span>
  94. <span class="fa fa-plus-circle js__add-children hidden" data-level="0"></span>
  95. </div>
  96. </div>
  97. {%- endif %}
  98. </div>
  99. {% endblock %}