Implemented js logic to handle new elements field

.editorconfig

@@ -10,7 +10,7 @@ end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 # 2 space indentation
 [*.{yaml,.yml}]

themes/grav/.eslintrc

@@ -35,7 +35,6 @@
     "generator-star-spacing": [2, { "before": true, "after": true }],
     "guard-for-in": 0,
     "handle-callback-err": [2, "^(err|error)$" ],
-    "indent": [2, 4, { "SwitchCase": 1 }],
     "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
     "linebreak-style": 0,
     "lines-around-comment": 0,

themes/grav/app/forms/fields/elements.js

@@ -0,0 +1,13 @@
+import $ from 'jquery';
+
+const enabled = '_enabled';
+const disabled = '_disabled';
+
+$(document).on('change', '[data-grav-elements] select', (event) => {
+  const target = $(event.currentTarget);
+  const value = target.val() === '1';
+  const id = target.closest('[data-grav-elements]').data('gravElements');
+
+  $(`[id="${id}_${enabled}"]`).css('display', value ? 'inherit' : 'none');
+  $(`[id="${id}_${disabled}"]`).css('display', !value ? 'inherit' : 'none');
+});

themes/grav/app/forms/fields/index.js

@@ -19,6 +19,7 @@ import './mediapicker';
 import './multilevel';
 import './text';
 import './range';
+import './elements';
 
 export default {
     FilepickerField: {

themes/grav/templates/forms/fields/element/element.html.twig

@@ -2,7 +2,13 @@
 
 {% block field %}
   {% embed 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
-    {% block outer_markup_field_open %}<div id="{{ parent_name ~ '__' ~ field.name }}" class="form-element">{% endblock %}
-    {% block outer_markup_field_close %}</div>{% endblock %}
+    {% set initial_state = (field.name == 'enabled' and parent_value) or (field.name == 'disabled' and not parent_value) ? '' : 'display: none;' %}
+    {% block outer_markup_field_open %}
+        <div id="{{ parent_name ~ '__' ~ field.name }}" class="form-element" style="{{ initial_state }}">
+    {% endblock %}
+
+    {% block outer_markup_field_close %}
+        </div>
+    {% endblock %}
   {% endembed %}
 {% endblock %}

themes/grav/templates/forms/fields/elements/elements.html.twig

@@ -4,9 +4,15 @@
 {# load some frontend CSS/JS #}
 {% endif %}
 
+{% block global_attributes %}
+  data-grav-elements="{{ field.name }}"
+  {{ parent() }}
+{% endblock %}
+
 {% block field %}
   {{ parent() }}
   {% set parent_name = field.name %}
+  {% set parent_value = value %}
   {% set fields = prepare_form_fields(field.fields, field.name) %}
   {% if fields|length %}
     {% include 'forms/default/fields.html.twig' with {name: field.name, fields: fields} %}