mirror of
https://github.com/esiur/iui.git
synced 2026-04-04 06:58:22 +00:00
initial commit
This commit is contained in:
40
src/UI/Background.js
Normal file
40
src/UI/Background.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Background extends IUIElement {
|
||||
constructor() {
|
||||
super({ cssClass: 'background' });
|
||||
|
||||
|
||||
this.classList.add(this.cssClass);
|
||||
this._register("visible");
|
||||
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
setVisible(value) {
|
||||
this.visible = value;
|
||||
if (value) {
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
}
|
||||
else {
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
}
|
||||
|
||||
this._emit("visible", value);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
70
src/UI/Button.js
Normal file
70
src/UI/Button.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Button extends IUIElement {
|
||||
constructor() {
|
||||
super({ cssClass: 'button' });
|
||||
|
||||
this.addEventListener("mousedown", (e)=>{
|
||||
|
||||
var r = this.getBoundingClientRect();
|
||||
this.style.setProperty("--x", (e.x - r.x) + "px");
|
||||
this.style.setProperty("--y", (e.y - r.y) + "px");
|
||||
|
||||
this.style.setProperty("--w", r.width + "px");
|
||||
this.style.setProperty("--h", r.height + "px");
|
||||
|
||||
this.classList.remove(this.cssClass + "-clicked");
|
||||
void this.offsetWidth;
|
||||
this.classList.add(this.cssClass + "-clicked");
|
||||
|
||||
}, true);
|
||||
|
||||
this._register("check");
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this.getAttribute("type");
|
||||
}
|
||||
|
||||
set type(value)
|
||||
{
|
||||
this.setAttribute("type", value);
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.hasAttribute("checked");
|
||||
}
|
||||
|
||||
set checked(value)
|
||||
{
|
||||
if (value)
|
||||
this.setAttribute("checked", "");
|
||||
else
|
||||
this.removeAttribute("checked");
|
||||
}
|
||||
|
||||
|
||||
get disabled() {
|
||||
return this.getAttribute("disabled");
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
this.setAttribute("disabled", value);
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
|
||||
if (this.type == "check")
|
||||
{
|
||||
this.addEventListener("click", ()=>{
|
||||
let checked = !this.checked;
|
||||
this.checked = checked;
|
||||
this._emit("check", {checked});
|
||||
});
|
||||
}
|
||||
|
||||
//this.classList.add(this.cssClass);
|
||||
}
|
||||
});
|
||||
58
src/UI/Check.js
Normal file
58
src/UI/Check.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Check extends IUIElement {
|
||||
constructor(properties) {
|
||||
super(IUI.extend(properties, { cssClass: 'check' }));
|
||||
|
||||
this._register("check");
|
||||
|
||||
this.on("click", () => {
|
||||
this.checked = !this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.hasAttribute("checked");
|
||||
}
|
||||
|
||||
set checked(value) {
|
||||
this.check(value);
|
||||
this._emit("check", { checked: value });
|
||||
}
|
||||
|
||||
check(value) {
|
||||
if (value)
|
||||
this.setAttribute("checked", "checked");
|
||||
else
|
||||
this.removeAttribute("checked");
|
||||
}
|
||||
|
||||
create() {
|
||||
this.field = this.getAttribute("field");
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
await super.setData(value);
|
||||
if (value != null && this.field != null)
|
||||
this.value = value[this.field];
|
||||
else if (this.field != null)
|
||||
this.value = null;
|
||||
}
|
||||
|
||||
|
||||
modified(name, value) {
|
||||
if (name == this.field) {
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.checked;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this.checked = value;
|
||||
}
|
||||
|
||||
});
|
||||
314
src/UI/DateTimePicker.js
Normal file
314
src/UI/DateTimePicker.js
Normal 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;
|
||||
}
|
||||
});
|
||||
308
src/UI/Dialog.js
Normal file
308
src/UI/Dialog.js
Normal file
@@ -0,0 +1,308 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import IUIWindow from "./Window.js";
|
||||
|
||||
export default IUI.module(class IUIDialog extends IUIWindow
|
||||
{
|
||||
static moduleName = "dialog";
|
||||
|
||||
constructor()
|
||||
{
|
||||
super({
|
||||
closeable: true,
|
||||
resizeable: true,
|
||||
draggable: false,
|
||||
_dragging: false,
|
||||
_expanding: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
visible: false,
|
||||
modal: false
|
||||
}
|
||||
);
|
||||
|
||||
var self = this;
|
||||
|
||||
this._register("visible");
|
||||
this._register("resize");
|
||||
|
||||
this.on("close", function(){
|
||||
self.hide();
|
||||
});
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
|
||||
super.create();
|
||||
var self = this;
|
||||
|
||||
if (this.modal)
|
||||
{
|
||||
this.background = iui("iui_app_background");
|
||||
if (!this.background)
|
||||
{
|
||||
var bg = document.createElement("div");
|
||||
bg.id="iui_app_background";
|
||||
document.body.insertAdjacentElement("afterBegin", bg);
|
||||
this.background = iui(bg).background();
|
||||
}
|
||||
|
||||
|
||||
// this.modal.className = this.customClass + "-modal-background";
|
||||
|
||||
this.classList.add(this.customClass + "-modal");
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.loading = document.createElement("div");
|
||||
this.loading.className = this.customClass + "-loading";
|
||||
|
||||
if (this.loadingText)
|
||||
this.loading.innerHTML = this.loadingText;
|
||||
else
|
||||
{
|
||||
var lc = document.createElement("div");
|
||||
lc.className = this.customClass + "-loading-content";
|
||||
this.loading.appendChild(lc);
|
||||
}
|
||||
|
||||
this.body.appendChild(this.loading);
|
||||
|
||||
|
||||
if (this.draggable)
|
||||
{
|
||||
this.addEventListener("mousedown", function(e){
|
||||
self._startDragging(e);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.header.addEventListener('mousedown', function (e) {
|
||||
self._startDragging(e);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mouseup', function () {
|
||||
self._stopDragging();
|
||||
self._stopExpanding();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
if (self._dragging)
|
||||
self._drag(e);
|
||||
else if (self._expanding)
|
||||
self._expand(e);
|
||||
});
|
||||
|
||||
this.addEventListener("mousedown", function(e){
|
||||
if (self.style.cursor == "nwse-resize")
|
||||
self._startExpanding(e);
|
||||
});
|
||||
|
||||
this.addEventListener("mousemove", function(e)
|
||||
{
|
||||
if (self._dragging)
|
||||
return;
|
||||
|
||||
if (!self._expanding)
|
||||
{
|
||||
var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - self.offsetLeft;
|
||||
var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop) ) - self.offsetTop;
|
||||
|
||||
if (self.clientWidth - x < 5 && self.clientHeight - y < 5)
|
||||
{
|
||||
self.style.cursor = "nwse-resize";
|
||||
}
|
||||
else
|
||||
{
|
||||
self.style.cursor = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
_startDragging(e)
|
||||
{
|
||||
this._dragging = true;
|
||||
|
||||
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop) ) - this.offsetTop;
|
||||
|
||||
//corssbrowser mouse pointer values
|
||||
document.onselectstart = function() {return false};
|
||||
}
|
||||
|
||||
_drag(e)
|
||||
{
|
||||
var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft);
|
||||
var y = e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop);
|
||||
this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px";
|
||||
this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px";
|
||||
this._emit("move", {left: this.offsetLeft, top: this.offsetTop});
|
||||
}
|
||||
|
||||
_stopDragging()
|
||||
{
|
||||
this._dragging = false;
|
||||
}
|
||||
|
||||
_startExpanding(e)
|
||||
{
|
||||
document.onselectstart = function() {return false};
|
||||
this._expanding = true;
|
||||
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop) ) - this.offsetTop;
|
||||
this._width = this.clientWidth;
|
||||
this._height = this.clientHeight;
|
||||
}
|
||||
|
||||
_expand(e)
|
||||
{
|
||||
var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop)) - this.offsetTop;
|
||||
|
||||
|
||||
this.resize(this._width + x -this._dragX, this._height + y - this._dragY);
|
||||
}
|
||||
|
||||
_stopExpanding()
|
||||
{
|
||||
this._expanding = false;
|
||||
this.style.cursor = "";
|
||||
this._width = this.clientWidth;
|
||||
this._height = this.clientHeight;
|
||||
document.onselectstart = function() {return true};
|
||||
}
|
||||
|
||||
setLoading(visible)
|
||||
{
|
||||
if (this.footer)
|
||||
for(var i = 0; i < this.footer.children.length; i++)
|
||||
if (this.footer.children[i].nodeName == "BUTTON")
|
||||
this.footer.children[i].disabled = visible;
|
||||
|
||||
if (visible)
|
||||
this.loading.classList.add(this.customClass + "-loading-visible");
|
||||
else
|
||||
this.loading.classList.remove(this.customClass + "-loading-visible");
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
center()
|
||||
{
|
||||
this._updateSize();
|
||||
return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2),
|
||||
window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2));
|
||||
}
|
||||
|
||||
setVisible(visible)
|
||||
{
|
||||
|
||||
if (visible == this.visible)
|
||||
return;
|
||||
|
||||
this.visible = visible;
|
||||
|
||||
if (visible)
|
||||
{
|
||||
this.classList.add(this.customClass + "-visible");
|
||||
|
||||
if (this.background)
|
||||
{
|
||||
this.background.setVisible(true);
|
||||
|
||||
}
|
||||
//else
|
||||
if (!this._shown)
|
||||
{
|
||||
this._updateSize();
|
||||
this._shown = true;
|
||||
}
|
||||
|
||||
this.setFocus(true);
|
||||
|
||||
this._updateSize();
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
this._updateSize();
|
||||
|
||||
this.classList.remove(this.customClass + "-visible");
|
||||
this.classList.remove(this.customClass + "-active");
|
||||
|
||||
if (this.background)
|
||||
this.background.setVisible(false);
|
||||
|
||||
//this.modal.classList.remove(this.customClass + "-modal-background-visible");
|
||||
|
||||
this.setFocus(false);
|
||||
|
||||
var i = IUI._nav_list.indexOf(this);
|
||||
if (i > -1)
|
||||
IUI._nav_list.splice(i, 1);
|
||||
|
||||
/*
|
||||
IUI._nav_list.pop
|
||||
if (IUI._previousWindow)
|
||||
if (IUI._previousWindow.visible)
|
||||
IUI._previousWindow.focus();
|
||||
else
|
||||
window.location.hash = "";
|
||||
else
|
||||
window.location.hash = "";
|
||||
*/
|
||||
}
|
||||
|
||||
this._emit("visible", {visible});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
hide()
|
||||
{
|
||||
this.setVisible(false);
|
||||
return this;
|
||||
}
|
||||
|
||||
show()
|
||||
{
|
||||
this.setVisible(true);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if ( e.keyCode === 27 ) { // ESC
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;});
|
||||
for(var i = 0; i < dialogs.length; i++)
|
||||
dialogs[i].hide();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);});
|
||||
196
src/UI/DropDown.js
Normal file
196
src/UI/DropDown.js
Normal file
@@ -0,0 +1,196 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class DropDown extends IUIElement {
|
||||
constructor() {
|
||||
super({"direction": "down" });
|
||||
|
||||
var self = this;
|
||||
|
||||
this._register("visible");
|
||||
|
||||
this.visible = false;
|
||||
|
||||
// this.classList.add(this.cssClass + "-" + this.direction);
|
||||
|
||||
this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0];
|
||||
|
||||
|
||||
//this.arrow = document.createElement("div");
|
||||
//this.arrow.className = this.customClass + "-arrow";
|
||||
|
||||
|
||||
//this.el.appendChild(this.arrow);
|
||||
|
||||
if (this.getAttribute("fixed"))
|
||||
{
|
||||
this._fixed = true;
|
||||
document.body.appendChild(this.menu);
|
||||
}
|
||||
|
||||
//this.el.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);
|
||||
});
|
||||
|
||||
IUI._menus.push(this);
|
||||
|
||||
/*
|
||||
document.body.addEventListener("click", function(e)
|
||||
{
|
||||
if (!self.visible)
|
||||
return;
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self.menu || x == self.el)
|
||||
return;
|
||||
} while (x = x.parentNode)
|
||||
|
||||
if (e.target.id == "iui_app_background")
|
||||
return;
|
||||
|
||||
self.setVisible(false);
|
||||
});*/
|
||||
}
|
||||
|
||||
set fixed(value) {
|
||||
if (value)
|
||||
document.body.appendChild(this.menu);
|
||||
this._fixed = value;
|
||||
}
|
||||
|
||||
get fixed() {
|
||||
return this._fixed;
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
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 };
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
// console.log("DD", value);
|
||||
super.data = value;
|
||||
// console.log("VV", this._uiBindings, this._dataBindings);
|
||||
}
|
||||
setVisible(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;
|
||||
|
||||
}
|
||||
});
|
||||
101
src/UI/Form.js
Normal file
101
src/UI/Form.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Tabs from "./Tabs.js";
|
||||
import Tab from "./Tab.js";
|
||||
|
||||
export default IUI.module(class Form extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
this._container = document.createElement("div");
|
||||
this._container.className = "container";
|
||||
|
||||
this._actions = document.createElement("div");
|
||||
this._actions.className = "actions";
|
||||
|
||||
|
||||
this._save = document.createElement("button");
|
||||
this._save.className = "button";
|
||||
this._save.innerHTML = this.hasAttribute("save") ? this.getAttribute("save") : "Save";
|
||||
this._cancel = document.createElement("button");
|
||||
this._cancel.className = "button";
|
||||
this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel";
|
||||
|
||||
this._save.addEventListener("click", (x) => {
|
||||
|
||||
});
|
||||
|
||||
this._cancel.addEventListener("click", (x) => {
|
||||
window.router.back();
|
||||
});
|
||||
|
||||
|
||||
this._actions.appendChild(this._save);
|
||||
this._actions.appendChild(this._cancel);
|
||||
|
||||
this.appendChild(this._container);
|
||||
this.appendChild(this._actions);
|
||||
|
||||
}
|
||||
|
||||
set layout(value) {
|
||||
/*
|
||||
|
||||
mode:tabs,
|
||||
tabs: [
|
||||
{name: 'Tab Name'},
|
||||
{content: [
|
||||
{field: 'item', type: 'text|selectlist|check|autocomplete|form', layout: {}}
|
||||
]}
|
||||
]
|
||||
*/
|
||||
// render layout
|
||||
if (value.mode == "tabs") {
|
||||
for (var i = 0; i < this.layout.tabs.length; i++) {
|
||||
// render tab
|
||||
this.mode = "tabs";
|
||||
this._tabs = new Tabs();
|
||||
var tab = new Tab();
|
||||
this._tabs.add(tab);
|
||||
for (var j = 0; j < this._tabs.length; j++) {
|
||||
|
||||
}
|
||||
this.layout.tasbs[i].content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
var self = this;
|
||||
|
||||
if (value == null)
|
||||
this._input.value = "";
|
||||
else {
|
||||
this._input.value = value[this._field];
|
||||
|
||||
if (value.on)
|
||||
value.on("modified", (propertyName, value) => {
|
||||
if (propertyName == self._field)
|
||||
self._input.value = value[self._field];
|
||||
});
|
||||
}
|
||||
//super.data = data;
|
||||
}
|
||||
|
||||
get layout() {
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
set layout(value) {
|
||||
// load layout
|
||||
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
// [{tab: },{}]
|
||||
}
|
||||
|
||||
this._input.value = value;
|
||||
}
|
||||
});
|
||||
204
src/UI/Grid.js
Normal file
204
src/UI/Grid.js
Normal file
@@ -0,0 +1,204 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Grid extends IUIElement {
|
||||
constructor()
|
||||
{
|
||||
super({index: "iid",
|
||||
layout: {content: {field: "name", formatter: null},
|
||||
title: {field: "content", formatter: null},
|
||||
footer: {field: "footer", formatter: null}}});
|
||||
|
||||
this._register("add");
|
||||
this._register("layout");
|
||||
this._register("contextmenu");
|
||||
|
||||
this.windows = [];
|
||||
}
|
||||
|
||||
create() {
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
this.add(this.children[i]);
|
||||
}
|
||||
|
||||
setGridLayout(style)
|
||||
{
|
||||
this.style.grid = style;
|
||||
this._emit("layout", style, this);
|
||||
return this;
|
||||
}
|
||||
|
||||
add(win) {
|
||||
let self = this;
|
||||
|
||||
win.setAttribute("draggable", true);
|
||||
win.addEventListener("dragstart", function (e) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
self._dragItem = this;
|
||||
|
||||
this.classList.add(self.cssClass + '-window-drag');
|
||||
|
||||
});
|
||||
|
||||
win.addEventListener("dragover", function (e) {
|
||||
if (self._dragItem) {
|
||||
e.preventDefault();
|
||||
this.classList.add(self.cssClass + '-window-over');
|
||||
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||
}
|
||||
});
|
||||
|
||||
win.addEventListener("dragleave", function (e) {
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
this.classList.remove(self.cssClass + "-window-over");
|
||||
});
|
||||
|
||||
win.addEventListener("dragend", function (e) {
|
||||
this.classList.remove(self.cssClass + '-window-drag');
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
win.addEventListener("drop", function (e) {
|
||||
self._dragItem.classList.remove(self.cssClass + "-window-drag");
|
||||
e.currentTarget.classList.remove(self.cssClass + "-window-over");
|
||||
|
||||
for (var i = 0; i < self.children.length; i++)
|
||||
if (self.children[i] == self._dragItem) {
|
||||
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||
break;
|
||||
}
|
||||
else if (self.children[i] == e.currentTarget) {
|
||||
self.insertBefore(self._dragItem, e.currentTarget);
|
||||
break;
|
||||
}
|
||||
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
win.addEventListener("contextmenu", function (e) {
|
||||
self.selected = win;
|
||||
self._emit("contextmenu", { win });
|
||||
});
|
||||
|
||||
win.on("close", function () {
|
||||
self.remove(win);
|
||||
});
|
||||
}
|
||||
|
||||
addOld(item)
|
||||
{
|
||||
|
||||
var self = this;
|
||||
|
||||
var li = item;//document.createElement("li");
|
||||
//li.setAttribute("data-id", item[this.index]);
|
||||
|
||||
li.setAttribute("draggable", true);
|
||||
|
||||
li.addEventListener("dragstart", function(e){
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
self._dragItem = this;
|
||||
|
||||
this.classList.add(self.cssClass + '-window-drag');
|
||||
|
||||
});
|
||||
|
||||
li.addEventListener("dragover", function(e){
|
||||
if (self._dragItem)
|
||||
{
|
||||
e.preventDefault();
|
||||
this.classList.add(self.cssClass + '-window-over');
|
||||
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||
}
|
||||
});
|
||||
|
||||
li.addEventListener("dragleave", function(e){
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
this.classList.remove(self.cssClass + "-window-over");
|
||||
});
|
||||
|
||||
li.addEventListener("dragend", function(e){
|
||||
this.classList.remove(self.cssClass + '-window-drag');
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
li.addEventListener("drop", function(e){
|
||||
self._dragItem.classList.remove(self.cssClass + "-window-drag");
|
||||
e.currentTarget.classList.remove(self.cssClass + "-window-over");
|
||||
|
||||
for(var i = 0; i < self.children.length; i++)
|
||||
if (self.children[i] == self._dragItem)
|
||||
{
|
||||
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||
break;
|
||||
}
|
||||
else if (self.children[i] == e.currentTarget)
|
||||
{
|
||||
self.insertBefore(self._dragItem, e.currentTarget);
|
||||
break;
|
||||
}
|
||||
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
li.addEventListener("contextmenu", function(e){
|
||||
self.selected = win;
|
||||
self._emit("contextmenu", item, win, this, e);
|
||||
});
|
||||
|
||||
var win = iui(li).window({draggable: false, title: this.layout.title.formatter ? this.layout.title.formatter(item[this.layout.title.field], item) : item[this.layout.title.field]});
|
||||
|
||||
var body = this.layout.content.formatter ? this.layout.content.formatter(item[this.layout.content.field], item, win, this) : item[this.layout.content.field];
|
||||
if (body instanceof HTMLElement)
|
||||
win.body.appendChild(body);
|
||||
else
|
||||
win.body.innerHTML = body;
|
||||
|
||||
var footer = this.layout.footer.formatter ? this.layout.footer.formatter(item[this.layout.footer.field], item, win, this) : item[this.layout.footer.field];
|
||||
if (footer != null)
|
||||
{
|
||||
var fe = document.createElement("div");
|
||||
fe.className = "window-footer";
|
||||
|
||||
if (footer instanceof HTMLElement)
|
||||
fe.appendChild(footer);
|
||||
else
|
||||
fe.innerHTML = footer;
|
||||
|
||||
win.appendChild(fe);
|
||||
}
|
||||
|
||||
win.on("close", function(){
|
||||
self.remove(win);
|
||||
});
|
||||
|
||||
this.appendChild(li);
|
||||
|
||||
win.control = item;
|
||||
|
||||
this.windows.push(win);
|
||||
|
||||
this._emit("add", item, win, this);
|
||||
|
||||
return this;
|
||||
//win._updateSize();
|
||||
}
|
||||
|
||||
remove(win)
|
||||
{
|
||||
win.destroy();
|
||||
this.removeChild(win);
|
||||
}
|
||||
|
||||
clear()
|
||||
{
|
||||
while (this.children.length > 0)
|
||||
this.removeChild(this.children[0]);
|
||||
}
|
||||
});
|
||||
218
src/UI/Input.js
Normal file
218
src/UI/Input.js
Normal file
@@ -0,0 +1,218 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Input extends IUIElement {
|
||||
constructor() {
|
||||
super({ formatter: (x) => x });
|
||||
this._register("input");
|
||||
this._register("change");
|
||||
}
|
||||
|
||||
_checkValidity() {
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.log("Validation Error", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
this.isAuto = this.hasAttribute("auto");
|
||||
this.field = this.getAttribute("field");
|
||||
|
||||
|
||||
if (this.field != null)
|
||||
{
|
||||
this.setAttribute(":data", `d['${this.field}']`)
|
||||
this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`);
|
||||
}
|
||||
|
||||
this._input = document.createElement("input");
|
||||
let self = this;
|
||||
|
||||
this._input.addEventListener("input", () => {
|
||||
if (self._checkValidity() && self.isAuto)
|
||||
this.revert();
|
||||
//self.data[self.field] = self.value;
|
||||
});
|
||||
|
||||
this._input.addEventListener("change", () => {
|
||||
self._emit("change", { value: self.value });
|
||||
});
|
||||
|
||||
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
|
||||
|
||||
this.accept = this.getAttribute("accept");
|
||||
|
||||
this.appendChild(this._input);
|
||||
|
||||
if (this.type == "password")
|
||||
{
|
||||
this._eye = document.createElement("div");
|
||||
this._eye.className = this.cssClass + "-eye";
|
||||
this._eye.addEventListener("mousedown", ()=>{
|
||||
self._input.type = "text";
|
||||
self._eye.classList.add(self.cssClass + "-eye-active");
|
||||
});
|
||||
this._eye.addEventListener("mouseup", ()=>{
|
||||
self._input.type = "password";
|
||||
self._eye.classList.remove(self.cssClass + "-eye-active");
|
||||
});
|
||||
|
||||
this.appendChild(this._eye);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async updateAttributes(deep, parentData) {
|
||||
await super.updateAttributes(deep, parentData);
|
||||
//this._input.type = this.type;
|
||||
//this._input.value = this.value;
|
||||
}
|
||||
|
||||
set type(value) {
|
||||
this._input.type = value;
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this._input.type;
|
||||
}
|
||||
|
||||
set accept(value){
|
||||
this._input.accept = value;
|
||||
}
|
||||
|
||||
get accept() {
|
||||
return this._input.accept;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
if (value)
|
||||
this.setAttribute("disabled", "disabled");
|
||||
else
|
||||
this.removeAttribute("disabled");
|
||||
|
||||
this._input.disabled = value;
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this._input.disabled;
|
||||
}
|
||||
|
||||
set enabled(value) {
|
||||
this.disabled = !value;
|
||||
}
|
||||
|
||||
get enabled() {
|
||||
return !this._input.disabled;
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
|
||||
await super.setData(value);
|
||||
|
||||
if (this.type == "checkbox")
|
||||
this._input.checked = value;
|
||||
else if (this.type == "date")
|
||||
this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
|
||||
this._input.value = value == null ? '' : value;
|
||||
else
|
||||
this._input.value = value;
|
||||
|
||||
if (this._checkValidity() && this.isAuto)
|
||||
this.revert();
|
||||
|
||||
|
||||
/*
|
||||
await super.setData(value);
|
||||
if (value != null && this.field != null)
|
||||
this.value = value[this.field];
|
||||
else if (this.field != null)
|
||||
this.value = null;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
// modified(name, value) {
|
||||
// if (name == this.field) {
|
||||
// this.value = value;
|
||||
// }
|
||||
// }
|
||||
|
||||
async getData(){
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
return new Uint8Array(await this._input.files[0].arrayBuffer());
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
get data()
|
||||
{
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
{
|
||||
return new Promise((resolve)=>{
|
||||
this._input.files[0].arrayBuffer().then((x)=>{
|
||||
resolve(new Uint8Array(x));
|
||||
});
|
||||
});
|
||||
}
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
/*
|
||||
get data() {
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
*/
|
||||
|
||||
// set value(value) {
|
||||
|
||||
// if (this.type == "checkbox")
|
||||
// this._input.checked = value;
|
||||
// else if (this.type == "date")
|
||||
// this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
// else if (this.type == null || this.type == "text")
|
||||
// this._input.value = value == null ? '' : value;
|
||||
// else
|
||||
// this._input.value = value;
|
||||
|
||||
// this._checkValidity();
|
||||
// }
|
||||
});
|
||||
179
src/UI/Login.js
Normal file
179
src/UI/Login.js
Normal file
@@ -0,0 +1,179 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Login extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
|
||||
|
||||
var template = `<div class='body' style='box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
border: 1px solid #b4b4b4;'>
|
||||
|
||||
<div name="message"></div>
|
||||
<div style='display: flex; flex-direction: column;padding: 20px;'>
|
||||
|
||||
<label class="textbox-with-label">
|
||||
<input name="txtUsername" placeholder=" " autocomplete="no" style="width: calc(100% - 10px);">
|
||||
<span name="spnUsername">Username</span>
|
||||
</label>
|
||||
|
||||
|
||||
<label class="textbox-with-label" >
|
||||
<input name="txtPassword" style="width: calc(100% - 10px);" type="password" placeholder=" " ">
|
||||
<span name="spnPassword">Password</span>
|
||||
</label>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
<input type="checkbox" name="remember" >
|
||||
<label for="remember" name="labelRemember">Remember</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='actions'>
|
||||
<button class='button' name="login">Login</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
this.innerHTML = template;
|
||||
|
||||
|
||||
|
||||
this._message = this.querySelector("div[name='message']");
|
||||
|
||||
this._usernameText = this.querySelector("span[name='spnUsername']");
|
||||
this._passwordText = this.querySelector("span[name='spnPassword']");
|
||||
this._rememberText = this.querySelector("label[name='labelRemember']");
|
||||
this._username = this.querySelector("input[name='txtUsername']");
|
||||
this._password = this.querySelector("input[name='txtPassword']");
|
||||
this._remember = this.querySelector("input[name='remember']");
|
||||
this._login = this.querySelector("button[name='login']");
|
||||
|
||||
var self = this;
|
||||
|
||||
this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); });
|
||||
|
||||
if (this.hasAttribute("message")) {
|
||||
this._message.innerHTML = this.getAttribute("message");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("username")) {
|
||||
this._usernameText.innerHTML = this.getAttribute("username");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("password")) {
|
||||
this._passwordText.innerHTML = this.getAttribute("password");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("remember")) {
|
||||
this._rememberText.innerHTML = this.getAttribute("remember");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("login")) {
|
||||
this._login.innerHTML = this.getAttribute("login");
|
||||
}
|
||||
|
||||
|
||||
let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||
let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||
if (username != "") {
|
||||
this._username.value = username;
|
||||
this._password.value = password;
|
||||
this._remember.checked = true;
|
||||
|
||||
}
|
||||
|
||||
this._login.addEventListener("click", ()=>this.login());
|
||||
|
||||
|
||||
this._register("login");
|
||||
this._register("logout");
|
||||
|
||||
}
|
||||
|
||||
login() {
|
||||
let username = this._username.value;
|
||||
let password = this._password.value;
|
||||
|
||||
if (username == "" || password == "")
|
||||
return;
|
||||
|
||||
if (this._remember.checked) {
|
||||
this.username = username;
|
||||
this.password = password;
|
||||
//window.localStorage.setItem("iui.login.username", username);
|
||||
//window.localStorage.setItem("iui.login.password", password);
|
||||
}
|
||||
else {
|
||||
window.localStorage.removeItem("iui.login.username");
|
||||
window.localStorage.removeItem("iui.login.password");
|
||||
}
|
||||
|
||||
this._emit("login", { username, password });
|
||||
}
|
||||
|
||||
get username() {
|
||||
return window.localStorage.getItem("iui.login.username");
|
||||
}
|
||||
|
||||
set username(value) {
|
||||
return window.localStorage.setItem("iui.login.username", value);
|
||||
}
|
||||
|
||||
get password() {
|
||||
return window.localStorage.getItem("iui.login.password");
|
||||
}
|
||||
|
||||
set password(value) {
|
||||
return window.localStorage.setItem("iui.login.password", value);
|
||||
}
|
||||
|
||||
get token() {
|
||||
return window.localStorage.getItem("iui.login.token");
|
||||
}
|
||||
|
||||
set token(value) {
|
||||
return window.localStorage.setItem("iui.login.token", value);
|
||||
}
|
||||
|
||||
|
||||
get message() {
|
||||
return this._message.innerHTML;
|
||||
}
|
||||
|
||||
set message(value) {
|
||||
this._message.innerHTML = value;
|
||||
}
|
||||
|
||||
logout() {
|
||||
window.localStorage.removeItem("iui.login.username");
|
||||
window.localStorage.removeItem("iui.login.password");
|
||||
window.localStorage.removeItem("iui.login.token");
|
||||
this._username.value = "";
|
||||
this._password.value = "";
|
||||
this._remember.checked = false;
|
||||
|
||||
this._emit("logout");
|
||||
}
|
||||
|
||||
created()
|
||||
{
|
||||
|
||||
//if (this.hasAttribute("auto")) {
|
||||
|
||||
// let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||
// let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||
// if (this.username != "") {
|
||||
// this._emit("login", { username, password });
|
||||
// }
|
||||
//}
|
||||
|
||||
}
|
||||
});
|
||||
196
src/UI/Menu.js
Normal file
196
src/UI/Menu.js
Normal file
@@ -0,0 +1,196 @@
|
||||
import { IUI } from '../Core/IUI.js';
|
||||
import IUIElement from '../Core/IUIElement.js';
|
||||
import Background from './Background.js';
|
||||
import DropDown from './DropDown.js';
|
||||
|
||||
export default class Menu extends IUIElement {
|
||||
constructor(props) {
|
||||
super(IUI.extend(props, {
|
||||
index: "iid",
|
||||
layout: { field: "name", formatter: null },
|
||||
visible: false,
|
||||
static: false,
|
||||
"target-class": "selected"
|
||||
}));
|
||||
|
||||
this._register("visible");
|
||||
this._register("select");
|
||||
|
||||
IUI._menus.push(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// clear() {
|
||||
// this.innerHTML = "";
|
||||
// this._uiBindings = null;
|
||||
// }
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
//show(x, y, element) {
|
||||
// return this.setVisible(true, x, y, element);
|
||||
//}
|
||||
|
||||
show(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let el = event.currentTarget;
|
||||
let x = event.pageX;
|
||||
let y = event.pageY;
|
||||
|
||||
this.setVisible(true, x, y, el);
|
||||
}
|
||||
|
||||
|
||||
async showModal(element) {
|
||||
|
||||
|
||||
//super.data = this._getElementData(element);
|
||||
|
||||
await super.setData(element.data);
|
||||
|
||||
if (!this.background) {
|
||||
this.background = document.getElementById("iui_app_background");
|
||||
|
||||
if (!this.background) {
|
||||
this.background = new Background();// document.createElement("div");
|
||||
this.background.id = "iui_app_background";
|
||||
document.body.insertAdjacentElement("afterBegin", this.background);
|
||||
}
|
||||
}
|
||||
|
||||
this.background.show();
|
||||
this.classList.add(this.cssClass + "-modal");
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
var width = (window.innerWidth * 0.8);
|
||||
this.style.width = width + "px";
|
||||
|
||||
this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px";
|
||||
this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px";
|
||||
|
||||
|
||||
this.visible = true;
|
||||
this._emit("visible", { visible: true });
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
async setVisible(visible, x, y, element) {
|
||||
this.visible = visible;
|
||||
|
||||
if (this.target) {
|
||||
if (this["target-class"] != null && this["target-class"] != "")
|
||||
this.target.classList.remove(this["target-class"]);
|
||||
this.target = null;
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
|
||||
//if (element)
|
||||
//let dt = super._getElementData(element);
|
||||
if (element) {
|
||||
//[super.data, this.target] = dt;
|
||||
|
||||
await this.setData(element.data);
|
||||
this.target = element;
|
||||
|
||||
if (this["target-class"] != null && this["target-class"] != "")
|
||||
this.target.classList.add(this["target-class"]);
|
||||
|
||||
}
|
||||
|
||||
this._pass = true;
|
||||
|
||||
if (IUI.responsive && !this.static)
|
||||
return this.showModal();
|
||||
|
||||
this.classList.remove(this.cssClass + "-modal");
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
|
||||
if (y != null) {
|
||||
if (y + rect.height > document.documentElement.clientHeight)
|
||||
this.style.top = (document.documentElement.clientHeight - rect.height) + "px";
|
||||
else
|
||||
this.style.top = y + "px";
|
||||
}
|
||||
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
|
||||
if (x != null) {
|
||||
|
||||
if (x + rect.width > document.body.scrollWidth)
|
||||
this.style.left = (document.body.scrollWidth - rect.width) + "px";
|
||||
//else if (x < 0)
|
||||
// this.style.left = "0px";
|
||||
else
|
||||
this.style.left = x + "px";
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
|
||||
if (this.background)
|
||||
this.background.hide();
|
||||
|
||||
//await super.setData({});// = {};
|
||||
|
||||
}
|
||||
|
||||
this._emit("visible", { visible });
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
IUI.module(Menu);
|
||||
|
||||
IUI.responsive = false;
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
|
||||
var handler = function (e) {
|
||||
if (e.target.id == "iui_app_background" && IUI.responsive) {
|
||||
for (var i = 0; i < IUI._menus.length; i++)
|
||||
if (IUI._menus[i] instanceof Menu)
|
||||
IUI._menus[i].setVisible(false);
|
||||
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < IUI._menus.length; i++) {
|
||||
if (IUI._menus[i].visible) {
|
||||
var x = e.target;
|
||||
var m = IUI._menus[i];
|
||||
if (m instanceof Menu) {
|
||||
if (m._pass) {
|
||||
m._pass = false;
|
||||
continue;
|
||||
}
|
||||
else
|
||||
if (m.visible)
|
||||
if (!m.contains(e.target))
|
||||
m.setVisible(false);
|
||||
}
|
||||
else if (m instanceof DropDown) {
|
||||
if (!(m.contains(e.target) || m.menu.contains(e.target)))
|
||||
m.setVisible(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
document.body.addEventListener("click", handler);
|
||||
document.body.addEventListener("touchstart", handler);
|
||||
});
|
||||
164
src/UI/Navbar.js
Normal file
164
src/UI/Navbar.js
Normal file
@@ -0,0 +1,164 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Link from "../Router/Link.js";
|
||||
import Check from "./Check.js";
|
||||
|
||||
export default IUI.module(class Navbar extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
search(text) {
|
||||
for(var i = 0; i < this._container.children.length; i++)
|
||||
{
|
||||
let el = this._container.children[i];
|
||||
if (el.title.toLowerCase().includes(text))
|
||||
{
|
||||
el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `<span>${str}</span>`);
|
||||
el.style.display = "";
|
||||
el.removeAttribute("hidden");
|
||||
|
||||
// make parents visible
|
||||
let level = parseInt(el.getAttribute("data-level"));
|
||||
|
||||
for(var j = i - 1; j >= 0; j--)
|
||||
{
|
||||
let previous = this._container.children[j];
|
||||
let pLevel = parseInt(previous.getAttribute("data-level"));
|
||||
|
||||
if (pLevel < level)
|
||||
{
|
||||
previous.removeAttribute("hidden");
|
||||
previous.style.display = "";
|
||||
if (previous.expand)
|
||||
previous.expand.checked = true;
|
||||
level = pLevel;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
el.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
expand(link, value) {
|
||||
let next = link;// = link.nextElementSibling;
|
||||
let level = parseInt(link.getAttribute("data-level"));
|
||||
|
||||
|
||||
// save
|
||||
//window.localStorage.setItem("iui.navbar/" + link.link, value);
|
||||
|
||||
if (link.expand && link.expand.checked != value)
|
||||
link.expand.checked = value;
|
||||
|
||||
while (next = next.nextElementSibling) {
|
||||
if (parseInt(next.getAttribute("data-level")) > level){
|
||||
if (value)
|
||||
next.removeAttribute("hidden");
|
||||
else
|
||||
next.setAttribute("hidden", "");
|
||||
if (next.expand)
|
||||
next.expand.checked = value;
|
||||
}
|
||||
else
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
build(){
|
||||
|
||||
this.innerHTML = "";
|
||||
let roots = router.routes.filter(x => x.parent == null);
|
||||
let self = this;
|
||||
this._search = document.createElement("input");
|
||||
this._search.type = "search";
|
||||
this._search.className = this.cssClass + "-search textbox";
|
||||
this._search.addEventListener("input", (x) => {
|
||||
self.search(this._search.value);
|
||||
});
|
||||
|
||||
this.appendChild(this._search);
|
||||
|
||||
this._container = document.createElement("div");
|
||||
this._container.className = this.cssClass + "-container";
|
||||
|
||||
this.appendChild(this._container);
|
||||
|
||||
var appendRoutes = (routes, level) => {
|
||||
for (var i = 0; i < routes.length; i++) {
|
||||
|
||||
if (routes[i].hasAttribute("private"))
|
||||
continue;
|
||||
|
||||
if (this.private instanceof Function)
|
||||
{
|
||||
try{
|
||||
// console.log("F");
|
||||
if (this.private(routes[i]))
|
||||
{
|
||||
// console.log("private", route[i]);
|
||||
continue;
|
||||
}
|
||||
} catch(ex){
|
||||
console.log(ex);
|
||||
debugger;
|
||||
}
|
||||
}
|
||||
|
||||
let el = new Link();// document.createElement("i-link");
|
||||
el.setAttribute("data-level", level);
|
||||
el.link = routes[i].link;
|
||||
el.title = routes[i].caption;
|
||||
if (routes[i].icon != null)
|
||||
el.innerHTML = "<img src='" + routes[i].icon + "'>";
|
||||
|
||||
el.text = document.createElement("span");
|
||||
el.text.innerHTML = el.title;
|
||||
el.appendChild(el.text);
|
||||
|
||||
this._container.appendChild(el);
|
||||
|
||||
if (routes[i].routes.length > 0) {
|
||||
// append plus
|
||||
el.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check");
|
||||
el.expand.checked = true;
|
||||
|
||||
|
||||
//plus.className = "expand";#f8f8f8
|
||||
el.expand.on("click", (e) => {
|
||||
self.expand(el, el.expand.checked);
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
el.appendChild(el.expand);
|
||||
appendRoutes(routes[i].routes, level + 1);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
appendRoutes(roots, 0);
|
||||
}
|
||||
|
||||
created() {
|
||||
if (!this.hasAttribute("manual"))
|
||||
window.router.on("created", this.build);
|
||||
|
||||
window.router.on("navigate", (e) => {
|
||||
for(var i = 0; i < this?._container?.children?.length; i++)
|
||||
{
|
||||
var el = this._container.children[i];
|
||||
if (el.link == e.base)
|
||||
el.setAttribute("selected", "");
|
||||
else
|
||||
el.removeAttribute("selected");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
188
src/UI/Range.js
Normal file
188
src/UI/Range.js
Normal file
@@ -0,0 +1,188 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Range extends IUIElement {
|
||||
constructor() {
|
||||
super({
|
||||
getItem: function (index, data) {
|
||||
var item = data[index];
|
||||
return item == null ? index : item;
|
||||
},
|
||||
getIndex: function (x, width, data) {
|
||||
if (x < 0) x = 0;
|
||||
var p = x / width;
|
||||
var index = Math.floor(p * data.length);
|
||||
return index;
|
||||
},
|
||||
getPreview: function (index, data, x, width, el) {
|
||||
return null;
|
||||
},
|
||||
getPosition: function (index, data, width) {
|
||||
var itemSize = width / data.length;
|
||||
return (index * itemSize) + (itemSize / 2);
|
||||
},
|
||||
layout: {
|
||||
render: function () {
|
||||
return true;
|
||||
},
|
||||
initialize: function () {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
data: []
|
||||
});
|
||||
|
||||
var self = this;
|
||||
|
||||
|
||||
this._register("select");
|
||||
this._register("userSelect");
|
||||
|
||||
this.preview = document.createElement("div");
|
||||
this.preview.className = this.customClass + "-preview";
|
||||
|
||||
|
||||
if (this.layout)
|
||||
this.layout.initialize.apply(this);
|
||||
|
||||
|
||||
this.thumb = document.createElement("div");
|
||||
this.thumb.classList.add(this.customClass + "-thumb");
|
||||
|
||||
this.classList.add(this.customClass);
|
||||
this.appendChild(this.preview);
|
||||
this.appendChild(this.thumb);
|
||||
|
||||
this.addEventListener("mousedown", function (e) {
|
||||
self._startDragging(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("mouseleave", function (e) {
|
||||
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||
});
|
||||
|
||||
this.addEventListener("mouseenter", function (e) {
|
||||
var rect = self.getBoundingClientRect();
|
||||
self._offset = {
|
||||
top: rect.top + document.body.scrollTop,
|
||||
left: rect.left + document.body.scrollLeft
|
||||
};
|
||||
});
|
||||
|
||||
this.addEventListener("mousemove", function (e) {
|
||||
|
||||
|
||||
self._drag(e.clientX, e.clientY);
|
||||
|
||||
var x = e.clientX - self._offset.left;
|
||||
var index = self.getIndex(x, self.offsetWidth, self.data);
|
||||
var preview = self.getPreview.call(self, index, self.data, x, self.offsetWidth, self.preview);
|
||||
|
||||
if (preview == null || preview == false) {
|
||||
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||
return;
|
||||
}
|
||||
else if (preview instanceof HTMLElement) {
|
||||
while (self.preview.children.length > 0)
|
||||
self.preview.removeChild(self.preview.children[0]);
|
||||
self.preview.appendChild(preview);
|
||||
}
|
||||
else if (preview != true) {
|
||||
self.preview.innerHTML = preview;
|
||||
}
|
||||
|
||||
var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data);
|
||||
var dx = self.getPosition(index, self.data, self.offsetWidth);
|
||||
|
||||
self.preview.style.setProperty("--x", dx + "px");
|
||||
self.preview.classList.add(self.customClass + "-preview-visible");
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup", function (e) {
|
||||
if (self._dragging)
|
||||
self._endDragging(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("touchend", function (e) {
|
||||
self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.setData(this.data);
|
||||
}
|
||||
|
||||
_startDragging(x, y) {
|
||||
this._dragging = true;
|
||||
|
||||
document.onselectstart = function () { return false };
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
var body = document.body.getBoundingClientRect();
|
||||
|
||||
this._offset = {
|
||||
top: rect.top + body.top,// document.body.scrollTop,
|
||||
left: rect.left + body.left,
|
||||
};
|
||||
|
||||
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||
this.set(index, true, true);
|
||||
}
|
||||
|
||||
set(index, moveThumb = true, byUser = false) {
|
||||
|
||||
var item = this.getItem(index, this.data);
|
||||
|
||||
if (item != null) {
|
||||
if (moveThumb) {
|
||||
var dx = this.getPosition(index, this.data, this.offsetWidth);
|
||||
this.thumb.style.setProperty("--x", dx + "px");
|
||||
}
|
||||
|
||||
this._emit("select", { item, index });
|
||||
|
||||
if (byUser)
|
||||
this._emit("userSelect", { item, index });
|
||||
|
||||
this.selected = item;
|
||||
this.selectedIndex = index;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_drag(x, y) {
|
||||
if (this._dragging) {
|
||||
this.thumb.classList.add(this.customClass + "-thumb-dragging");
|
||||
var dx = (x - this._offset.left);
|
||||
var index = this.getIndex(dx, this.offsetWidth, this.data);
|
||||
this.thumb.style.setProperty("--x", dx + "px");
|
||||
this.set(index, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
_endDragging(x, y) {
|
||||
document.onselectstart = function () { return true };
|
||||
this.thumb.classList.remove(this.customClass + "-thumb-dragging");
|
||||
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||
this.set(index, true, true);
|
||||
this._dragging = false;
|
||||
}
|
||||
|
||||
clear() {
|
||||
return this.setData([]);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.layout && this.layout.render)
|
||||
this.layout.render.apply(this);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
23
src/UI/RoutesList.js
Normal file
23
src/UI/RoutesList.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class RoutesList extends IUIElement {
|
||||
|
||||
constructor(properties) {
|
||||
super(properties, { class: 'routes-list' });
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!window.router)
|
||||
return;
|
||||
|
||||
var table = document.createElement("i-table");
|
||||
|
||||
this.appendChild(table);
|
||||
|
||||
for (var i = 0; i < window.router.routes.length; i++) {
|
||||
// hell
|
||||
table.add
|
||||
}
|
||||
}
|
||||
});
|
||||
424
src/UI/Select.js
Normal file
424
src/UI/Select.js
Normal file
@@ -0,0 +1,424 @@
|
||||
import { IUI, iui } from '../Core/IUI.js';
|
||||
import IUIElement from '../Core/IUIElement.js';
|
||||
import Menu from '../UI/Menu.js';
|
||||
import Layout from '../Data/Layout.js';
|
||||
import Repeat from '../Data/Repeat.js';
|
||||
|
||||
export default IUI.module(class Select extends IUIElement {
|
||||
constructor() {
|
||||
super({
|
||||
visible: false,
|
||||
searchlist: false,
|
||||
hasArrow: true,
|
||||
//hasAdd: false,
|
||||
updateTextBox: true,
|
||||
query: (x) => null,
|
||||
//_formatter: (x) => x,
|
||||
_autocomplete: false,
|
||||
cssClass: 'select'
|
||||
});
|
||||
|
||||
this._register("select");
|
||||
this._register("input");
|
||||
this._register("add");
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
//console.log("Select removed", this);
|
||||
if (!this.searchlist && this.menu)
|
||||
app.removeChild(this.menu);
|
||||
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
super.connectedCallback();
|
||||
if (!this.searchlist && this.menu)
|
||||
app.appendChild(this.menu);
|
||||
}
|
||||
get autocomplete() {
|
||||
return this._autocomplete;
|
||||
}
|
||||
|
||||
// get formatter() {
|
||||
// return this._formatter;
|
||||
// }
|
||||
|
||||
// set formatter(value) {
|
||||
// this._formatter = value;
|
||||
// }
|
||||
|
||||
_checkValidity() {
|
||||
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (ex) {
|
||||
console.log("Validation Error", ex);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
set hasAdd(value) {
|
||||
if (value)
|
||||
this.setAttribute("add", "add");
|
||||
else
|
||||
this.removeAttribute("add");
|
||||
}
|
||||
|
||||
get hasAdd() {
|
||||
return this.hasAttribute("add");
|
||||
}
|
||||
|
||||
async create() {
|
||||
|
||||
this.isAuto = this.hasAttribute("auto");
|
||||
this.field = this.getAttribute("field");
|
||||
|
||||
|
||||
if (this.field != null)
|
||||
{
|
||||
this.setAttribute(":data", `d['${this.field}']`)
|
||||
this.setAttribute(":revert", `d['${this.field}'] = this.data`);
|
||||
}
|
||||
|
||||
this._autocomplete = this.hasAttribute("autocomplete");
|
||||
//this.hasAdd = this.hasAttribute("add") || this.hasAdd;
|
||||
|
||||
let self = this;
|
||||
|
||||
//if (this._autocomplete)
|
||||
// this.cssClass += "-autocomplete";
|
||||
|
||||
|
||||
|
||||
|
||||
this.repeat = new Repeat();
|
||||
this.repeat.cssClass = "select-menu-repeat";
|
||||
//this.repeat.innerHTML = this.innerHTML;
|
||||
this.repeat.setAttribute(":data", "d[1]");
|
||||
|
||||
this.counter = document.createElement("div");
|
||||
this.counter.className = this.cssClass + "-counter";
|
||||
this.counter.innerHTML = "${d[0]}";
|
||||
|
||||
|
||||
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
|
||||
|
||||
this.menu.on("click", async (e) => {
|
||||
|
||||
if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) {
|
||||
await self.setData(e.target.data);
|
||||
|
||||
self._emit("input", { value: e.target.data });
|
||||
|
||||
self.hide();
|
||||
}
|
||||
}).on("visible", x=> { if (!x.visible) self.hide()});
|
||||
|
||||
|
||||
if (this._autocomplete) {
|
||||
this.textbox = document.createElement("input");
|
||||
this.textbox.type = "search";
|
||||
this.textbox.className = this.cssClass + "-textbox";
|
||||
|
||||
if (this.placeholder)
|
||||
this.textbox.placeholder = this.placeholder;
|
||||
|
||||
this.textbox.addEventListener("keyup", function (e) {
|
||||
if (e.keyCode != 13) {
|
||||
self._query(0, self.textbox.value);
|
||||
}
|
||||
});
|
||||
|
||||
this.textbox.addEventListener("search", function (e) {
|
||||
// console.log(e);
|
||||
});
|
||||
|
||||
this.menu.appendChild(this.textbox);
|
||||
|
||||
}
|
||||
|
||||
// get collection
|
||||
let layout = Layout.get(this, "div", true, true);
|
||||
|
||||
//debugger;
|
||||
|
||||
|
||||
if (layout != null && layout.label != undefined && layout.menu != undefined) {
|
||||
this.label = layout.label.node;
|
||||
this.repeat.appendChild(layout.menu.node);
|
||||
}
|
||||
else if (layout != null && layout.null != null)
|
||||
{
|
||||
this.label = layout.null.node;
|
||||
this.repeat.appendChild(layout.null.node.cloneNode(true));
|
||||
}
|
||||
else
|
||||
{
|
||||
this.label = document.createElement("div");
|
||||
this.repeat.innerHTML = this.innerHTML;
|
||||
}
|
||||
|
||||
// clear everything else
|
||||
//this.innerHTML = "";
|
||||
|
||||
this.label.className = this.cssClass + "-label";
|
||||
|
||||
this.appendChild(this.label);
|
||||
|
||||
this.label.addEventListener("click", function (e) {
|
||||
self.show();
|
||||
});
|
||||
|
||||
this.menu.appendChild(this.repeat);
|
||||
this.menu.appendChild(this.counter);
|
||||
|
||||
|
||||
if (this.hasArrow) {
|
||||
this.arrow = document.createElement("div");
|
||||
this.arrow.className = this.cssClass + "-arrow";
|
||||
this.appendChild(this.arrow);
|
||||
|
||||
|
||||
this.arrow.addEventListener("click", function (e) {
|
||||
if (self.visible)
|
||||
self.hide();
|
||||
else
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
if (this.hasAdd) {
|
||||
this._add_button = document.createElement("div");
|
||||
this._add_button.className = this.cssClass + "-add";
|
||||
this.appendChild(this._add_button);
|
||||
|
||||
this._add_button.addEventListener("click", function (e) {
|
||||
self._emit("add", { value: self.data })
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (this.searchlist)
|
||||
this.appendChild(this.menu);
|
||||
else
|
||||
{
|
||||
app.appendChild(this.menu);
|
||||
if (app.loaded)
|
||||
{
|
||||
///console.log("Append", this.menu);
|
||||
await this.menu.create();
|
||||
await IUI.create(this.menu);
|
||||
this._make_bindings(this.menu);
|
||||
}
|
||||
}
|
||||
|
||||
this.addEventListener("click", function (e) {
|
||||
if (e.target == self.textbox)
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.hasAttribute("disabled");
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
if (this._autocomplete) {
|
||||
this.textbox.disabled = value;
|
||||
}
|
||||
|
||||
if (value) {
|
||||
this.setAttribute("disabled", value);
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
set(item) {
|
||||
|
||||
if (this.autocomplete != undefined) {
|
||||
if (item != null)
|
||||
this.textbox.value = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
else
|
||||
this.textbox.value = "";
|
||||
} else {
|
||||
if (item != null)
|
||||
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
else
|
||||
this.label.innerHTML = "";
|
||||
}
|
||||
|
||||
this.selected = item;
|
||||
this._emit("select", item);
|
||||
}
|
||||
*/
|
||||
|
||||
show() {
|
||||
this.setVisible(true);
|
||||
//this.textbox.focus();
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.setVisible(false);
|
||||
//this.textbox.focus();
|
||||
}
|
||||
|
||||
clear() {
|
||||
if (this.autocomplete !== undefined)
|
||||
this.textbox.value = "";
|
||||
//else
|
||||
// this.label.innerHTML = "";
|
||||
|
||||
//this.menu.clear();
|
||||
this.response.start = 0;
|
||||
this.selected = null;
|
||||
}
|
||||
|
||||
async _query() {
|
||||
|
||||
|
||||
if (this._autocomplete)
|
||||
if (this.disabled)
|
||||
return;
|
||||
|
||||
let self = this;
|
||||
let text = this._autocomplete ? this.textbox.value : null;
|
||||
|
||||
var res = this.query(0, text)
|
||||
if (res instanceof Promise)
|
||||
res = await res;
|
||||
|
||||
//.then(async (res) => {
|
||||
if (res[1].length == 0)
|
||||
await self.setData(null);
|
||||
|
||||
await this.menu.setData(res);
|
||||
|
||||
|
||||
// show results
|
||||
//self.menu.clear();
|
||||
|
||||
|
||||
|
||||
// for (var i = 0; i < res.length; i++) {
|
||||
// let nodes = this.template.content.cloneNode(true).childNodes;
|
||||
|
||||
// while (nodes.length > 0) {
|
||||
// let n = nodes[0];
|
||||
// if (n instanceof HTMLElement)
|
||||
// n.setAttribute(":data", `d[${i}]`);
|
||||
// self.menu.appendChild(n);
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// self.menu.updateBindings();
|
||||
//self.menu.setData(res);
|
||||
|
||||
|
||||
//}).catch(x => {
|
||||
|
||||
//});
|
||||
}
|
||||
|
||||
|
||||
async setData(value) {
|
||||
|
||||
// this.label.innerHTML = "";
|
||||
|
||||
await super.setData(value);
|
||||
|
||||
try {
|
||||
//let text = this.formatter(value);
|
||||
// this.label.innerHTML = text == null ? "" : text;
|
||||
|
||||
this._emit("select", { value });
|
||||
}
|
||||
catch (ex) {
|
||||
//console.log(ex);
|
||||
this._emit("select", { value });
|
||||
}
|
||||
|
||||
//this._checkValidity();
|
||||
|
||||
|
||||
if (this._checkValidity() && this.isAuto)
|
||||
this.revert();
|
||||
|
||||
}
|
||||
|
||||
|
||||
setVisible(visible) {
|
||||
|
||||
if (visible == this.visible)
|
||||
return;
|
||||
|
||||
//console.log("SLCT: SetVisible", visible);
|
||||
|
||||
if (visible) {
|
||||
this._query(0);
|
||||
|
||||
// show menu
|
||||
var rect = this.getBoundingClientRect();
|
||||
this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
|
||||
this.menu.style.paddingTop = rect.height + "px";
|
||||
this.menu.setVisible(true, rect.left, rect.top);//, this.menu);
|
||||
this.visible = true;
|
||||
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
if (this._autocomplete)
|
||||
setTimeout(() => {
|
||||
this.textbox.focus();
|
||||
}, 100);
|
||||
|
||||
}
|
||||
else {
|
||||
this.visible = false;
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
|
||||
this.menu.hide();
|
||||
}
|
||||
|
||||
//this.textbox.focus();
|
||||
|
||||
}
|
||||
|
||||
_computeMenuOuterWidth() {
|
||||
|
||||
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||
/*
|
||||
var style = window.getComputedStyle(this.menu.el, null);
|
||||
var paddingLeft = style.getPropertyValue('padding-left');
|
||||
var paddingRight = style.getPropertyValue('padding-right');
|
||||
var borderLeft = style.getPropertyValue('border-left');
|
||||
var borderRight = style.getPropertyValue('border-right');
|
||||
|
||||
paddingLeft = parseInt(paddingLeft.substr(0, paddingLeft.length - 2));
|
||||
paddingRight = parseInt(paddingRight.substr(0, paddingRight.length - 2));
|
||||
borderLeft = parseInt(borderLeft.substr(0, borderLeft.length - 2));
|
||||
borderRight = parseInt(borderRight.substr(0, borderRight.length - 2));
|
||||
|
||||
return paddingLeft + paddingRight + borderLeft + borderRight;
|
||||
*/
|
||||
}
|
||||
|
||||
});
|
||||
119
src/UI/SelectList.js
Normal file
119
src/UI/SelectList.js
Normal file
@@ -0,0 +1,119 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class SelectList extends IUIElement {
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
query: (x) => null,
|
||||
formatter: (x) => x["name"]
|
||||
});
|
||||
|
||||
var self = this;
|
||||
|
||||
this._register("select");
|
||||
this.classList.add(this.cssClass);
|
||||
|
||||
// this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu });
|
||||
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
|
||||
|
||||
this.menu.on("visible", function (v) {
|
||||
if (v)
|
||||
self.classList.add(self.cssClass + "-active");
|
||||
else
|
||||
self.classList.remove(self.cssClass + "-active");
|
||||
});
|
||||
|
||||
this.menu.on("click", (e) => {
|
||||
let [data, element] = self.menu._getElementData(e.target);
|
||||
if (data != undefined)
|
||||
self.data = data;
|
||||
});
|
||||
|
||||
|
||||
document.body.appendChild(this.menu);
|
||||
|
||||
this.label = document.createElement("div");
|
||||
this.label.className = this.cssClass + "-label";
|
||||
|
||||
|
||||
this.appendChild(this.label);
|
||||
|
||||
this.label.addEventListener("click", function (e) {
|
||||
self.show();
|
||||
});
|
||||
|
||||
this.arrow = document.createElement("div");
|
||||
this.arrow.className = this.customClass + "-arrow";
|
||||
|
||||
this.header = document.createElement("div");
|
||||
this.header.className = this.customClass + "-header";
|
||||
|
||||
this.header.appendChild(this.label);
|
||||
this.header.appendChild(this.arrow);
|
||||
|
||||
this.appendChild(this.header);
|
||||
|
||||
this.arrow.addEventListener("click", function (e) {
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.menu.clear();
|
||||
return this;
|
||||
}
|
||||
|
||||
add(item) {
|
||||
this.menu.add(item);
|
||||
return this;
|
||||
}
|
||||
|
||||
set(item) {
|
||||
if (typeof item == "string" || typeof item == "number") {
|
||||
for (var i = 0; i < this.menu.list.length; i++) {
|
||||
if (this.menu.list[i][this.menu.index] == item) {
|
||||
item = this.menu.list[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// item is action
|
||||
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
this.selected = item;
|
||||
|
||||
this._emit("select", item);
|
||||
return this;
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
_computeMenuOuterWidth() {
|
||||
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||
}
|
||||
|
||||
setVisible(visible) {
|
||||
if (visible) {
|
||||
this.response.start = 0;
|
||||
this._emit("query", null, this.response);
|
||||
|
||||
// show menu
|
||||
var rect = this.el.getBoundingClientRect();
|
||||
this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px";
|
||||
this.menu.setVisible(true, rect.left, rect.top + rect.height);
|
||||
}
|
||||
else {
|
||||
this.menu.hide();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
20
src/UI/Tab.js
Normal file
20
src/UI/Tab.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
|
||||
export default IUI.module(class Tab extends IUIElement {
|
||||
constructor(properties) {
|
||||
super(properties);
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.getAttribute("title");
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return this.hasAttribute("selected");// == "1" || selected == "yes" || selected == "true");
|
||||
}
|
||||
});
|
||||
207
src/UI/TabbedTarget.js
Normal file
207
src/UI/TabbedTarget.js
Normal file
@@ -0,0 +1,207 @@
|
||||
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Tab from "./Tab.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Target from "../Router/Target.js";
|
||||
|
||||
export default IUI.module(class TabbedTarget extends Target {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
_y: 0,
|
||||
_x: 0,
|
||||
auto: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
var self = this;
|
||||
|
||||
this._register("select");
|
||||
|
||||
|
||||
this._bar = document.createElement("div");
|
||||
this._bar.classList.add(this.cssClass + "-bar");
|
||||
|
||||
this._ext = document.createElement("span");
|
||||
this._ext.className = this.cssClass + "-bar-ext";
|
||||
this._bar.appendChild(this._ext);
|
||||
|
||||
|
||||
|
||||
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
this.appendChild(this._bar);
|
||||
this.appendChild(this._body);
|
||||
|
||||
|
||||
|
||||
var items = [];// this.getElementsByClassName("tab");
|
||||
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
if (this.children[i] instanceof Tab)
|
||||
items.push(this.children[i]);
|
||||
|
||||
this._observer = new ResizeObserver(x => {
|
||||
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||
});
|
||||
|
||||
items.map(x => self.add(x));
|
||||
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self)
|
||||
break;
|
||||
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||
return;
|
||||
} while (x = x.parentElement)
|
||||
|
||||
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
if (!self._x || !self._y) {
|
||||
return;
|
||||
}
|
||||
|
||||
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||
var yDiff = self._y - yUp;
|
||||
|
||||
|
||||
var index = self.list.indexOf(self.selected);
|
||||
|
||||
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||
if (xDiff > 0) {
|
||||
if (index < self.list.length - 1) {
|
||||
self.select(self.list[index + 1]);
|
||||
//self.selected.scrollIntoView();
|
||||
}
|
||||
/* left swipe */
|
||||
} else {
|
||||
|
||||
if (index > 0)
|
||||
self.select(self.list[index - 1]);
|
||||
|
||||
/* right swipe */
|
||||
}
|
||||
} else {
|
||||
if (yDiff > 0) {
|
||||
/* up swipe */
|
||||
} else {
|
||||
/* down swipe */
|
||||
}
|
||||
}
|
||||
/* reset values */
|
||||
self._x = null;
|
||||
self._y = null;
|
||||
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
created() {
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
add(item) {
|
||||
|
||||
var label = document.createElement("i-check");
|
||||
label.innerHTML = item.title;
|
||||
|
||||
this._ext.insertAdjacentElement("beforebegin", label);
|
||||
|
||||
label.className = this.cssClass + "-button";
|
||||
|
||||
item.classList.add(this.cssClass + "-content");
|
||||
label.content = item;
|
||||
item.label = label;
|
||||
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
label.on("check", function (v) {
|
||||
//if (v && !self._neglect)
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//_updateSize() {
|
||||
// for (var i = 0; i < this._body.children.length; i++) {
|
||||
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
select(item) {
|
||||
var tab;
|
||||
if (item instanceof Tab)
|
||||
tab = item;
|
||||
else if (typeof o === 'string' || o instanceof String)
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
if (this.list[i].id == item) {
|
||||
tab = item;
|
||||
break;
|
||||
}
|
||||
else if (!isNaN(item))
|
||||
tab = this.list[i];
|
||||
|
||||
//this._neglect = true;
|
||||
|
||||
var self = this;
|
||||
|
||||
this.list.forEach(function (i) {
|
||||
if (i == tab)
|
||||
tab.label.check(true);// set(true, false);
|
||||
else {
|
||||
i.classList.remove(self.cssClass + "-content-active");
|
||||
i.label.check(false);// set(false, false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//this._neglect = false;
|
||||
tab.classList.add(this.cssClass + "-content-active");
|
||||
|
||||
if (this.selected != null)
|
||||
this._observer.unobserve(this.selected);
|
||||
this.selected = tab;
|
||||
this._observer.observe(this.selected);
|
||||
|
||||
if (document.dir == "rtl")
|
||||
this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
|
||||
else
|
||||
this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
|
||||
|
||||
|
||||
this._emit("select", tab);
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
1422
src/UI/Table.js
Normal file
1422
src/UI/Table.js
Normal file
File diff suppressed because it is too large
Load Diff
207
src/UI/Tabs.js
Normal file
207
src/UI/Tabs.js
Normal file
@@ -0,0 +1,207 @@
|
||||
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Tab from "./Tab.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Tabs extends IUIElement {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
_y: 0,
|
||||
_x: 0,
|
||||
auto: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
create()
|
||||
{
|
||||
var self = this;
|
||||
|
||||
this._register("select");
|
||||
|
||||
|
||||
this._bar = document.createElement("div");
|
||||
this._bar.classList.add(this.cssClass + "-bar");
|
||||
|
||||
this._ext = document.createElement("span");
|
||||
this._ext.className = this.cssClass + "-bar-ext";
|
||||
this._bar.appendChild(this._ext);
|
||||
|
||||
|
||||
|
||||
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
this.appendChild(this._bar);
|
||||
this.appendChild(this._body);
|
||||
|
||||
|
||||
|
||||
var items = [];// this.getElementsByClassName("tab");
|
||||
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
if (this.children[i] instanceof Tab)
|
||||
items.push(this.children[i]);
|
||||
|
||||
this._observer = new ResizeObserver(x => {
|
||||
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||
});
|
||||
|
||||
items.map(x => self.add(x));
|
||||
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self)
|
||||
break;
|
||||
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||
return;
|
||||
} while (x = x.parentElement)
|
||||
|
||||
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
if (!self._x || !self._y) {
|
||||
return;
|
||||
}
|
||||
|
||||
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||
var yDiff = self._y - yUp;
|
||||
|
||||
|
||||
var index = self.list.indexOf(self.selected);
|
||||
|
||||
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||
if (xDiff > 0) {
|
||||
if (index < self.list.length - 1) {
|
||||
self.select(self.list[index + 1]);
|
||||
//self.selected.scrollIntoView();
|
||||
}
|
||||
/* left swipe */
|
||||
} else {
|
||||
|
||||
if (index > 0)
|
||||
self.select(self.list[index - 1]);
|
||||
|
||||
/* right swipe */
|
||||
}
|
||||
} else {
|
||||
if (yDiff > 0) {
|
||||
/* up swipe */
|
||||
} else {
|
||||
/* down swipe */
|
||||
}
|
||||
}
|
||||
/* reset values */
|
||||
self._x = null;
|
||||
self._y = null;
|
||||
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
created() {
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
add(item) {
|
||||
|
||||
var label = document.createElement("i-check");
|
||||
label.innerHTML = item.title;
|
||||
|
||||
this._ext.insertAdjacentElement("beforebegin", label);
|
||||
|
||||
label.className = this.cssClass + "-button";
|
||||
|
||||
item.classList.add(this.cssClass + "-content");
|
||||
label.content = item;
|
||||
item.label = label;
|
||||
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
label.on("check", function (v) {
|
||||
//if (v && !self._neglect)
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//_updateSize() {
|
||||
// for (var i = 0; i < this._body.children.length; i++) {
|
||||
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
select(item) {
|
||||
var tab;
|
||||
if (item instanceof Tab)
|
||||
tab = item;
|
||||
else if (typeof o === 'string' || o instanceof String)
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
if (this.list[i].id == item) {
|
||||
tab = item;
|
||||
break;
|
||||
}
|
||||
else if (!isNaN(item))
|
||||
tab = this.list[i];
|
||||
|
||||
//this._neglect = true;
|
||||
|
||||
var self = this;
|
||||
|
||||
this.list.forEach(function (i) {
|
||||
if (i == tab)
|
||||
tab.label.check(true);// set(true, false);
|
||||
else {
|
||||
i.classList.remove(self.cssClass + "-content-active");
|
||||
i.label.check(false);// set(false, false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//this._neglect = false;
|
||||
tab.classList.add(this.cssClass + "-content-active");
|
||||
|
||||
if (this.selected != null)
|
||||
this._observer.unobserve(this.selected);
|
||||
this.selected = tab;
|
||||
this._observer.observe(this.selected);
|
||||
|
||||
if (document.dir == "rtl")
|
||||
this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
|
||||
else
|
||||
this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
|
||||
|
||||
|
||||
this._emit("select", tab);
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
314
src/UI/Window.js
Normal file
314
src/UI/Window.js
Normal file
@@ -0,0 +1,314 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class IUIWindow extends IUIElement {
|
||||
constructor() {
|
||||
super({ closeable: true, draggable: false, focus: false });
|
||||
|
||||
this._register("resize");
|
||||
this._register("move");
|
||||
this._register("close");
|
||||
|
||||
this._uid = "d:" + Math.random().toString(36).substring(2);
|
||||
|
||||
}
|
||||
|
||||
static moduleName = "window";
|
||||
|
||||
create() {
|
||||
var self = this;
|
||||
|
||||
this.tabIndex = 0;
|
||||
|
||||
// create header
|
||||
this._header = document.createElement("div");
|
||||
this._header.className = this.cssClass + "-header";
|
||||
|
||||
if (this.draggable)
|
||||
this._header.setAttribute("draggable", true);
|
||||
|
||||
var f = this.getElementsByClassName(this.cssClass + "-footer");
|
||||
this._footer = f.length > 0 ? f[0] : null;
|
||||
|
||||
var b = this.getElementsByClassName(this.cssClass + "-body");
|
||||
//this.body = b.length > 0 ? b[0]: null;
|
||||
|
||||
if (b.length == 0) {
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
while (this.children.length > (this._footer == null ? 0 : 1))
|
||||
this._body.appendChild(this.children[0]);
|
||||
|
||||
this.insertAdjacentElement("afterBegin", this._body);
|
||||
|
||||
//super.updateBindings();
|
||||
}
|
||||
else
|
||||
this._body = b[0];
|
||||
|
||||
if (this.icon) {
|
||||
this._icon = document.createElement("div");
|
||||
this._icon.className = this.cssClass + "-icon";
|
||||
//this._icon.src = this.icon;
|
||||
|
||||
|
||||
|
||||
this._icon.style.setProperty("--icon", `url('${this.icon}')`);
|
||||
this._header.appendChild(this._icon);
|
||||
}
|
||||
|
||||
this._caption = document.createElement("div");
|
||||
this._caption.className = this.cssClass + "-caption";
|
||||
this._caption.innerHTML = this.caption;
|
||||
|
||||
this._subtitle = document.createElement("div");
|
||||
this._subtitle.className = this.cssClass + "-subtitle";
|
||||
this._subtitle.innerHTML = this.subtitle;
|
||||
|
||||
this._tools = document.createElement("div");
|
||||
this._tools.className = this.cssClass + "-tools";
|
||||
|
||||
this._header.appendChild(this._caption);
|
||||
this._header.appendChild(this._subtitle);
|
||||
this._header.appendChild(this._tools);
|
||||
|
||||
if (this.closeable) {
|
||||
this._close = document.createElement("div");
|
||||
this._close.className = this.cssClass + "-tools-close button";
|
||||
this._close.addEventListener("click", function () {
|
||||
self._emit("close");
|
||||
});
|
||||
}
|
||||
|
||||
//this.addEventListener("mousedown", function (e) {
|
||||
// self.setFocus(true);
|
||||
//});
|
||||
|
||||
this.insertAdjacentElement("afterBegin", this._header);
|
||||
}
|
||||
|
||||
setHeaderVisible(value) {
|
||||
this._header.style.display = value ? "" : "none";
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
setCloseVisible(value) {
|
||||
if (this.closeable)
|
||||
this._close.style.display = value ? "" : "none";
|
||||
}
|
||||
|
||||
get icon() {
|
||||
return this.getAttribute("icon");
|
||||
}
|
||||
/*
|
||||
setFocus(v) {
|
||||
this.focus = v;
|
||||
|
||||
var self = this;
|
||||
|
||||
if (v) {
|
||||
this.classList.add(this.cssClass + "-active");
|
||||
|
||||
return;
|
||||
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||
|
||||
if (last && last != this) {
|
||||
last.classList.remove(this.cssClass + "-active");
|
||||
last.focus = false;
|
||||
}
|
||||
|
||||
if (last != this) {
|
||||
if (window.location.hash != "#" + this._uid) {
|
||||
IUI._nav_ignore = true;
|
||||
window.location.hash = this._uid;
|
||||
//window.location.replace("#" + this._uid);
|
||||
}
|
||||
}
|
||||
|
||||
var i = IUI._nav_list.indexOf(this);
|
||||
if (i > -1)
|
||||
IUI._nav_list.splice(i, 1);
|
||||
|
||||
IUI._nav_list.push(this);
|
||||
|
||||
}
|
||||
else {
|
||||
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||
if (last == this) {
|
||||
IUI._nav_list.pop();
|
||||
last = IUI._nav_list.pop();
|
||||
|
||||
IUI._nav_list.push(this);
|
||||
|
||||
|
||||
if (last) {
|
||||
last.classList.add(this.cssClass + "-active");
|
||||
last.focus = true;
|
||||
IUI._nav_list.push(last);
|
||||
if (window.location.hash != "#" + last._uid) {
|
||||
IUI._nav_ignore = true;
|
||||
window.location.hash = last._uid;
|
||||
//window.location.replace("#" + last._uid);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (window.location.hash != "#") {
|
||||
IUI._nav_ignore = true;
|
||||
var x = window.scrollX;
|
||||
var y = window.scrollY;
|
||||
|
||||
window.location.hash = "#";
|
||||
|
||||
window.scrollTo(x, y);
|
||||
//window.location.replace("#");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.classList.remove(this.cssClass + "-active");
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
show() {
|
||||
//this.setFocus(true);
|
||||
return this;
|
||||
}
|
||||
|
||||
move(x, y) {
|
||||
this.style.left = x + "px";
|
||||
this.style.top = y + "px";
|
||||
this._emit("move", x, y);
|
||||
return this;
|
||||
}
|
||||
|
||||
resize(width, height) {
|
||||
this.style.width = width + "px";
|
||||
this.style.height = height + "px";
|
||||
|
||||
this._updateSize();
|
||||
|
||||
this._emit("resize", this.clientWidth, this.clientHeight);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_updateSize() {
|
||||
if (IUI.responsive)
|
||||
return;
|
||||
|
||||
if (this._body) {
|
||||
if (this.clientWidth < this._body.scrollWidth)
|
||||
this.style.width = this._body.scrollWidth + 1 + "px";
|
||||
|
||||
if (this._footer) {
|
||||
|
||||
if (this.clientWidth < this._footer.offsetWidth)
|
||||
this.style.width = this._footer.offsetWidth + "px";
|
||||
|
||||
if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight)
|
||||
this.style.height = (this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + "px";
|
||||
|
||||
}
|
||||
else {
|
||||
if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight)
|
||||
this.style.height = (this._header.offsetHeight + this._body.scrollHeight + 1) + "px";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// handle windows exceeding document size
|
||||
if (this.clientHeight > document.body.clientHeight) {
|
||||
this.style.height = document.body.clientHeight + "px";
|
||||
if (this._footer)
|
||||
this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px";
|
||||
else
|
||||
this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px";
|
||||
}
|
||||
|
||||
|
||||
if (this.clientWidth > document.body.clientWidth)
|
||||
this.style.width = document.body.clientWidth + 1 + "px";
|
||||
|
||||
}
|
||||
|
||||
|
||||
get caption() {
|
||||
return this.getAttribute("caption");
|
||||
}
|
||||
|
||||
set caption(value) {
|
||||
this._caption.innerHTML = value;
|
||||
this.setAttribute("caption", value);
|
||||
}
|
||||
|
||||
|
||||
get subtitle() {
|
||||
return this.getAttribute("subtitle");
|
||||
}
|
||||
|
||||
set subtitle(value) {
|
||||
this._subtitle.innerHTML = value;
|
||||
this.setAttribute("subtitle", value);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
IUI._nav_list = [];
|
||||
|
||||
window.addEventListener("hashchange", function(e){
|
||||
|
||||
if (IUI._nav_ignore)
|
||||
{
|
||||
IUI._nav_ignore = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (IUI.responsive)
|
||||
{
|
||||
var oldHash = e.oldURL.split("#");
|
||||
if (oldHash.length == 2)
|
||||
{
|
||||
var hash = oldHash[1];
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||
dialogs.forEach(function(dlg){
|
||||
if (dlg._uid == hash)
|
||||
dlg.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var newHash = e.newURL.split("#");
|
||||
if (newHash.length == 2)
|
||||
{
|
||||
var hash = newHash[1];
|
||||
|
||||
if (hash == "")
|
||||
{
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); });
|
||||
dialogs.forEach(function(d){
|
||||
d.hide();
|
||||
});
|
||||
|
||||
IUI._nav_list = [];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||
|
||||
dialogs.forEach(function(dlg){
|
||||
if (dlg._uid == hash)
|
||||
dlg.setFocus(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
*/
|
||||
Reference in New Issue
Block a user