esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2026-04-04 23:18:21 +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

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;
}
});