From 2c998d7ba88a5eb349d238c7be41c0ac2c1808c8 Mon Sep 17 00:00:00 2001 From: grainsoft Date: Tue, 2 Dec 2025 01:54:59 +0200 Subject: [PATCH] updates --- src/core/App.js | 24 ++-- src/core/Rc.js | 3 + src/core/Render.js | 102 ++++++++-------- src/utils/Ut.js | 8 +- src/utils/dom.js | 5 + src/utils/form-validator/FormValidator.js | 2 +- src/utils/form-validator/InputError.js | 2 +- src/utils/form-validator/Validator.js | 2 +- src/widgets/autocomplete/Autocomplete.js | 8 +- src/widgets/cancelable/Cancelable.js | 2 +- src/widgets/counter/Counter.js | 10 +- src/widgets/date-picker/DatePicker.js | 38 +++--- src/widgets/dialog/Dialog.js | 12 +- src/widgets/dropdown/Dropdown.js | 6 +- src/widgets/gallery/Gallery.js | 71 ----------- src/widgets/gallery/gallery.css | 120 ------------------- src/widgets/gallery/index.js | 1 - src/widgets/hours/Hours.js | 4 +- src/widgets/msg/Msg.js | 16 +-- src/widgets/number-picker/NumberPicker.js | 8 +- src/widgets/overlay/Overlay.js | 6 +- src/widgets/overlay/overlay.css | 5 + src/widgets/pin-box/PinBox.js | 2 +- src/widgets/popover/Popover.js | 42 +++---- src/widgets/popover/index.js | 2 +- src/widgets/popover/popover.css | 44 +++++++ src/widgets/popup/Popup.js | 6 +- src/widgets/scheduler/Scheduler.js | 26 ++-- src/widgets/select-box/SelectBox.js | 6 +- src/widgets/table/Table.js | 38 +++--- src/widgets/two-datepicker/TwoDatepicker.js | 6 +- src/widgets/uploader/Uploader.js | 114 ++++++++---------- src/widgets/uploader/uploader.css | 124 ++++++++++++++++++++ 33 files changed, 419 insertions(+), 446 deletions(-) delete mode 100644 src/widgets/gallery/Gallery.js delete mode 100644 src/widgets/gallery/gallery.css delete mode 100644 src/widgets/gallery/index.js diff --git a/src/core/App.js b/src/core/App.js index 8f98388..a84ad50 100644 --- a/src/core/App.js +++ b/src/core/App.js @@ -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 }) ) )); diff --git a/src/core/Rc.js b/src/core/Rc.js index 6ad4ea2..4cd506e 100644 --- a/src/core/Rc.js +++ b/src/core/Rc.js @@ -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 diff --git a/src/core/Render.js b/src/core/Render.js index eaeb0d6..fcf23f4 100644 --- a/src/core/Render.js +++ b/src/core/Render.js @@ -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; diff --git a/src/utils/Ut.js b/src/utils/Ut.js index 26b3023..2332e57 100644 --- a/src/utils/Ut.js +++ b/src/utils/Ut.js @@ -15,14 +15,10 @@ 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 || {}); - + static extendNode(name, value) { if (!Object.getOwnPropertyDescriptor(Node.prototype, name)) { diff --git a/src/utils/dom.js b/src/utils/dom.js index c37b0ef..e31dfd5 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -40,6 +40,11 @@ if (attr[name] === null) { continue; } + + if (name == 'className') { + elem.className = attr[name]; + continue; + } elem.setAttribute(name, attr[name]); } diff --git a/src/utils/form-validator/FormValidator.js b/src/utils/form-validator/FormValidator.js index 83ff13f..f49d575 100644 --- a/src/utils/form-validator/FormValidator.js +++ b/src/utils/form-validator/FormValidator.js @@ -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; diff --git a/src/utils/form-validator/InputError.js b/src/utils/form-validator/InputError.js index a6a5be7..b0bbfe2 100644 --- a/src/utils/form-validator/InputError.js +++ b/src/utils/form-validator/InputError.js @@ -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) ); } /** diff --git a/src/utils/form-validator/Validator.js b/src/utils/form-validator/Validator.js index d620197..f3c363e 100644 --- a/src/utils/form-validator/Validator.js +++ b/src/utils/form-validator/Validator.js @@ -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; diff --git a/src/widgets/autocomplete/Autocomplete.js b/src/widgets/autocomplete/Autocomplete.js index a32fccf..5661c98 100644 --- a/src/widgets/autocomplete/Autocomplete.js +++ b/src/widgets/autocomplete/Autocomplete.js @@ -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'; diff --git a/src/widgets/cancelable/Cancelable.js b/src/widgets/cancelable/Cancelable.js index 5a6dfba..fbf5ff9 100644 --- a/src/widgets/cancelable/Cancelable.js +++ b/src/widgets/cancelable/Cancelable.js @@ -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(); diff --git a/src/widgets/counter/Counter.js b/src/widgets/counter/Counter.js index 800b847..cc469f9 100644 --- a/src/widgets/counter/Counter.js +++ b/src/widgets/counter/Counter.js @@ -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); diff --git a/src/widgets/date-picker/DatePicker.js b/src/widgets/date-picker/DatePicker.js index 3bc9ee4..ab4c077 100644 --- a/src/widgets/date-picker/DatePicker.js +++ b/src/widgets/date-picker/DatePicker.js @@ -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'); diff --git a/src/widgets/dialog/Dialog.js b/src/widgets/dialog/Dialog.js index 7f0e858..46219f6 100644 --- a/src/widgets/dialog/Dialog.js +++ b/src/widgets/dialog/Dialog.js @@ -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 diff --git a/src/widgets/dropdown/Dropdown.js b/src/widgets/dropdown/Dropdown.js index 1178273..bd741e9 100644 --- a/src/widgets/dropdown/Dropdown.js +++ b/src/widgets/dropdown/Dropdown.js @@ -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 )) ); diff --git a/src/widgets/gallery/Gallery.js b/src/widgets/gallery/Gallery.js deleted file mode 100644 index d5bf0e2..0000000 --- a/src/widgets/gallery/Gallery.js +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/src/widgets/gallery/gallery.css b/src/widgets/gallery/gallery.css deleted file mode 100644 index 413a0c2..0000000 --- a/src/widgets/gallery/gallery.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/widgets/gallery/index.js b/src/widgets/gallery/index.js deleted file mode 100644 index 6e89ed4..0000000 --- a/src/widgets/gallery/index.js +++ /dev/null @@ -1 +0,0 @@ -export { Gallery } from './Gallery'; \ No newline at end of file diff --git a/src/widgets/hours/Hours.js b/src/widgets/hours/Hours.js index 1cb6e25..3c283d7 100644 --- a/src/widgets/hours/Hours.js +++ b/src/widgets/hours/Hours.js @@ -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); diff --git a/src/widgets/msg/Msg.js b/src/widgets/msg/Msg.js index 8cbd074..d647ddd 100644 --- a/src/widgets/msg/Msg.js +++ b/src/widgets/msg/Msg.js @@ -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), ) ); diff --git a/src/widgets/number-picker/NumberPicker.js b/src/widgets/number-picker/NumberPicker.js index c42dc37..91f64db 100644 --- a/src/widgets/number-picker/NumberPicker.js +++ b/src/widgets/number-picker/NumberPicker.js @@ -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); diff --git a/src/widgets/overlay/Overlay.js b/src/widgets/overlay/Overlay.js index 04427b3..4da654f 100644 --- a/src/widgets/overlay/Overlay.js +++ b/src/widgets/overlay/Overlay.js @@ -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' }) ); } /** diff --git a/src/widgets/overlay/overlay.css b/src/widgets/overlay/overlay.css index 78f03f2..e125aaa 100644 --- a/src/widgets/overlay/overlay.css +++ b/src/widgets/overlay/overlay.css @@ -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; diff --git a/src/widgets/pin-box/PinBox.js b/src/widgets/pin-box/PinBox.js index d5291d1..2d93d2e 100644 --- a/src/widgets/pin-box/PinBox.js +++ b/src/widgets/pin-box/PinBox.js @@ -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); diff --git a/src/widgets/popover/Popover.js b/src/widgets/popover/Popover.js index a948479..8119dfb 100644 --- a/src/widgets/popover/Popover.js +++ b/src/widgets/popover/Popover.js @@ -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, - width = this.target.offsetWidth, - height = this.target.offsetHeight, - - 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' } ); - - if (this.opts.closeBtn) { - this.ui.append( El('i', { class: 'fas fa-times ic-close' }) ); + this.ui = El('div', { className: 'sp-popover' } ); + + 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); } } diff --git a/src/widgets/popover/index.js b/src/widgets/popover/index.js index 05e1b14..83d729e 100644 --- a/src/widgets/popover/index.js +++ b/src/widgets/popover/index.js @@ -1 +1 @@ -export { Popover } from './Popover'; \ No newline at end of file +export { Popover, Alert } from './Popover'; \ No newline at end of file diff --git a/src/widgets/popover/popover.css b/src/widgets/popover/popover.css index af05f16..b2f5121 100644 --- a/src/widgets/popover/popover.css +++ b/src/widgets/popover/popover.css @@ -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 { diff --git a/src/widgets/popup/Popup.js b/src/widgets/popup/Popup.js index 68dd0a2..137ad4b 100644 --- a/src/widgets/popup/Popup.js +++ b/src/widgets/popup/Popup.js @@ -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'); diff --git a/src/widgets/scheduler/Scheduler.js b/src/widgets/scheduler/Scheduler.js index 9394579..d490f8b 100644 --- a/src/widgets/scheduler/Scheduler.js +++ b/src/widgets/scheduler/Scheduler.js @@ -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) ) ); diff --git a/src/widgets/select-box/SelectBox.js b/src/widgets/select-box/SelectBox.js index a74643d..1e8cf3c 100644 --- a/src/widgets/select-box/SelectBox.js +++ b/src/widgets/select-box/SelectBox.js @@ -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 ); diff --git a/src/widgets/table/Table.js b/src/widgets/table/Table.js index e23441a..c66042d 100644 --- a/src/widgets/table/Table.js +++ b/src/widgets/table/Table.js @@ -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' }, '<') ); + this.paginationEl.append( El('a', { 'data-id': this.data.before, className: 'btn-before' }, '<') ); } if (this.data.after) { - this.paginationEl.append( El('a', { 'data-id': this.data.after, class: 'btn-after' }, '>') ); + this.paginationEl.append( El('a', { 'data-id': this.data.after, className: 'btn-after' }, '>') ); } } } diff --git a/src/widgets/two-datepicker/TwoDatepicker.js b/src/widgets/two-datepicker/TwoDatepicker.js index 4068b55..07a247a 100644 --- a/src/widgets/two-datepicker/TwoDatepicker.js +++ b/src/widgets/two-datepicker/TwoDatepicker.js @@ -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); diff --git a/src/widgets/uploader/Uploader.js b/src/widgets/uploader/Uploader.js index 887ab12..f2b810b 100644 --- a/src/widgets/uploader/Uploader.js +++ b/src/widgets/uploader/Uploader.js @@ -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 (rcode) { - switch (rs) { - case Rc.DONE: if (!data.files) { - console.log('Invalid Response!'); + Boot.log('Invalid Response!'); return; } @@ -391,9 +384,9 @@ 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) { that.updatePreviewList(data.files); } @@ -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); diff --git a/src/widgets/uploader/uploader.css b/src/widgets/uploader/uploader.css index 71e615f..ccd80a6 100644 --- a/src/widgets/uploader/uploader.css +++ b/src/widgets/uploader/uploader.css @@ -113,4 +113,128 @@ 40% { 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; } \ No newline at end of file