///////////////////////////////////////////////////////////////// // Sircl 2.x - Bootstrap5 extension // www.getsircl.com // Copyright (c) 2019-2023 Rudi Breedenraedt // Sircl is released under the MIT license, see sircl-license.txt ///////////////////////////////////////////////////////////////// /* tslint:disabled */ // Initialize sircl lib: if (typeof sircl === "undefined") console.warn("The 'sircl-bootstrap5' component should be registered after the 'sircl' component. Please review order of script files."); if (typeof bootstrap === "undefined") console.warn("The 'sircl-bootstrap5' component requires the 'bootstrap' component. See https://getbootstrap.com/"); //// Initialize Bootstrap popovers, tooltips, etc. using a $$() function as in: // // Use a Bootstrap spinner: sircl.html_spinner = ' '; //#region Handle relative CSS selectors sircl.handleRelativeCssSelectorsIn(":not([data-bs-target^='#'])", "data-bs-target"); sircl.handleRelativeCssSelectorsIn(":not([data-bs-parent^='#'])", "data-bs-parent"); //#endregion //#region Hide or dispose elements before unloading their container $$("before", function sircl_bs5_init_beforeHandler() { // Hide all popovers in scope: $(this).find("[data-bs-toggle='popover'], [data-toggle='popover']").each(function () { try { bootstrap.Popover.getInstance(this).dispose(); } catch (ex) { console.warn("Error trying to dispose Bootstrap 5 popover in scope.", ex, "sircl_bs5_init_beforeHandler", this); } }); // (commented out as gives errors...) //// Hide all tooltips in scope: //$(this).find("[data-bs-toggle='tooltip'], [data-toggle='tooltip']").each(function () { // try { // bootstrap.Tooltip.getInstance(this).dispose(); // } catch (ex) { // console.warn("Error trying to dispose Bootstrap 5 tooltip in scope.", ex, "sircl_bs5_init_beforeHandler", this); // } //}); }); //#endregion //#region Handling Bootstrap NavBars sircl.addRequestHandler("beforeSend", function sircl_bs5_navbar_beforeSend_requestHandler(req) { var processor = this; // Collapse any expanded navbar before loading: var $expandedNavbar = $(".navbar-collapse.show"); $expandedNavbar.each(function () { $(this).removeClass("show"); }); // Move to next handler: processor.next(req); }); //#endregion //#region Handling Bootstrap Modals sircl.addRequestHandler("beforeSend", function sircl_bs5_modal_beforeSend_requestHandler1(req) { var processor = this; // Close any opened modal that is not the target if target has beforeload-showmodal class and is not open: var $closedTarget = req.$initialTarget.closest(".modal.beforeload-showmodal:not(.show)"); var $openModals = $(".modal.show"); if (req.isForeground == true && $openModals.length > 0 && $closedTarget.length > 0) { if (!$.contains($openModals[0], req.$initialTarget[0]) && !$openModals.is(req.$initialTarget)) { // Delay move to next handler: $openModals[0]._onCloseOnce = function (e) { processor.next(req); }; // Close modal: bootstrap.Modal.getInstance($openModals[0]).hide(); } else { // Move to next handler: processor.next(req); } } else { // Move to next handler: processor.next(req); } }); sircl.addRequestHandler("beforeSend", function sircl_bs5_modal_beforeSend_requestHandler2(req) { var processor = this; // Open any non-open modal holding the initial target and having class "beforeload-showmodal": req._bsModalOpened = req.$initialTarget.closest(".modal.beforeload-showmodal:not(.show)"); if (req._bsModalOpened.length > 0) { // Delay move to next handler: req._bsModalOpened[0]._onOpenOnce = function (e) { processor.next(req); }; // Open modal: var backdrop = (req._bsModalOpened.data("bs-backdrop") === undefined) ? true : req._bsModalOpened.data("bs-backdrop"); var options = { backdrop: backdrop || "true", keyboard: false, focus: true }; new bootstrap.Modal(req._bsModalOpened[0], options).show(); } else { // Move to next handler: processor.next(req); } }); sircl.addRequestHandler("afterSend", function sircl_bs5_modal_afterSend_requestHandler(req) { var processor = this; // On error, undo opened modals: if (!req.succeeded && req._bsModalOpened.length > 0) { // Delay move to next handler: req._bsModalOpened[0]._onCloseOnce = function (e) { processor.next(req); }; // Close modal: bootstrap.Modal.getInstance(req._bsModalOpened[0]).hide(); } else if (req.status == "204") { // Else, if status "204" (no content), close target modal: var $dlg = req.$initialTarget.closest(".modal.show"); if ($dlg.length > 0) { // Delay move to next handler: $dlg[0]._onCloseOnce = function (e) { processor.next(req); }; // Close modal: bootstrap.Modal.getInstance($dlg[0]).hide(); } else { // Move to next handler: processor.next(req); } } else { // Move to next handler: processor.next(req); } }); sircl.addRequestHandler("beforeRender", function sircl_bs5_modal_beforeRender_requestHandler(req) { var processor = this; // Close any opened modal that is not the target: var $openModals = $(".modal.show"); if (req.isForeground == true && $openModals.length > 0) { if (!$.contains($openModals[0], req.$finalTarget[0]) && !$openModals.is(req.$finalTarget)) { // Delay move to next handler: $openModals[0]._onCloseOnce = function (e) { processor.next(req); }; // Close modal: bootstrap.Modal.getInstance($openModals[0]).hide(); } else { // Move to next handler: processor.next(req); } } else { // Move to next handler: processor.next(req); } }); sircl.addRequestHandler("afterRender", function sircl_bs5_modal_afterRender_requestHandler(req) { var processor = this; // Open modal on final target: var $modal = req.$finalTarget.closest(".modal:not(.show)"); if ($modal.length > 0) { // Delay move to next handler: $modal[0]._onOpenOnce = function (e) { processor.next(req); }; // Open modal: var backdrop = ($modal.data("bs-backdrop") === undefined) ? true : $modal.data("bs-backdrop"); var options = { backdrop: backdrop, keyboard: false, focus: true }; new bootstrap.Modal($modal[0], options).show(); } else { // Move to next handler: processor.next(req); } }); document.addEventListener("DOMContentLoaded", function () { // Perform onOpen action once: $(document).on("shown.bs.modal", ".modal", function (event) { if (this._onOpenOnce) { var fx = this._onOpenOnce; this._onOpenOnce = undefined; fx(); } }); // Perform onClose action once: $(document).on("hidden.bs.modal", ".modal", function (event) { if (this._onCloseOnce) { var fx = this._onCloseOnce; this._onCloseOnce = undefined; fx(); } }); // When opening modal, set focus: $(document).on("shown.bs.modal", ".modal", function (event) { $(this).find("*[autofocus]:first").each(function (index) { try { this.focus(); } catch (x) { } try { this.select(); } catch (x) { } }); }); // On change, make backdrop static: $(document).on("change", ".modal.onchange-backdropstatic", function (event) { if ($(event.target).closest(".onchange-ignore").length == 0 && $(event.target).closest(".sircl-content-processing").length == 0) { var mdl = bootstrap.Modal.getInstance(this); if (mdl !== null) { mdl._config.backdrop = "static"; } } }); // Reset content of a modal with onclose-restore when closing the modal: $(document).on("hidden.bs.modal", ".modal.onclose-restore", function (event) { // Restore original content: var originalContent = $(this)[0]._originalContent; if (originalContent !== undefined) $(this).html(originalContent); // Restore from static backdrop: var mdl = bootstrap.Modal.getInstance(this); if (mdl !== null && $(this).hasClass("onchange-backdropstatic")) { mdl._config.backdrop = true; } }); // Dynamically load content on showing modal: $(document).on("shown.bs.modal", ".modal", function (event) { var $container = $(this).find("[onshowmodal-load]"); if ($container.length > 0) { $container.load($container.attr("onshowmodal-load")); if ($container.is(".noreload")) $container.removeAttr("onshowmodal-load"); } }); }); $$(function sircl_bs5_modal_processHandler() { // Backup original content of onclose-restore modals to be able to reset on close: $(this).find(".modal.onclose-restore").each(function (index, elem) { elem._originalContent = $(elem).html(); }); // Automatically show modals after load: var $modals = $(this).find(".modal[onload-showmodalafter]"); if ($modals.length > 0) { var modal = $modals[0]; // Parse delay ("seconds" or "[hh:]mm:ss"): var delaypart = $(modal).attr("onload-showmodalafter").split(":"); var delay = 0; for (var i = 0; i < delaypart.length; i++) delay = parseFloat(delaypart[i]) + (60 * delay); // Set timer: setTimeout(function (mdl) { // Only show if no other modals shown yet: if ($(".modal.show").length == 0) { var backdrop = ($(mdl).data("bs-backdrop") === undefined) ? true : $(mdl).data("bs-backdrop"); var options = { backdrop: backdrop, keyboard: false, focus: true }; new bootstrap.Modal(mdl, options).show(); } }, 1000 * delay, modal); } }); //