Bug 39410: Use shadowDOM for notice display modal

This patch updates the notice display modal found in the members > notices
page to use a shadowDOM to more accurately display notices matching how
they should display for patrons in their email clients or when printed.

Test plan
1) We can use the 'WELCOME' print notice introduced in bug 38087 as it
   includes Bootstrap classes for display.
2) Navigate to the 'Henry' user in KTD and use the 'More > Send welcome
   notice' option to trigger a print notice.
3) Navigate to the 'Notices' tab for the 'Henry' user and click on the
   notice title to trigger the display modal.
4) Note the well formatted notice with an address block on the right and
   some sections in bold.
5) Apply this patchset
6) Display the notice again as in step 3 and note that the foratting is
   now lost. This is showing proper scoping of the CSS in the same way
   that the notice will be displayed to the end user when printed using
   batch printing.

Note: Whilst this degrades the look of the notice in the staff client,
that is actualy highlighting a mistake in the notice template or
possible showing that we should be including bootstrap in the print
notices template... that is for another bug.

Signed-off-by: Brendan Gallagher <brendan@bywatersolutions.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Martin Renvoize 2025-03-21 15:16:48 +00:00 committed by Katrin Fischer
parent 8779674f1f
commit e1372bacdf
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
1 changed files with 14 additions and 4 deletions

View File

@ -190,14 +190,24 @@
$("#noticestable").on("click", ".notice-title", function (e) {
e.preventDefault();
var title = $(this).text();
$("#noticeModalLabel").text(title);
var noticeid = $(this).data("noticeid");
var body = $("#notice" + noticeid).attr("srcdoc");
// Use shadow DOM for notice content preview
var srcdoc = $("#notice" + noticeid).attr("srcdoc");
var shadowHost = document.createElement("div");
var shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML = srcdoc;
$("#noticeModal .modal-body").html("");
$("#noticeModal .modal-body")[0].appendChild(shadowHost);
if ($("#resend_notice" + noticeid).length) {
$("#resend-notice").data("noticeid", noticeid);
$("#resend-notice").show();
}
$("#resend-notice").data("noticeid", noticeid);
$("#noticeModalLabel").text(title);
$("#noticeModal .modal-body").html(body);
$("#noticeModal").modal("show");
});