pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Detangle the MultiStepModalForm modal-open link from the modal.

Browse Source 
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.
This commit is contained in:
dandds
2019-05-08 11:16:56 -04:00
parent f52f2a9ade
commit 457b1f9523
9 changed files with 60 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/components/modal.html
View File

@@ -1,7 +1,7 @@
{% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False, classes="") -%}
<div v-show="activeModal === '{{name}}'" v-cloak>
<div v-show="this.$root.activeModal === '{{name}}'" v-cloak>
<div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
<div class='modal__container'>
<div class='modal__dialog' role='dialog' aria-modal='true'>

35
templates/components/multi_step_modal_form.html
View File

@@ -25,30 +25,21 @@
</div>
{% endmacro %}
{% macro MultiStepModalForm(name, form, form_action, steps, button_icon="", button_text="", link_classes="icon-link modal-link", dismissable=False) -%}
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
{% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}>
<div>
<a class='{{ link_classes }}' v-on:click="openModal('{{ name }}')">
{{ button_text }}
{% if button_icon != "" %}
{{ Icon(button_icon) }}
{% endif %}
</a>
{% 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="activeModal === '{{ name }}'">
{% for step in steps %}
<div class="modal__form" v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>
{% endfor %}
{% 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>
</form>
{% endcall %}
</div>
{% endfor %}
</div>
</form>
{% endcall %}
</multi-step-modal-form>
{% endmacro %}