Skip to content

Commit

Permalink
Merge branch '76-add-tab-indexes-to-form-elements'
Browse files Browse the repository at this point in the history
  • Loading branch information
@guruofgentoo
guruofgentoo committed Nov 13, 2018
2 parents 8dc840b + 3afd75a commit f36997e
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 25 deletions.
59 changes: 41 additions & 18 deletions keg_elements/templates/keg_elements/forms/horizontal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,22 @@

Example usage:
{{ horz_form.field(form.email, placeholder='Input email', type='email') }}

Note:
A change was made to the below macros to support adding tab indexes to form
elements. A tab index can be added explicitly as a html attribute when creating a
field but we wanted to add the tab indexes when a wtform is created using the
form macro, fields macro or the sections macro.
Due to the fact that some of these macros can be used multiple times in a template,
we needed a way to specify the start tab index for each invocation of the macro. We
do that by passing in the start_tab_index parameter to the form, fields and section
macros.
This change could possibly cause tab indexes to be incorrect for existing forms
if some form fields are being rendered explicity inside a form macro. The tab indexes
would be incorrect because by default, the start_tab_index in the form macro is set to
1 and the same index is then used to set the tab index on the form submit buttons. To fix
the tab indexes, the parameter start_tab_index in the form macro will need to be
set so to account for all the fields which are being explicitly rendered.
#}

{% macro div_form_group(field) -%}
Expand Down Expand Up @@ -109,7 +125,7 @@
Example usage:
{{ horiz_form.radio_field(form.answers) }}
#}
{% macro radio_field(field, label_visible=true) -%}
{% macro radio_field(field, label_visible=true, tabIndex=1) -%}
{% call div_form_group(field, **kwargs) %}
{% if label_visible %}
{{ field.label(class_='control-label') }}
Expand All @@ -123,7 +139,8 @@
id="{{ field.id }}"
value="{{ value }}"
{{ 'checked' if checked }}
{{ 'disabled' if field.flags.disabled or (field.flags.readonly and not checked) }}>
{{ 'disabled' if field.flags.disabled or (field.flags.readonly and not checked) }}
tabIndex="{{tabIndex}}">
{{ label }}
</label>
</div>
Expand All @@ -140,26 +157,26 @@
{% endcall %}
{%- endmacro %}

{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='') -%}
{% macro submit_group(action_text='Submit', btn_class='btn btn-primary', cancel_url='', tab_index=1) -%}
<div class="form-group">
<div class="unlabeled-group">
<button type="submit" class="{{ btn_class }}">{{ action_text }} </button>
<button type="submit" class="{{ btn_class }}" tabIndex="{{tab_index}}">{{ action_text }} </button>
{% if cancel_url %}
<a href="{{cancel_url}}" class="cancel">{{ _('Cancel') }}</a>
<a href="{{cancel_url}}" class="cancel" tabIndex="{{tab_index+1}}">Cancel</a>
{% endif %}
</div>
</div>
{%- endmacro %}

{% macro render_field(f) -%}
{% if f.type == 'BooleanField' %}
{{ checkbox_field(f) }}
{{ checkbox_field(f, **kwargs) }}
{% elif f.type == 'RadioField' %}
{{ radio_field(f) }}
{{ radio_field(f, **kwargs) }}
{% elif f is none %}
{# Do nothing b/c the field is None #}
{% else %}
{{ field(f) }}
{{ field(f, **kwargs) }}
{% endif %}
{%- endmacro %}

Expand Down Expand Up @@ -195,12 +212,13 @@
form,
field_names=None,
action_url='',
action_text=_('Submit'),
action_text='Submit',
class_='form-horizontal',
btn_class='btn btn-primary',
cancel_url='',
form_upload=false,
dirty_check=false
dirty_check=false,
start_tab_index=1
) -%}

<form method="POST"
Expand All @@ -211,33 +229,38 @@
{% if dirty_check %}data-dirty-check="on"{% endif %}
>
{{ form.hidden_tag() if form.hidden_tag }}

{% set tab_index=[start_tab_index|int] %}
{{ form_errors(form) }}

{% if caller %}
{{ caller() }}
{% elif field_names %}
{{ fields(form, field_names) }}
{% else %}
{% for f in form %}
{{ render_field(f) }}
{{ render_field(f, tabIndex=tab_index.pop()) }}
{% if tab_index.append(start_tab_index|int+loop.index) %} {% endif %}
{% endfor %}

{% endif %}
{{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url) }}
{{ submit_group(action_text=action_text, btn_class=btn_class, cancel_url=cancel_url, tab_index=tab_index[0]) }}
</form>
{%- endmacro %}

{% macro fields(form, field_names) -%}
{% macro fields(form, field_names, start_tab_index=1) -%}
{% set tab_index = start_tab_index|int %}
{% for field_name in field_names %}
{{ render_field(form[field_name]) }}
{% set tab_index = tab_index + loop.index0 %}
{{ render_field(form[field_name], tabIndex=tab_index) }}

{% endfor %}
{%- endmacro %}

{% macro section(heading, form, field_names) -%}
{% macro section(heading, form, field_names, start_tab_index=1) -%}
<h2>{{heading}}</h2>
{% if caller %}
{{ caller() }}
{% else %}
{{ fields(form, field_names) }}
{{ fields(form, field_names, start_tab_index) }}
{% endif %}
{%- endmacro %}
15 changes: 8 additions & 7 deletions keg_elements/templates/keg_elements/forms/horizontal_static.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
Example usage:
{{ horiz_form.radio_field(form.answers) }}
#}
{% macro radio_field(field, label_visible=true) -%}
{% macro radio_field(field, label_visible=true, tabIndex="1") -%}
{% call div_form_group(field, **kwargs) %}
{% if label_visible %}
{{ field.label(class_='control-label') }}
Expand All @@ -88,10 +88,10 @@
{% endcall %}
{%- endmacro %}

{% macro submit_group(action_text=_('Done'), btn_class='btn btn-primary', cancel_url='') -%}
{% macro submit_group(action_text='Done', btn_class='btn btn-primary', cancel_url='', tab_index="1") -%}
<div class="form-group">
<div class="unlabeled-group">
<a href="{{cancel_url}}" class="{{ btn_class }}">{{ action_text }}</a>
<a tabIndex={{tab_index}} href="{{cancel_url}}" class="{{ btn_class }}">{{ action_text }}</a>
</div>
</div>
{%- endmacro %}
Expand Down Expand Up @@ -126,11 +126,12 @@
form,
field_names=None,
action_url='',
action_text=_('Done'),
action_text='Done',
class_='form-horizontal',
btn_class='btn btn-primary',
cancel_url='',
dirty_check=false
dirty_check=false,
start_tab_index=1
) -%}
<div class="{{ class_ }}">
{% if caller %}
Expand All @@ -146,13 +147,13 @@
</div>
{%- endmacro %}

{% macro fields(form, field_names) -%}
{% macro fields(form, field_names, start_tab_index=1) -%}
{% for field_name in field_names %}
{{ render_field(form[field_name]) }}
{% endfor %}
{%- endmacro %}

{% macro section(heading, form, field_names) -%}
{% macro section(heading, form, field_names, start_tab_index=1) -%}
<h2>{{heading}}</h2>
{% if caller %}
{{ caller() }}
Expand Down

0 comments on commit f36997e

Please sign in to comment.