457b1f9523
In order to place modal forms in other places on the page (so that forms are not nested) it's necessary to move MultiStepModalForm links out of the component. They just need to refer to the correct modal. This PR also makes changes to ensure that the active modal is being unset everywhere correctly when a modal is closed.
46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
{% from "components/modal.html" import Modal %}
|
|
{% from "components/icon.html" import Icon %}
|
|
|
|
{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
|
|
|
|
{% macro FormSteps(step_count, current_step) -%}
|
|
{% set count = numbers[step_count - 1] %}
|
|
<div class="progress-menu progress-menu--{{ count }}">
|
|
<ul>
|
|
{% for step in range(step_count) %}
|
|
<li class="progress-menu__item
|
|
{% if loop.index < current_step %}
|
|
progress-menu__item--complete
|
|
{% elif loop.index == current_step %}
|
|
progress-menu__item--active
|
|
{% else %}
|
|
progress-menu__item--incomplete
|
|
{% endif %}">
|
|
<a v-on:click="goToStep({{ step }})">
|
|
Step {{ loop.index }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
|
|
{% set step_count = steps|length %}
|
|
<multi-step-modal-form inline-template :steps={{ step_count }}>
|
|
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
|
|
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
|
|
{{ form.csrf_token }}
|
|
<div v-if="this.$root.activeModal === '{{ name }}'">
|
|
{% for step in steps %}
|
|
<div class="modal__form" v-show="step === {{ loop.index0 }}">
|
|
{{ FormSteps(step_count, loop.index) }}
|
|
{{ step }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
{% endcall %}
|
|
</multi-step-modal-form>
|
|
{% endmacro %}
|