From 5599bbdf314beea87e083d5f5ac45bb96145e321 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Thu, 25 Apr 2024 10:00:14 +1000 Subject: [PATCH] =?UTF-8?q?1x=F0=9F=93=9D|2x=F0=9F=9A=AE=20click=20list=20?= =?UTF-8?q?edit=20options=20in=20Settings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/css/dark-patch.css | 7 +-- front/js/common.js | 19 ++++++- front/js/settings_utils.js | 74 +++++++++++++++++----------- front/php/templates/notification.php | 2 +- 4 files changed, 68 insertions(+), 34 deletions(-) diff --git a/front/css/dark-patch.css b/front/css/dark-patch.css index 249d4993..b8eac6be 100755 --- a/front/css/dark-patch.css +++ b/front/css/dark-patch.css @@ -17,9 +17,10 @@ html { background-color: #353c42; } -body { - background-color: #353c42; - color: #bec5cb; +body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body { + + background-color: #353c42 !important; + color: #bec5cb !important; } h4 { color: #44def1; diff --git a/front/js/common.js b/front/js/common.js index 794ab085..ce367ea3 100755 --- a/front/js/common.js +++ b/front/js/common.js @@ -9,7 +9,7 @@ // ----------------------------------------------------------------------------- var timerRefreshData = '' -var modalCallbackFunction = ''; + var emptyArr = ['undefined', "", undefined, null, 'null']; var UI_LANG = "English"; var settingsJSON = {} @@ -281,6 +281,8 @@ function getString (key) { // ----------------------------------------------------------------------------- // Modal dialog handling // ----------------------------------------------------------------------------- +var modalCallbackFunction = ''; + function showModalOK (title, message, callbackFunction) { showModalOk (title, message, callbackFunction) } @@ -376,12 +378,14 @@ function showModalFieldInput (title, message, btnCancel=getString('Gen_Cancel'), $(`#${prefix}-cancel`).html (btnCancel); $(`#${prefix}-OK`).html (btnOK); + console.log(callbackFunction); + if ( callbackFunction != null) { modalCallbackFunction = callbackFunction; } - $(`#modal-field-input-field`).val(curValue) + $(`#${prefix}-field`).val(curValue) // Show modal @@ -410,6 +414,17 @@ function modalDefaultInput () { }, 100); } +// ----------------------------------------------------------------------------- +function modalDefaultFieldInput () { + // Hide modal + $('#modal-field-input').modal('hide'); + + // timer to execute function + window.setTimeout( function() { + modalCallbackFunction(); + }, 100); +} + // ----------------------------------------------------------------------------- function modalWarningOK () { // Hide modal diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js index 28640a85..6b01506d 100755 --- a/front/js/settings_utils.js +++ b/front/js/settings_utils.js @@ -178,49 +178,66 @@ } // ------------------------------------------------------------------- - // Function to remove an item from the select element - function removeOptionItem(option) { - option.remove(); - } +// Manipulating Editable List options +// ------------------------------------------------------------------- + + +// ------------------------------------------------------------------- +// Function to remove an item from the select element +function removeOptionItem(option) { + option.remove(); +} + +// ------------------------------------------------------------------- +// Update value of an item from the select elemen + function updateOptionItem(option, value) { + option.html(value); +} // ------------------------------------------------------------------- // Function to initialize remove functionality on select options -let isDoubleClick = false; +// Counter to track number of clicks +let clickCounter = 0; +// Function to initialize list interaction options function initListInteractionOptions(selectorId) { + // Select all options within the specified selector + const $options = $(`#${selectorId} option`); - $(`#${selectorId} option`).addClass('interactable-option') + // Add class to make options interactable + $options.addClass('interactable-option'); - // Attach double-click event listeners to "Remove" - $(`#${selectorId} option`).on('dblclick', function() { - isDoubleClick = true; - const $option = $(this); - removeOptionItem($option); - }); - - $(`#${selectorId} option`).on('click', function() { + // Attach click event listener to options + $options.on('click', function() { const $option = $(this); - // Reset the flag after a short delay + // Increment click counter + clickCounter++; + + // Delay to capture multiple clicks setTimeout(() => { - console.log(isDoubleClick); - if (!isDoubleClick) { + // Perform action based on click count + if (clickCounter === 1) { // Single-click action - showModalFieldInput ( - ` ${getString('DevDetail_button_AddIcon')}`, - getString('DevDetail_button_AddIcon_Help'), - getString('Gen_Cancel'), - getString('Gen_Okay'), + showModalFieldInput( + ` ${getString('Gen_Update_Value')}`, + getString('settings_update_item_warning'), + getString('Gen_Cancel'), + getString('Gen_Update'), $option.html(), function() { - alert('aaa'); - }); - - isDoubleClick = false; + updateOptionItem($option, $(`#modal-field-input-field`).val()) + } + ); + } else if (clickCounter === 2) { + // Double-click action + removeOptionItem($option); } - - }, 300); // Adjust this delay as needed + + // Reset click counter + clickCounter = 0; + }, 300); // Adjust delay as needed }); } @@ -235,3 +252,4 @@ function initListInteractionOptions(selectorId) { + diff --git a/front/php/templates/notification.php b/front/php/templates/notification.php index 92b46c9b..3e0acaf8 100755 --- a/front/php/templates/notification.php +++ b/front/php/templates/notification.php @@ -134,7 +134,7 @@
- +