From b75bb9869faf85ffb894dd769e11e6b528b1f5c9 Mon Sep 17 00:00:00 2001 From: Ahmed Zamil Date: Sat, 6 Jul 2024 14:13:27 +0300 Subject: [PATCH] DateTimePicker --- css/iui.css | 2 + package.json | 2 +- src/Router/Route.js | 2 + src/UI/DateTimePicker.js | 50 +++++++++++-- src/UI/DropDown.js | 149 ++++----------------------------------- src/UI/Input.js | 3 +- 6 files changed, 64 insertions(+), 144 deletions(-) diff --git a/css/iui.css b/css/iui.css index 37f0e7c..48ffae9 100644 --- a/css/iui.css +++ b/css/iui.css @@ -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 { diff --git a/package.json b/package.json index bc08cd2..1533c3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esiur/iui", - "version": "1.2.1", + "version": "1.2.2", "description": "Interactive User Interface", "main": "iui.js", "type": "module", diff --git a/src/Router/Route.js b/src/Router/Route.js index ef9ccb0..ea723ff 100644 --- a/src/Router/Route.js +++ b/src/Router/Route.js @@ -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) { diff --git a/src/UI/DateTimePicker.js b/src/UI/DateTimePicker.js index 8221ed1..188add2 100644 --- a/src/UI/DateTimePicker.js +++ b/src/UI/DateTimePicker.js @@ -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(); } } diff --git a/src/UI/DropDown.js b/src/UI/DropDown.js index 3a6d1a7..9123ba8 100644 --- a/src/UI/DropDown.js +++ b/src/UI/DropDown.js @@ -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; - - } }); \ No newline at end of file diff --git a/src/UI/Input.js b/src/UI/Input.js index 07446da..fe18bf4 100644 --- a/src/UI/Input.js +++ b/src/UI/Input.js @@ -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);