Jingga/jsOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/jsOMS.git synced 2026-02-10 06:38:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

allow inline edit but with buttons somewhere else

Browse Source
This commit is contained in:
Dennis Eichhorn 2020-06-11 16:44:01 +02:00
parent 839f5ced3f
commit e356cb5dd9
1 changed files with 66 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
UI/Component/Form.js
View File

@ -115,6 +115,7 @@ export class Form
for (let i = 0; i < length; ++i) { for (let i = 0; i < length; ++i) {
let formId = forms[i].getAttribute('id'); let formId = forms[i].getAttribute('id');
if (typeof formId !== 'undefined' && formId !== null && typeof this.ignore[formId] === 'undefined') { if (typeof formId !== 'undefined' && formId !== null && typeof this.ignore[formId] === 'undefined') {
this.bindForm(formId); this.bindForm(formId);
} }
@ -432,7 +433,6 @@ export class Form
for (let i = 0; i < selectorLength; ++i) { for (let i = 0; i < selectorLength; ++i) {
// this handles selectors such as 'ancestor > child/or/sibling' and many more // this handles selectors such as 'ancestor > child/or/sibling' and many more
const selector = selectors[i].trim(' ').split(' '); const selector = selectors[i].trim(' ').split(' ');
const closest = selector[0].trim();
let subSelector = ''; let subSelector = '';
if (selector.length !== 0) { if (selector.length !== 0) {
@ -766,10 +766,6 @@ export class Form
selectorLength = selectors.length; selectorLength = selectors.length;
const updatableTpl = formElement.getAttribute('data-update-tpl').split(','); const updatableTpl = formElement.getAttribute('data-update-tpl').split(',');
const subMain = formElement.getAttribute('data-update-content').charAt(0) === '#'
? document.querySelector(formElement.getAttribute('data-update-content'))
: formElement.querySelector(formElement.getAttribute('data-update-content'));
if (formElement.getAttribute('data-id') !== null) { if (formElement.getAttribute('data-id') !== null) {
UriFactory.setQuery('$id', formElement.getAttribute('data-id')); UriFactory.setQuery('$id', formElement.getAttribute('data-id'));
} }
@ -779,21 +775,26 @@ export class Form
const newEle = []; const newEle = [];
for (let i = 0; i < selectorLength; ++i) { for (let i = 0; i < selectorLength; ++i) {
selectors[i] = selectors[i].trim();
// this handles selectors such as 'ancestor > child/or/sibling' and many more // this handles selectors such as 'ancestor > child/or/sibling' and many more
const selector = selectors[i].trim(' ').split(' '); const selector = !selectors[i].startsWith('#') ? selectors[i].split(' ') : [selectors[i]];
const closest = selector[0].trim(); const selLength = selector.length;;
const closest = selector[0].trim();
let subSelector = ''; let subSelector = '';
if (selector.length !== 0) { if (selLength > 1) {
selector.shift(); selector.shift();
subSelector = selector.join(' ').trim(); subSelector = selector.join(' ').trim();
} }
parents.push( if (selLength === 1 && selector[0].startsWith('#')) {
selector.length === 0 parents.push(document.querySelector(selector[0]));
} else {
parents.push(selLength === 1
? this.closest(closest) ? this.closest(closest)
: this.closest(closest).querySelector(subSelector) : this.closest(closest).querySelector(subSelector)
); );
}
values = values.concat( values = values.concat(
parents[i].hasAttribute('data-tpl-value') parents[i].hasAttribute('data-tpl-value')
@ -1022,46 +1023,68 @@ export class Form
// find all values, texts and parents for every selector // find all values, texts and parents for every selector
for (let i = 0; i < selectorLength; ++i) { for (let i = 0; i < selectorLength; ++i) {
selectors[i] = selectors[i].trim();
// todo: similar logic is in updatable Inline and probably in External... pull out? // todo: similar logic is in updatable Inline and probably in External... pull out?
// this handles selectors such as 'ancestor > child/or/sibling' and many more // this handles selectors such as 'ancestor > child/or/sibling' and many more
let selector = selectors[i].trim(' ').split(' '); let selector = !selectors[i].startsWith('#') ? selectors[i].split(' ') : [selectors[i]];
let closest = selector[0].trim(); const selLength = selector.length;;
let closest = selector[0].trim();
// template elements (= elements which just got added due to the update/edit button, here the new data is stored) // template elements (= elements which just got added due to the update/edit button, here the new data is stored)
// @todo i don't really remember how this works and why this was needed. Try to understand it and write a comment afterwards // @todo i don't really remember how this works and why this was needed. Try to understand it and write a comment afterwards
let subSelector = ''; let subSelector = '';
if (selector.length !== 0) { if (selLength > 1) {
selector.shift(); selector.shift();
subSelector = selector.join(' ').trim() + '[data-marker=tpl]'; subSelector = selector.join(' ').trim() + '[data-marker=tpl]';
} else { } else {
closest += '[data-marker=tpl]'; closest += '[data-marker=tpl]';
} }
const parentTplName = selector.length === 0 ? closest : closest + subSelector; let parentTplName;
if (selLength === 1 && selector[0].startsWith('#')) {
parentTplName = selector[0] + '[data-marker=tpl]';
} else {
parentTplName = selLength === 1 ? closest : closest + subSelector;
}
if (!parentsTpl.hasOwnProperty(parentTplName)) { if (!parentsTpl.hasOwnProperty(parentTplName)) {
parentsTpl[parentTplName] = selector.length === 0 if (selLength === 1 && selector[0].startsWith('#')) {
parentsTpl[parentTplName] = document.querySelector(selector[0]).parentNode;
} else {
parentsTpl[parentTplName] = selLength === 1
? this.closest(closest) ? this.closest(closest)
: this.closest(closest).querySelector(subSelector); : this.closest(closest).querySelector(subSelector);
/* @todo: parentNode because of media edit. maybe I need a data-ui-parent element? */ /* @todo: parentNode because of media edit. maybe I need a data-ui-parent element? */
}
} }
// content elements // content elements
selector = selectors[i].trim(' ').split(' '); selector = !selectors[i].startsWith('#') ? selectors[i].split(' ') : [selectors[i]];
closest = selector[0].trim(); closest = selector[0].trim();
subSelector = ''; subSelector = '';
if (selector.length !== 0) { if (selLength > 1) {
selector.shift(); selector.shift();
subSelector = selector.join(' ').trim() + ':not([data-marker=tpl])'; subSelector = selector.join(' ').trim() + ':not([data-marker=tpl])';
} else { } else {
closest += ':not([data-marker=tpl])'; closest += ':not([data-marker=tpl])';
} }
const parentContentName = selector.length === 0 ? closest : closest + subSelector; let parentContentName;
if (selLength === 1 && selector[0].startsWith('#')) {
parentContentName = selector[0] + ':not([data-marker=tpl])';
} else {
parentContentName = selLength === 1 ? closest : closest + subSelector;
}
if (!parentsContent.hasOwnProperty(parentContentName)) { if (!parentsContent.hasOwnProperty(parentContentName)) {
parentsContent[parentContentName] = selector.length === 0 if (selLength === 1 && selector[0].startsWith('#')) {
parentsContent[parentContentName] = document.querySelector(selector[0]).parentNode;
} else {
parentsContent[parentContentName] = selLength === 1
? this.closest(closest) ? this.closest(closest)
: this.closest(closest).querySelector(subSelector).parentNode; : this.closest(closest).querySelector(subSelector).parentNode;
/* @todo: parentNode because of media edit. maybe I need a data-ui-parent element? */ /* @todo: parentNode because of media edit. maybe I need a data-ui-parent element? */
}
} }
values = values.concat( values = values.concat(
@ -1212,17 +1235,28 @@ export class Form
const selectors = formElement.getAttribute('data-update-element').split(','), const selectors = formElement.getAttribute('data-update-element').split(','),
selectorLength = selectors.length; selectorLength = selectors.length;
for (let i = 0; i < selectorLength; ++i) { for (let i = 0; i < selectorLength; ++i) {
let selector = selectors[i].trim(' ').split(' '); selectors[i] = selectors[i].trim();
let closest = selector[0].trim();
const selector = !selectors[i].startsWith('#') ? selectors[i].split(' ') : [selectors[i]];
const selLength = selector.length;;
const closest = selector[0].trim();
let subSelector = ''; let subSelector = '';
if (selector.length !== 0) { if (selLength > 1) {
selector.shift(); selector.shift();
subSelector = selector.join(' ').trim(); subSelector = selector.join(' ').trim();
} }
let content = selector.length === 0 ? ele.closest(closest) : ele.closest(closest).querySelector(subSelector); let content;
if (selLength === 1 && selector[0].startsWith('#')) {
content = document.querySelector(selector[0]);
} else {
content = selLength === 1 ? ele.closest(closest) : ele.closest(closest).querySelector(subSelector);
}
const tpls = content.parentNode.querySelectorAll('[data-marker=tpl]'), const tpls = content.parentNode.querySelectorAll('[data-marker=tpl]'),
tplsLength = tpls.length; tplsLength = tpls.length;
@ -1230,7 +1264,12 @@ export class Form
tpls[j].parentNode.removeChild(tpls[j]); tpls[j].parentNode.removeChild(tpls[j]);
} }
content = selector.length === 0 ? ele.closest(closest) : ele.closest(closest).querySelector(subSelector); if (selLength === 1 && selector[0].startsWith('#')) {
content = document.querySelector(selector[0]);
} else {
content = selLength === 1 ? ele.closest(closest) : ele.closest(closest).querySelector(subSelector);
}
jsOMS.removeClass(content, 'hidden'); jsOMS.removeClass(content, 'hidden');
} }