|
1 | 1 | import {request} from '../modules/fetch.ts'; |
2 | 2 | import {hideToastsAll, showErrorToast} from '../modules/toast.ts'; |
3 | 3 | import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts'; |
4 | | -import {confirmModal} from './comp/ConfirmModal.ts'; |
| 4 | +import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts'; |
5 | 5 | import type {RequestOpts} from '../types.ts'; |
6 | 6 | import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts'; |
7 | 7 |
|
@@ -111,28 +111,39 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt |
111 | 111 | async function onLinkActionClick(el: HTMLElement, e: Event) { |
112 | 112 | // A "link-action" can post AJAX request to its "data-url" |
113 | 113 | // Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading. |
114 | | - // If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action. |
| 114 | + // If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action. |
115 | 115 | e.preventDefault(); |
116 | 116 | const url = el.getAttribute('data-url'); |
117 | 117 | const doRequest = async () => { |
118 | | - if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but A doesn't have disabled attribute |
| 118 | + if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but "A" doesn't have the "disabled" attribute |
119 | 119 | await fetchActionDoRequest(el, url, {method: el.getAttribute('data-link-action-method') || 'POST'}); |
120 | 120 | if ('disabled' in el) el.disabled = false; |
121 | 121 | }; |
122 | 122 |
|
123 | | - const modalConfirmContent = el.getAttribute('data-modal-confirm') || |
124 | | - el.getAttribute('data-modal-confirm-content') || ''; |
125 | | - if (!modalConfirmContent) { |
| 123 | + let elModal: HTMLElement | null = null; |
| 124 | + const dataModalConfirm = el.getAttribute('data-modal-confirm') || ''; |
| 125 | + if (dataModalConfirm.startsWith('#')) { |
| 126 | + // eslint-disable-next-line unicorn/prefer-query-selector |
| 127 | + elModal = document.getElementById(dataModalConfirm.substring(1)); |
| 128 | + } |
| 129 | + if (!elModal) { |
| 130 | + const modalConfirmContent = dataModalConfirm || el.getAttribute('data-modal-confirm-content') || ''; |
| 131 | + if (modalConfirmContent) { |
| 132 | + const isRisky = el.classList.contains('red') || el.classList.contains('negative'); |
| 133 | + elModal = createConfirmModal({ |
| 134 | + header: el.getAttribute('data-modal-confirm-header') || '', |
| 135 | + content: modalConfirmContent, |
| 136 | + confirmButtonColor: isRisky ? 'red' : 'primary', |
| 137 | + }); |
| 138 | + } |
| 139 | + } |
| 140 | + |
| 141 | + if (!elModal) { |
126 | 142 | await doRequest(); |
127 | 143 | return; |
128 | 144 | } |
129 | 145 |
|
130 | | - const isRisky = el.classList.contains('red') || el.classList.contains('negative'); |
131 | | - if (await confirmModal({ |
132 | | - header: el.getAttribute('data-modal-confirm-header') || '', |
133 | | - content: modalConfirmContent, |
134 | | - confirmButtonColor: isRisky ? 'red' : 'primary', |
135 | | - })) { |
| 146 | + if (await confirmModal(elModal)) { |
136 | 147 | await doRequest(); |
137 | 148 | } |
138 | 149 | } |
|
0 commit comments