Merge pull request #851 from dod-ccpo/modal-freezing
Fix modal freezing fix
This commit is contained in:
commit
26c4ec0d05
11
js/index.js
11
js/index.js
@ -89,7 +89,18 @@ const app = new Vue({
|
||||
if (data['isOpen']) {
|
||||
document.body.className += ' modal-open'
|
||||
this.activeModal = data['name']
|
||||
|
||||
var handler = ally.maintain.disabled({
|
||||
filter: `#${this.modalId}`,
|
||||
})
|
||||
|
||||
this.allyHandler = handler
|
||||
} else {
|
||||
this.activeModal = null
|
||||
if (this.allyHandler) {
|
||||
this.allyHandler.disengage()
|
||||
this.allyHandler = null
|
||||
}
|
||||
document.body.className = document.body.className.replace(
|
||||
' modal-open',
|
||||
''
|
||||
|
@ -3,19 +3,11 @@ import ally from 'ally.js'
|
||||
export default {
|
||||
methods: {
|
||||
closeModal: function(name) {
|
||||
this.activeModal = null
|
||||
this.$root.$emit('modalOpen', { isOpen: false, name: name })
|
||||
if (this.allyHandler) this.allyHandler.disengage()
|
||||
},
|
||||
|
||||
openModal: function(name) {
|
||||
this.activeModal = name
|
||||
this.$root.$emit('modalOpen', { isOpen: true, name: name })
|
||||
const idSelector = `#${this.modalId}`
|
||||
|
||||
this.allyHandler = ally.maintain.disabled({
|
||||
filter: idSelector,
|
||||
})
|
||||
},
|
||||
|
||||
// TODO: activeModal should be tracked on the root
|
||||
|
@ -1,13 +1,13 @@
|
||||
{% macro DeleteConfirmation(modal_id, delete_text, delete_action, form) %}
|
||||
<delete-confirmation inline-template>
|
||||
<delete-confirmation inline-template name="{{ modal_id }}" key="{{ modal_id }}">
|
||||
<div>
|
||||
<div class="usa-input">
|
||||
<label for="deleted-text">
|
||||
<label for="{{ modal_id }}-deleted-text">
|
||||
<span class="usa-input__help">
|
||||
{{ "common.delete_confirm" | translate }}
|
||||
</span>
|
||||
</label>
|
||||
<input id="deleted-text" v-model="deleteText">
|
||||
<input id="{{ modal_id }}-deleted-text" v-model="deleteText">
|
||||
</div>
|
||||
<div class="action-group">
|
||||
<form method="POST" action="{{ delete_action }}">
|
||||
|
@ -6,16 +6,16 @@
|
||||
<div class='modal__container'>
|
||||
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
||||
<div class='modal__body'>
|
||||
{{ caller() }}
|
||||
{{ caller() }}
|
||||
|
||||
{% if dismissable %}
|
||||
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
|
||||
{{ Icon('x') }}
|
||||
<span>
|
||||
{{ "common.close" | translate }}
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if dismissable %}
|
||||
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
|
||||
{{ Icon('x') }}
|
||||
<span>
|
||||
{{ "common.close" | translate }}
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -82,13 +82,9 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
|
||||
<button
|
||||
type="button"
|
||||
class='usa-button button-danger'
|
||||
v-on:click="openModal('{{ delete_modal_id }}')"
|
||||
>
|
||||
<a class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
|
||||
{{ "portfolios.applications.remove_member.button" | translate }}
|
||||
</button>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user