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-29 07:09:03 +02:00
parent eb3a761a71
commit d80513a8a0
22 changed files with 958 additions and 1393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/App.js
+10 -3
View File
@@ -422,9 +422,16 @@ export class App extends Boot {
static destroyOldGlobalEvents() {
if (App.section) {
window.dxOff(`${App.section}*`);
document.dxOff(`${App.section}*`);
document.body.dxOff(`${App.section}*`);
Ut.each(App.widgetStack, wtList => wtList.forEach(wt => wt.destroy() ) );
App.widgetStack = {};
Ut.resetKey();
window.dxOff(`.${App.section}`);
document.dxOff(`.${App.section}`);
document.body.dxOff(`.${App.section}`);
}
// Destroy all TinyMce Instances
src/core/Boot.js
+10 -6
View File
@@ -26,11 +26,15 @@ export class Boot {
// Static Section Vars
static vars = {};
// Widget Stack Object
static widgetStack = {};
static ready(callback) {
dxReady(() => {
Boot.lang = document.documentElement.getAttribute('lang') ?? 'en';
Boot.isApp = document.documentElement.classList.contains('app');
import(`/js/${Boot.lang}/interface.js`).then((mod) => {
@@ -100,13 +104,13 @@ export class Boot {
EvtOptions.section = id;
}
/**
* Add Widget To Stack
*/
static addWidget = ref => Boot.isApp && (Boot.widgetStack[ref.constructor.name] ??= []).push(ref);
/**
* App Log
*/
static log(err) {
if (Boot.DEBUG) {
console.log(err);
}
}
static log = err => Boot.DEBUG && console.log(err);
}
src/core/Render.js
-4
View File
@@ -531,10 +531,6 @@ export class Render {
input.readOnly = true;
}
if (field.rewrite == '1') {
input.dataset.value = '';
}
if (field.required == '1') {
input.required = true;
}
src/core/Stack.js
-41
View File
@@ -1,41 +0,0 @@
export class Stack {
static widgets = {};
/**
* Registers a widget instance in the global registry.
*
* @param {Object} ref - Widget instance to register.
* @returns {void}
*/
static add(ref) {
const name = ref.constructor.name;
Stack.widgets[name] ??= new Map();
// ref.ekey = crypto.randomUUID();
ref.ekey = Stack.widgets[name].size;
Stack.widgets[name].set(ref.ekey, ref);
}
/**
* Removes a widget instance from the global registry.
*
* @param {Object} ref - Widget instance to remove.
* @returns {void}
*/
static delete(ref) {
const name = ref.constructor.name;
if (!this.widgets[name]?.has(ref.ekey)) {
return;
}
this.widgets[name].delete(ref.ekey);
ref.ekey = null;
}
}
src/utils/Ut.js
+8 -3
View File
@@ -2,8 +2,11 @@ const stamp = Date.now();
export class Ut {
static EventsUID = 'Events' + stamp;
static DataUID = 'Data' + stamp;
static EventsUID = `Events_${stamp}`;
static DataUID = `Data_${stamp}`;
static WidgetUID = `Widget_${stamp}`;
static evKey = 0;
static isSet = (val) => typeof val !== 'undefined';
static isFn = (val) => typeof val === 'function';
@@ -18,6 +21,9 @@ export class Ut {
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 nextKey = () => ++Ut.evKey;
static resetKey = () => Ut.evKey = 0;
static extendNode(name, value) {
@@ -60,7 +66,6 @@ export class Ut {
moveevent : ('ontouchstart' in window) ? 'touchmove' : 'mousemove'
}
/**
* Redirect
*/
src/utils/dom.js
+91 -46
View File
@@ -139,10 +139,9 @@
events.split(' ').forEach(function(evt) {
evt = evt.split('.');
let eName = evt[0];
let namespace = nsPref + (evt[1] || '*');
const i = evt.indexOf('.');
const eName = i === -1 ? evt : evt.slice(0, i);
const namespace = nsPref + (i === -1 ? '*' : evt.slice(i + 1) );
if (!this[ Ut.EventsUID ][ eName ]) {
this[ Ut.EventsUID ][ eName ] = [];
@@ -169,10 +168,9 @@
events.split(' ').forEach(function(evt) {
evt = evt.split('.');
let eName = evt[0];
let namespace = nsPref + (evt[1] || '*');
const i = evt.indexOf('.');
const eName = i === -1 ? evt : evt.slice(0, i);
const namespace = nsPref + (i === -1 ? '*' : evt.slice(i + 1) );
if (!this[ Ut.EventsUID ][ eName ]) {
this[ Ut.EventsUID ][ eName ] = [];
@@ -201,9 +199,9 @@
this[ Ut.EventsUID ][ eName ].push([ namespace, selector, _handler ]);
if (eName.startsWith('swipe')) {
// if (eName.startsWith('swipe')) {
// new SwipeEvents(this, eName, target, _handler, opts);
}
//}
this.addEventListener(eName, _handler, opts);
@@ -213,58 +211,73 @@
return this;
},
/**
* Remove an event handler.
*/
off(events, selector) {
/**
* Remove an event handler.
*/
off(events, selector) {
let nsPref = (EvtOptions.nsEvent && EvtOptions.section) ? (EvtOptions.section + '.') : '';
const target = this;
if (!this[Ut.EventsUID]) {
return this;
}
if (!target[Ut.EventsUID]) {
return target;
}
if (!events) {
this.replaceWith(this.cloneNode(true));
return this;
}
events = events ?? [ '' ];
events.split(' ').forEach(function(evt) {
events.split(' ').forEach(event => {
evt = evt.split('.');
const eventToken = event.split('.');
let eName = evt[0];
let namespace = nsPref + (evt[1] || '*');
let [ eventName, eventNs ] = eventToken;
let eList = this[Ut.EventsUID][eName];
if (eventName === '') {
if (eList) {
const eventRoot = target[Ut.EventsUID];
let i = eList.length;
Ut.each(eventRoot, (eventList, realEventName) => {
let i = (eventList && eventList.length) || 0;
while (i--) {
const eventData = eventList[i];
if ((eventToken.length === 1 || eventNs === eventData[0] || eventData[0].startsWith(`${eventNs}.`)) && (!selector || eventData[1] === selector) ) {
target.removeEventListener(realEventName, eventData[2]);
eventList.splice(i, 1);
}
}
});
return;
}
if (EvtOptions.nsEvent && EvtOptions.section) {
eventNs = `${eventNs}.${EvtOptions.section}`;
}
const eventList = target[Ut.EventsUID][ eventName ];
let i = (eventList && eventList.length) || 0;
while(i--) {
let et = eList[i];
const eventData = eventList[i];
if ((et[0] == namespace || namespace == nsPref + '*') && (!selector || (et[1] == selector)) ) {
if ((eventToken.length === 1 || eventNs === eventData[0] || eventData[0].startsWith(`${eventNs}.`)) && (!selector || eventData[1] === selector) ) {
//if (customEvents[eName]) {
// customEvents[eName].destroy.call(this, eName, et[1]);
//if (customEvents[eventName]) {
// customEvents[eventName].destroy.call(this, eventName, eventData[1]);
//}
//if (eventName.startsWith('swipe')) {}
if (eName.startsWith('swipe')) {
}
this.removeEventListener(eName, et[2]);
eList.splice(i, 1);
this.removeEventListener(eventName, eventData[2]);
eventList.splice(i, 1);
}
}
}
}, this);
}
});
return this;
return target;
},
/**
@@ -506,6 +519,7 @@
left: rect.left + win.scrollX
};
},
/**
* Store / Retreive Arbitrary Data
*/
@@ -521,6 +535,34 @@
return this;
},
/**
* Store / Retreive Arbitrary Widget Data
*/
widget(data) {
if (data) {
this[ Ut.WidgetUID ] = data;
return this;
}
return this[ Ut.WidgetUID ] || null;
},
/**
* Get Widget Data Value
*/
nval() {
return this[ Ut.WidgetUID ]?.getValue();
},
/**
* Remove widget data
*/
removeWidget() {
delete this[ Ut.WidgetUID ];
return this;
},
/**
* Remove Arbitrary Data
@@ -994,9 +1036,12 @@
continue;
}
if ('value' in target.dataset) {
const widget = domUtils.widget.call(target);
if (widget) {
widget.restoreValue(Ut.unescape(val));
target.dataset.value = Ut.unescape(val);
target.value = Ut.unescape(data[key + '_value'] ?? val);
if (domUtils.data.call(target, 'datepicker')) {
src/utils/form-validator/Validator.js
+4 -2
View File
@@ -272,8 +272,10 @@ export class Validator {
let value;
let displayedVal = null;
if ('value' in el.dataset) {
value = el.dataset.value;
const widget = el.dxWidget();
if (widget) {
value = widget.getValue();
displayedVal = el.value.trim();
}
else {
src/widgets/autocomplete/Autocomplete.js
+22 -23
View File
@@ -3,7 +3,6 @@ import './autocomplete.css';
import { Ut } from '../../utils/Ut'
import { El } from '../../utils/dom';
import { Rc } from '../../core/Rc';
import { Stack } from '../../core/Stack';
import { Cancelable } from '../cancelable'
export class Autocomplete {
@@ -16,13 +15,14 @@ export class Autocomplete {
this.target = target;
this.reqOpts = {};
if (this.target.dxData('autocomplete')) {
if (this.target.dxWidget() || this.target.dxData('autocomplete')) {
return;
}
this.target.dxData('autocomplete', this);
this.target.dxWidget(this);
Stack.add(this);
this.ekey = Ut.nextKey();
this.opts = { ... {
optionHeight: 32,
@@ -30,8 +30,6 @@ export class Autocomplete {
selectionColor: 'green'
}, ... opts };
this.target.dataset.value = '';
this.selected = null;
this.count = 0;
this.index = -1;
@@ -81,7 +79,7 @@ export class Autocomplete {
this.ui.wrapper.dxOn('click', '.ac-option', (e, t) => this.clickOptionHandler(e, t));
// Click outside
document.body.dxOn('click.autocomplete', e => e.target != this.target && this.clearOptions());
document.body.dxOn('click.autocomplete', e => e.target != this.target && this.clear());
}
/**
@@ -89,12 +87,12 @@ export class Autocomplete {
*/
processData(val) {
this.clearOptions();
this.clear();
let found = true;
let matchId = '';
for (let id in this.data) {
for (let id in this.data) {
let name = this.data[id];
@@ -130,14 +128,13 @@ export class Autocomplete {
if (found && !matchId) {
matchId = id;
this.value = matchId;
}
}
}
let changed = this.target.dataset.value != matchId;
let changed = this.value != matchId;
this.target.dataset.value = matchId;
this.value = matchId;
if (changed) {
Ut.trigger(this.opts.onChange, this);
@@ -217,7 +214,7 @@ export class Autocomplete {
e.stopPropagation();
if (this.selected) {
this.updateVal(this.selected.dataset.id);
this.restoreValue(this.selected.dataset.id);
}
}
}
@@ -227,28 +224,31 @@ export class Autocomplete {
*/
clickOptionHandler(e, t) {
e.stopPropagation();
this.updateVal(t.dataset.id);
this.restoreValue(t.dataset.id);
}
/**
* Autocomplete, Update Val
*/
updateVal(id) {
restoreValue(id) {
this.value = id;
if (id == this.target.dataset.value) {
this.clearOptions();
if (id == this.value) {
this.clear();
return;
}
this.target.dataset.value = id;
this.target.value = this.data[id];
Ut.trigger(this.opts.onChange, this);
this.target.dxTrigger('changed');
this.clearOptions();
this.clear();
}
getValue() {
return this.value;
}
/**
@@ -282,14 +282,14 @@ export class Autocomplete {
*/
updateOptions(data) {
this.clearOptions();
this.clear();
this.data = data;
}
/**
* Autocomplete Clear Options
*/
clearOptions() {
clear() {
this.selected = null;
this.count = 0;
@@ -308,15 +308,14 @@ export class Autocomplete {
this.ui.wrapper.remove();
delete this.target.dataset.value;
this.target.dxRemoveWidget();
document.body.dxOff('click.autocomplete' + this.ekey);
this.target.dxOff('input.autocomplete' + this.ekey + ' keydown.autocomplete' + this.ekey + ' click.autocomplete' + this.ekey);
Stack.delete(this);
this.target.dxRemoveData('autocomplete');
this.target.dxRemoveWidget();
Ut.trigger(this.opts.onDestroy, this);
}
src/widgets/cancelable/Cancelable.js
+1 -3
View File
@@ -48,9 +48,7 @@ export class Cancelable {
this.target.value = this.emptyVal;
if ('value' in this.target.dataset) {
this.target.dataset.value = '';
}
this.target.dxWidget()?.clear();
this.iconHandler.classList.add('hide');
src/widgets/counter/Counter.js
+8 -9
View File
@@ -1,7 +1,7 @@
import './counter.css';
import { El } from '../../utils/dom';
import { Stack } from '../../core/Stack';
import { Ut } from '../../utils/Ut';
////////////////////////
// Chars Counter
@@ -29,14 +29,14 @@ export class Counter {
this.indicator = El('div', { className: 'indicator' });
this.counter = El('span', { className: 'counter' }, '0');
this.ui = El('div', { className: 'sp-chars-counter' },
this.el = 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);
this.target.after(this.el);
Stack.add(this);
this.ekey = Ut.nextKey();
this.setEvents();
}
@@ -67,16 +67,15 @@ export class Counter {
setEvents() {
// Input - Handler
this.target.dxOn('input.counter' + this.ekey, this.update.bind(this));
this.target.dxOn(`input.counter.${this.ekey}`, this.update.bind(this));
}
/**
* Counter, Destroy
*/
destroy() {
this.target.dxOff('input.counter' + this.ekey);
Stack.delete(this);
this.ui.remove();
this.target.dxOff(`input.counter${this.ekey}`);
this.el.remove();
}
}
src/widgets/date-picker/DatePicker.js
+295 -669
View File
File diff suppressed because it is too large Load Diff
src/widgets/dialog/Dialog.js
+2 -4
View File
@@ -2,7 +2,7 @@ import './dialog.css';
import { El } from '../../utils/dom'
import { Overlay } from '../overlay';
import { Stack } from '../../core/Stack';
import { Ut } from '../../utils/Ut';
////////////////////
// Dialog
@@ -33,7 +33,7 @@ export class Dialog {
this.events = events || {};
Stack.add(this);
this.ekey = Ut.nextKey();
this.create();
@@ -226,8 +226,6 @@ export class Dialog {
document.dxOff('keydown.dialog' + this.ekey + ' mouseup.dialog' + this.ekey);
Stack.delete(this);
that.target.dxRemoveData('dialog');
Ut.trigger(that.events.destroy);
src/widgets/dropdown/Dropdown.js
+123 -121
View File
@@ -2,178 +2,180 @@ import './dropdown.css';
import { Ut } from '../../utils/Ut';
import { El } from '../../utils/dom';
////////////////////
// DopDown Menu
////////////////////
import { Boot } from '../../core/Boot';
export class Dropdown {
/**
* Dropdown Constructor
*/
constructor(target, opts) {
#isOpen = false;
#hasRendered = false;
this.target = target;
constructor(target, opts) {
if (this.target.dxData('dropdown')) {
return;
}
this.target = target;
this.target.dxData('dropdown', this);
if (this.target.dxData('dropdown')) {
return;
}
this.opts = { ... { items: [] }, ... opts };
this.target.dxData('dropdown', this);
Boot.addWidget(this);
this.isOpened = false;
this.isBusy = false;
this.opts = { ... { items: [] }, ... opts };
this.create();
this.el = null;
this.setEvents();
}
this.ekey = Ut.nextKey();
/**
* Dropdown, Create UI
*/
create() {
this.#bindTargetEvents();
}
this.ui = El('div', { className: 'sp-dropdown hide' });
#bindTargetEvents() {
if (this.opts.cls) {
this.ui.classList.add(this.opts.cls);
}
const that = this;
const list = El('ul');
this.target.dxOn('focus.dropdown', e => {
if (this.opts.items.length) {
this.ui.append(list);
}
e.stopPropagation();
this.items = [];
Ut.trigger(that.opts.onFocus, this);
this.opts.items.forEach(item => {
this.items.push(
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
))
);
});
if (!that.#hasRendered) {
this.#render();
}
this.target.after(this.ui);
if (!that.#isOpen) {
that.show();
return;
}
that.hide();
});
}
Ut.trigger(this.opts.onInit, this);
}
#bindUiEvents() {
/**
* Dropdown, Set UI Position
*/
setPosition() {
const that = this;
// Click on Item Handler
this.el.dxOn('click', 'li', (_, t) => {
let left = Math.round(this.target.offsetLeft);
that.hide();
if ((this.ui.clientWidth + left) > window.innerWidth) {
left = 0;
}
Ut.trigger(that.opts.items[ t.dxIndex(that.items) ].handler);
this.ui.style.top = (Math.round(this.target.offsetTop) + this.target.clientHeight + 2) + 'px';
this.ui.style.left = left + 'px';
}
Ut.trigger(that.opts.onChange, t.dataset.id, this);
});
// PointerDown Handler
document.dxOn('pointerdown.dropdown', e => !this.target.contains(e.target) && !this.el.contains(e.target) && this.hide() );
/**
* Dropdown, Show UI
*/
show() {
let tm = null;
if (this.isBusy || this.isOpened) {
return;
}
// Resize & Orientation Handler
window.dxOn(`resize.dropdown.${this.ekey} orientationchange.dropdown.${this.ekey}`, _ => {
Ut.trigger(this.opts.onShow, this);
if (tm) {
clearTimeout(tm);
tm = null;
}
this.setPosition();
tm = setTimeout(_ => that.#reposition(), 100);
});
}
this.ui.classList.remove('hide');
this.ui.classList.add('opened');
this.target.classList.add('dropdown-opened');
#render() {
this.isOpened = true;
}
this.el = El('div', { className: 'sp-dropdown hide' });
/**
* Dropdown, Hide UI
*/
hide() {
if (this.opts.cls) {
this.el.classList.add(this.opts.cls);
}
if (!this.isOpened) {
return;
}
const list = El('ul');
Ut.trigger(this.opts.onHide, this);
if (this.opts.items.length) {
this.el.append(list);
}
let that = this;
this.items = [];
this.ui.addEventListener('transitionend', _ => !this.ui.classList.contains('opened') && this.ui.classList.add('hide'), { once: true });
this.opts.items.forEach(item => {
this.items.push(
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
))
);
});
this.ui.classList.remove('opened');
this.target.classList.remove('dropdown-opened');
document.body.append(this.el);
this.isOpened = false;
};
this.#bindUiEvents();
/**
* Dropdown, Set Evensts
*/
setEvents() {
this.#hasRendered = true;
let that = this;
Ut.trigger(this.opts.onInit, this);
}
document.body.dxOn('click.dropdown', _ => that.hide());
#reposition() {
this.target.dxOn('click', e => {
const r = this.target.getBoundingClientRect();
e.stopPropagation();
const scrollX = window.scrollX || 0;
const scrollY = window.scrollY || 0;
if (!that.ui.classList.contains('opened')) {
that.show();
}
else {
that.hide();
}
});
this.el.style.left = Math.round(r.left + scrollX) + 'px';
this.el.style.top = Math.round(r.bottom + scrollY + 2) + 'px';
}
this.ui.dxOn('click', 'li', (_, t) => {
Ut.trigger(that.opts.items[ t.dxIndex(that.items) ].handler);
Ut.trigger(that.opts.onChange, t.dataset.id, this);
});
show() {
let tm = null;
if (this.#isOpen) {
return;
}
window.dxOn('resize.dropdown' + this.ekey + ' orientationchange.dropdown' + this.ekey, _ => {
this.#reposition();
if (tm) {
clearTimeout(tm);
tm = null;
}
this.el.classList.remove('hide');
this.el.classList.add('opened');
tm = setTimeout(_ => that.setPosition(), 100);
});
}
this.#isOpen = true;
/**
* Dropdown, Destroy
*/
destroy() {
Ut.trigger(this.opts.onShow, this);
}
this.ui.remove();
hide() {
if (!this.#isOpen) {
return;
}
document.body.dxOff('click.dropdown');
window.dxOff('resize.dropdown' + this.ekey + ' orientationchange.dropdown' + this.ekey);
this.el.addEventListener('transitionend', _ => this.el.classList.add('hide'),
{ once: true }
);
this.target.dxRemoveData('dropdown');
this.el.classList.remove('opened');
Ut.trigger(this.events.destroy, this);
this.#isOpen = false;
return this.target;
}
Ut.trigger(this.opts.onHide, this);
};
destroy() {
if (this.#hasRendered) {
this.el.remove();
document.dxOff(`pointerdown.dropdown.${this.ekey}`);
window.dxOff(`resize.dropdown.${this.ekey} orientationchange.dropdown.${this.ekey}`);
}
this.target.dxOff(`focus.dropdown.${this.ekey}`);
this.target.dxRemoveData('dropdown');
Ut.trigger(this.opts.onDestroy, this);
}
}
src/widgets/dropdown/dropdown.css
+6 -5
View File
@@ -12,6 +12,8 @@
opacity: 0;
transition: all 0.3s;
transform: translateY(20px);
-webkit-user-select: none;
user-select: none;
}
.sp-dropdown.opened {
@@ -20,7 +22,6 @@
}
.sp-dropdown ul {
margin: 2px 0 0;
font-size: 14px;
color: #212529;
background-color: #fff;
@@ -41,6 +42,10 @@
cursor: pointer;
}
.sp-dropdown li:hover {
background-color: #ebebeb;
}
.sp-dropdown.dp-interval li {
padding: 8px 12px 8px 12px;
font-size: 13px;
@@ -54,8 +59,4 @@
display: block;
font-size: 16px;
margin-right: 8px;
}
.sp-dropdown li:hover {
opacity: 0.75;
}
src/widgets/hours/Hours.js
+1 -5
View File
@@ -2,7 +2,6 @@ import './hours.css';
import { Ut } from '../../utils/Ut';
import { El } from '../../utils/dom';
import { Stack } from '../../core/Stack';
import { Render } from '../../core/Render';
////////////////////
@@ -28,7 +27,7 @@ export class Hours {
this.makeUi();
Stack.add(this);
this.ekey = Ut.nextKey();
this.hour = this.ui.dxFind('select[name=hour]');
this.min = this.ui.dxFind('select[name=min]');
@@ -109,8 +108,6 @@ export class Hours {
this.target.dxOn('click.hours', function(e) {
e.stopPropagation();
Stack.widgets.DatePicker.forEach(datepicker => datepicker.hide() );
that.isVisible = true;
@@ -182,7 +179,6 @@ export class Hours {
document.body.dxOff('click.hours');
window.dxOff('resize.hours' + this.ekey + ' orientationchange.hours' + this.ekey + ' keyup.hours' + this.ekey);
Stack.delete(this);
this.target.dxRemoveData('hours');
return this.target;
src/widgets/interval-picker/IntervalPicker.js
+133 -205
View File
@@ -2,235 +2,163 @@ import { Ut } from '../../utils/Ut';
import { Boot } from '../../core/Boot';
import { TwoDatePicker } from '../two-datepicker/TwoDatepicker';
import { Dropdown } from '../dropdown';
import { Stack } from '../../core/Stack';
////////////////////
// IntervalPicker
////////////////////
export class IntervalPicker {
/**
* Intervalpicker, Constructor
*/
constructor(target, opts) {
/**
* Intervalpicker, Constructor
*/
constructor(target, opts) {
this.target = target;
this.target = target;
this.opts = { ... {
separator : ' - ',
locales : 'ro-RO',
style : 'normal',
disabled : 1
}, ... opts };
this.opts = { ... {
locales : 'ro-RO',
style : 'normal',
disabled : false,
dateFormat : 'dd-mm-yyyy',
valueFormat : 'dd-mm-yyyy',
valSeparator: '-',
dateSeparator: ' - '
}, ... opts };
if (this.target.dxData('intervalpicker')) {
return;
}
if (this.target.dxData('intervalpicker')) {
return;
}
this.target.dxData('intervalpicker', this);
this.target.dxData('intervalpicker', this);
this.widget = Boot.intData.widget.intervalpicker.children;
this.widget = Boot.intData.widget.intervalpicker.children;
this.create();
this.create();
}
Stack.add(this);
}
/**
* Intervalpicker, Create
*/
create() {
let that = this;
/**
* Intervalpicker, Date Format
*/
dateFormat(date) {
return date.toLocaleDateString(this.opts.locales, {
day : '2-digit',
month : '2-digit',
year : 'numeric'
});
//.replace(/\./g, '/');
};
let options = Ut.objVal(this.widget.form).children.field.interval.option;
let items = [];
for (let id in options) {
items.push({ id: id, name: options[id] });
}
/**
* Intervalpicker, Create
*/
create() {
let that = this;
this.twoDatePicker = new TwoDatePicker(this.target, {
anim: false,
render: false,
showOnClick: false,
style: this.opts.style,
disabled: this.opts.disabled,
dateFormat : 'dd-mm-yyyy',
valueFormat : 'dd-mm-yyyy',
valSeparator: '-',
dateSeparator: ' - '
});
let options = Ut.objVal(this.widget.form).children.field.interval.option;
let items = [];
for (let id in options) {
items.push({ id: id, name: options[id] });
}
this.dropdown = new Dropdown(this.target, {
items: items,
cls: 'dp-interval',
onChange: id => {
new TwoDatePicker(this.target, {
anim: false,
hiddenMode: true,
style: this.opts.style,
disabled: this.opts.disabled
}, {
init: twoDatePicker => that.twoDatePicker = twoDatePicker,
onChange: function(twoDatePicker, val, index) {
const date = new Date();
const firstDp = twoDatePicker.datepicker[0];
const secondDp = twoDatePicker.datepicker[1];
switch (id) {
case '0':
that.interval = [ date, date ];
break;
case '1':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 1);
that.interval[0] = date;
break;
case '2':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 7);
that.interval[0] = date;
break;
case '3':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 30);
that.interval[0] = date;
break;
case '4':
date.setDate(1);
that.interval = [ new Date(date), null ];
date.setMonth(date.getMonth() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '5':
date.setDate(1);
date.setMonth(date.getMonth() - 1);
that.interval = [ new Date(date), null ];
date.setMonth(date.getMonth() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '6':
date.setDate(1);
date.setMonth(0);
that.interval = [ new Date(date), null ];
date.setFullYear(date.getFullYear() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '7':
date.setFullYear(date.getFullYear() - 1);
date.setMonth(0);
date.setDate(1);
that.interval = [ new Date(date), null ];
date.setFullYear(date.getFullYear() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '8':
setTimeout(_ => that.twoDatePicker.show());
break;
}
if (!val) {
that.interval = null;
}
if (index == 0) {
secondDp.clear();
secondDp.minDate = firstDp.selectedDate;
if (firstDp.month != secondDp.month) {
secondDp.year = firstDp.year;
secondDp.month = firstDp.month;
secondDp.makeUI();
}
else {
secondDp.setDateRange({ minDate: firstDp.selectedDate });
}
}
else {
if (!firstDp.selectedDate) {
return;
}
that.target.dxVal(that.dateFormat(firstDp.selectedDate)
+ that.opts.separator
+ that.dateFormat(secondDp.selectedDate)
);
twoDatePicker.hide();
that.target.dxTrigger('changed');
}
},
onHide: _ => that.dropdown.isBusy = false
});
if (id != '8') {
that.updateInput();
}
}
});
}
const twoDp = this.target.dxData('two_datepicker');
/**
* Intervalpicker, Update Input
*/
updateInput() {
new Dropdown(this.target, {
items: items,
cls: 'dp-interval',
onInit: dropdown => that.dropdown = dropdown,
onShow: _ => {
if (!this.interval || !this.interval.length) {
return;
}
Stack.widgets.IntervalPicker.forEach(intPicker => {
this.twoDatePicker.restoreValue(this.interval);
if (intPicker.dropdown.isOpened) {
intPicker.dropdown.hide();
}
this.target.dxTrigger('changed');
Ut.trigger(this.opts.onSelect, this);
}
if (intPicker.dropdown.isBusy) {
intPicker.twoDatePicker.hide();
}
});
},
onChange: id => {
/**
* Intervalpicker, Destroy
*/
destroy() {
const date = new Date();
this.twoDatePicker.destroy();
this.dropdown.destroy();
switch (id) {
case '0':
that.interval = [ date, date ];
break;
case '1':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 1);
that.interval[0] = date;
break;
case '2':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 7);
that.interval[0] = date;
break;
case '3':
that.interval = [ null, new Date(date) ];
date.setDate(date.getDate() - 30);
that.interval[0] = date;
break;
case '4':
date.setDate(1);
that.interval = [ new Date(date), null ];
date.setMonth(date.getMonth() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '5':
date.setDate(1);
date.setMonth(date.getMonth() - 1);
that.interval = [ new Date(date), null ];
date.setMonth(date.getMonth() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '6':
date.setDate(1);
date.setMonth(0);
that.interval = [ new Date(date), null ];
date.setFullYear(date.getFullYear() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '7':
date.setFullYear(date.getFullYear() - 1);
date.setMonth(0);
date.setDate(1);
that.interval = [ new Date(date), null ];
date.setFullYear(date.getFullYear() + 1);
date.setDate(0);
that.interval[1] = date;
break;
case '8':
that.dropdown.isBusy = true;
twoDp.restoreValue(that.interval);
setTimeout(_ => twoDp.show());
break;
}
that.updateInput();
}
});
}
/**
* Intervalpicker, Update Input
*/
updateInput() {
if (!this.interval) {
return;
}
const val = this.interval.map(date => this.dateFormat(date)).join(this.opts.separator);
this.target.value = val;
this.target.dxTrigger('changed');
Ut.trigger(this.opts.onSelect, val, this);
}
/**
* Intervalpicker, Destroy
*/
destroy() {
this.twoDatePicker.destroy();
this.dropdown.destroy();
Stack.delete(this);
this.target.dxRemoveData('intervalpicker');
}
this.target.dxRemoveData('intervalpicker');
}
}
src/widgets/lightbox/Lightbox.js
+1 -4
View File
@@ -3,7 +3,6 @@ import './lightbox.css';
import { Ut } from '../../utils/Ut';
import { $ } from '../../utils/dom';
import { Boot } from '../../core/Boot';
import { Stack } from '../../core/Stack';
////////////////////
// LightBox
@@ -162,7 +161,7 @@ export class Lightbox {
this.arrowRight.classList.toggle('hide', this.square.length == this.index + 1);
this.arrowLeft.classList.toggle('hide', !this.index);
Stack.add(this);
this.ekey = Ut.nextKey();
}
hidden() {
@@ -318,8 +317,6 @@ export class Lightbox {
this.target.dxOff('click.lightbox');
document.dxOff('keyup.lightbox' + this.ekey + ' resize.lightbox' + this.ekey + ' orientationchange.lightbox' + this.ekey);
Stack.delete(this);
this.target.dxRemoveData('lightbox');
}
}
src/widgets/popover/Popover.js
+1 -8
View File
@@ -2,7 +2,6 @@ import './popover.css';
import { Ut } from '../../utils/Ut';
import { El, $ } from "../../utils/dom";
import { Stack } from '../../core/Stack';
import { Overlay } from '../overlay';
export class Popover {
@@ -29,15 +28,11 @@ export class Popover {
closeBtn : false
}, ... opts };
Stack.widgets.Popover ??= new Map();
if (!this.opts.multiple) {
// Destroy old instances
Stack.widgets.Popover.forEach(popover => popover.destroy());
Boot.widgetStack?.Popover.forEach(popover => popover.destroy());
}
Stack.add(this);
this.create();
this.setPosition();
@@ -166,8 +161,6 @@ export class Popover {
this.target.dxRemoveData('popover');
Stack.delete(this);
Ut.trigger(this.opts.onDestroy, this);
}
}
src/widgets/popup/Popup.js
+5 -7
View File
@@ -1,9 +1,9 @@
import './popup.css';
import { Boot } from '../../core/Boot';
import { Ut } from '../../utils/Ut';
import { El } from '../../utils/dom';
import { Overlay } from '../overlay';
import { Stack } from '../../core/Stack';
import { Render } from '../../core/Render';
////////////////////
@@ -39,11 +39,13 @@ export class Popup {
this.opened = false;
this.ekey = Ut.nextKey();
if (!this.opts.multiple) {
Stack.widgets.Popup?.forEach((popup, key) => {
Boot.widgetStack?.Popup?.forEach(popup => {
if (key == this.ekey - 1) {
if (popup.ekey < this.ekey) { // [?]
that.opened = true;
popup.destroy(_ => that.init());
}
@@ -64,8 +66,6 @@ export class Popup {
*/
init() {
Stack.add(this);
this._plugins = [];
this.create();
@@ -221,8 +221,6 @@ export class Popup {
that._plugins.forEach(widget => widget.destroy());
Stack.delete(this);
that.target.dxRemoveData('popup');
Ut.trigger(callback);
src/widgets/select-box/SelectBox.js
+5 -8
View File
@@ -1,7 +1,7 @@
import './select-box.css';
import { El } from '../../utils/dom';
import { Stack } from '../../core/Stack';
import { Ut } from '../../utils/Ut';
export class SelectBox {
@@ -19,7 +19,7 @@ export class SelectBox {
this.labels = El('div', { className: 'labels hide' });
this.choices = El('div', { className: 'choices' });
this.ui = El('div', { className: 'sp-form-control sp-select-box' },
this.el = El('div', { className: 'sp-form-control sp-select-box' },
this.choices,
this.labels
);
@@ -30,9 +30,9 @@ export class SelectBox {
this.labels.append(el.parentElement);
}, this);
parent.append(this.ui);
parent.append(this.el);
Stack.add(this);
this.ekey = Ut.nextKey();
this.setEvents();
}
@@ -44,7 +44,7 @@ export class SelectBox {
let that = this;
this.ui.dxOn('click', function(e) {
this.el.dxOn('click', function(e) {
e.stopPropagation();
that.labels.classList.toggle('hide');
});
@@ -85,10 +85,7 @@ export class SelectBox {
* Select Box, Destroy
*/
destroy() {
window.dxOff('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey);
document.dxOff('click.selectbox' + this.ekey);
Stack.delete(this);
}
}
src/widgets/two-datepicker/TwoDatepicker.js
+231 -216
View File
@@ -4,22 +4,26 @@ import { Ut } from "../../utils/Ut";
import { El } from "../../utils/dom";
import { Cancelable } from '../cancelable';
import { DatePicker } from '../date-picker';
import { Stack } from '../../core/Stack';
import { Boot } from '../../core/Boot';
export class TwoDatePicker {
/**
* TwoDatePicker Constructor
*/
constructor(target, opts, events) {
#hasRendered = false;
#isOpened = false;
#isInput = false;
#isToggled = false;
constructor(target, opts) {
this.target = target;
if (this.target.dxData('two_datepicker')) {
if (this.target.dxWidget() || this.target.dxData('two_datepicker')) {
return;
}
this.target.dxData('two_datepicker', this);
this.target.dxWidget(this);
Boot.addWidget(this);
this.opts = { ... {
style : 'normal',
@@ -27,320 +31,331 @@ export class TwoDatePicker {
fullMonth : true,
navDisabled : false,
anim : true,
dateFormat : 'dd/mm/yyyy',
valueFormat : 'dd-mm-yyyy',
valSeparator: '-',
dateSeparator: ' - ',
locales : 'ro-RO',
cancelable : true,
hiddenMode : false,
defaultDate : null,
render : true,
showOnClick : true
}, ... opts };
this.events = events || {};
this.ekey = Ut.nextKey();
this.isDisabled = this.opts.disabled;
if (this.target.tagName.toLowerCase() === 'input') {
if (this.target.tagName.toLowerCase() == 'input') {
this.#isInput = true;
this.isInput = true;
if (this.target.type === 'text') {
this.#isToggled = true;
if (this.target.type == 'text') {
this.isToggled = true;
this.target.setAttribute('autocomplete', 'off');
this.target.inputmode = 'none';
this.target.readOnly = true;
new Cancelable(this.target);
}
this.#bindTargetEvents();
}
this.create();
Stack.add(this);
this.setEvents();
this.restoreValue(this.target.dxVal());
}
/**
* TwoDatePicker, Create UI
*/
create() {
const that = this;
this.ui = El('div', { className: 'sp-two-datepicker' });
let firstCol = El('div', { className: 'ui-col' });
let secondCol = El('div', { className: 'ui-col' });
this.ui.append(firstCol);
this.ui.append(secondCol);
const dpOpts = {
style : this.opts.style,
disabled : this.opts.disabled,
fullMonth : this.opts.fullMonth,
navDisabled : this.opts.navDisabled,
locales : this.opts.locales
locales : this.opts.locales,
dateFormat : this.opts.dateFormat,
valueFormat : this.opts.valueFormat,
render : false
};
this.datepicker = [];
let tokenVal = [];
new DatePicker(firstCol, dpOpts, {
init: datepicker => that.datepicker[0] = datepicker,
onSelect: (_, val) => this.selectDate(0, val)
if (this.#isInput) {
const defaultVal = this.target.value.trim();
if (defaultVal) {
tokenVal = defaultVal.split(this.opts.dateSeparator);
}
}
if (this.opts.defaultDate && !tokenVal.length) {
tokenVal = this.opts.defaultDate.split(this.opts.valSeparator);
}
const hasVal = tokenVal.length === 2;
this.firstDp = new DatePicker(El('div', { className: 'ui-col' }), {
... dpOpts,
defaultDate: hasVal ? tokenVal[0] : null,
onSelect: (_, val) => this.#selectDate(0, val)
});
new DatePicker(secondCol, dpOpts, {
init: datepicker => that.datepicker[1] = datepicker,
onSelect: (_, val) => this.selectDate(1, val)
this.secondDp = new DatePicker(El('div', { className: 'ui-col' }), {
... dpOpts,
defaultDate: hasVal ? tokenVal[1] : null,
disabled: !hasVal,
onSelect: (_, val) => this.#selectDate(1, val)
});
if (this.isInput) {
if (!this.#isToggled && this.opts.render) {
this.#initUi();
}
}
if (this.isToggled) {
render() {
this.ui.classList.add('toggled', 'hidden');
if (this.#hasRendered) {
return;
}
if (this.opts.cancelable && !this.target.dxData('cancelable') ) {
new Cancelable(this.target);
}
this.#initUi();
}
document.body.append(this.ui);
#bindTargetEvents() {
const that = this;
if (this.#isInput) {
// this.target.dxOn('keydown.two_datepicker paste.two_datepicker', e => e.preventDefault());
this.target.dxOn('restore.two_datepicker', (_, t) => this.restoreValue(t.value, this.opts.dateSeparator));
}
if (this.#isToggled && this.opts.showOnClick) {
this.target.dxOn('click.two_datepicker', e => {
e.stopPropagation();
//if (!that.opts.hiddenMode) {
that.show();
//}
});
}
}
#bindUiEvents() {
const that = this;
if (!this.#isToggled) {
return;
}
document.dxOn(`pointerdown.twodatepicker.${this.ekey}`, e => !this.target.contains(e.target) && !this.el.contains(e.target) && this.hide() );
let tm = null;
// Resize, Scroll, Orientation window Handlers
window.dxOn(`resize.two_datepicker.${this.ekey} orientationchange.two_datepicker.${this.ekey}`, _ => {
if (tm) {
clearTimeout(tm);
tm = null;
}
tm = setTimeout(_ => that.#reposition(), 100);
});
}
#initUi() {
this.el = El('div', { className: 'sp-two-datepicker' });
this.firstDp.render();
this.secondDp.render();
this.el.append(this.firstDp.target);
this.el.append(this.secondDp.target);
if (this.#isInput) {
if (this.#isToggled) {
this.el.classList.add('toggled', 'hidden');
document.body.append(this.el);
}
else {
this.target.after(this.ui);
this.target.after(this.el);
}
this.target.setAttribute('autocomplete', 'off');
}
else {
this.target.append(this.ui);
this.target.append(this.el);
}
this.#bindUiEvents();
this.#hasRendered = true;
Ut.trigger(this.opts.onInit, this);
}
/**
* TwoDatePicker, Select Value
*/
selectDate(index, val) {
#selectDate(index, val) {
Ut.trigger(this.opts.onSelect, this, index, val);
const firstDp = this.datepicker[0];
const secondDp = this.datepicker[1];
if (index == 0) {
if (index === 0) {
secondDp.clear();
secondDp.minDate = firstDp.selectedDate;
if (firstDp.month != secondDp.month) {
this.secondDp.enable();
this.secondDp.clear();
this.secondDp.setDateRange({ minDate: this.firstDp.selectedDate });
secondDp.year = firstDp.year;
secondDp.month = firstDp.month;
secondDp.makeUI();
}
else {
secondDp.setDateRange({ minDate: firstDp.selectedDate });
}
return;
}
if (!firstDp.selectedDate) {
this.target.value = '';
return;
}
this.#setValue();
this.target.value = `${this.dateFormat(firstDp.selectedDate)} - ${this.dateFormat(secondDp.selectedDate)}`;
this.hide();
Ut.trigger(this.opts.onChange, this);
this.target.dxTrigger('changed');
}
/**
* TwoDatepicker, Date Format
*/
dateFormat(date) {
return date.toLocaleDateString(this.opts.locales, {
day : '2-digit',
month : '2-digit',
year : 'numeric'
});
//.replace(/\./g, '/');
};
#setValue() {
const clear = !this.firstDp.selectedDate || !this.secondDp.selectedDate;
this.value = !clear ? `${this.firstDp.value}${this.opts.valSeparator}${this.secondDp.value}` : '';
this.displayValue = !clear ? `${this.firstDp.displayValue}${this.opts.dateSeparator}${this.secondDp.displayValue}` : '';
if (this.#isInput) {
this.target.value = this.displayValue;
}
}
/**
* TwoDatePicker, Show UI
*/
show() {
this.ui.classList.remove('hidden');
if (this.opts.anim) {
this.ui.classList.add('visible');
if (this.#isOpened) {
return;
}
this.setPosition();
if (!this.#hasRendered) {
this.isOpen = true;
this.#initUi();
if (this.value) {
this.secondDp.setDateRange({ minDate: this.firstDp.selectedDate });
this.secondDp.enable();
}
}
this.el.classList.remove('hidden');
if (this.opts.anim) {
this.el.classList.add('visible');
}
this.#reposition();
this.#isOpened = true;
Ut.trigger(this.opts.onShow, this);
}
/**
* TwoDatePicker, Hide UI
*/
hide() {
if (this.isOpen) {
if (this.#isOpened) {
this.ui.classList.add('hidden');
this.el.classList.add('hidden');
if (this.opts.anim) {
this.ui.classList.remove('visible');
this.el.classList.remove('visible');
}
this.isOpen = false;
this.#isOpened = false;
Ut.trigger(this.opts.onHide, this);
}
}
/**
* TwoDatePicker, Set UI Posituion
*/
setPosition() {
#reposition() {
let left = Math.round(this.target.dxOffset().left);
if ((this.ui.clientWidth + left) > window.innerWidth) {
if ((this.el.clientWidth + left) > window.innerWidth) {
left = 0;
}
this.ui.dxCss({
this.el.dxCss({
top : (Math.round(this.target.dxOffset().top) + this.target.clientHeight + 2) + 'px',
left : left + 'px',
});
}
/**
* TwoDatePicker, Clear Val
*/
clear() {
this.firstDp.clear();
if (this.isToggled) {
this.secondDp.clear();
this.secondDp.disable();
if (this.opts.cancelable) {
this.target.dxData('cancelable').iconHandler.classList.add('hide');
}
this.#setValue();
if (this.#isToggled) {
this.target.dxData('cancelable').iconHandler.classList.add('hide');
this.hide();
}
}
if (this.isInput) {
this.target.dxVal('');
getValue() {
return this.value;
}
restoreValue(val, separator = this.opts.valSeparator) {
if (!val) {
return false;
}
if (!Array.isArray(val)) {
val = val.split(separator);
}
this.datepicker[0].clear();
this.datepicker[1].clear();
if (val.length != 2) {
return false;
}
const [ firstDate, secDate ] = val;
this.firstDp.restoreValue(firstDate);
this.secondDp.restoreValue(secDate);
this.#setValue();
if (this.#hasRendered) {
this.secondDp.setDateRange({ minDate: this.firstDp.selectedDate });
this.secondDp.enable();
}
Ut.trigger(this.opts.onChange, this);
this.target.dxTrigger('changed');
return true;
}
/**
* TwoDatePicker, Restore Selected Val
*/
restoreValue(dates) {
if (!dates || !dates.length) {
return;
}
const [ fromDate, toDate ] = dates;
if (fromDate.getTime() <= toDate.getTime()) {
this.datepicker[0].restoreValue(fromDate);
this.datepicker[1].restoreValue(toDate);
this.datepicker[1].setDateRange({ minDate: fromDate });
}
}
/**
* TwoDatePicker, Set Events
*/
setEvents() {
let that = this;
// Restore Selected - Handler
if (this.isInput) {
this.target.dxOn('keydown.two_datepicker paste.two_datepicker', e => e.preventDefault());
//this.target.dxOn('restore.two_datepicker', (_, t) => this.restoreValue(t.value));
}
if (this.isToggled) {
// Click on UI - fixed Handler
this.ui.dxOn('click', e => e.stopPropagation());
this.target.dxOn('click.two_datepicker', e => {
e.stopPropagation();
if (!that.opts.hiddenMode) {
that.show();
}
});
// Clear Icon Handler
if (this.opts.cancelable) {
this.target.dxOn('clear', _ => {
that.clear();
Ut.trigger(that.opts.onChange, that, null, false);
});
}
// Click outside - Handler
document.body.dxOn('click.two_datepicker' + this.ekey, _ => this.hide());
let tm = null;
// Resize window Handler
window.dxOn('scroll.two_datepicker resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey, _ => {
if (tm) {
clearTimeout(tm);
tm = null;
}
tm = setTimeout(_ => that.setPosition(), 100);
});
}
}
/**
* TwoDatePicker, Destroy Widget
*/
destroy() {
this.datepicker[0].destroy();
this.datepicker[1].destroy();
this.firstDp.destroy();
this.secondDp.destroy();
this.ui.remove();
if (this.#hasRendered) {
this.el.remove();
if (this.isToggled) {
this.target.dxOff('click.two_datepicker keydown.two_datepicker paste.two_datepicker restore.two_datepicker');
document.body.dxOff('click.two_datepicker' + this.ekey);
window.dxOff('scroll.two_datepicker resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey);
if (this.#isToggled) {
document.dxOff(`pointerdown.twodatepicker.${this.ekey}`);
window.dxOff(`resize.two_datepicker.${this.ekey} orientationchange.two_datepicker.${this.ekey}`);
}
}
this.target.dxRemoveData('two_datepicker');
Stack.delete(this);
this.target.dxRemoveWidget();
Ut.trigger(this.opts.onDestroy, this);
}
src/widgets/two-datepicker/two-datepicker.css
+1 -1
View File
@@ -4,7 +4,7 @@
display: flex;
flex-wrap: nowrap;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
}
.sp-two-datepicker .ui-col:last-child {