From 93f2a049bc41d2ddcd9f889fa769a23d260e2b23 Mon Sep 17 00:00:00 2001 From: "florian.bogey" Date: Fri, 20 Oct 2017 12:03:13 +0200 Subject: [PATCH] Allow to add custom HTML attributes on buttons --- README.md | 17 +++++++ Resources/views/FormFlow/buttons.html.twig | 11 ++++- Tests/Resources/TemplateRenderingTest.php | 56 ++++++++++++++++++++++ 3 files changed, 83 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9279a86f..3de38f5f 100644 --- a/README.md +++ b/README.md @@ -295,6 +295,23 @@ Example: } %} ``` +Always in the same way, you can add custom HTML attributes: + +- `craue_formflow_button_attr_last` for either the __next__ or __finish__ button +- `craue_formflow_button_attr_finish` for the __finish__ button +- `craue_formflow_button_attr_next` for the __next__ button +- `craue_formflow_button_attr_back` for the __back__ button +- `craue_formflow_button_attr_reset` for the __reset__ button + +Example: + +```twig +{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with { + craue_formflow_button_attr_finish: {'data-foo': 'bar'}, + craue_formflow_button_attr_reset: {'data-foo': 'bar', 'data-bar': 'foo'}, +} %} +``` + You can also remove the reset button by setting `craue_formflow_button_render_reset` to `false`. ## Create an action diff --git a/Resources/views/FormFlow/buttons.html.twig b/Resources/views/FormFlow/buttons.html.twig index 3db96c0f..c7b8563e 100644 --- a/Resources/views/FormFlow/buttons.html.twig +++ b/Resources/views/FormFlow/buttons.html.twig @@ -14,6 +14,11 @@ ? craue_formflow_button_class_finish | default(craue_formflow_button_class_last) : craue_formflow_button_class_next | default(craue_formflow_button_class_last) -%} + {%- set craue_formflow_button_attr_last = craue_formflow_button_attr_last | default([]) -%} + {%- set craue_formflow_button_attr_last = isLastStep + ? craue_formflow_button_attr_finish | default(craue_formflow_button_attr_last) + : craue_formflow_button_attr_next | default(craue_formflow_button_attr_last) + -%} {%- set craue_buttons = [ { label: craue_formflow_button_label_last | default(isLastStep ? craue_formflow_button_label_finish | default('button.finish') : craue_formflow_button_label_next | default('button.next')), @@ -21,6 +26,7 @@ attr: { class: craue_formflow_button_class_last, }, + custom_attr: craue_formflow_button_attr_last|default([]), }, { label: craue_formflow_button_label_back | default('button.back'), @@ -31,6 +37,7 @@ value: 'back', formnovalidate: 'formnovalidate', }, + custom_attr: craue_formflow_button_attr_back|default([]), }, { label: craue_formflow_button_label_reset | default('button.reset'), @@ -41,11 +48,13 @@ value: 'reset', formnovalidate: 'formnovalidate', }, + custom_attr: craue_formflow_button_attr_reset|default([]), }, ] -%} {% for button in craue_buttons if button.render %} - {% endfor %} diff --git a/Tests/Resources/TemplateRenderingTest.php b/Tests/Resources/TemplateRenderingTest.php index 99a20250..21943284 100644 --- a/Tests/Resources/TemplateRenderingTest.php +++ b/Tests/Resources/TemplateRenderingTest.php @@ -138,6 +138,21 @@ public function dataCustomizedButton() { array('craue_formflow_button_class_next' => 'next'), '', ), + 'next button custom attr without class' => array( + 2, 1, + array('craue_formflow_button_attr_next' => array('data-foo' => 'bar')), + '', + ), + 'next button custom attr with class' => array( + 2, 1, + array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar')), + '', + ), + 'next button two custom attr with class' => array( + 2, 1, + array('craue_formflow_button_class_next' => 'next', 'craue_formflow_button_attr_next' => array('data-foo' => 'bar', 'data-bar' => 'foo')), + '', + ), 'next button custom label' => array( 2, 1, array('craue_formflow_button_label_next' => 'custom next'), @@ -148,6 +163,16 @@ public function dataCustomizedButton() { array('craue_formflow_button_class_finish' => 'finish'), '', ), + 'finish button custom attr without class' => array( + 1, 1, + array('craue_formflow_button_attr_finish' => array('data-foo' => 'bar')), + '', + ), + 'finish button custom attr with class' => array( + 1, 1, + array('craue_formflow_button_class_finish' => 'finish', 'craue_formflow_button_attr_finish' => array('data-foo' => 'bar')), + '', + ), 'finish button custom label' => array( 1, 1, array('craue_formflow_button_label_finish' => 'custom finish'), @@ -168,6 +193,16 @@ public function dataCustomizedButton() { array('craue_formflow_button_class_last' => 'last'), '', ), + 'last button custom attr without class (next)' => array( + 2, 1, + array('craue_formflow_button_class_last' => 'last', 'craue_formflow_button_attr_last' => array('data-foo' => 'bar')), + '', + ), + 'last button custom attr with class (next)' => array( + 2, 1, + array('craue_formflow_button_attr_last' => array('data-foo' => 'bar')), + '', + ), 'last button custom label (next)' => array( 2, 1, array('craue_formflow_button_label_last' => 'custom last'), @@ -178,6 +213,16 @@ public function dataCustomizedButton() { array('craue_formflow_button_class_back' => 'back'), '', ), + 'back button custom attr without class' => array( + 2, 2, + array('craue_formflow_button_attr_back' => array('data-foo' => 'bar')), + '', + ), + 'back button custom attr with class' => array( + 2, 2, + array('craue_formflow_button_class_back' => 'back', 'craue_formflow_button_attr_back' => array('data-foo' => 'bar')), + '', + ), 'back button custom label' => array( 2, 2, array('craue_formflow_button_label_back' => 'custom back'), @@ -188,6 +233,17 @@ public function dataCustomizedButton() { array('craue_formflow_button_class_reset' => 'reset'), '', ), + 'reset button custom attr without class' => array( + 1, 1, + array('craue_formflow_button_attr_reset' => array('data-foo' => 'bar')), + '', + ), + 'reset button custom attr with class' => array( + 1, 1, + array('craue_formflow_button_class_reset' => 'reset', 'craue_formflow_button_attr_reset' => array('data-foo' => 'bar')), + '', + + ), 'reset button custom label' => array( 1, 1, array('craue_formflow_button_label_reset' => 'custom reset'),