new confirm dialog window
This commit is contained in:
parent
01705c86fe
commit
45f17d06ce
@ -0,0 +1,34 @@
|
||||
jfa.components.dialog = (function () {
|
||||
function _confirm({ message, title, callbackyes, callbackno }) {
|
||||
const dialogTemplate = jfa.page.getDialogTemplate().content;
|
||||
|
||||
let spanTitle = dialogTemplate.querySelector(".modal__title__text");
|
||||
spanTitle.textContent = title || "Confirm";
|
||||
|
||||
let bodyMessage = dialogTemplate.querySelector(".modal__body-message");
|
||||
bodyMessage.textContent = message;
|
||||
|
||||
const dialog = dialogTemplate.querySelector("#dialog-container");
|
||||
const modal = bootstrap.Modal.getOrCreateInstance(dialog);
|
||||
|
||||
let buttonNo = dialogTemplate.querySelector(".modal__footer__button-no");
|
||||
buttonNo.addEventListener("click", function () {
|
||||
buttonNo.blur();
|
||||
modal.hide();
|
||||
callbackno?.();
|
||||
});
|
||||
|
||||
let buttonYes = dialogTemplate.querySelector(".modal__footer__button-yes");
|
||||
buttonYes.addEventListener("click", function () {
|
||||
buttonYes.blur();
|
||||
modal.hide();
|
||||
callbackyes?.();
|
||||
});
|
||||
|
||||
modal.show();
|
||||
}
|
||||
|
||||
return {
|
||||
confirm: _confirm
|
||||
};
|
||||
})();
|
||||
@ -11,6 +11,14 @@
|
||||
return window.top.document.querySelector("[name='__RequestVerificationToken']")?.value;
|
||||
}
|
||||
|
||||
function _getDialogContainer() {
|
||||
return document.getElementById("ContainerDialog").cloneNode(true);
|
||||
}
|
||||
|
||||
function _getDialogTemplate() {
|
||||
return document.getElementById("DialogTemplate").cloneNode(true);
|
||||
}
|
||||
|
||||
function reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
@ -19,6 +27,8 @@
|
||||
getAlertContainer: _getAlertContainer,
|
||||
getAlertTemplate: _getAlertTemplate,
|
||||
getAntiForgeryToken: _getAntiForgeryToken,
|
||||
getDialogContainer: _getDialogContainer,
|
||||
getDialogTemplate: _getDialogTemplate,
|
||||
reload: reload
|
||||
};
|
||||
})();
|
||||
@ -19,31 +19,39 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md bg-dark py-3 navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<span class="bs-icon-sm text-white d-flex justify-content-center align-items-center me-2 bs-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-pen">
|
||||
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z"></path>
|
||||
</svg>
|
||||
</span><span>Enotaryo</span>
|
||||
</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#collapse-button"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="#collapse-button">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
|
||||
</ul>
|
||||
@if (User.Identity?.IsAuthenticated ?? false) {
|
||||
<a class="btn btn-primary ms-md-2" role="button" href="/Login?handler=Logout">Logout</a>
|
||||
}
|
||||
else {
|
||||
<a class="btn btn-primary ms-md-2" role="button" href="/Login">Login</a>
|
||||
}
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md bg-dark py-3 navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<span class="bs-icon-sm text-white d-flex justify-content-center align-items-center me-2 bs-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-pen">
|
||||
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z"></path>
|
||||
</svg>
|
||||
</span><span>Enotaryo</span>
|
||||
</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#collapse-button"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="#collapse-button">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
|
||||
</ul>
|
||||
@if (User.Identity?.IsAuthenticated ?? false)
|
||||
{
|
||||
<a class="btn btn-primary ms-md-2" role="button" href="/Login?handler=Logout">Logout</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<a class="btn btn-primary ms-md-2" role="button" href="/Login">Login</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="ContainerAlert" class="container"></div>
|
||||
@RenderBody()
|
||||
<partial name="_AntiForgeryPartial.cshtml" />
|
||||
</main>
|
||||
|
||||
@RenderBody()
|
||||
<partial name="_AntiForgeryPartial.cshtml" />
|
||||
<footer class="text-center">
|
||||
<div class="container-fluid text-muted py-4 py-lg-5">
|
||||
<ul class="list-inline">
|
||||
@ -55,6 +63,32 @@
|
||||
<p class="mb-0">Copyright © 2024 Enotaryo</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<template id="AlertTemplate">
|
||||
<div id="alert-container" class="alert alert-warning alert-dismissible mt-1" role="alert">
|
||||
<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<span id="alert-message" class="message">
|
||||
<i id="alert-icon" class="fas fa-exclamation-triangle me-1"></i>
|
||||
<strong>Alert</strong> text.
|
||||
</span>
|
||||
<div class="actions"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="DialogTemplate">
|
||||
<div id="dialog-container" class="modal fade show" role="dialog" tabindex="-1" style="display: block;">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"><i class="fas fa-question-circle text-primary me-1 modal__title__icon"></i><span class="modal__title__text">Title</span></h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body"><span class="modal__body-message">This is the confirmation message.</span></div>
|
||||
<div class="modal-footer modal__footer"><button class="btn btn-light modal__footer__button-no" type="button" data-bs-dismiss="modal">No</button><button class="btn btn-primary modal__footer__button-yes" type="button">Yes</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/js/bs-init.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js"></script>
|
||||
|
||||
@ -14,6 +14,7 @@ const bundles = {
|
||||
"Assets/js/Utilities/Routing/_Routing.js",
|
||||
"Assets/js/Utilities/Element/_Element.js",
|
||||
"Assets/js/Utilities/Request/_Request.js",
|
||||
"Assets/js/Components/Dialog/_Dialog.js"
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user