From 1cd50ff438de36b46f1e6ab1cce52417b0bd61f7 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Sun, 7 Apr 2024 17:31:43 +0000 Subject: [PATCH] ui fixes --- Event/EventManager.js | 1 + Model/Action/Dom/ChangeAttribute.js | 6 +-- Model/Action/Dom/GetValue.js | 11 ++--- Model/Action/Event/If.js | 46 ++++++++++++++++++++ Model/Action/Event/Jump.js | 17 ++++++++ UI/UIStateManager.js | 66 +++++++++++++++++++++-------- 6 files changed, 119 insertions(+), 28 deletions(-) create mode 100644 Model/Action/Event/If.js create mode 100644 Model/Action/Event/Jump.js diff --git a/Event/EventManager.js b/Event/EventManager.js index 90c5cbe..e0574e8 100755 --- a/Event/EventManager.js +++ b/Event/EventManager.js @@ -269,6 +269,7 @@ export class EventManager attach (group, callback, remove = false, reset = false) { if (!Object.prototype.hasOwnProperty.call(this.callbacks, group)) { + // @question Consider to make this a struct? this.callbacks[group] = { remove: remove, reset: reset, callbacks: [], lastRun: 0 }; } diff --git a/Model/Action/Dom/ChangeAttribute.js b/Model/Action/Dom/ChangeAttribute.js index d8ded88..a2e605b 100644 --- a/Model/Action/Dom/ChangeAttribute.js +++ b/Model/Action/Dom/ChangeAttribute.js @@ -25,12 +25,12 @@ export function domChangeAttribute (action, callback, id) continue; } - switch (action.type) { + switch (action.subtype) { case 'remove': const old = fill[i].getAttribute(action.attr); - if (old.match(new RegExp('(\\s|^)' + action.value + '(\\s|$)')) !== null) { - const reg = new RegExp('(\\s|^)' + cls); + if (old !== null && old.match(new RegExp('(\\s|^)' + action.value + '(\\s|$)')) !== null) { + const reg = new RegExp('(\\s|^)' + action.value); fill[i].setAttribute(action.attr, old.replace(reg, '').trim()); } diff --git a/Model/Action/Dom/GetValue.js b/Model/Action/Dom/GetValue.js index 74da4d8..a5f8393 100755 --- a/Model/Action/Dom/GetValue.js +++ b/Model/Action/Dom/GetValue.js @@ -1,3 +1,5 @@ +import { GeneralUI } from "../../../UI/GeneralUI"; + /** * Get value from dom. * @@ -29,16 +31,11 @@ export function domGetValue (action, callback, id) ? e[i].getAttribute('name') : e[i].getAttribute('id'); - if (e[i].tagName.toLowerCase() === 'input' - || e[i].tagName.toLowerCase() === 'selects' - || e[i].tagName.toLowerCase() === 'button' - ) { - value[eId] = e[i].getAttribute('value'); - } else if (e[i].tagName.toLowerCase() === 'form') { + if (e[i].tagName.toLowerCase() === 'form') { value = window.omsApp.uiManager.getFormManager().get(eId).getData(); break; } else { - value[eId] = e[i].getAttribute('data-id'); + value[eId] = GeneralUI.getValueFromDataSource(e[i]); } } diff --git a/Model/Action/Event/If.js b/Model/Action/Event/If.js new file mode 100644 index 0000000..9387739 --- /dev/null +++ b/Model/Action/Event/If.js @@ -0,0 +1,46 @@ +import { jsOMS } from '../../../Utils/oLib.js'; +/** + * Prevent UI action. + * + * @param {Object} action Action data + * @param {function} callback Callback + * @param {string} id Action element + * + * @since 1.0.0 + */ +export function ifAction (action, callback, id) +{ + 'use strict'; + + const conditions = action.conditions; + const data = Object.values(action.data)[0]; + + for (const i in conditions) { + if (conditions[i].comp === '==' && data === conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if (conditions[i].comp === '!=' && data !== conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if(conditions[i].comp === '>' && data > conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if (conditions[i].comp === '<' && data < conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if (conditions[i].comp === '>=' && data >= conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if (conditions[i].comp === '<=' && data <= conditions[i].value) { + action.key = conditions[i].jump - 1; + break; + } else if (conditions[i].comp === '') { + // empty comparison => else statement + + action.key = conditions[i].jump - 1; + break; + } + } + + callback(); +}; diff --git a/Model/Action/Event/Jump.js b/Model/Action/Event/Jump.js new file mode 100644 index 0000000..60aaf82 --- /dev/null +++ b/Model/Action/Event/Jump.js @@ -0,0 +1,17 @@ +import { jsOMS } from '../../../Utils/oLib.js'; +/** + * Prevent UI action. + * + * @param {Object} action Action data + * @param {function} callback Callback + * @param {string} id Action element + * + * @since 1.0.0 + */ +export function jumpAction (action, callback, id) +{ + 'use strict'; + + action.key = action.jump - 1; + callback(); +}; diff --git a/UI/UIStateManager.js b/UI/UIStateManager.js index c8c6235..5215677 100755 --- a/UI/UIStateManager.js +++ b/UI/UIStateManager.js @@ -41,8 +41,44 @@ export class UIStateManager const length = !elements ? 0 : elements.length; for (let i = 0; i < length; ++i) { + this.loadState(elements[i]); this.bindElement(elements[i]); } + + // @performance This is a stupid fix to fix view changes during the first loadState + // E.g. scroll position depends on other UI elements + for (let i = 0; i < length; ++i) { + this.loadState(elements[i]); + } + }; + + loadState (element) + { + if (!element) { + return; + } + + let state = JSON.parse(window.localStorage.getItem('ui-state-' + element.id)); + state = state !== null ? state : {}; + + switch (element.tagName.toLowerCase()) { + case 'input': + if ((state === '1' && !element.checked) + || (state === '0' && element.checked) + ) { + element.click(); + } + + break; + case 'div': + element.scrollLeft = state.x; + element.scrollTop = state.y; + + element.scrollTo({ top: state.y, left: state.x }); + break; + default: + break; + } }; /** @@ -60,37 +96,31 @@ export class UIStateManager return; } - let state = JSON.parse(window.localStorage.getItem('ui-state-' + element.id)); - state = state !== null ? state : {}; - switch (element.tagName.toLowerCase()) { case 'input': - if ((state === '1' && !element.checked) - || (state === '0' && element.checked) - ) { - element.click(); - } - element.addEventListener('change', function (event) { if (this.getAttribute('type') === 'checkbox' || this.getAttribute('type') === 'radio' ) { - window.localStorage.setItem('ui-state-' + this.id, JSON.stringify(this.checked ? '1' : '0')); + window.localStorage.setItem( + 'ui-state-' + this.id, + JSON.stringify(this.checked ? '1' : '0') + ); } else { - window.localStorage.setItem('ui-state-' + this.id, JSON.stringify(this.value)); + window.localStorage.setItem( + 'ui-state-' + this.id, + JSON.stringify(this.value) + ); } }); break; case 'div': - // @todo this is not working, WHY? state is correct, but element.scrollTop is just ignored?! - element.scrollLeft = state.x; - element.scrollTop = state.y; - - element.scrollTo({ top: state.y, left: state.x }); - element.addEventListener('scroll', function () { - window.localStorage.setItem('ui-state-' + this.id, JSON.stringify({ x: this.scrollLeft, y: this.scrollTop })); + window.localStorage.setItem( + 'ui-state-' + this.id, + JSON.stringify({ x: this.scrollLeft, y: this.scrollTop }) + ); }); break;