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

initial commit

Browse Source
This commit is contained in:
Ahmed Zamil
2021-02-22 11:39:50 +03:00
commit e82f4bc4cf
87 changed files with 14463 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
src/UI/DateTimePicker.js Normal file
View File

@@ -0,0 +1,314 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class DateTimePicker extends IUIElement {
constructor() {
super();
}
get layout() {
return this._layout;
}
set layout(value) {
if (value == this._layout)
return;
this.innerHTML = "";
this._layout = value;
this.calendar = document.createElement("div");
this.calendar.className = this.cssClass + "-calendar";
this.calendarContent = document.createElement("div");
this.calendarContent.className = this.cssClass + "-calendar-content";
this.table = document.createElement("table");
this.header = this.table.createTHead();
this.body = this.table.createTBody();
this.calendarContent.appendChild(this.table);
var tr = this.header.insertRow();
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";
}
this.tools = document.createElement("div");
this.tools.className = this.cssClass + "-tools";
this.month = document.createElement("div");
this.month.className = this.cssClass + "-month";
this.monthName = document.createElement("div");
this.monthName.className = this.cssClass + "-name";
this.nextMonth = document.createElement("div");
this.nextMonth.className = this.cssClass + "-next";
this.previousMonth = document.createElement("div");;
this.previousMonth.className = this.cssClass + "-previous";
this.month.appendChild(this.previousMonth);
this.month.appendChild(this.monthName);
this.month.appendChild(this.nextMonth);
this.year = document.createElement("div");
this.year.className = this.cssClass + "-year";
this.yearName = document.createElement("div");
this.yearName.className = this.cssClass + "-name";
this.nextYear = document.createElement("div");
this.nextYear.className = this.cssClass + "-next";
this.previousYear = document.createElement("div");
this.previousYear.className = this.cssClass + "-previous";
this.year.appendChild(this.previousYear);
this.year.appendChild(this.yearName);
this.year.appendChild(this.nextYear);
this.tools.appendChild(this.month);
this.tools.appendChild(this.year);
let self = this;
this.nextMonth.addEventListener("click", function () {
self._month = (self._month + 1) % 12;
self.render();
});
this.previousMonth.addEventListener("click", function () {
self._month = (self._month + 11) % 12;
self.render();
});
this.nextYear.addEventListener("click", function () {
self._year++;
self.render();
});
this.previousYear.addEventListener("click", function () {
self._year--;
self.render();
});
for (let i = 0; i < 6; i++) {
tr = this.body.insertRow();
for (var j = 0; j < 7; j++) {
let td = tr.insertCell(tr);
td.className = this.cssClass + "-day";
td.innerHTML = i + "x" + j;
td.addEventListener("click", function () {
self._day = parseInt(this.getAttribute("data-day"));
self._month = parseInt(this.getAttribute("data-month"));
self._year = parseInt(this.getAttribute("data-year"));
self._value.setDate(self._day);
self._value.setFullYear(self._year);
self._value.setMonth(self._month);
self.render();
self._emit("select", { value: self._value });
self._emit("modified", { value, property: "value" });
});
}
}
this.calendar.appendChild(this.tools);
this.calendar.appendChild(this.calendarContent);
/*
this.minutes = document.createElement("div");
this.minutes.className = this.cssClass + "-clock";
for (var i = 1; i < 61; i++) {
var range = document.createElement("div");
range.className = this.cssClass + "-time";
range.innerHTML = i;
this.minutes.appendChild(range);
}
this.hours = document.createElement("div");
this.hours.className = this.cssClass + "-clock";
for (var i = 1; i < 25; i++) {
var range = document.createElement("div");
range.className = this.cssClass + "-time";
range.innerHTML = i;
this.hours.appendChild(range);
}
*/
this.clock = document.createElement("div");
this.clock.className = this.cssClass + "-clock";
for (let i = 0; i < 1440; i += this.layout.time.range) {
var range = document.createElement("div");
range.className = this.cssClass + "-time";
range.innerHTML = this.layout.time.formatter(i);
range.setAttribute("data-time", i);
this.clock.appendChild(range);
range.addEventListener("click", function () {
var t = parseInt(this.getAttribute("data-time"));
var h = Math.floor(t / 60);
var m = Math.floor(t % 60);
self._value.setHours(h);
self._value.setMinutes(m);
self._emit("select", self._value);
self.render();
});
}
//this.timeList = document.createElement("div");
//this.timeList =
this.appendChild(this.calendar);
this.appendChild(this.clock);
// this.appendChild(this.minutes);
// this.appendChild(this.hours);
this.value = new Date();
}
create() {
var self = this;
this._register("select");
this.classList.add(this.cssClass);
this.layout = {
day: {
formatter: function (index) {
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index];
//return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
}
},
month: {
formatter: function (index) {
return ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"][index];
}
},
year: {
formatter: function (value) {
return value;
}
},
time: {
formatter: function (value) {
var formatDigit = function (d) { return (d < 10) ? "0" + d : d; };
var h = Math.floor(value / 60);
var m = Math.floor(value % 60);
return formatDigit(h) + ":" + formatDigit(m);
},
range: 15
},
weekStart: 5
};
}
render() {
var start = new Date(this._year, this._month, 1);
var offset = 1 - start.getDay() - (7 - this.layout.weekStart) % 7;//(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart);
this.yearName.innerHTML = this.layout.year.formatter(this._year);
this.monthName.innerHTML = this.layout.month.formatter(this._month);
var today = new Date();
for (var i = 0; i < 42; i++) {
var rowIndex = Math.floor(i / 7);
var cellIndex = i % 7;
var td = this.body.rows[rowIndex].cells[cellIndex];
var d = new Date(this._year, this._month, offset + i);
td.classList.remove(this.cssClass + "-different-month");
// gray it
if (d.getMonth() != this._month)
td.classList.add(this.cssClass + "-different-month");
if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear())
td.classList.add(this.cssClass + "-day-today");
else
td.classList.remove(this.cssClass + "-day-today");
if (d.getDate() == this._value.getDate()
&& d.getFullYear() == this._value.getFullYear()
&& d.getMonth() == this._value.getMonth())
td.classList.add(this.cssClass + "-day-selected");
else
td.classList.remove(this.cssClass + "-day-selected");
td.setAttribute("data-day", d.getDate());
td.setAttribute("data-month", d.getMonth());
td.setAttribute("data-year", d.getFullYear());
td.innerHTML = d.getDate();
}
for (var i = 0; i < this.clock.children.length; i++)
this.clock.children[i].classList.remove(this.cssClass + "-time-selected");
var time = (this._value.getHours() * 60) + this._value.getMinutes();
if (time % this.layout.time.range == 0)
this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected");
}
async setData(value) {
await super.setData(value);
if (value != null && this.field != null)
this.value = this.data[this.field];
}
get data() {
return super.data;
}
modified(name, value) {
if (name == this.field)
this.value = value;
}
set value(value) {
if (value && !isNaN(value.getTime())) {
this._value = value;
this._month = value.getMonth();
this._year = value.getFullYear();
this._day = value.getDate();
this.render();
this._emit("select", { value });
this._emit("modified", { value, property: "value" });
//this.modified("value", );
//this.modified("modified", { value });
}
}
get value() {
return this._value;
}
});