mirror of
https://github.com/esiur/iui.git
synced 2026-04-04 23:18:21 +00:00
initial commit
This commit is contained in:
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);});
|
||||
Reference in New Issue
Block a user