cphipps/NetAlertX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modals refactor, autofocus support, ESC/ENTER support⌨

Browse Source
This commit is contained in:
jokob-sk
2024-04-25 12:30:05 +10:00
parent 73732a7d0c
commit 8ab3945871
5 changed files with 273 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
front/js/common.js
View File

@@ -278,197 +278,7 @@ function getString (key) {
return result;
}
// -----------------------------------------------------------------------------
// Modal dialog handling
// -----------------------------------------------------------------------------
var modalCallbackFunction = '';
function showModalOK (title, message, callbackFunction) {
showModalOk (title, message, callbackFunction)
}
function showModalOk (title, message, callbackFunction) {
// set captions
$('#modal-ok-title').html (title);
$('#modal-ok-message').html (message);
if(callbackFunction!= null)
{
$("#modal-ok-OK").click(function()
{
callbackFunction()
});
}
// Show modal
$('#modal-ok').modal('show');
}
// -----------------------------------------------------------------------------
function showModalDefault (title, message, btnCancel, btnOK, callbackFunction) {
// set captions
$('#modal-default-title').html (title);
$('#modal-default-message').html (message);
$('#modal-default-cancel').html (btnCancel);
$('#modal-default-OK').html (btnOK);
modalCallbackFunction = callbackFunction;
// Show modal
$('#modal-default').modal('show');
}
// -----------------------------------------------------------------------------
function showModalDefaultStrParam (title, message, btnCancel, btnOK, callbackFunction, param='') {
// set captions
$('#modal-str-title').html (title);
$('#modal-str-message').html (message);
$('#modal-str-cancel').html (btnCancel);
$('#modal-str-OK').html (btnOK);
$("#modal-str-OK").off("click"); //remove existing handlers
$('#modal-str-OK').on('click', function (){
$('#modal-str').modal('hide');
callbackFunction(param)
})
// Show modal
$('#modal-str').modal('show');
}
// -----------------------------------------------------------------------------
function showModalWarning (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
// set captions
$('#modal-warning-title').html (title);
$('#modal-warning-message').html (message);
$('#modal-warning-cancel').html (btnCancel);
$('#modal-warning-OK').html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
// Show modal
$('#modal-warning').modal('show');
}
// -----------------------------------------------------------------------------
function showModalInput (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), callbackFunction=null) {
// set captions
$('#modal-input-title').html (title);
$('#modal-input-message').html (message);
$('#modal-input-cancel').html (btnCancel);
$('#modal-input-OK').html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
// Show modal
$('#modal-input').modal('show');
}
// -----------------------------------------------------------------------------
function showModalFieldInput (title, message, btnCancel=getString('Gen_Cancel'), btnOK=getString('Gen_Okay'), curValue="", callbackFunction=null) {
// set captions
prefix = 'modal-field-input'
$(`#${prefix}-title`).html (title);
$(`#${prefix}-message`).html (message);
$(`#${prefix}-cancel`).html (btnCancel);
$(`#${prefix}-OK`).html (btnOK);
if ( callbackFunction != null)
{
modalCallbackFunction = callbackFunction;
}
$(`#${prefix}-field`).val(curValue)
// Show modal
$(`#${prefix}`).modal('show');
}
// -----------------------------------------------------------------------------
function modalDefaultOK () {
// Hide modal
$('#modal-default').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultInput () {
// Hide modal
$('#modal-input').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultFieldInput () {
// Hide modal
$('#modal-field-input').modal('hide');
// timer to execute function
window.setTimeout( function() {
modalCallbackFunction();
}, 100);
}
// -----------------------------------------------------------------------------
function modalWarningOK () {
// Hide modal
$('#modal-warning').modal('hide');
// timer to execute function
window.setTimeout( function() {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function showMessage (textMessage="") {
if (textMessage.toLowerCase().includes("error") ) {
// show error
alert (textMessage);
} else {
// show temporal notification
$("#alert-message").html (textMessage);
$("#notification").fadeIn(1, function () {
window.setTimeout( function() {
$("#notification").fadeOut(500)
}, 3000);
} );
}
}
// -----------------------------------------------------------------------------
function showTickerAnnouncement(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show permanent notification
$("#ticker-message").html(textMessage);
$("#tickerAnnouncement").removeClass("myhidden");
// Move the tickerAnnouncement element to ticker_announcement_plc
$("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
// var $ticker = $('#tickerAnnouncement');
// var $tickerMessage = $('#ticker-message');
// Clone the ticker message to create continuous scrolling effect
// $tickerMessage.clone().appendTo($ticker);
}
}
// -----------------------------------------------------------------------------

235
front/js/modal.js Executable file
View File

@@ -0,0 +1,235 @@
// -----------------------------------------------------------------------------
// Modal dialog handling
// -----------------------------------------------------------------------------
var modalCallbackFunction = "";
function showModalOK(title, message, callbackFunction) {
showModalOk(title, message, callbackFunction);
}
function showModalOk(title, message, callbackFunction) {
// set captions
$("#modal-ok-title").html(title);
$("#modal-ok-message").html(message);
if (callbackFunction != null) {
$("#modal-ok-OK").click(function () {
callbackFunction();
});
}
// Show modal
$("#modal-ok").modal("show");
}
// -----------------------------------------------------------------------------
function showModalDefault(title, message, btnCancel, btnOK, callbackFunction) {
// set captions
$("#modal-default-title").html(title);
$("#modal-default-message").html(message);
$("#modal-default-cancel").html(btnCancel);
$("#modal-default-OK").html(btnOK);
modalCallbackFunction = callbackFunction;
// Show modal
$("#modal-default").modal("show");
}
// -----------------------------------------------------------------------------
function showModalDefaultStrParam(
title,
message,
btnCancel,
btnOK,
callbackFunction,
param = ""
) {
// set captions
$("#modal-str-title").html(title);
$("#modal-str-message").html(message);
$("#modal-str-cancel").html(btnCancel);
$("#modal-str-OK").html(btnOK);
$("#modal-str-OK").off("click"); //remove existing handlers
$("#modal-str-OK").on("click", function () {
$("#modal-str").modal("hide");
callbackFunction(param);
});
// Show modal
$("#modal-str").modal("show");
}
// -----------------------------------------------------------------------------
function showModalWarning(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
callbackFunction = null
) {
// set captions
$("#modal-warning-title").html(title);
$("#modal-warning-message").html(message);
$("#modal-warning-cancel").html(btnCancel);
$("#modal-warning-OK").html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
// Show modal
$("#modal-warning").modal("show");
}
// -----------------------------------------------------------------------------
function showModalInput(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
callbackFunction = null
) {
prefix = "modal-input";
// set captions
$(`#${prefix}-title`).html(title);
$(`#${prefix}-message`).html(message);
$(`#${prefix}-cancel`).html(btnCancel);
$(`#${prefix}-OK`).html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
// Show modal
$(`#${prefix}`).modal("show");
setTimeout(function () {
$(`#${prefix}-textarea`).focus();
}, 500);
}
// -----------------------------------------------------------------------------
function showModalFieldInput(
title,
message,
btnCancel = getString("Gen_Cancel"),
btnOK = getString("Gen_Okay"),
curValue = "",
callbackFunction = null
) {
// set captions
prefix = "modal-field-input";
$(`#${prefix}-title`).html(title);
$(`#${prefix}-message`).html(message);
$(`#${prefix}-cancel`).html(btnCancel);
$(`#${prefix}-OK`).html(btnOK);
if (callbackFunction != null) {
modalCallbackFunction = callbackFunction;
}
$(`#${prefix}-field`).val(curValue);
setTimeout(function () {
$(`#${prefix}-field`).focus();
}, 500);
// Show modal
$(`#${prefix}`).modal("show");
}
// -----------------------------------------------------------------------------
function modalDefaultOK() {
// Hide modal
$("#modal-default").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultInput() {
// Hide modal
$("#modal-input").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function modalDefaultFieldInput() {
// Hide modal
$("#modal-field-input").modal("hide");
// timer to execute function
window.setTimeout(function () {
modalCallbackFunction();
}, 100);
}
// -----------------------------------------------------------------------------
function modalWarningOK() {
// Hide modal
$("#modal-warning").modal("hide");
// timer to execute function
window.setTimeout(function () {
window[modalCallbackFunction]();
}, 100);
}
// -----------------------------------------------------------------------------
function showMessage(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show temporal notification
$("#alert-message").html(textMessage);
$("#notification").fadeIn(1, function () {
window.setTimeout(function () {
$("#notification").fadeOut(500);
}, 3000);
});
}
}
// -----------------------------------------------------------------------------
function showTickerAnnouncement(textMessage = "") {
if (textMessage.toLowerCase().includes("error")) {
// show error
alert(textMessage);
} else {
// show permanent notification
$("#ticker-message").html(textMessage);
$("#tickerAnnouncement").removeClass("myhidden");
// Move the tickerAnnouncement element to ticker_announcement_plc
$("#tickerAnnouncement").appendTo("#ticker_announcement_plc");
}
}
// -----------------------------------------------------------------------------
// Keyboard bindings
// -----------------------------------------------------------------------------
$(document).ready(function () {
$(document).on("keydown", function (event) {
// ESC key is pressed
if (event.keyCode === 27) {
// Trigger modal dismissal
$(".modal").modal("hide");
}
// Enter key is pressed
if (event.keyCode === 13) {
$(".modal:visible").find(".btn-modal-submit").click(); // Trigger the click event of the OK button in visible modals
}
});
});