linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

okay-button for input

Browse Source
This commit is contained in:
Daniel
2025-05-01 11:18:58 +02:00
parent 744184eb54
commit 023145ca3d
7 changed files with 84 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
client/jsFiles/SEAWebClientGroup.js
View File

@ -154,8 +154,7 @@ function createRightColumnForModules(component) {
component.type == 'pushbutton' ||
component.type == 'checkbox' ||
component.type == 'enum'
) {
console.log(component.type);
) {
let input_element = createType(component);
if (component.type != 'pushbutton') {
let icon_edit = createIconEdit(input_element);
@ -212,6 +211,9 @@ function createIconEdit (input_element) {
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
icon_edit.setAttribute('src', 'res/icon_edit_close.png');
} else {
icon_edit.setAttribute('src', 'res/icon_edit.png');
}
}
@ -264,15 +266,23 @@ function createPushbutton(component) {
function createInputText(component) {
// Creates row-element containing input-item.
var command = component.command;
var input = createInputElement(component, 'input', 'input-text');
input.type = "text";
input.style.width = "100px";
// Prevent updates, while user is changing textfield
input.addEventListener("focus", function(evt) {
let elm = evt.target;
setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
});
let submit_btn = document.createElement('input');
submit_btn.setAttribute('type', 'image');
submit_btn.classList.add('icon-modules', 'icon-okay');
submit_btn.setAttribute('src', 'res/icon_okay.png');
submit_btn
input.onkeydown = function (e) {
if (e.key == "Escape") {
// User decided to cancel
@ -285,10 +295,6 @@ function createInputText(component) {
}
}
input.onclick = function (e) {
e.stopPropagation();
}
input.onfocus = function () {
input.oldValue = input.value;
if (isTouchDevice)
@ -297,47 +303,51 @@ function createInputText(component) {
}, 1);
}
input.onblur = function () {
if (prompt) {
return false;
}
var row = input.closest('div');
row.classList.add('row-waiting-for-answer');
var value = input.value;
let oldValue = 'oldValue' in input ? input.oldValue : value;
if (!('actualValue' in input)) input.actualValue = oldValue;
actualValue = input.actualValue;
if (value == actualValue || value == oldValue ||
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
input.value = actualValue;
// nothing to do.
row.classList.remove('row-waiting-for-answer');
return false;
}
// User changed value and moved focus to other object.
alertify.confirm("", "You changed a field without pressing the return key.<br>"
+ "Hint: press ESC for leaving a field unchanged.<b>"
+ "You are connected with <b>" + clientTitle + "</b>.<br>"
+ "Are you sure you want to change the value of<br><b>"
+ component.name + "</b> from <b>" + actualValue
+ "</b> to <b>" + value + "</b>?",
function () {
// User decided to proceed.
row.classList.add('row-waiting-for-answer');
// Request for command
sendCommand(s, command + " " + value);
resizeTextfield(input);
prompt = false;
hideInputElements();
}, function () {
// User decided to cancel
input.value = input.actualValue;
resizeTextfield(input);
row.classList.remove('row-waiting-for-answer');
prompt = false;
hideInputElements();
});
}
// input.onclick = function (e) {
// e.stopPropagation();
// }
// input.onblur = function () {
// if (prompt) {
// return false;
// }
// var row = input.closest('div');
// row.classList.add('row-waiting-for-answer');
// var value = input.value;
// let oldValue = 'oldValue' in input ? input.oldValue : value;
// if (!('actualValue' in input)) input.actualValue = oldValue;
// actualValue = input.actualValue;
// if (value == actualValue || value == oldValue ||
// parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
// input.value = actualValue;
// // nothing to do.
// row.classList.remove('row-waiting-for-answer');
// return false;
// }
// // User changed value and moved focus to other object.
// alertify.confirm("", "You changed a field without pressing the return key.<br>"
// + "Hint: press ESC for leaving a field unchanged.<b>"
// + "You are connected with <b>" + clientTitle + "</b>.<br>"
// + "Are you sure you want to change the value of<br><b>"
// + component.name + "</b> from <b>" + actualValue
// + "</b> to <b>" + value + "</b>?",
// function () {
// // User decided to proceed.
// row.classList.add('row-waiting-for-answer');
// // Request for command
// sendCommand(s, component.command + " " + value);
// resizeTextfield(input);
// prompt = false;
// hideInputElements();
// }, function () {
// // User decided to cancel
// input.value = input.actualValue;
// resizeTextfield(input);
// row.classList.remove('row-waiting-for-answer');
// prompt = false;
// hideInputElements();
// });
// }
var form = document.createElement('form');
form.onsubmit = function (e) {
@ -355,19 +365,8 @@ function createInputText(component) {
hideInputElements();
};
form.appendChild(input);
form.appendChild(submit_btn);
return form;
function posTextfield(s, left) {
if (debug_group_daniel) {
console.log("%cfunction: posTextfield", "color:white;background:salmon");
}
// var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
// var row = left.parentNode;
// content.scrollTop = row.offsetTop - 30;
// ---------------------> Not working anymore since swiper was removed!!!
}
}
function createCheckbox(component) {
@ -441,11 +440,18 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
/* ---------------------------------------------------------------------------------- */
// Hides all input elements (input text, pushbotton, enum, checkbox)
// Changes all iconEditClose (cross) back to iconEdit (pen)
function hideInputElements(){
let input_elements = document.getElementsByClassName('input-element');
for (let i = 0; i < input_elements.length; i++) {
input_elements[i].classList.add('input-element-hidden');
}
let array_icon_edit = document.getElementsByClassName('icon-edit');
for (let i = 0; i < array_icon_edit.length; i++) {
array_icon_edit[i].setAttribute('src', 'res/icon_edit.png');
}
}
function resizeTextfield(input) {