Skip to content

Commit aed22bb

Browse files
mvorisekmvorisek
committed
Replace modal inner HTML excl. dimmer
1 parent bf67902 commit aed22bb

File tree

5 files changed

+59
-9
lines changed

5 files changed

+59
-9
lines changed

‎js/src/services/api.service.js‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,42 @@ class ApiService {
7575
if (response.success) {
7676
if (response.html && response.id) {
7777
// prevent modal duplication
78-
// apiService.removeModalDuplicate(response.html);
7978
const modelsContainer = $('.ui.dimmer.modals.page')[0];
8079
$($.parseHTML(response.html)).find('.ui.modal[id]').each((i, e) => {
8180
$(modelsContainer).find('#' + e.id).remove();
8281
});
8382

84-
const result = $('#' + response.id).replaceWith(response.html);
85-
if (result.length === 0) {
83+
const $target = $('#' + response.id);
84+
85+
let $result;
86+
if ($target.hasClass('ui modal')) {
87+
const responseBody = new DOMParser().parseFromString('<body>' + response.html.trim() + '</body>', 'text/html').body;
88+
const responseElement = responseBody.childNodes[0];
89+
if (responseBody.childNodes.length !== 1 || !responseElement.classList.contains('ui') || !responseElement.classList.contains('modal')) {
90+
throw new Error('Unexpected modal HTML response');
91+
}
92+
93+
$.each([...$target[0].childNodes], (i, node) => {
94+
if (node instanceof Element && node.classList.contains('ui') && node.classList.contains('dimmer')) {
95+
return;
96+
}
97+
98+
$(node).remove();
99+
});
100+
$.each([...responseElement.childNodes], (i, node) => {
101+
if (node instanceof Element && node.classList.contains('ui') && node.classList.contains('dimmer')) {
102+
return;
103+
}
104+
105+
$target.append(node);
106+
});
107+
108+
$result = $target;
109+
} else {
110+
$result = $target.replaceWith(response.html);
111+
}
112+
113+
if ($result.length === 0) {
86114
// TODO find a better solution for long term
87115
// need a way to gracefully abort server request
88116
// when user cancel a request by selecting another request

‎public/js/atkjs-ui.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1990,13 +1990,35 @@ class ApiService {
19901990
if (response.success) {
19911991
if (response.html && response.id) {
19921992
// prevent modal duplication
1993-
// apiService.removeModalDuplicate(response.html);
19941993
const modelsContainer = external_jquery__WEBPACK_IMPORTED_MODULE_5___default()('.ui.dimmer.modals.page')[0];
19951994
external_jquery__WEBPACK_IMPORTED_MODULE_5___default()(external_jquery__WEBPACK_IMPORTED_MODULE_5___default().parseHTML(response.html)).find('.ui.modal[id]').each((i, e) => {
19961995
external_jquery__WEBPACK_IMPORTED_MODULE_5___default()(modelsContainer).find('#' + e.id).remove();
19971996
});
1998-
const result = external_jquery__WEBPACK_IMPORTED_MODULE_5___default()('#' + response.id).replaceWith(response.html);
1999-
if (result.length === 0) {
1997+
const $target = external_jquery__WEBPACK_IMPORTED_MODULE_5___default()('#' + response.id);
1998+
let $result;
1999+
if ($target.hasClass('ui modal')) {
2000+
const responseBody = new DOMParser().parseFromString('<body>' + response.html.trim() + '</body>', 'text/html').body;
2001+
const responseElement = responseBody.childNodes[0];
2002+
if (responseBody.childNodes.length !== 1 || !responseElement.classList.contains('ui') || !responseElement.classList.contains('modal')) {
2003+
throw new Error('Unexpected modal HTML response');
2004+
}
2005+
external_jquery__WEBPACK_IMPORTED_MODULE_5___default().each([...$target[0].childNodes], (i, node) => {
2006+
if (node instanceof Element && node.classList.contains('ui') && node.classList.contains('dimmer')) {
2007+
return;
2008+
}
2009+
external_jquery__WEBPACK_IMPORTED_MODULE_5___default()(node).remove();
2010+
});
2011+
external_jquery__WEBPACK_IMPORTED_MODULE_5___default().each([...responseElement.childNodes], (i, node) => {
2012+
if (node instanceof Element && node.classList.contains('ui') && node.classList.contains('dimmer')) {
2013+
return;
2014+
}
2015+
$target.append(node);
2016+
});
2017+
$result = $target;
2018+
} else {
2019+
$result = $target.replaceWith(response.html);
2020+
}
2021+
if ($result.length === 0) {
20002022
// TODO find a better solution for long term
20012023
// need a way to gracefully abort server request
20022024
// when user cancel a request by selecting another request

‎public/js/atkjs-ui.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/atkjs-ui.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/atkjs-ui.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)