[Feature] Bootstrap 5 layout support

dachcom-digital · Dec 21, 2024 · e1c7151 · e1c7151
1 parent 8c0f31e
commit e1c7151
Show file tree

Hide file tree

Showing 10 changed files with 497 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,12 @@
 
 ## Installation
 
+```bash
+composer require "dachcom-digital/formbuilder":"~5.1.4"
+```
+
+OR add to `composer.json`:
+
 ```json
 "require" : {
     "dachcom-digital/formbuilder" : "~5.1.0"
@@ -93,7 +99,7 @@ Nothing to tell here, it's just [Symfony](https://symfony.com/doc/current/templa
 - [Frontend Tips](docs/90_FrontendTips.md)
 - [FormBuilder Javascript Plugins](docs/91_Javascript.md)
 - [Configuration Flags](docs/100_ConfigurationFlags.md)
-
+- [Custom form templates](docs/110_CustomTemplates.md)
 ## Upgrade Info
 Before updating, please [check our upgrade notes!](UPGRADE.md)
 

diff --git a/config/install/translations/admin.csv b/config/install/translations/admin.csv
@@ -124,6 +124,8 @@
 "form_builder_form_template.bootstrap_3_layout","Bootstrap 3 Layout","Bootstrap 3 Layout"
 "form_builder_form_template.bootstrap_4_horizontal_layout","Bootstrap 4 Horizontal Layout","Bootstrap 4 Horizontales Layout"
 "form_builder_form_template.bootstrap_4_layout","Bootstrap 4 Layout","Bootstrap 4 Layout"
+"form_builder_form_template.bootstrap_5_horizontal_layout","Bootstrap 5 Horizontal Layout","Bootstrap 5 Horizontales Layout"
+"form_builder_form_template.bootstrap_5_layout","Bootstrap 5 Layout","Bootstrap 5 Layout"
 "form_builder_form_template.form_div_layout","Form Div Layout","Form Div Layout"
 "form_builder_type_container.repeater.option.min","Minimum","Minimum"
 "form_builder_type_container.repeater.option.max","Maximum","Maximum"
@@ -145,4 +147,4 @@
 "form_builder.output_workflow.channel.email","Email Channel", "E-Mail Channel"
 "form_builder.output_workflow.channel.object","Object Channel", "Object Channel"
 "form_builder.output_workflow.channel.api","API Channel", "API Channel"
-"form_builder.output_workflow.channel.funnel","Funnel Layer", "Funnel Layer"
+"form_builder.output_workflow.channel.funnel","Funnel Layer", "Funnel Layer"
diff --git a/config/pimcore/config.yaml b/config/pimcore/config.yaml
@@ -73,6 +73,14 @@ form_builder:
                 value: 'bootstrap_4_horizontal_layout.html.twig'
                 label: 'form_builder_form_template.bootstrap_4_horizontal_layout'
                 default: false
+            bootstrap_5_layout:
+                value: 'bootstrap_5_layout.html.twig'
+                label: 'form_builder_form_template.bootstrap_5_layout'
+                default: false
+            bootstrap_5_horizontal_layout:
+                value: 'bootstrap_5_horizontal_layout.html.twig'
+                label: 'form_builder_form_template.bootstrap_5_horizontal_layout'
+                default: false
         field:
             templates:
                 default:
@@ -241,4 +249,4 @@ form_builder:
 imports:
     - { resource: '../backend/base_config.yaml' }
     - { resource: '../types/field_types.yaml' }
-    - { resource: '../types/container_types.yaml' }
+    - { resource: '../types/container_types.yaml' }
diff --git a/docs/110_CustomTemplates.md b/docs/110_CustomTemplates.md
@@ -0,0 +1,184 @@
+# Custom form templates
+You can use your own custom form templates.
+
+***
+
+## Configuration
+
+If you don't have a configuration file yet, create one `config/packages/form_builder.yaml`
+
+```yaml
+form_builder:
+  form:
+    templates:
+      my_custom_layout:
+        value: 'my_custom_layout.html.twig'
+        label: 'form_builder_form_template.my_custom_layout'
+        default: false
+```
+
+Then you need to create your own templates in the `templates/bundles/FormBuilderBundle/form/theme/` folder
+
+`templates/bundles/FormBuilderBundle/form/theme/macro/my_custom_layout.html.twig`
+
+```html
+{% macro form_builder_form_head() %}
+    <div class="row">
+{% endmacro %}
+
+{% macro form_builder_form_foot() %}
+    </div>
+{% endmacro %}
+
+{% macro form_builder_form_message(flash_messages) %}
+    {% if flash_messages is not empty %}
+        <div class="col-12">
+            {% for label, messages in flash_messages %}
+                {% for message in messages %}
+                    <div class="alert alert-{{ label == 'error' ? 'danger' : 'success' }}">
+                        {{ message|raw }}
+                    </div>
+                {% endfor %}
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endmacro %}
+```
+
+`templates/bundles/FormBuilderBundle/form/theme/my_custom_layout.html.twig`
+
+```html
+{% extends 'bootstrap_5_layout.html.twig' %}
+
+{% use '@FormBuilder/form/theme/type/dynamic_multi_file.html.twig' %}
+{% use '@FormBuilder/form/theme/type/html_tag.html.twig' %}
+{% use '@FormBuilder/form/theme/type/instructions.html.twig' %}
+{% use '@FormBuilder/form/theme/type/snippet.html.twig' %}
+{% use '@FormBuilder/form/theme/type/container.html.twig' %}
+{% use '@FormBuilder/form/theme/type/friendly_captcha.html.twig' %}
+{% use '@FormBuilder/form/theme/type/cloudflare_turnstile.html.twig' %}
+
+{%- block form_widget_compound -%}
+{%- if form is not rootform -%}
+<div {{ block('widget_container_attributes') }}>
+{% endif %}
+{%- if form is rootform -%}
+{{ form_errors(form) }}
+{%- endif -%}
+{{- block('form_rows') -}}
+{{- form_rest(form) -}}
+{%- if form is not rootform -%}
+</div>
+{% endif %}
+{%- endblock form_widget_compound -%}
+
+{% block checkbox_radio_label %}
+{% set label_translation_parameters = label_translation_parameters is defined ? label_translation_parameters : {} %}
+{% if label is not same as(false) %}
+{% set temp_label = translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain) %}
+{% if temp_label matches '/<\s*\\w[^>]*>/' %}
+{% set translation_domain = false %}
+{% set label = 'HTML_LABEL' %}
+{% set rendered_label = parent() %}
+{{- rendered_label|replace({'HTML_LABEL': temp_label})|raw -}}
+{% else %}
+{{ parent() }}
+{% endif %}
+{% else %}
+{{ parent() }}
+{% endif %}
+{% endblock checkbox_radio_label %}
+
+{% block help_text_label %}
+<small class="text-muted">{{ help_text|trans }}</small>
+{% endblock help_text_label %}
+
+{% block form_widget_simple -%}
+{{ parent() }}
+{% if help_text %}
+{{ block('help_text_label') }}
+{% endif %}
+{%- endblock form_widget_simple %}
+
+{% block textarea_widget -%}
+{{ parent() }}
+{% if help_text %}
+{{ block('help_text_label') }}
+{% endif %}
+{%- endblock textarea_widget %}
+
+{% block choice_widget -%}
+{{ parent() }}
+{% if help_text %}
+{{ block('help_text_label') }}
+{% endif %}
+{%- endblock choice_widget %}
+
+{% block checkbox_widget -%}
+{{ parent() }}
+{% if help_text %}
+{{ block('help_text_label') }}
+{% endif %}
+{%- endblock checkbox_widget %}
+
+{% block form_builder_honeypot_row -%}
+{{- form_widget(form) -}}
+{%- endblock form_builder_honeypot_row %}
+
+{% block form_row -%}
+{% set form_row_class = attr['data-template'] is defined ? attr['data-template'] : 'col-12' %}
+{% if form.vars.is_form_builder_container_block is defined %}
+{% set form_row_class = 'formbuilder-container-block' %}
+{% endif %}
+<div class="formbuilder-row {{ form_row_class }}">
+    {{ parent() }}
+</div>
+{%- endblock form_row %}
+
+{% block button_row -%}
+<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+    {{ parent() }}
+</div>
+{%- endblock button_row %}
+
+{% block checkbox_row -%}
+<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+    {{- form_widget(form) -}}
+    {{- form_errors(form) -}}
+</div>
+{%- endblock checkbox_row %}
+
+{% block radio_row -%}
+<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+    {{- form_widget(form) -}}
+    {{- form_errors(form) -}}
+</div>
+{%- endblock radio_row %}
+
+{% block form_builder_friendly_captcha_type_row %}
+<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+    <div class="form-group">
+        {{- form_widget(form) -}}
+        {{- form_errors(form) -}}
+    </div>
+</div>
+{% endblock form_builder_friendly_captcha_type_row %}
+
+{% block form_builder_cloudflare_turnstile_type_row %}
+<div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+    <div class="form-group">
+        {{- form_widget(form) -}}
+        {{- form_errors(form) -}}
+    </div>
+</div>
+{% endblock form_builder_cloudflare_turnstile_type_row %}
+
+{% block form_builder_container_collection_widget %}
+{%- set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) -%}
+{{- parent() -}}
+{% endblock form_builder_container_collection_widget %}
+
+```
+
+! Do not forget to add translations of `form_builder_form_template.my_custom_layout`
+
diff --git a/templates/form/theme/bootstrap_5_horizontal_layout.html.twig b/templates/form/theme/bootstrap_5_horizontal_layout.html.twig
@@ -0,0 +1,110 @@
+{% extends 'bootstrap_5_horizontal_layout.html.twig' %}
+
+{% use '@FormBuilder/form/theme/type/dynamic_multi_file.html.twig' %}
+{% use '@FormBuilder/form/theme/type/html_tag.html.twig' %}
+{% use '@FormBuilder/form/theme/type/instructions.html.twig' %}
+{% use '@FormBuilder/form/theme/type/snippet.html.twig' %}
+{% use '@FormBuilder/form/theme/type/container.html.twig' %}
+{% use '@FormBuilder/form/theme/type/friendly_captcha.html.twig' %}
+{% use '@FormBuilder/form/theme/type/cloudflare_turnstile.html.twig' %}
+
+{%- block form_widget_compound -%}
+    {%- if form is not rootform -%}
+        <div {{ block('widget_container_attributes') }}>
+    {% endif %}
+    {%- if form is rootform -%}
+        {{ form_errors(form) }}
+    {%- endif -%}
+    {{- block('form_rows') -}}
+    {{- form_rest(form) -}}
+    {%- if form is not rootform -%}
+        </div>
+    {% endif %}
+{%- endblock form_widget_compound -%}
+
+{% block help_text_label %}
+    <small class="text-muted">{{ help_text|trans }}</small>
+{% endblock help_text_label %}
+
+{% block form_widget_simple -%}
+    {{ parent() }}
+    {% if help_text %}
+        {{ block('help_text_label') }}
+    {% endif %}
+{%- endblock form_widget_simple %}
+
+{% block textarea_widget -%}
+    {{ parent() }}
+    {% if help_text %}
+        {{ block('help_text_label') }}
+    {% endif %}
+{%- endblock textarea_widget %}
+
+{% block choice_widget -%}
+    {{ parent() }}
+    {% if help_text %}
+        {{ block('help_text_label') }}
+    {% endif %}
+{%- endblock choice_widget %}
+
+{% block checkbox_widget -%}
+    {{ parent() }}
+    {% if help_text %}
+        {{ block('help_text_label') }}
+    {% endif %}
+{%- endblock checkbox_widget %}
+
+{% block form_builder_honeypot_row -%}
+    {{- form_widget(form) -}}
+{%- endblock form_builder_honeypot_row %}
+
+{% block form_row -%}
+    {% set form_row_class = attr['data-template'] is defined ? attr['data-template'] : 'col-12' %}
+    {% if form.vars.is_form_builder_container_block is defined %}
+        {% set form_row_class = 'formbuilder-container-block' %}
+    {% endif %}
+    <div class="formbuilder-row {{ form_row_class }}">
+        {{ parent() }}
+    </div>
+{%- endblock form_row %}
+
+{% block button_row -%}
+    <div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+        {{ parent() }}
+    </div>
+{%- endblock button_row %}
+
+{% block checkbox_row -%}
+    <div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+        {{ parent() }}
+    </div>
+{%- endblock checkbox_row %}
+
+{% block radio_row -%}
+    <div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+        {{ parent() }}
+    </div>
+{%- endblock radio_row %}
+
+{% block form_builder_friendly_captcha_type_row %}
+    <div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+        <div class="form-group">
+            {{- form_widget(form) -}}
+            {{- form_errors(form) -}}
+        </div>
+    </div>
+{% endblock form_builder_friendly_captcha_type_row %}
+
+{% block form_builder_cloudflare_turnstile_type_row %}
+    <div class="formbuilder-row {{ attr['data-template'] is defined ? attr['data-template'] : 'col-12' }}">
+        <div class="form-group">
+            {{- form_widget(form) -}}
+            {{- form_errors(form) -}}
+        </div>
+    </div>
+{% endblock form_builder_cloudflare_turnstile_type_row %}
+
+{% block form_builder_container_collection_widget %}
+    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) -%}
+    {{- parent() -}}
+{% endblock form_builder_container_collection_widget %}