From 4740d8b1fca103904033c5b839f2d2eabb8048d2 Mon Sep 17 00:00:00 2001 From: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov> Date: Fri, 28 Feb 2025 15:22:14 -0500 Subject: [PATCH] Bug 38842: Add reusable modal wrapper This patch adds the block modal_wrapper to html_helpers.inc. NOTE: The caller is responsible for sanitizing all data inputs. Minimal usage: [% WRAPPER modal_wrapper modal_id=<id> modal_header_contents=<contents> %] <modal body goes here> [ % END %] The above will produce an informational modal with an "OK" button to dismiss, and no actions taken. Optional parameters to add functionality to the modal: noblock=1 - if the modal should not block modal_action - if the modal should submit a form, the action url for the form To add a "confirm" button that will submit the modal form: modal_confirm_text - text to show on the button (must be specified) modal_confirm_name - (optional) specify a name attribute modal_confirm_val - (optional) specify a value attribute modal_confirm_accesskey - (optional) specify an accesskey attribute To add a "print" button that will open a print window to the specified url: modal_print_text - text to show on the button (must be specified) modal_print_url - url of the page to print (must be specified) modal_print_name - (optional) specify a name attribute modal_print_accesskey - (optional) specify an accesskey attribute To add a "cancel/deny/dismiss" button: modal_deny_text - text to show on the button (must be specified) modal_deny_action - "submit" if the deny button should submit the modal (to take some denial/cancellation action) - "dismiss" if the deny button should dismiss the modal without submitting the form - This parameter can be omitted if the button should neither submit nor dismiss the modal (for example, if the button click will be handled with JS) modal_deny_name - (optional) specify a name attribute modal_deny_val - (optional) specify a value attribute modal_deny_accesskey - (optional) specify an accesskey attribute If the above generic buttons do not suffice, the below parameters can be used in addition or instead of the above options to specify custom button code and/or other customized footer content: modal_custom_confirm modal_custom_utility_button modal_custom_deny modal_footer_append --- .../prog/en/includes/html_helpers.inc | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc index 86bfcc42667..37a0f5ecd00 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc @@ -628,3 +628,85 @@ </fieldset> </form> [% END %] + +[% BLOCK modal_wrapper %] + <div id="[% modal_id | $raw %]" class="modal modal-lg audio-alert-action [% IF noblock %]noblock[% ELSE %]block[% END %]" [% UNLESS noblock %]data-bs-backdrop="static" data-bs-keyboard="false"[% END %]> + <div class="modal-dialog"> + <div class="modal-content"> + <form class="modal-form" method="post" action="[% modal_action | $raw %]" id="[% modal_id | $raw %]-form"> + [% INCLUDE 'csrf-token.inc' %] + + <div class="modal-header" id="[% modal_id | $raw %]-header"> [% modal_header_contents | $raw %] </div> + <div class="modal-body" id="[% modal_id | $raw %]-body"> [% content | $raw %] </div> + <div class="modal-footer" id="[% modal_id | $raw %]-footer"> + [% footer_has_content = 0 %] + + [% IF modal_confirm_text %] + <button + type="submit" + class="btn btn-default confirm" + id="[% modal_id | $raw %]-confirm" + [% IF modal_confirm_name %]name="[% modal_confirm_name | $raw %]"[% END %] + [% IF modal_confirm_val %]value="[% modal_confirm_val | $raw %]"[% END %] + [% IF modal_confirm_accesskey %]accesskey="[% modal_confirm_accesskey | $raw %]"[% END %] + > + <i class="fa fa-check"></i> + [% modal_confirm_text | $raw %] [% IF modal_confirm_accesskey %]([% modal_confirm_accesskey | $raw %])[% END %] + </button> + [% footer_has_content = 1 %] + [% END %] + [% IF modal_custom_confirm %] + [% modal_custom_confirm | $raw %] + [% footer_has_content = 1 %] + [% END %] + [% IF modal_print_text && modal_print_url %] + <button + type="button" + class="btn btn-default openWin" + data-bs-dismiss="modal" + id="[% modal_id | $raw %]-print" + [% IF modal_print_name %]name="[% modal_print_name | $raw %]"[% END %] + data-url="[% modal_print_url | $raw %]" + [% IF modal_print_accesskey %]accesskey="[% modal_print_accesskey | $raw %]"[% END %] + > + <i class="fa fa-print"></i> + [% modal_print_text | $raw %] [% IF modal_print_accesskey %]([% modal_print_accesskey | $raw %])[% END %] + </button> + [% footer_has_content = 1 %] + [% END %] + [% IF modal_custom_utility_button %] + [% modal_custom_utility_button | $raw %] + [% footer_has_content = 1 %] + [% END %] + [% IF modal_deny_text %] + <button + [% IF modal_deny_action == "submit" %]type="submit"[% ELSE %]type="button"[% END %] + [% IF modal_deny_action == "dismiss" %]data-bs-dismiss="modal"[% END %] + class="btn btn-default deny" + id="[% modal_id | $raw %]-deny" + [% IF modal_deny_name %]name="[% modal_deny_name | $raw %]"[% END %] + [% IF modal_deny_val %]value="[% modal_deny_val | $raw %]"[% END %] + [% IF modal_deny_accesskey %]accesskey="[% modal_deny_accesskey | $raw %]"[% END %] + > + <i class="fa fa-times"></i> + [% modal_deny_text | $raw %] [% IF modal_deny_accesskey %]([% modal_deny_accesskey | $raw %])[% END %] + </button> + [% footer_has_content = 1 %] + [% END %] + [% IF modal_custom_deny %] + [% modal_custom_deny | $raw %] + [% footer_has_content = 1 %] + [% END %] + [% IF modal_footer_append %] + [% modal_footer_append | $raw %] + [% footer_has_content = 1 %] + [% END %] + [% IF !footer_has_content %] + <button type="button" data-bs-dismiss="modal" class="btn btn-default" id="[% modal_id | $raw %]-ok">OK</button> + [% END %] + </div> + </form> + </div> + </div> + </div> +[% END %] -- 2.34.1