grainsoft/david
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
grainsoft
2025-12-02 01:54:59 +02:00
parent c5ca4162a3
commit 2c998d7ba8
33 changed files with 419 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/App.js
+12 -12
View File
@@ -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 })
)
));
src/core/Rc.js
+3
View File
@@ -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
src/core/Render.js
+51 -51
View File
@@ -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;
src/utils/Ut.js
+1 -5
View File
@@ -15,11 +15,7 @@ export class Ut {
static trigger = (handler, ...args) => typeof handler === 'function' ? handler.call(this, ...args) : null;
static each(obj, callback, context) {
for (let key in obj) {
callback.call(context || this, obj[key], key);
}
}
static each = (obj, callback, context) => obj && Object.keys(obj).forEach(key => callback.call(context ?? this, obj[key], key) );
static tplString = (str, context) => new Function('return `' + str + '`;').call(context || {});
src/utils/dom.js
+5
View File
@@ -41,6 +41,11 @@
continue;
}
if (name == 'className') {
elem.className = attr[name];
continue;
}
elem.setAttribute(name, attr[name]);
}
src/utils/form-validator/FormValidator.js
+1 -1
View File
@@ -210,7 +210,7 @@ export class FormValidator extends Validator {
fieldWrapper.classList.add('form-field-error');
fieldWrapper.append( El('div', { class: 'sp-label-error' }, emsg ) );
fieldWrapper.append( El('div', { className: 'sp-label-error' }, emsg ) );
}
return false;
src/utils/form-validator/InputError.js
+1 -1
View File
@@ -29,7 +29,7 @@ export class InputError {
*/
create() {
this.fieldWrapper.classList.add('form-field-error');
this.fieldWrapper.append( El('div', { class: 'sp-label-error' }, this.emsg) );
this.fieldWrapper.append( El('div', { className: 'sp-label-error' }, this.emsg) );
}
/**
src/utils/form-validator/Validator.js
+1 -1
View File
@@ -287,7 +287,7 @@ export class Validator {
let uploader = el.dxData('uploader');
if (uploader) {
uploader.getFiles().forEach(filename => fdata.append('files_' + el.name + '[]', filename));
uploader.getFiles().forEach(filename => fdata.append('file__' + el.name + '[]', filename));
}
break;
src/widgets/autocomplete/Autocomplete.js
+4 -4
View File
@@ -57,7 +57,7 @@ export class Autocomplete {
renderContainer() {
this.ui = {
wrapper: El('div', { class: 'sp-autocomplete sp-scrollbar' })
wrapper: El('div', { className: 'sp-autocomplete sp-scrollbar' })
};
this.ui.wrapper.style.maxHeight = (this.opts.maxOptions * this.opts.optionHeight) + 'px';
@@ -102,14 +102,14 @@ export class Autocomplete {
if (pos != -1) {
let label = El('span', { class: 'ac-label' });
let label = El('span', { className: 'ac-label' });
if (pos) {
label.append(name.substring(0, pos));
found = false;
}
label.append(El('span', { class: 'text-semibold color-' + this.opts.selectionColor }, name.substring(pos, pos + val.length) ));
label.append(El('span', { className: 'text-semibold color-' + this.opts.selectionColor }, name.substring(pos, pos + val.length) ));
if (pos + val.length < name.length) {
label.append( name.substring(pos + val.length, name.length ) )
@@ -121,7 +121,7 @@ export class Autocomplete {
this.opened = true;
}
let option = this.ui.wrapper.appendChild(El('div', { class: 'ac-option' }, label));
let option = this.ui.wrapper.appendChild(El('div', { className: 'ac-option' }, label));
option.dataset.id = id;
option.style.height = this.opts.optionHeight + 'px';
src/widgets/cancelable/Cancelable.js
+1 -1
View File
@@ -16,7 +16,7 @@ export class Cancelable {
target.dxData('cancelable', this);
this.iconHandler = El('i', { class: 'icon-right icon-clear hide' });
this.iconHandler = El('i', { className: 'icon-right icon-clear hide' });
let elType = target.tagName.toLowerCase();
src/widgets/counter/Counter.js
+5 -5
View File
@@ -26,12 +26,12 @@ export class Counter {
this.target.maxLength = this.opts.limit;
this.indicator = El('div', { class: 'indicator' });
this.counter = El('span', { class: 'counter' }, '0');
this.indicator = El('div', { className: 'indicator' });
this.counter = El('span', { className: 'counter' }, '0');
this.ui = El('div', { class: 'sp-chars-counter' },
El('div', { class: 'progress-bar' }, this.indicator),
El('div', { class: 'label' }, this.counter, ' / '+ this.opts.limit)
this.ui = El('div', { className: 'sp-chars-counter' },
El('div', { className: 'progress-bar' }, this.indicator),
El('div', { className: 'label' }, this.counter, ' / '+ this.opts.limit)
);
this.target.after(this.ui);
src/widgets/date-picker/DatePicker.js
+19 -19
View File
@@ -309,7 +309,7 @@ export class DatePicker {
#renderContainer() {
this.ui = {
container: El('div', { class: 'sp-datepicker ui-style-'+ this.opts.style + ' hide' })
container: El('div', { className: 'sp-datepicker ui-style-'+ this.opts.style + ' hide' })
}
if (this.isDisabled) {
@@ -320,28 +320,28 @@ export class DatePicker {
this.ui.container.classList.add('slide');
}
this.ui.prevMonth = El('a', { class: 'dp-prev-month' })
this.ui.prevMonth = El('a', { className: 'dp-prev-month' })
this.ui.prevMonth.classList.toggle('disabled', this.opts.navDisabled);
this.ui.nextMonth = El('a', { class: 'dp-next-month' });
this.ui.nextMonth = El('a', { className: 'dp-next-month' });
this.ui.nextMonth.classList.toggle('disabled', this.opts.navDisabled);
this.ui.cMonth = El('span', { class: 'dp-current-month' }, this.#getMonthName(this.month) + ' ' + this.year)
this.ui.cMonth = El('span', { className: 'dp-current-month' }, this.#getMonthName(this.month) + ' ' + this.year)
this.ui.container.append( El('div', { class: 'dp-months' },
this.ui.container.append( El('div', { className: 'dp-months' },
this.ui.prevMonth,
this.ui.cMonth,
this.ui.nextMonth
));
this.ui.weekDays = this.ui.container.appendChild(El('div', { class: 'dp-weekdays' }));
this.ui.weekDays = this.ui.container.appendChild(El('div', { className: 'dp-weekdays' }));
this.conf.weekdays.forEach(wday => this.ui.weekDays.append(El('div', { class: 'wday' }, wday)) );
this.conf.weekdays.forEach(wday => this.ui.weekDays.append(El('div', { className: 'wday' }, wday)) );
this.ui.tbody = this.ui.container.appendChild(El('div', { class: 'dp-grid' }));
this.ui.tbody = this.ui.container.appendChild(El('div', { className: 'dp-grid' }));
if (this.opts.multiple && this.opts.chipbox) {
this.ui.chipbox = this.ui.container.appendChild( El('div', { class: 'dp-chipbox sp-scrollbar hide'}));
this.ui.chipbox = this.ui.container.appendChild( El('div', { className: 'dp-chipbox sp-scrollbar hide'}));
}
if (this.isInput) {
@@ -573,9 +573,9 @@ export class DatePicker {
return;
}
this.ui.chipbox.append( El('div', { class: 'sp-chip', 'data-id': date },
this.ui.chipbox.append( El('div', { className: 'sp-chip', 'data-id': date },
El('span', {}, this.#getFormattedDate(date, checked, this.opts.dateFormat)),
El('i', { class: 'close' }, 'x' )
El('i', { className: 'close' }, 'x' )
));
this.ui.chipbox.classList.remove('hide');
@@ -601,7 +601,7 @@ export class DatePicker {
if (this.opts.setTime) {
form = El('form', { novalidate: true, class: 'sp-form' });
form = El('form', { novalidate: true, className: 'sp-form' });
Render.makeUiElements(Ut.objVal(this.widget.form[ 'hours' ]), form);
@@ -622,8 +622,8 @@ export class DatePicker {
}
else {
form = El('div', {},
El('a', { class: 'cmd-unset' },
El('i', { class: 'fas fa-calendar-xmark fz26 color-carbon' })
El('a', { className: 'cmd-unset' },
El('i', { className: 'fas fa-calendar-xmark fz26 color-carbon' })
)
);
}
@@ -867,9 +867,9 @@ export class DatePicker {
// Multiple values
if (this.opts.multiple && this.opts.chipbox) {
this.ui.chipbox.append( El('div', { class: 'sp-chip', 'data-id': date },
this.ui.chipbox.append( El('div', { className: 'sp-chip', 'data-id': date },
El('span', {}, this.#getFormattedDate(date, time, this.opts.dateFormat)),
El('i', { class: 'close' }, 'x')
El('i', { className: 'close' }, 'x')
));
this.ui.chipbox.classList.remove('hide');
@@ -975,7 +975,7 @@ export class DatePicker {
for (let i = 1; i <= this.totalDays; i++) {
let cell = this.ui.tbody.appendChild( El('div', { class: 'dp-day' }, i) );
let cell = this.ui.tbody.appendChild( El('div', { className: 'dp-day' }, i) );
if (i == 1) {
cell.style.gridColumnStart = colStart;
@@ -1005,9 +1005,9 @@ export class DatePicker {
if (this.opts.multiple && this.opts.chipbox) {
this.ui.chipbox.append( El('div', { class: 'sp-chip', 'data-id': date },
this.ui.chipbox.append( El('div', { className: 'sp-chip', 'data-id': date },
El('span', {}, this.#getFormattedDate(date, checked, this.opts.dateFormat)),
El('i', { class: 'close' }, 'x' )
El('i', { className: 'close' }, 'x' )
));
this.ui.chipbox.classList.remove('hide');
src/widgets/dialog/Dialog.js
+6 -6
View File
@@ -45,13 +45,13 @@ export class Dialog {
*/
create() {
let dialogBody = El('div', { class: 'dialog-body' });
let dialogBody = El('div', { className: 'dialog-body' });
this.ui = El('div', { class: 'sp-dialog' },
El('div', { class: 'dialog-header' },
El('span', { class: 'dialog-title' }, this.opts.title ),
El('a', { class: 'ic-close' },
El('i', { class: 'fas fa-times' })
this.ui = El('div', { className: 'sp-dialog' },
El('div', { className: 'dialog-header' },
El('span', { className: 'dialog-title' }, this.opts.title ),
El('a', { className: 'ic-close' },
El('i', { className: 'fas fa-times' })
)
),
dialogBody
src/widgets/dropdown/Dropdown.js
+3 -3
View File
@@ -37,7 +37,7 @@ export class Dropdown {
*/
create() {
this.ui = El('div', { class: 'sp-dropdown hide' });
this.ui = El('div', { className: 'sp-dropdown hide' });
if (this.opts.cls) {
this.ui.classList.add(this.opts.cls);
@@ -53,8 +53,8 @@ export class Dropdown {
this.opts.items.forEach(item => {
this.items.push(
list.appendChild( El('li', { class: 'color-'+ (item.color || 'black'), 'data-id': item.id },
(item.icon ? El('i', { class: 'fa fa-'+ item.icon }) : null),
list.appendChild( El('li', { className: 'color-'+ (item.color || 'black'), 'data-id': item.id },
(item.icon ? El('i', { className: 'fa fa-'+ item.icon }) : null),
item.name
))
);
src/widgets/gallery/Gallery.js
-71
View File
@@ -1,71 +0,0 @@
import './gallery.css';
import { Ut } from '../../utils/Ut';
import { El } from '../../utils/dom';
import { Lightbox } from '../lightbox';
////////////////////
// Gallery
////////////////////
export class Gallery {
/**
* Gallery Constructor
*/
constructor(target, opts, events) {
this.target = target;
this.events = events || {};
if (this.target.dxData('gallery')) {
return;
}
this.target.dxData('gallery', this);
this.opts = { ... {
files : [],
}, ... opts };
if (!Ut.isSet(this.opts.dir)) {
return;
}
this.create();
}
/**
* Gallery Create Ui
*/
create() {
let that = this;
this.ui = El('div', { class: 'sp-gallery' });
Ut.each(this.opts.files, function(src) {
that.ui.append( El('a', { href: that.opts.dir +'/' + src.replace('0_', '1_') },
El('img', { src: that.opts.dir +'/' + src })
));
});
new Lightbox(this.ui);
this.target.dxHtml(this.ui);
Ut.trigger(that.events.init, this);
}
/**
* Gallery, Destroy
*/
destroy() {
this.ui.remove();
this.target.dxRemoveData('gallery');
Ut.trigger(that.events.destroy, this);
}
}
src/widgets/gallery/gallery.css
-120
View File
@@ -1,120 +0,0 @@
/* Gallery UI */
.sp-gallery {
display: flex;
flex-wrap: wrap;
margin: 16px 0;
}
.sp-gallery.sp-file {
margin: 0;
}
.sp-gallery a {
background-color: #eee;
width: 85px;
height: 85px;
display: flex;
justify-content: center;
align-items: center;
margin: 1px;
position: relative;
transition: all 0.3s ease;
}
.sp-gallery a.loading::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB2aWV3Qm94PSIwIDAgMjIgMjIiPjxnIGZpbGw9IiMyODMwM2YiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMjgzMDNmNDAiIGQ9Ik0xMSAuMjVhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDAgMS0xLjUgMFYxQS43NS43NSAwIDAgMSAxMSAuMjV6bTAgMTdhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDAgMS0xLjUgMHYtM2EuNzUuNzUgMCAwIDEgLjc1LS43NXpNMy4zOTggMy4zOThhLjc1Ljc1IDAgMCAxIDEuMDYxIDBMNi41OCA1LjUyYS43NS43NSAwIDEgMS0xLjA2IDEuMDZMMy4zOTggNC40NmEuNzUuNzUgMCAwIDEgMC0xLjA2ek0xNS40MiAxNS40MmEuNzUuNzUgMCAwIDEgMS4wNiAwbDIuMTIxIDIuMTJhLjc1Ljc1IDAgMCAxLTEuMDYgMS4wNjFMMTUuNDIgMTYuNDhhLjc1Ljc1IDAgMCAxIDAtMS4wNnpNMjEuNzUgMTFhLjc1Ljc1IDAgMCAxLS43NS43NWgtM2EuNzUuNzUgMCAwIDEgMC0xLjVoM2EuNzUuNzUgMCAwIDEgLjc1Ljc1em0tMTcgMGEuNzUuNzUgMCAwIDEtLjc1Ljc1SDFhLjc1Ljc1IDAgMCAxIDAtMS41aDNhLjc1Ljc1IDAgMCAxIC43NS43NXoiIGRhdGEtb3JpZ2luYWw9IiMyODMwM2Y0MCIvPjxwYXRoIGQ9Ik0xOC42MDEgMy4zOThhLjc1Ljc1IDAgMCAxIDAgMS4wNjFsLTIuMTIgMi4xMjFhLjc1Ljc1IDAgMCAxLTEuMDYyLTEuMDZsMi4xMjItMi4xMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMHoiIGRhdGEtb3JpZ2luYWw9IiMyODMwM2YiLz48cGF0aCBmaWxsPSIjMjgzMDNmNDAiIGQ9Ik02LjU4IDE1LjQyYS43NS43NSAwIDAgMSAwIDEuMDZsLTIuMTIgMi4xMjFhLjc1Ljc1IDAgMSAxLTEuMDYxLTEuMDZMNS41MiAxNS40MmEuNzUuNzUgMCAwIDEgMS4wNiAweiIgZGF0YS1vcmlnaW5hbD0iIzI4MzAzZjQwIi8+PC9nPjwvc3ZnPg==);
width: 45px;
height: 45px;
background-size: contain;
z-index: 1;
animation:load-roto 1.2s infinite linear;
}
.sp-gallery a:hover {
opacity: 0.9;
}
.sp-gallery a.selected {
opacity: 0.3;
}
.sp-gallery a img {
display:block;
max-width: 78px;
max-height: 78px;
}
.sp-gallery .file-label {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.sp-gallery .file-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
text-align: center;
padding: 0 3px;
font-size: 11px;
}
.sp-gallery .file-icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTE1LjI4MyA1MTUuMjgzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNNDAwLjc3NSA1MTUuMjgzSDExNC41MDdjLTMwLjU4NCAwLTU5LjMzOS0xMS45MTEtODAuOTY4LTMzLjU0QzExLjkxMSA0NjAuMTE3IDAgNDMxLjM2MSAwIDQwMC43NzV2LTI4LjYyOGMwLTE1LjgxMSAxMi44MTYtMjguNjI4IDI4LjYyNy0yOC42MjhzMjguNjI3IDEyLjgxNyAyOC42MjcgMjguNjI4djI4LjYyOGMwIDE1LjI5MyA1Ljk1NiAyOS42NyAxNi43NjggNDAuNDgzIDEwLjgxNSAxMC44MTQgMjUuMTkyIDE2Ljc3MSA0MC40ODUgMTYuNzcxaDI4Ni4yNjhjMTUuMjkyIDAgMjkuNjY5LTUuOTU3IDQwLjQ4My0xNi43NzEgMTAuODE0LTEwLjgxNSAxNi43NzEtMjUuMTkyIDE2Ljc3MS00MC40ODN2LTI4LjYyOGMwLTE1LjgxMSAxMi44MTYtMjguNjI4IDI4LjYyNi0yOC42MjhzMjguNjI4IDEyLjgxNyAyOC42MjggMjguNjI4djI4LjYyOGMwIDMwLjU4NC0xMS45MTEgNTkuMzM4LTMzLjU0IDgwLjk2OC0yMS42MjkgMjEuNjI5LTUwLjM4NCAzMy41NC04MC45NjggMzMuNTR6TTI1Ny42NDEgNDAwLjc3NGEyOC41MzggMjguNTM4IDAgMCAxLTE5Ljk5OC04LjE0MmwtLjAwMi0uMDAyLS4wNTctLjA1Ni0uMDE2LS4wMTZjLS4wMTYtLjAxNC0uMDMtLjAyOS0uMDQ1LS4wNDRsLS4wMjktLjAyOWEuODkyLjg5MiAwIDAgMC0uMDMyLS4wMzFsLS4wNjItLjA2Mi0xMTQuNTA4LTExNC41MDljLTExLjE3OS0xMS4xNzktMTEuMTc5LTI5LjMwNSAwLTQwLjQ4NSAxMS4xNzktMTEuMTc5IDI5LjMwNi0xMS4xOCA0MC40ODUgMGw2NS42MzggNjUuNjM4VjI4LjYyN0MyMjkuMDE0IDEyLjgxNiAyNDEuODMgMCAyNTcuNjQxIDBzMjguNjI4IDEyLjgxNiAyOC42MjggMjguNjI3djI3NC40MDhsNjUuNjM3LTY1LjYzN2MxMS4xNzgtMTEuMTc5IDI5LjMwNy0xMS4xNzkgNDAuNDg1IDAgMTEuMTc5IDExLjE3OSAxMS4xNzkgMjkuMzA2IDAgNDAuNDg1TDI3Ny44ODMgMzkyLjM5bC0uMDYyLjA2Mi0uMDMyLjAzMS0uMDI5LjAyOWMtLjAxNC4wMTYtLjAzLjAzLS4wNDQuMDQ0bC0uMDE3LjAxNmExLjQ3OSAxLjQ3OSAwIDAgMS0uMDU2LjA1NmwtLjAwMi4wMDJjLS4zMTUuMzA3LS42MzQuNjA1LS45Ni44OTVhMjguNDQxIDI4LjQ0MSAwIDAgMS03Ljg5IDQuOTk1bC0uMDI4LjAxMmMtLjAxMS4wMDQtLjAyLjAxLS4wMzEuMDEzYTI4LjUgMjguNSAwIDAgMS0xMS4wOTEgMi4yMjl6IiBmaWxsPSIjMzYzNjM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PC9nPjwvc3ZnPg==);
width: 26px;
height: 26px;
margin-top: 5px;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.sp-gallery a .delete-file {
position:absolute;
right: 3px;
bottom: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 1px solid #fff;
}
.sp-gallery a .delete-file::after {
display: block;
content: '';
width: 10px;
height: 10px;
background-position:center;
background-repeat:no-repeat;
display: flex;
justify-content: center;
align-items: center;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzIwLjU5MSAzMjAuNTkxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNMzAuMzkxIDMxOC41ODNhMzAuMzcgMzAuMzcgMCAwIDEtMjEuNTYtNy4yODhjLTExLjc3NC0xMS44NDQtMTEuNzc0LTMwLjk3MyAwLTQyLjgxN0wyNjYuNjQzIDEwLjY2NWMxMi4yNDYtMTEuNDU5IDMxLjQ2Mi0xMC44MjIgNDIuOTIxIDEuNDI0IDEwLjM2MiAxMS4wNzQgMTAuOTY2IDI4LjA5NSAxLjQxNCAzOS44NzVMNTEuNjQ3IDMxMS4yOTVhMzAuMzY2IDMwLjM2NiAwIDAgMS0yMS4yNTYgNy4yODh6IiBmaWxsPSIjZmY0MTM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0iTTI4Ny45IDMxOC41ODNhMzAuMzcgMzAuMzcgMCAwIDEtMjEuMjU3LTguODA2TDguODMgNTEuOTYzQy0yLjA3OCAzOS4yMjUtLjU5NSAyMC4wNTUgMTIuMTQzIDkuMTQ2YzExLjM2OS05LjczNiAyOC4xMzYtOS43MzYgMzkuNTA0IDBsMjU5LjMzMSAyNTcuODEzYzEyLjI0MyAxMS40NjIgMTIuODc2IDMwLjY3OSAxLjQxNCA0Mi45MjItLjQ1Ni40ODctLjkyNy45NTgtMS40MTQgMS40MTRhMzAuMzY4IDMwLjM2OCAwIDAgMS0yMy4wNzggNy4yODh6IiBmaWxsPSIjZmY0MTM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PC9nPjwvc3ZnPg==);
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s;
}
.sp-gallery a .delete-file:hover {
opacity: 0.85;
}
src/widgets/gallery/index.js
-1
View File
@@ -1 +0,0 @@
export { Gallery } from './Gallery';
src/widgets/hours/Hours.js
+2 -2
View File
@@ -43,9 +43,9 @@ export class Hours {
*/
makeUi() {
let form = El('form', { novalidate: true, class: 'sp-form' });
let form = El('form', { novalidate: true, className: 'sp-form' });
this.ui = El('div', { class: 'sp-hours' }, form);
this.ui = El('div', { className: 'sp-hours' }, form);
Render.makeUiElements(Ut.objVal(this.widget.form).children, form);
src/widgets/msg/Msg.js
+8 -8
View File
@@ -43,7 +43,7 @@ export class Msg {
notif.ui.classList.add(`${opts.type}-out`);
};
notif.ui = document.body.appendChild(El('div', { class: `sp-snackbar ui-color-${opts.color} ${opts.type}-in` }, msg));
notif.ui = document.body.appendChild(El('div', { className: `sp-snackbar ui-color-${opts.color} ${opts.type}-in` }, msg));
notif.ui.addEventListener('animationend', _ => {
@@ -86,8 +86,8 @@ export class Msg {
if (!nBarEL) {
nBarEL = El('div', { class: 's11 m6 l4 xl2 sp-nbar hide' },
icon ? El('i', { class: 'fas fa-'+ icon }) : null,
nBarEL = El('div', { className: 's11 m6 l4 xl2 sp-nbar hide' },
icon ? El('i', { className: 'fas fa-'+ icon }) : null,
El('span', {}, message)
);
@@ -110,11 +110,11 @@ export class Msg {
let widget = Boot.intData.widget.confirm.children;
const ui = El('div', { class: 'sp-confirm slide-in' },
El('div', { class: 'text' }, msg),
El('div', { class: 'buttons' },
El('button', { type: 'button', class: 'sp-button btn-cancel' }, widget.button.no),
El('button', { type: 'button', class: 'sp-button btn-ok' }, El('i', { class: 'fas fa-check' }), widget.button.yes),
const ui = El('div', { className: 'sp-confirm slide-in' },
El('div', { className: 'text' }, msg),
El('div', { className: 'buttons' },
El('button', { type: 'button', className: 'sp-button btn-cancel' }, widget.button.no),
El('button', { type: 'button', className: 'sp-button btn-ok' }, El('i', { className: 'fas fa-check' }), widget.button.yes),
)
);
src/widgets/number-picker/NumberPicker.js
+4 -4
View File
@@ -51,10 +51,10 @@ export class NumberPicker {
*/
create() {
this.ui = El('div', { class: 'sp-numberpicker' },
El('a', { class: 'np-rem' }, El('i', { class: 'fas fa-minus' })),
El('span', { class: 'np-val' }, this.val),
El('a', { class: 'np-add' }, El('i', { class: 'fas fa-plus' }))
this.ui = El('div', { className: 'sp-numberpicker' },
El('a', { className: 'np-rem' }, El('i', { className: 'fas fa-minus' })),
El('span', { className: 'np-val' }, this.val),
El('a', { className: 'np-add' }, El('i', { className: 'fas fa-plus' }))
);
this.target.after(this.ui);
src/widgets/overlay/Overlay.js
+3 -3
View File
@@ -13,7 +13,7 @@ export class Overlay {
static showLoader() {
if (!Overlay.loaderEl) {
Overlay.loaderEl = document.body.appendChild(El('div', { class: 'sp-loader' }));
Overlay.loaderEl = document.body.appendChild(El('div', { className: 'sp-loader' }));
}
else {
Overlay.loaderEl.classList.remove('hide');
@@ -35,7 +35,7 @@ export class Overlay {
if (!ui) {
if (!Overlay.modalEl ) {
Overlay.modalEl = document.body.appendChild( El('div', { class: 'sp-modal' } ));
Overlay.modalEl = document.body.appendChild( El('div', { className: 'sp-modal' } ));
return;
}
@@ -44,7 +44,7 @@ export class Overlay {
return;
}
ui.before( El('div', { class: 'sp-modal loaded show-bg' }) );
ui.before( El('div', { className: 'sp-modal loaded show-bg' }) );
}
/**
src/widgets/overlay/overlay.css
+5
View File
@@ -28,6 +28,11 @@
z-index: 101;
}
@keyframes load-roto {
0% { transform:rotateZ(0deg); }
100%{ transform:rotateZ(360deg); }
}
.sp-modal.show-bg {
animation: show_bg 0.2s;
animation-fill-mode: forwards;
src/widgets/pin-box/PinBox.js
+1 -1
View File
@@ -22,7 +22,7 @@ export class PinBox {
digits: this.target.dataset.pinboxDigits || 6,
}, ... opts };
this.ui = El('div', { class: 'sp-pinbox' });
this.ui = El('div', { className: 'sp-pinbox' });
this.target.after(this.ui);
src/widgets/popover/Popover.js
+19 -19
View File
@@ -1,7 +1,7 @@
import './popover.css';
import { Ut } from '../../utils/Ut';
import { El } from "../../utils/dom";
import { El, $ } from "../../utils/dom";
import { Stack } from '../../core/Stack';
import { Overlay } from '../overlay';
@@ -10,7 +10,7 @@ export class Popover {
/**
* Popover, Constructor
*/
constructor(target, content, opts, events) {
constructor(target, content, opts) {
this.target = target;
@@ -29,7 +29,7 @@ export class Popover {
closeBtn : false
}, ... opts };
this.events = events || {};
Stack.widgets.Popover ??= new Map();
if (!this.opts.multiple) {
// Destroy old instances
@@ -45,10 +45,7 @@ export class Popover {
this.setEvents();
if (this.opts.timeout !== false) {
this.tm = setTimeout(function() {
this.destroy();
}, this.opts.timeout, this);
this.tm = setTimeout(_ => this.destroy(), this.opts.timeout);
}
}
@@ -57,13 +54,12 @@ export class Popover {
*/
setPosition() {
let offset = this.target.dxOffset(),
const offset = this.target.dxOffset(),
width = this.target.offsetWidth,
height = this.target.offsetHeight,
width = this.target.offsetWidth,
centerX = offset.left - (this.ui.offsetWidth / 2) + (width / 2),
centerY = offset.top - this.ui.offsetHeight - 16;
centerX = offset.left - (this.ui.offsetWidth / 2) + (width / 2),
centerY = offset.top - this.ui.offsetHeight - 16;
this.ui.dxCss({ left: centerX + 'px', top: centerY + 'px' });
}
@@ -73,17 +69,21 @@ export class Popover {
*/
create() {
this.ui = El('div', { class: 'sp-popover' } );
this.ui = El('div', { className: 'sp-popover' } );
if (this.opts.closeBtn) {
this.ui.append( El('i', { class: 'fas fa-times ic-close' }) );
if (this.opts.color) {
this.ui.classList.add(`ui-color-${this.opts.color}`);
}
let content = El('div', { class: 'po-content' });
if (this.opts.closeBtn) {
this.ui.append( El('i', { className: 'fas fa-times ic-close' }) );
}
let content = El('div', { className: 'po-content' });
this.ui.append(content);
if (isStr(content)) {
if (Ut.isStr(content)) {
content.dxHtml(this.content);
}
else {
@@ -96,7 +96,7 @@ export class Popover {
Overlay.showModal(this.ui);
}
Ut.trigger(this.events.init, this, this.ui);
Ut.trigger(this.opts.onInit, this);
}
/**
@@ -168,7 +168,7 @@ export class Popover {
Stack.delete(this);
Ut.trigger(this.events.destroy, this);
Ut.trigger(this.opts.onDestroy, this);
}
}
src/widgets/popover/index.js
+1 -1
View File
@@ -1 +1 @@
export { Popover } from './Popover';
export { Popover, Alert } from './Popover';
src/widgets/popover/popover.css
+44
View File
@@ -32,7 +32,51 @@
background-color: #fff;
transform: rotate(45deg);
position: relative;
}
.sp-popover.ui-color-red::after {
background-color: var(--red);
}
.sp-popover.ui-color-blue::after {
background-color: var(--blue);
}
.sp-popover.ui-color-green::after {
background-color: var(--green);
}
.sp-popover.ui-color-yellow::after {
background-color: var(--yellow);
}
.sp-popover.ui-color-gray::after {
background-color: var(--gray);
}
.sp-popover.ui-color-black::after {
background-color: var(--black);
}
.sp-popover.ui-color-carbon::after {
background-color: var(--carbon);
}
.sp-popover.ui-color-orange::after {
background-color: var(--orange);
}
.sp-popover.ui-color-navy::after {
background-color: var(--navy);
}
.sp-popover.ui-color-purple::after {
background-color: var(--purple);
}
.sp-popover.ui-color-lime::after {
background-color: var(--lime);
}
.sp-popover .sp-button {
src/widgets/popup/Popup.js
+3 -3
View File
@@ -96,15 +96,15 @@ export class Popup {
if (this.opts.toolbar) {
if (!this.card.toolbar) {
this.card.toolbar = El('div', { class: 'top-bar-inner' });
this.card.ui.prepend(El('div', { class: 'top-bar' }, this.card.toolbar));
this.card.toolbar = El('div', { className: 'top-bar-inner' });
this.card.ui.prepend(El('div', { className: 'top-bar' }, this.card.toolbar));
}
this.card.toolbar.append(this.opts.toolbar);
}
if (this.card.toolbar) {
this.card.toolbar.append( El('a', { class: 'ic-close' }) );
this.card.toolbar.append( El('a', { className: 'ic-close' }) );
}
this.card.ui.classList.add('sp-popup');
src/widgets/scheduler/Scheduler.js
+13 -13
View File
@@ -49,18 +49,18 @@ export class Scheduler {
*/
renderContainer() {
this.ui.wrapper = this.target.appendChild( El('div', { class: 'sp-scheduler' }) );
this.ui.wrapper = this.target.appendChild( El('div', { className: 'sp-scheduler' }) );
this.ui.header = this.ui.wrapper.appendChild(
El('div', { class: 'header-bar' },
El('span', { class: 'label-title' }, this.opts.title)
El('div', { className: 'header-bar' },
El('span', { className: 'label-title' }, this.opts.title)
)
)
this.ui.scrollbar = this.ui.wrapper.appendChild( El('div', { class: 'sp-scrollbar' }) );
this.ui.container = this.ui.scrollbar.appendChild( El('div', { class: 'scale-container' }) );
this.ui.scale = this.ui.container.appendChild( El('div', { class: 'scale-holder' }) );
this.ui.events = this.ui.container.appendChild( El('div', { class: 'scale-events' }) );
this.ui.scrollbar = this.ui.wrapper.appendChild( El('div', { className: 'sp-scrollbar' }) );
this.ui.container = this.ui.scrollbar.appendChild( El('div', { className: 'scale-container' }) );
this.ui.scale = this.ui.container.appendChild( El('div', { className: 'scale-holder' }) );
this.ui.events = this.ui.container.appendChild( El('div', { className: 'scale-events' }) );
let remSlots = Math.floor(this.opts.startTime[1] / this.opts.unitTime);
@@ -78,7 +78,7 @@ export class Scheduler {
}
this.ui.scale.append(
El('div', { class: 'scale-hour', style: 'height: '+ height + 'px;' },
El('div', { className: 'scale-hour', style: 'height: '+ height + 'px;' },
i.toString().padStart(2, '0') + ':' + mins.toString().padStart(2, '0')
)
);
@@ -92,7 +92,7 @@ export class Scheduler {
for (; n < this.slots * (this.opts.endTime[0] - this.opts.startTime[0]) ; n++) {
uiSlot = El('div', { class: 'time-slot', style: 'height: '+ this.opts.cellSize + 'px;' });
uiSlot = El('div', { className: 'time-slot', style: 'height: '+ this.opts.cellSize + 'px;' });
uiSlot.dataset.time = hours.toString().padStart(2, '0') + ':' + mins.toString().padStart(2, '0');
@@ -113,7 +113,7 @@ export class Scheduler {
for (n = 0; n < remSlots; n++) {
uiSlot = El('div', { class: 'time-slot', style: 'height: '+ this.opts.cellSize + 'px;' });
uiSlot = El('div', { className: 'time-slot', style: 'height: '+ this.opts.cellSize + 'px;' });
uiSlot.dataset.time = hours.toString().padStart(2, '0') + ':' + mins.toString().padStart(2, '0');
@@ -276,7 +276,7 @@ export class Scheduler {
showLabel() {
if (!this.ui.label) {
this.ui.label = this.ui.events.appendChild( El('div', { class: 'time-label' }) );
this.ui.label = this.ui.events.appendChild( El('div', { className: 'time-label' }) );
}
this.ui.label.textContent = this.selectedTime.start + ' - ' + this.selectedTime.end + ' ( ' + this.getTimeFormat() + ' )';
@@ -342,8 +342,8 @@ export class Scheduler {
});
let evBox = this.ui.events.appendChild(
El('div', { class: 'ev-box' },
El('div', { class: 'ev-content' }, content)
El('div', { className: 'ev-box' },
El('div', { className: 'ev-content' }, content)
)
);
src/widgets/select-box/SelectBox.js
+3 -3
View File
@@ -16,10 +16,10 @@ export class SelectBox {
this.target = target;
this.labels = El('div', { class: 'labels hide' });
this.choices = El('div', { class: 'choices' });
this.labels = El('div', { className: 'labels hide' });
this.choices = El('div', { className: 'choices' });
this.ui = El('div', { class: 'sp-form-control sp-select-box' },
this.ui = El('div', { className: 'sp-form-control sp-select-box' },
this.choices,
this.labels
);
src/widgets/table/Table.js
+19 -19
View File
@@ -114,14 +114,14 @@ export class Table {
}
makeInfoLabel() {
this.info = El('div', { class: 'sp-table-info' });
this.info = El('div', { className: 'sp-table-info' });
this.ui.append(this.info);
}
// Make UI container
makeUiTable() {
this.ui = El('div', { class: 'sp-table-ui' });
this.ui = El('div', { className: 'sp-table-ui' });
this.target.append(this.ui);
}
@@ -131,7 +131,7 @@ export class Table {
let that = this;
this.filterForm = El('form', { novalidate: true, class: 'sp-form filter-main' });
this.filterForm = El('form', { novalidate: true, className: 'sp-form filter-main' });
Render.makeUiElements(Ut.objVal(this.opts.filter).children, this.filterForm);
@@ -162,7 +162,7 @@ export class Table {
makeToolbarHeader() {
this.toolbarHeader = El('div', { class: 'sp-toolbar toolbar-header' + (this.opts.toolbar_header.cls ? ' ' + this.opts.toolbar_header.cls : '') });
this.toolbarHeader = El('div', { className: 'sp-toolbar toolbar-header' + (this.opts.toolbar_header.cls ? ' ' + this.opts.toolbar_header.cls : '') });
Render.makeUiElements(Ut.objVal(this.opts.toolbar_header).children, this.toolbarHeader);
@@ -175,7 +175,7 @@ export class Table {
makePagination() {
this.paginationEl = this.ui.appendChild(El('div', { class: 'sp-pagination' }));
this.paginationEl = this.ui.appendChild(El('div', { className: 'sp-pagination' }));
this.paginationEl.dxOn('click', 'a', (e, t) => {
@@ -211,7 +211,7 @@ export class Table {
makeToolbarFooter() {
this.toolbarFooter = El('div', { class: 'sp-toolbar toolbar-footer' + (this.opts.toolbar_footer.cls ? ' ' + this.opts.toolbar_footer.cls : '') });
this.toolbarFooter = El('div', { className: 'sp-toolbar toolbar-footer' + (this.opts.toolbar_footer.cls ? ' ' + this.opts.toolbar_footer.cls : '') });
Render.makeUiElements(Ut.objVal(this.opts.toolbar_footer).children, this.toolbarFooter);
@@ -223,7 +223,7 @@ export class Table {
// Make new ui table
makeNewTable() {
this.table = El('div', { class: 'sp-table layout-' + this.opts.layout + (!this.setHeader ? ' no-header' : '') + (this.opts.cls ? ' ' + this.opts.cls : '')});
this.table = El('div', { className: 'sp-table layout-' + this.opts.layout + (!this.setHeader ? ' no-header' : '') + (this.opts.cls ? ' ' + this.opts.cls : '')});
this.ui.append(this.table);
}
@@ -237,13 +237,13 @@ export class Table {
let header = this.opts.header;
let thead = El('div', { class: 'thead' + (header.cls ? ' ' + header.cls : '') });
let thead = El('div', { className: 'thead' + (header.cls ? ' ' + header.cls : '') });
let n = 1;
for (; n < this.data.items[0].length; n++) {
let cell = header.cell ? (header.cell[ n - 1 ] || {}) : {};
thead.append( El('div', { class: 'th' + (cell.cls ? ' ' + cell.cls : '') }, (cell.text || '') ) );
thead.append( El('div', { className: 'th' + (cell.cls ? ' ' + cell.cls : '') }, (cell.text || '') ) );
}
this.table.prepend(thead);
@@ -271,9 +271,9 @@ export class Table {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { class: 't-col' });
let column = El('div', { className: 't-col' });
row.append( El('div', { class: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
row.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
@@ -283,7 +283,7 @@ export class Table {
if (n == 1 && that.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { class: 'handle' }) );
column.prepend( El('i', { className: 'handle' }) );
}
}
}
@@ -293,7 +293,7 @@ export class Table {
this.data.items.forEach((data, i) => {
let tbody = El('div', {
class: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''),
className: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''),
'data-id': data[0],
'data-pos': i
});
@@ -304,9 +304,9 @@ export class Table {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { class: 't-col' });
let column = El('div', { className: 't-col' });
tbody.append( El('div', { class: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
@@ -316,7 +316,7 @@ export class Table {
if (n == 1 && that.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { class: 'handle' }) );
column.prepend( El('i', { className: 'handle' }) );
}
if (that.mode == Table.PREPEND) {
@@ -515,7 +515,7 @@ export class Table {
pg_btn = El('a', {
'data-id': dat[0],
class: (dat[2] ? 'disabled' : '')}, dat[1]
className: (dat[2] ? 'disabled' : '')}, dat[1]
);
this.paginationEl.append(pg_btn);
@@ -524,11 +524,11 @@ export class Table {
else if (this.data.before || this.data.after) { // update UI
if (this.data.before) {
this.paginationEl.append( El('a', { 'data-id': this.data.before, class: 'btn-before' }, '&lt') );
this.paginationEl.append( El('a', { 'data-id': this.data.before, className: 'btn-before' }, '&lt') );
}
if (this.data.after) {
this.paginationEl.append( El('a', { 'data-id': this.data.after, class: 'btn-after' }, '&gt;') );
this.paginationEl.append( El('a', { 'data-id': this.data.after, className: 'btn-after' }, '&gt;') );
}
}
}
src/widgets/two-datepicker/TwoDatepicker.js
+3 -3
View File
@@ -61,10 +61,10 @@ export class TwoDatePicker {
const that = this;
this.ui = El('div', { class: 'sp-two-datepicker' });
this.ui = El('div', { className: 'sp-two-datepicker' });
let firstCol = El('div', { class: 'ui-col' });
let secondCol = El('div', { class: 'ui-col' });
let firstCol = El('div', { className: 'ui-col' });
let secondCol = El('div', { className: 'ui-col' });
this.ui.append(firstCol);
this.ui.append(secondCol);
src/widgets/uploader/Uploader.js
+49 -61
View File
@@ -5,19 +5,12 @@ import { El } from '../../utils/dom';
import { Rt } from '../../core/Rt';
import { Rc } from '../../core/Rc';
import { Boot } from '../../core/Boot';
import { Msg } from '../msg/';
import { Msg } from '../msg';
import { Lightbox } from '../lightbox';
import { Alert } from '../popover';
export class Uploader {
static FILE_SIZE_EXC_SINGLE = 1020;
static FILE_SIZE_EXC_MULTI = 1030;
static INVALID_EXT_SINGLE = 1040;
static INVALID_EXT_MULTI = 1050;
static IMG_LOW_RES_SINGLE = 1060;
static IMG_LOW_RES_MULTI = 1070;
static IMG_COUNT_EXC = 1080;
/**
* Uploader, Constructor
*/
@@ -111,16 +104,16 @@ export class Uploader {
*/
makeUi() {
this.ui = El('div', { class: 'sp-file sp-gallery' });
this.ui = El('div', { className: 'sp-file sp-gallery' });
this.box = El('div', { class: 'sp-input-file' },
El('i', { class: 'fas fa-cloud-upload-alt' }),
El('span', { class: 'ic-label' }, this.widget.label.upload_file),
El('div', { class: 's-loader' },
El('div', { class: 'l-bar' }),
El('div', { class: 'l-bar' }),
El('div', { class: 'l-bar' }),
El('div', { class: 'l-bar' })
this.box = El('div', { className: 'sp-input-file' },
El('i', { className: 'fas fa-cloud-upload-alt' }),
El('span', { className: 'ic-label' }, this.widget.label.upload_file),
El('div', { className: 's-loader' },
El('div', { className: 'l-bar' }),
El('div', { className: 'l-bar' }),
El('div', { className: 'l-bar' }),
El('div', { className: 'l-bar' })
)
);
@@ -171,7 +164,7 @@ export class Uploader {
// Check count files limits
if (this.router.multiple && this.router.count_limit && (this.files.length + this.targetFiles.length) > this.router.count_limit) {
new Alert(this.target, this.errors.imgCountExc.replace('%s', this.router.count_limit));
new Alert(this.target, this.errors.imgCountExc.replace('{count_limit}', this.router.count_limit));
this.unload();
@@ -213,7 +206,7 @@ export class Uploader {
// Check file size
if ((value.size / 1024 / 1024) > this.router.size_limit) {
error = (that.targetFiles.length > 1 ? this.errors.fileSizeExcMulti : this.errors.fileSizeExcSingle).replace('%s', this.router.size_limit);
error = this.errors[`fileSizeExc${that.targetFiles.length > 1 ? 'Multi' : 'Single'}`].replace('{size_limit}', this.router.size_limit);
new Alert(this.target, error);
@@ -364,18 +357,18 @@ export class Uploader {
*/
uploadFileRequest() {
let that = this;
const that = this;
Rt.request.post(that.opts.routerUri + '/' + this.target.name, this.vars, {
done: (rs, data) => {
done: (rcode, data) => {
switch (rs) {
switch (rcode) {
case Rc.DONE:
if (!data.files) {
console.log('Invalid Response!');
Boot.log('Invalid Response!');
return;
}
@@ -391,7 +384,7 @@ export class Uploader {
}
if (data.over_count) {
new Alert(that.target, that.errors.imgCountExc.replace('%s', that.router.count_limit));
new Alert(that.target, that.errors.imgCountExc.replace('{count_limit}', that.router.count_limit));
}
if (that.opts.preview) {
@@ -402,34 +395,29 @@ export class Uploader {
that.target.dxTrigger('done', data, that);
break;
case Uploader.FILE_SIZE_EXC_SINGLE:
new Alert(that.target, this.errors.fileSizeExcSingle.replace('%s', this.router.size_limit));
case Rc.TOO_LARGE:
new Alert(
that.target,
that.errors[`fileSizeExc${that.files.length > 1 ? 'Multi' : 'Single'}`].replace('{size_limit}', that.router.size_limit)
);
break;
case Uploader.FILE_SIZE_EXC_MULTI:
new Alert(that.target, this.errors.fileSizeExcMulti.replace('%s', this.router.size_limit));
break;
case Uploader.INVALID_EXT_SINGLE:
new Alert(that.target, this.errors.invalidExtSingle);
break;
case Uploader.INVALID_EXT_MULTI:
new Alert(that.target, this.errors.invalidExtMulti);
break;
case Uploader.IMG_LOW_RES_SINGLE:
new Alert(that.target, this.errors.imgLowResSingle.replace('%s', that.router.img.req_size));
break;
case Uploader.IMG_LOW_RES_MULTI:
new Alert(that.target, this.errors.imgLowResMulti.replace('%s', that.router.img.req_size));
case Rc.UNSUPPORTED_TYPE:
new Alert(
that.target,
that.errors[`invalidExt${that.files.length > 1 ? 'Multi' : 'Single'}`]
);
case Rc.NOT_MATCH:
new Alert(
that.target,
that.errors[`imgLowRes${that.files.length > 1 ? 'Multi' : 'Single'}`].replace('{req_size}', that.router.img.req_size,{color: 'orange'})
);
break;
}
Ut.trigger(that.events.error, rs, data);
that.target.dxTrigger('error', rs, data);
if (rcode != Rc.DONE) {
Ut.trigger(that.events.error, rcode, data);
that.target.dxTrigger('error', rcode, data);
}
that.unload();
},
@@ -467,9 +455,9 @@ export class Uploader {
if (that.isImageFile(src)) { // Multiple Files > Image Extension
thumb = El('a', { class: 'loading' },
thumb = El('a', { className: 'loading' },
El('img', { src: that.dir + '/' + src + '?' + _now }),
El('span', { class: 'delete-file' })
El('span', { className: 'delete-file' })
);
thumb.dataset.id = src;
@@ -481,11 +469,11 @@ export class Uploader {
let fileToken = src.split('/');
thumb = El('a', {},
El('span', { class: 'file-label' },
El('span', { class: 'file-name' }, fileToken[1] || 'Uknown.' + that.getFileExt(fileToken[0]) ),
El('span', { class: 'file-icon' }),
El('span', { className: 'file-label' },
El('span', { className: 'file-name' }, fileToken[1] || 'Uknown.' + that.getFileExt(fileToken[0]) ),
El('span', { className: 'file-icon' }),
),
El('span', { class: 'delete-file' })
El('span', { className: 'delete-file' })
);
thumb.dataset.id = fileToken[0];
@@ -515,9 +503,9 @@ export class Uploader {
if (!thumbs.length) {
let thumb = El('a', { class: 'loading' },
let thumb = El('a', { className: 'loading' },
El('img', { src: this.dir + '/' + filename + '?' + _now } ),
El('span', { class: 'delete-file' })
El('span', { className: 'delete-file' })
);
thumb.dataset.id = filename;
@@ -547,11 +535,11 @@ export class Uploader {
if (!thumbs.length) {
thumb = El('a', {},
El('span', { class: 'file-label' },
El('span', { class: 'file-name' }, fileToken[1] || 'Uknown.' + that.getFileExt(fileToken[0]) ),
El('span', { class: 'file-icon' }),
El('span', { className: 'file-label' },
El('span', { className: 'file-name' }, fileToken[1] || 'Uknown.' + that.getFileExt(fileToken[0]) ),
El('span', { className: 'file-icon' }),
),
El('span', { class: 'delete-file' })
El('span', { className: 'delete-file' })
);
this.ui.prepend(thumb);
src/widgets/uploader/uploader.css
+124
View File
@@ -114,3 +114,127 @@
transform: scale(1);
}
}
.sp-gallery {
display: flex;
flex-wrap: wrap;
margin: 16px 0;
}
.sp-gallery.sp-file {
margin: 0;
}
.sp-gallery a {
background-color: #eee;
width: 85px;
height: 85px;
display: flex;
justify-content: center;
align-items: center;
margin: 1px;
position: relative;
transition: all 0.3s ease;
}
.sp-gallery a.loading::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB2aWV3Qm94PSIwIDAgMjIgMjIiPjxnIGZpbGw9IiMyODMwM2YiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMjgzMDNmNDAiIGQ9Ik0xMSAuMjVhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDAgMS0xLjUgMFYxQS43NS43NSAwIDAgMSAxMSAuMjV6bTAgMTdhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDAgMS0xLjUgMHYtM2EuNzUuNzUgMCAwIDEgLjc1LS43NXpNMy4zOTggMy4zOThhLjc1Ljc1IDAgMCAxIDEuMDYxIDBMNi41OCA1LjUyYS43NS43NSAwIDEgMS0xLjA2IDEuMDZMMy4zOTggNC40NmEuNzUuNzUgMCAwIDEgMC0xLjA2ek0xNS40MiAxNS40MmEuNzUuNzUgMCAwIDEgMS4wNiAwbDIuMTIxIDIuMTJhLjc1Ljc1IDAgMCAxLTEuMDYgMS4wNjFMMTUuNDIgMTYuNDhhLjc1Ljc1IDAgMCAxIDAtMS4wNnpNMjEuNzUgMTFhLjc1Ljc1IDAgMCAxLS43NS43NWgtM2EuNzUuNzUgMCAwIDEgMC0xLjVoM2EuNzUuNzUgMCAwIDEgLjc1Ljc1em0tMTcgMGEuNzUuNzUgMCAwIDEtLjc1Ljc1SDFhLjc1Ljc1IDAgMCAxIDAtMS41aDNhLjc1Ljc1IDAgMCAxIC43NS43NXoiIGRhdGEtb3JpZ2luYWw9IiMyODMwM2Y0MCIvPjxwYXRoIGQ9Ik0xOC42MDEgMy4zOThhLjc1Ljc1IDAgMCAxIDAgMS4wNjFsLTIuMTIgMi4xMjFhLjc1Ljc1IDAgMCAxLTEuMDYyLTEuMDZsMi4xMjItMi4xMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMHoiIGRhdGEtb3JpZ2luYWw9IiMyODMwM2YiLz48cGF0aCBmaWxsPSIjMjgzMDNmNDAiIGQ9Ik02LjU4IDE1LjQyYS43NS43NSAwIDAgMSAwIDEuMDZsLTIuMTIgMi4xMjFhLjc1Ljc1IDAgMSAxLTEuMDYxLTEuMDZMNS41MiAxNS40MmEuNzUuNzUgMCAwIDEgMS4wNiAweiIgZGF0YS1vcmlnaW5hbD0iIzI4MzAzZjQwIi8+PC9nPjwvc3ZnPg==);
width: 45px;
height: 45px;
background-size: contain;
z-index: 1;
animation: load-roto 1.2s infinite linear;
}
@keyframes load-roto {
0% { transform:rotateZ(0deg); }
100%{ transform:rotateZ(360deg); }
}
.sp-gallery a:hover {
opacity: 0.9;
}
.sp-gallery a.selected {
opacity: 0.3;
}
.sp-gallery a img {
display:block;
max-width: 78px;
max-height: 78px;
}
.sp-gallery .file-label {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.sp-gallery .file-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
text-align: center;
padding: 0 3px;
font-size: 11px;
}
.sp-gallery .file-icon {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTE1LjI4MyA1MTUuMjgzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNNDAwLjc3NSA1MTUuMjgzSDExNC41MDdjLTMwLjU4NCAwLTU5LjMzOS0xMS45MTEtODAuOTY4LTMzLjU0QzExLjkxMSA0NjAuMTE3IDAgNDMxLjM2MSAwIDQwMC43NzV2LTI4LjYyOGMwLTE1LjgxMSAxMi44MTYtMjguNjI4IDI4LjYyNy0yOC42MjhzMjguNjI3IDEyLjgxNyAyOC42MjcgMjguNjI4djI4LjYyOGMwIDE1LjI5MyA1Ljk1NiAyOS42NyAxNi43NjggNDAuNDgzIDEwLjgxNSAxMC44MTQgMjUuMTkyIDE2Ljc3MSA0MC40ODUgMTYuNzcxaDI4Ni4yNjhjMTUuMjkyIDAgMjkuNjY5LTUuOTU3IDQwLjQ4My0xNi43NzEgMTAuODE0LTEwLjgxNSAxNi43NzEtMjUuMTkyIDE2Ljc3MS00MC40ODN2LTI4LjYyOGMwLTE1LjgxMSAxMi44MTYtMjguNjI4IDI4LjYyNi0yOC42MjhzMjguNjI4IDEyLjgxNyAyOC42MjggMjguNjI4djI4LjYyOGMwIDMwLjU4NC0xMS45MTEgNTkuMzM4LTMzLjU0IDgwLjk2OC0yMS42MjkgMjEuNjI5LTUwLjM4NCAzMy41NC04MC45NjggMzMuNTR6TTI1Ny42NDEgNDAwLjc3NGEyOC41MzggMjguNTM4IDAgMCAxLTE5Ljk5OC04LjE0MmwtLjAwMi0uMDAyLS4wNTctLjA1Ni0uMDE2LS4wMTZjLS4wMTYtLjAxNC0uMDMtLjAyOS0uMDQ1LS4wNDRsLS4wMjktLjAyOWEuODkyLjg5MiAwIDAgMC0uMDMyLS4wMzFsLS4wNjItLjA2Mi0xMTQuNTA4LTExNC41MDljLTExLjE3OS0xMS4xNzktMTEuMTc5LTI5LjMwNSAwLTQwLjQ4NSAxMS4xNzktMTEuMTc5IDI5LjMwNi0xMS4xOCA0MC40ODUgMGw2NS42MzggNjUuNjM4VjI4LjYyN0MyMjkuMDE0IDEyLjgxNiAyNDEuODMgMCAyNTcuNjQxIDBzMjguNjI4IDEyLjgxNiAyOC42MjggMjguNjI3djI3NC40MDhsNjUuNjM3LTY1LjYzN2MxMS4xNzgtMTEuMTc5IDI5LjMwNy0xMS4xNzkgNDAuNDg1IDAgMTEuMTc5IDExLjE3OSAxMS4xNzkgMjkuMzA2IDAgNDAuNDg1TDI3Ny44ODMgMzkyLjM5bC0uMDYyLjA2Mi0uMDMyLjAzMS0uMDI5LjAyOWMtLjAxNC4wMTYtLjAzLjAzLS4wNDQuMDQ0bC0uMDE3LjAxNmExLjQ3OSAxLjQ3OSAwIDAgMS0uMDU2LjA1NmwtLjAwMi4wMDJjLS4zMTUuMzA3LS42MzQuNjA1LS45Ni44OTVhMjguNDQxIDI4LjQ0MSAwIDAgMS03Ljg5IDQuOTk1bC0uMDI4LjAxMmMtLjAxMS4wMDQtLjAyLjAxLS4wMzEuMDEzYTI4LjUgMjguNSAwIDAgMS0xMS4wOTEgMi4yMjl6IiBmaWxsPSIjMzYzNjM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PC9nPjwvc3ZnPg==);
width: 26px;
height: 26px;
margin-top: 5px;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.sp-gallery a .delete-file {
position:absolute;
right: 3px;
bottom: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 1px solid #fff;
}
.sp-gallery a .delete-file::after {
display: block;
content: '';
width: 10px;
height: 10px;
background-position:center;
background-repeat:no-repeat;
display: flex;
justify-content: center;
align-items: center;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzIwLjU5MSAzMjAuNTkxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNMzAuMzkxIDMxOC41ODNhMzAuMzcgMzAuMzcgMCAwIDEtMjEuNTYtNy4yODhjLTExLjc3NC0xMS44NDQtMTEuNzc0LTMwLjk3MyAwLTQyLjgxN0wyNjYuNjQzIDEwLjY2NWMxMi4yNDYtMTEuNDU5IDMxLjQ2Mi0xMC44MjIgNDIuOTIxIDEuNDI0IDEwLjM2MiAxMS4wNzQgMTAuOTY2IDI4LjA5NSAxLjQxNCAzOS44NzVMNTEuNjQ3IDMxMS4yOTVhMzAuMzY2IDMwLjM2NiAwIDAgMS0yMS4yNTYgNy4yODh6IiBmaWxsPSIjZmY0MTM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0iTTI4Ny45IDMxOC41ODNhMzAuMzcgMzAuMzcgMCAwIDEtMjEuMjU3LTguODA2TDguODMgNTEuOTYzQy0yLjA3OCAzOS4yMjUtLjU5NSAyMC4wNTUgMTIuMTQzIDkuMTQ2YzExLjM2OS05LjczNiAyOC4xMzYtOS43MzYgMzkuNTA0IDBsMjU5LjMzMSAyNTcuODEzYzEyLjI0MyAxMS40NjIgMTIuODc2IDMwLjY3OSAxLjQxNCA0Mi45MjItLjQ1Ni40ODctLjkyNy45NTgtMS40MTQgMS40MTRhMzAuMzY4IDMwLjM2OCAwIDAgMS0yMy4wNzggNy4yODh6IiBmaWxsPSIjZmY0MTM2IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PC9nPjwvc3ZnPg==);
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s;
}
.sp-gallery a .delete-file:hover {
opacity: 0.85;
}