updates
This commit is contained in:
+12
-12
@@ -55,20 +55,20 @@ export class App extends Boot {
|
||||
let topBar = content.dxFind('.top-bar');
|
||||
|
||||
if (!topBar) {
|
||||
topBar = El('div', { class: 'top-bar' });
|
||||
topBar = El('div', { className: 'top-bar' });
|
||||
content.prepend(topBar);
|
||||
}
|
||||
|
||||
let topBarInner = topBar.dxFind('.top-bar-inner');
|
||||
|
||||
if (!topBarInner) {
|
||||
topBarInner = topBar.appendChild( El('div', { class: 'top-bar-inner' }) );
|
||||
topBarInner = topBar.appendChild( El('div', { className: 'top-bar-inner' }) );
|
||||
}
|
||||
|
||||
let titleWrapper = topBarInner.dxFind('.title-wrapper');
|
||||
|
||||
if (!titleWrapper) {
|
||||
titleWrapper = topBarInner.appendChild(El('div', { class: 'title-wrapper' }));
|
||||
titleWrapper = topBarInner.appendChild(El('div', { className: 'title-wrapper' }));
|
||||
}
|
||||
|
||||
return titleWrapper;
|
||||
@@ -92,7 +92,7 @@ export class App extends Boot {
|
||||
return;
|
||||
}
|
||||
|
||||
elTitle = El('h2', { class: 'title' });
|
||||
elTitle = El('h2', { className: 'title' });
|
||||
|
||||
if (Ut.isStr(title)) {
|
||||
elTitle.dxHtml(title);
|
||||
@@ -122,7 +122,7 @@ export class App extends Boot {
|
||||
return;
|
||||
}
|
||||
|
||||
elDescr = El('p', { class: 'descr' });
|
||||
elDescr = El('p', { className: 'descr' });
|
||||
|
||||
if (Ut.isStr(title)) {
|
||||
elTitle.dxHtml(title);
|
||||
@@ -480,7 +480,7 @@ export class App extends Boot {
|
||||
icon.className = 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon;
|
||||
}
|
||||
else {
|
||||
target.prepend(El('i', { class: 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon }) );
|
||||
target.prepend(El('i', { className: 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon }) );
|
||||
}
|
||||
}
|
||||
|
||||
@@ -640,8 +640,8 @@ export class App extends Boot {
|
||||
|
||||
let menuItem = App.leftMenuItems.appendChild( El('li', {},
|
||||
El('a', {},
|
||||
El('span', { class: 'menu-item' }, dataItem.text),
|
||||
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
|
||||
El('span', { className: 'menu-item' }, dataItem.text),
|
||||
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
|
||||
)
|
||||
));
|
||||
|
||||
@@ -677,8 +677,8 @@ export class App extends Boot {
|
||||
|
||||
let submenuItem = submenu.appendChild( El('li', {},
|
||||
El('a', {},
|
||||
El('span', { class: 'menu-item' }, secDataItem.text),
|
||||
El('i', { class: 'fa' + (secDataItem['icon-type'] || 's') + ' fa-'+ secDataItem.icon })
|
||||
El('span', { className: 'menu-item' }, secDataItem.text),
|
||||
El('i', { className: 'fa' + (secDataItem['icon-type'] || 's') + ' fa-'+ secDataItem.icon })
|
||||
)
|
||||
));
|
||||
|
||||
@@ -718,8 +718,8 @@ export class App extends Boot {
|
||||
|
||||
let menuItem = App.dropdownMenuItems.appendChild( El('li', {},
|
||||
El('a', {},
|
||||
El('span', { class: 'menu-item' }, dataItem.text),
|
||||
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
|
||||
El('span', { className: 'menu-item' }, dataItem.text),
|
||||
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
|
||||
)
|
||||
));
|
||||
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
|
||||
ENTRY_EXISTS: 409, // Entry already exists (conflict)
|
||||
DELETED: 410, // Entry deleted
|
||||
TOO_LARGE: 413, // Reqquest too large
|
||||
UNSUPPORTED_TYPE: 415, // Unsupported media type
|
||||
|
||||
INVALID_CSRF: 419, // Page Expired (non-standard, CSRF failure)
|
||||
|
||||
NOT_MATCH: 422, // Data mismatch / validation failed
|
||||
|
||||
+51
-51
@@ -17,7 +17,7 @@ export class Render {
|
||||
|
||||
node.outline = Ut.isSet(node.outline) ? node.outline : 1;
|
||||
|
||||
let card = El('div', { class: 'sp-card' });
|
||||
let card = El('div', { className: 'sp-card' });
|
||||
|
||||
if (node.name) {
|
||||
card.className += ' card-' + node.name;
|
||||
@@ -30,12 +30,12 @@ export class Render {
|
||||
let content = card;
|
||||
|
||||
if (node.outline == 1) {
|
||||
content = card.appendChild( El('div', { class: 'content-card' }) );
|
||||
content = card.appendChild( El('div', { className: 'content-card' }) );
|
||||
}
|
||||
|
||||
if (node.children && node.children.tabmenu) {
|
||||
|
||||
let tabMenu = content.appendChild(El('div', { class: 'tab-menu' }));
|
||||
let tabMenu = content.appendChild(El('div', { className: 'tab-menu' }));
|
||||
|
||||
let active = false;
|
||||
|
||||
@@ -46,7 +46,7 @@ export class Render {
|
||||
}
|
||||
|
||||
let item = tabMenu.appendChild(El('a', {},
|
||||
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon }),
|
||||
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon }),
|
||||
El('span', {}, dataItem.text)
|
||||
));
|
||||
|
||||
@@ -72,38 +72,38 @@ export class Render {
|
||||
|
||||
if (node['hide-toolbar'] != 1) {
|
||||
|
||||
let topBar = El('div', { class: 'top-bar' });
|
||||
let topBar = El('div', { className: 'top-bar' });
|
||||
|
||||
content.append(topBar);
|
||||
|
||||
if (node.title || node.descr || (node.children && node.children.toolbar)) {
|
||||
|
||||
let topBarInner = El('div', { class: 'top-bar-inner' });
|
||||
let topBarInner = El('div', { className: 'top-bar-inner' });
|
||||
|
||||
topBar.append(topBarInner);
|
||||
|
||||
if (node.title || node.descr) {
|
||||
|
||||
let titleWrapper = topBarInner.appendChild(El('div', { class: 'title-wrapper' }));
|
||||
let titleWrapper = topBarInner.appendChild(El('div', { className: 'title-wrapper' }));
|
||||
|
||||
if (node.title) {
|
||||
titleWrapper.append( El('h2', { class: 'title' }, Ut.tplString(node.title, node.template) ));
|
||||
titleWrapper.append( El('h2', { className: 'title' }, Ut.tplString(node.title, node.template) ));
|
||||
}
|
||||
|
||||
if (node.descr) {
|
||||
titleWrapper.append( El('p', { class: 'descr' }, Ut.tplString(node.descr, node.template)) );
|
||||
titleWrapper.append( El('p', { className: 'descr' }, Ut.tplString(node.descr, node.template)) );
|
||||
}
|
||||
}
|
||||
|
||||
if (node.children && node.children.toolbar) {
|
||||
Render.makeUiElements(Ut.objVal(node.children.toolbar).children, topBarInner.appendChild(El('div', { class: 'ml10 flex v-center no-shrink' })) );
|
||||
Render.makeUiElements(Ut.objVal(node.children.toolbar).children, topBarInner.appendChild(El('div', { className: 'ml10 flex v-center no-shrink' })) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let container = (node['hide-content'] == 1)
|
||||
? content
|
||||
: content.appendChild(El('div', { class: 'container' }));
|
||||
: content.appendChild(El('div', { className: 'container' }));
|
||||
|
||||
if (parent) {
|
||||
parent.append(card);
|
||||
@@ -123,7 +123,7 @@ export class Render {
|
||||
*/
|
||||
static makeBlockElement(node, parent) {
|
||||
|
||||
let block = El('div', { class: 'sp-block block-'+ node.name });
|
||||
let block = El('div', { className: 'sp-block block-'+ node.name });
|
||||
|
||||
if (node.cls) {
|
||||
block.className += ' ' + node.cls;
|
||||
@@ -167,7 +167,7 @@ export class Render {
|
||||
|
||||
let form = El('form', {
|
||||
novalidate: true,
|
||||
class: 'sp-form form-'+ node.name + (node.cls ? ' ' + node.cls : ''),
|
||||
className: 'sp-form form-'+ node.name + (node.cls ? ' ' + node.cls : ''),
|
||||
autocomplete: 'off',
|
||||
method: 'post'
|
||||
});
|
||||
@@ -196,7 +196,7 @@ export class Render {
|
||||
*/
|
||||
static makeListElement(node, parent) {
|
||||
|
||||
let list = El('ul', { class: 'sp-list list-'+ node.name + (node.cls ? ' ' + node.cls : ''),
|
||||
let list = El('ul', { className: 'sp-list list-'+ node.name + (node.cls ? ' ' + node.cls : ''),
|
||||
id: node.id || null
|
||||
});
|
||||
|
||||
@@ -209,17 +209,17 @@ export class Render {
|
||||
Ut.each (node.children.item, (item, action) => {
|
||||
|
||||
let itm = El('li', {
|
||||
class: 'item-'+ (item.type || 'text') + (item.type == 'link' ? ' cmd-' : ' item-') + action + (item.cls ? ' ' + item.cls : ''),
|
||||
className: 'item-'+ (item.type || 'text') + (item.type == 'link' ? ' cmd-' : ' item-') + action + (item.cls ? ' ' + item.cls : ''),
|
||||
'data-id': item.id || null,
|
||||
});
|
||||
|
||||
if (item.icon) {
|
||||
let icon = item.icon.split(' ');
|
||||
itm.append(El('i', { class: 'fa-'+ (icon[1] || 'solid') +' fa-'+ icon[0] }) );
|
||||
itm.append(El('i', { className: 'fa-'+ (icon[1] || 'solid') +' fa-'+ icon[0] }) );
|
||||
}
|
||||
|
||||
if (item.label) {
|
||||
itm.append(El('span', { class: 'item-label' }, Ut.tplString(item.label, node.template) ));
|
||||
itm.append(El('span', { className: 'item-label' }, Ut.tplString(item.label, node.template) ));
|
||||
}
|
||||
|
||||
list.append(itm);
|
||||
@@ -238,7 +238,7 @@ export class Render {
|
||||
*/
|
||||
static makeTitleElement(node, parent) {
|
||||
|
||||
let blockTitle = El('div', { class: 'sp-title mb'+ (node.mb || 30) +' title-'+ node.name });
|
||||
let blockTitle = El('div', { className: 'sp-title mb'+ (node.mb || 30) +' title-'+ node.name });
|
||||
|
||||
if (node.mt) {
|
||||
blockTitle.classList.add('mt' + node.mt);
|
||||
@@ -249,10 +249,10 @@ export class Render {
|
||||
}
|
||||
|
||||
if (node.icon) {
|
||||
blockTitle.appendChild(El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
|
||||
blockTitle.appendChild(El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
|
||||
}
|
||||
|
||||
let title = blockTitle.appendChild(El('h2', { class: 'text-semibold fz' + (node.size || 22) }));
|
||||
let title = blockTitle.appendChild(El('h2', { className: 'text-semibold fz' + (node.size || 22) }));
|
||||
|
||||
if (node.label) {
|
||||
title.textContent = Ut.tplString(node.label, node.template);
|
||||
@@ -270,7 +270,7 @@ export class Render {
|
||||
*/
|
||||
static makeCaptionElement(node, parent) {
|
||||
|
||||
let blockTitle = El('div', { class: 'sp-caption mb'+ (node.mb || 30) +' caption-'+ node.name });
|
||||
let blockTitle = El('div', { className: 'sp-caption mb'+ (node.mb || 30) +' caption-'+ node.name });
|
||||
|
||||
if (node.mt) {
|
||||
blockTitle.classList.add('mt' + node.mt);
|
||||
@@ -281,10 +281,10 @@ export class Render {
|
||||
}
|
||||
|
||||
if (node.icon) {
|
||||
blockTitle.appendChild(El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
|
||||
blockTitle.appendChild(El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
|
||||
}
|
||||
|
||||
let title = blockTitle.appendChild(El('h3', { class: 'text-medium fz' + (node.size || 18) }));
|
||||
let title = blockTitle.appendChild(El('h3', { className: 'text-medium fz' + (node.size || 18) }));
|
||||
|
||||
if (node.label) {
|
||||
title.textContent = Ut.tplString(node.label, node.template);
|
||||
@@ -302,7 +302,7 @@ export class Render {
|
||||
*/
|
||||
static makeInfoElement(field, parent) {
|
||||
|
||||
let labelWrapper = El('div', { class: 'form-field field-info' });
|
||||
let labelWrapper = El('div', { className: 'form-field field-info' });
|
||||
|
||||
if (field.name) {
|
||||
labelWrapper.dataset.name = field.name;
|
||||
@@ -317,16 +317,16 @@ export class Render {
|
||||
}
|
||||
|
||||
if (field.icon) {
|
||||
labelWrapper.append( El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon + ' ic-info fz' + (field['icon-size'] || 32) + ' color-' + (field['icon-color'] || 'black') }) );
|
||||
labelWrapper.append( El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon + ' ic-info fz' + (field['icon-size'] || 32) + ' color-' + (field['icon-color'] || 'black') }) );
|
||||
}
|
||||
|
||||
let group = El('div');
|
||||
|
||||
if (field.label) {
|
||||
group.append(El('label', { class: 'label-name' }, Ut.tplString(field.label, field.template)));
|
||||
group.append(El('label', { className: 'label-name' }, Ut.tplString(field.label, field.template)));
|
||||
}
|
||||
|
||||
let labelValue = El('div', { class: 'label-value' });
|
||||
let labelValue = El('div', { className: 'label-value' });
|
||||
|
||||
if (field.wrap) {
|
||||
labelValue.className += ' text-wrap';
|
||||
@@ -356,7 +356,7 @@ export class Render {
|
||||
*/
|
||||
static makeLinkElement(node, parent) {
|
||||
|
||||
let elem = El('a', { class: 'link' });
|
||||
let elem = El('a', { className: 'link' });
|
||||
|
||||
if (node.name) {
|
||||
elem.className += ' link-' + node.name;
|
||||
@@ -371,7 +371,7 @@ export class Render {
|
||||
}
|
||||
|
||||
if (node.icon) {
|
||||
elem.prepend(El('i', { class: 'fa' + (node['icon-type'] || 's') + ' fa-'+ node.icon }) );
|
||||
elem.prepend(El('i', { className: 'fa' + (node['icon-type'] || 's') + ' fa-'+ node.icon }) );
|
||||
}
|
||||
|
||||
if (node.label) {
|
||||
@@ -414,7 +414,7 @@ export class Render {
|
||||
*/
|
||||
static makeCardMenu(node, parent) {
|
||||
|
||||
let cardMenu = El('div', { class: 'sp-card-menu' });
|
||||
let cardMenu = El('div', { className: 'sp-card-menu' });
|
||||
|
||||
if (node?.children?.item) {
|
||||
|
||||
@@ -424,11 +424,11 @@ export class Render {
|
||||
return;
|
||||
}
|
||||
|
||||
const menuItem = cardMenu.appendChild( El('a', { class: 'card-menu-item' },
|
||||
El('div', { class: 'card-icon-wrapper' },
|
||||
El('i', { class: 'fa' + (item['icon-type'] || 's') + ' fa-'+ (item.icon || 'cog') + ' fz' + (item['icon-size'] || 36) })
|
||||
const menuItem = cardMenu.appendChild( El('a', { className: 'card-menu-item' },
|
||||
El('div', { className: 'card-icon-wrapper' },
|
||||
El('i', { className: 'fa' + (item['icon-type'] || 's') + ' fa-'+ (item.icon || 'cog') + ' fz' + (item['icon-size'] || 36) })
|
||||
),
|
||||
El('div', { class:'card-menu-title' }, item.title)
|
||||
El('div', { className: 'card-menu-title' }, item.title)
|
||||
) );
|
||||
|
||||
if (item.id) {
|
||||
@@ -440,7 +440,7 @@ export class Render {
|
||||
}
|
||||
|
||||
if (item.descr) {
|
||||
menuItem.append(El('div', { class: 'card-menu-descr' }, item.descr));
|
||||
menuItem.append(El('div', { className: 'card-menu-descr' }, item.descr));
|
||||
}
|
||||
|
||||
cardMenu.append(menuItem);
|
||||
@@ -492,7 +492,7 @@ export class Render {
|
||||
}
|
||||
|
||||
if (node.icon) {
|
||||
elem.append( El('i', { class: 'icon-' + (node['icon-align'] || 'left') + ' fa' + (node['icon-type'] || 's') + ' fa-' + node.icon + ' fz' + (node['icon-size'] || 14) + ' color-' + (node['icon-color'] || 'white') }) );
|
||||
elem.append( El('i', { className: 'icon-' + (node['icon-align'] || 'left') + ' fa' + (node['icon-type'] || 's') + ' fa-' + node.icon + ' fz' + (node['icon-size'] || 14) + ' color-' + (node['icon-color'] || 'white') }) );
|
||||
}
|
||||
|
||||
if (node.tooltip) {
|
||||
@@ -548,7 +548,7 @@ export class Render {
|
||||
*/
|
||||
static makeFieldWrapper(field, parent) {
|
||||
|
||||
let wrapper = El('div', { class: 'form-field field-' + field.type });
|
||||
let wrapper = El('div', { className: 'form-field field-' + field.type });
|
||||
|
||||
if (field.name) {
|
||||
wrapper.className += ' field-' + field.name;
|
||||
@@ -559,14 +559,14 @@ export class Render {
|
||||
}
|
||||
|
||||
if (field.label) {
|
||||
wrapper.append( El('label', { class: 'field-label' }, Ut.tplString(field.label, field.template)) );
|
||||
wrapper.append( El('label', { className: 'field-label' }, Ut.tplString(field.label, field.template)) );
|
||||
}
|
||||
|
||||
let inputWrapper = null;
|
||||
|
||||
if (field.type == 'text' || field.type == 'password' || field.type == 'select') {
|
||||
|
||||
inputWrapper = El('div', { class: 'input-wrapper' });
|
||||
inputWrapper = El('div', { className: 'input-wrapper' });
|
||||
|
||||
wrapper.append(inputWrapper);
|
||||
|
||||
@@ -576,12 +576,12 @@ export class Render {
|
||||
|
||||
if (field['icon-tooltip'] || field['icon-action']) {
|
||||
|
||||
icon = El('a', { class: 'icon-' + (field['icon-align'] || 'left') },
|
||||
El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') })
|
||||
icon = El('a', { className: 'icon-' + (field['icon-align'] || 'left') },
|
||||
El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') })
|
||||
);
|
||||
}
|
||||
else {
|
||||
icon = El('i', { class: 'icon-' + (field['icon-align'] || 'left') + ' fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') });
|
||||
icon = El('i', { className: 'icon-' + (field['icon-align'] || 'left') + ' fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') });
|
||||
}
|
||||
|
||||
if (field['icon-tooltip']) {
|
||||
@@ -613,7 +613,7 @@ export class Render {
|
||||
*/
|
||||
static makeInputElement(field, parent) {
|
||||
|
||||
let input = El('input', { type: field.type, class: 'sp-form-control' });
|
||||
let input = El('input', { type: field.type, className: 'sp-form-control' });
|
||||
|
||||
if (field.value) {
|
||||
input.value = field.value;
|
||||
@@ -656,7 +656,7 @@ export class Render {
|
||||
*/
|
||||
static makeInputPwdElement(field, parent) {
|
||||
|
||||
let elem = El('input', { type: 'password', class: 'sp-form-control' });
|
||||
let elem = El('input', { type: 'password', className: 'sp-form-control' });
|
||||
|
||||
if (field.placeholder) {
|
||||
elem.placeholder = field.placeholder;
|
||||
@@ -674,7 +674,7 @@ export class Render {
|
||||
*/
|
||||
static makeTextareaElement(field, parent) {
|
||||
|
||||
let textarea = El('textarea', { class: 'sp-form-control' });
|
||||
let textarea = El('textarea', { className: 'sp-form-control' });
|
||||
|
||||
if (field.rows) {
|
||||
textarea.setAttribute('rows', field.rows);
|
||||
@@ -796,7 +796,7 @@ export class Render {
|
||||
|
||||
let input = El('input', { type: 'color' });
|
||||
|
||||
let elem = El('div', { class: 'input-color-wrapper' }, input);
|
||||
let elem = El('div', { className: 'input-color-wrapper' }, input);
|
||||
|
||||
Render.setInputAttr(input, field);
|
||||
|
||||
@@ -826,7 +826,7 @@ export class Render {
|
||||
*/
|
||||
static makeSelectElement(field, parent) {
|
||||
|
||||
let elem = El('select', { class: 'sp-form-control' });
|
||||
let elem = El('select', { className: 'sp-form-control' });
|
||||
|
||||
if (field.multiple == '1') {
|
||||
elem.multiple = true;
|
||||
@@ -863,7 +863,7 @@ export class Render {
|
||||
return false;
|
||||
}
|
||||
|
||||
let elem = El('div', { class: 'sp-control ' + field.type +'-control' });
|
||||
let elem = El('div', { className: 'sp-control ' + field.type +'-control' });
|
||||
|
||||
Ut.each (field.option, (text, val) => {
|
||||
|
||||
@@ -877,7 +877,7 @@ export class Render {
|
||||
|
||||
input.value = val;
|
||||
|
||||
let label = El('label', {}, input, El('span', { class: 'ctrl-indicator' }), text);
|
||||
let label = El('label', {}, input, El('span', { className: 'ctrl-indicator' }), text);
|
||||
|
||||
label.className = 'radio-label';
|
||||
|
||||
@@ -916,7 +916,7 @@ export class Render {
|
||||
});
|
||||
}
|
||||
|
||||
let elem = El('div', { class: 'sp-radio-box' });
|
||||
let elem = El('div', { className: 'sp-radio-box' });
|
||||
|
||||
Ut.each (field.option, (text, val) => {
|
||||
|
||||
@@ -938,7 +938,7 @@ export class Render {
|
||||
|
||||
label.append(input);
|
||||
|
||||
let indicator = El('span', { class: 'ctrl-indicator label-color-'+ (colors[i] ? colors[i] : 'default') });
|
||||
let indicator = El('span', { className: 'ctrl-indicator label-color-'+ (colors[i] ? colors[i] : 'default') });
|
||||
|
||||
indicator.textContent = text;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user