esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-10-29 01:40:29 +00:00
Code Issues Projects Releases Wiki Activity

DateTimePicker

Browse Source
This commit is contained in:
Ahmed Zamil
2024-07-06 14:13:27 +03:00
parent 2d73f0c63c
commit b75bb9869f
6 changed files with 64 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/iui.css
View File

@@ -165,6 +165,7 @@
--grid-window-drag-border: #46b7e6 dotted 3px;
--datetimepicker-calendar-border-right: 3px solid pink;
--datetimepicker-clock-background: gainsboro;
--datetimepicker-calendar-content-background: var(--default-background-color);
--datetimepicker-different-month-color: #bebebe;
--datetimepicker-day-background-hover: #a7e3fc;
--datetimepicker-day-selected-background: #46b7e6;
@@ -2366,6 +2367,7 @@ html[dir='rtl'] .multiselect-list-remove {
.datetimepicker-calendar-content {
display: flex;
flex: 1;
background: var(--datetimepicker-calendar-content-background);
}
.datetimepicker-clock {

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@esiur/iui",
"version": "1.2.1",
"version": "1.2.2",
"description": "Interactive User Interface",
"main": "iui.js",
"type": "module",

2
src/Router/Route.js
View File

@@ -13,6 +13,7 @@ export default IUI.module(
this._register("show");
this._register("hide");
this._register("load");
}
async setData(value) {
@@ -150,6 +151,7 @@ export default IUI.module(
created() {
this.refs._build();
this._emit("load", { route: this });
}
set(value) {

50
src/UI/DateTimePicker.js
View File

@@ -8,7 +8,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
super();
}
get layout() {
return this._layout;
@@ -41,7 +41,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
for (var i = 0; i < 7; i++) {
var td = tr.insertCell();
td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7);
td.className = this.cssClass + "-day";
td.className = this.cssClass + "-day";
}
this.tools = document.createElement("div");
@@ -76,7 +76,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this.tools.appendChild(this.month);
this.tools.appendChild(this.year);
let self = this;
let self = this;
this.nextMonth.addEventListener("click", function () {
self._month = (self._month + 1) % 12;
@@ -114,6 +114,10 @@ export default IUI.module(class DateTimePicker extends IUIElement {
self._value.setFullYear(self._year);
self._value.setMonth(self._month);
self.render();
if (self.isAuto)
self.revert();
self._emit("select", { value: self._value });
self._emit(":value", { value });
});
@@ -165,6 +169,10 @@ export default IUI.module(class DateTimePicker extends IUIElement {
var m = Math.floor(t % 60);
self._value.setHours(h);
self._value.setMinutes(m);
if (self.isAuto)
self.revert();
self._emit("select", self._value);
self.render();
});
@@ -174,13 +182,26 @@ export default IUI.module(class DateTimePicker extends IUIElement {
//this.timeList =
this.appendChild(this.calendar);
this.appendChild(this.clock);
// this.appendChild(this.minutes);
// this.appendChild(this.hours);
// this.appendChild(this.minutes);
// this.appendChild(this.hours);
this.value = new Date();
}
create() {
async create() {
await super.create();
this.isAuto = this.hasAttribute("auto");
this.field = this.getAttribute("field");
if (this.field != null) {
this.setAttribute(":data", `d != null ? d['${this.field}'] : null`);
this.setAttribute(
"async:revert",
`d != null ? d['${this.field}'] = this.data : null`
);
}
var self = this;
@@ -286,13 +307,25 @@ export default IUI.module(class DateTimePicker extends IUIElement {
}
get data() {
return super.data;
return this.value;
}
async setData(value) {
await super.setData(value);
this.value = value;
if (this.isAuto)
this.revert();
}
/*
modified(name, value) {
if (name == this.field)
this.value = value;
}
*/
set value(value) {
if (value && !isNaN(value.getTime())) {
@@ -305,6 +338,9 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this._emit("modified", { value, property: "value" });
//this.modified("value", );
//this.modified("modified", { value });
if (this.isAuto)
this.revert();
}
}

149
src/UI/DropDown.js
View File

@@ -4,14 +4,12 @@ import Layout from "../Data/Layout.js";
import Menu from "./Menu.js";
export default IUI.module(class DropDown extends IUIElement {
visible = false;
//visible = false;
constructor() {
super({"direction": "down" });
this._register("visible");
}
@@ -55,17 +53,6 @@ export default IUI.module(class DropDown extends IUIElement {
document.body.appendChild(this.menu);
}
this.addEventListener("click", function (e) {
var t = e.target
do {
if (t == self.menu)
return;
} while (t = t.parentElement)
self.setVisible(!self.visible);
});
app.appendChild(this.menu);
if (app.loaded)
@@ -78,6 +65,14 @@ export default IUI.module(class DropDown extends IUIElement {
await IUI.created(this.menu);
}
}
async setData(value){
//debugger;
await super.setData(value);
await this.menu.setData(value);
}
set fixed(value) {
@@ -109,36 +104,18 @@ export default IUI.module(class DropDown extends IUIElement {
if (this.menu)
app.appendChild(this.menu);
}
getOffset() {
var el = this;
var _x = 0;
var _y = 0;
while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
_x += window.pageXOffset;
_y += window.pageYOffset;
return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight };
}
setVisible(visible) {
if (visible == this.visible)
if (visible == this.menu.visible)
return;
if (visible) {
// show menu
var rect = this.getBoundingClientRect();
this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
this.menu.style.paddingTop = rect.height + "px";
//this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
this.menu.style.marginTop = rect.height + "px";
this.menu.setVisible(true, rect.left, rect.top);//, this.menu);
this.visible = true;
this.classList.add(this.cssClass + "-visible");
@@ -149,113 +126,15 @@ export default IUI.module(class DropDown extends IUIElement {
}
else {
this.visible = false;
this.classList.remove(this.cssClass + "-visible");
this.classList.remove(this.cssClass + "-visible");
this.menu.hide();
}
//this.textbox.focus();
}
_computeMenuOuterWidth() {
return this.menu.offsetWidth - this.menu.clientWidth;
}
setVisibleOld(visible) {
this.visible = visible;
if (!this.fixed) {
if (visible) {
this.menu.classList.add(this.cssClass + "-menu-visible");
this.classList.add(this.cssClass + "-visible");
}
else {
this.menu.classList.remove(this.cssClass + "-menu-visible");
this.classList.remove(this.cssClass + "-visible");
}
}
else {
if (visible) {
var rect = this.getBoundingClientRect();
var menuWidth = this.menu.clientWidth;
var menuHeight = this.menu.clientHeight;
if (menuWidth > document.body.clientWidth) {
menuWidth = (document.body.clientWidth - 10);
this.menu.style.width = menuWidth + "px";
}
var startX = rect.left + (rect.width / 2 - menuWidth / 2);
if (this.direction == "up") {
// var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight;
var menuTop = rect.top - this.menu.clientHeight;
if (menuTop < 0) {
menuTop = 5;
// this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px";
this.menu.style.height = (rect.top) + "px";
this.menu.classList.add(this.cssClass + "-menu-oversized");
}
else
this.menu.classList.remove(this.cssClass + "-menu-oversized");
//this.arrow.classList.remove(this.customClass + "-arrow-down");
//this.arrow.classList.add(this.customClass + "-arrow-up");
//this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px";
this.menu.style.top = (menuTop) + "px";
}
else {
//var menuTop = rect.top + rect.height + this.arrow.clientHeight;
var menuTop = rect.top + rect.height;
//this.arrow.classList.remove(this.customClass + "-arrow-up");
//this.arrow.classList.add(this.customClass + "-arrow-down");
//this.arrow.style.top = ( rect.top + rect.height ) + "px";
this.menu.style.top = menuTop + "px";
if (menuTop + menuHeight > document.body.clientHeight) {
this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
this.menu.classList.add(this.cssClass + "-menu-oversized");
}
else {
this.menu.classList.remove(this.cssClass + "-menu-oversized");
}
}
if (startX < 0)
startX = 5;
else if (startX + menuWidth > document.body.clientWidth)
startX = document.body.clientWidth - menuWidth - 5;
//this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px";
this.menu.style.left = startX + "px";
//this.arrow.classList.add(this.customClass + "-arrow-visible");
this.menu.classList.add(this.cssClass + "-menu-visible");
this.classList.add(this.cssClass + "-visible");
}
else {
//this.arrow.classList.remove(this.customClass + "-arrow-visible");
this.menu.classList.remove(this.cssClass + "-menu-visible");
this.classList.remove(this.cssClass + "-visible");
}
}
this._emit("visible", { visible});
return this;
}
});

3
src/UI/Input.js
View File

@@ -157,7 +157,8 @@ export default IUI.module(
// can't set value on file input
} else this._input.value = value;
if (this._checkValidity() && this.isAuto) this.revert();
if (this._checkValidity() && this.isAuto)
this.revert();
/*
await super.setData(value);