From 8ab3945871c79388239024b8bddb00fb837e112a Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Thu, 25 Apr 2024 12:30:05 +1000 Subject: [PATCH] =?UTF-8?q?Modals=20refactor,=20autofocus=20support,=20ESC?= =?UTF-8?q?/ENTER=20support=E2=8C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/js/common.js | 190 ---------------------- front/js/modal.js | 235 +++++++++++++++++++++++++++ front/php/templates/header.php | 1 + front/php/templates/notification.php | 43 ++--- front/settings.php | 20 ++- 5 files changed, 273 insertions(+), 216 deletions(-) create mode 100755 front/js/modal.js diff --git a/front/js/common.js b/front/js/common.js index 1eb0cb4e..40277d6c 100755 --- a/front/js/common.js +++ b/front/js/common.js @@ -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); - } -} // ----------------------------------------------------------------------------- diff --git a/front/js/modal.js b/front/js/modal.js new file mode 100755 index 00000000..ad0786bc --- /dev/null +++ b/front/js/modal.js @@ -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 + } + }); +}); diff --git a/front/php/templates/header.php b/front/php/templates/header.php index 1f8ee23b..dd195f63 100755 --- a/front/php/templates/header.php +++ b/front/php/templates/header.php @@ -31,6 +31,7 @@ require dirname(__FILE__).'/security.php'; + diff --git a/front/php/templates/notification.php b/front/php/templates/notification.php index 3e0acaf8..44948790 100755 --- a/front/php/templates/notification.php +++ b/front/php/templates/notification.php @@ -12,15 +12,15 @@
-
+
Modal Default message
-
- +
+
@@ -33,7 +33,7 @@
-
+
@@ -41,8 +41,8 @@
Modal Default message
- - + +
@@ -55,7 +55,7 @@
-
+
@@ -63,15 +63,15 @@
Modal Default message
- - + +
- + @@ -106,11 +106,11 @@
Modal message
- +
- - + +
@@ -130,11 +130,15 @@
Modal message
- +
- - + +
@@ -152,5 +156,4 @@
Announcement message
-
- +
\ No newline at end of file diff --git a/front/settings.php b/front/settings.php index b2abf0a0..cdd2b100 100755 --- a/front/settings.php +++ b/front/settings.php @@ -441,7 +441,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
- +
@@ -459,8 +459,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) { inputHtml += `
- - + +
`; } else if (setType === 'list' || setType === 'list.readonly') { @@ -472,7 +476,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
- +
@@ -487,8 +491,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) { inputHtml += '
' + `
- - + +
`; } else if (setType === 'json') { inputHtml = ``;