@web-atoms/core
Version:
329 lines (328 loc) • 13.3 kB
JavaScript
System.register(["tslib", "../../core/Bind", "../../core/BindableProperty", "../../core/XNode", "../../core/sleep", "../../core/types", "../controls/AtomControl", "../core/AtomUI", "./PopupWindow.global.css"], function (_export, _context) {
"use strict";
var __awaiter, __decorate, __metadata, Bind, BindableProperty, XNode, sleep, CancelToken, AtomControl, ChildEnumerator, PopupWindow, ConfirmPopup, popupService, loadPopupService, focus;
_export({
default: void 0,
ConfirmPopup: void 0
});
return {
setters: [function (_tslib) {
__awaiter = _tslib.__awaiter;
__decorate = _tslib.__decorate;
__metadata = _tslib.__metadata;
}, function (_coreBind) {
Bind = _coreBind.default;
}, function (_coreBindableProperty) {
BindableProperty = _coreBindableProperty.BindableProperty;
}, function (_coreXNode) {
XNode = _coreXNode.default;
}, function (_coreSleep) {
sleep = _coreSleep.default;
}, function (_coreTypes) {
CancelToken = _coreTypes.CancelToken;
}, function (_controlsAtomControl) {
AtomControl = _controlsAtomControl.AtomControl;
}, function (_coreAtomUI) {
ChildEnumerator = _coreAtomUI.ChildEnumerator;
}, function (_PopupWindowGlobalCss) {}],
execute: function () {
loadPopupService = () => __awaiter(void 0, void 0, void 0, function* () {
if (popupService) {
return popupService;
}
return popupService = (yield _context.import("./PopupService")).default;
});
focus = popup => {
var _a, _b, _c;
const element = popup.element;
if (!element) {
return;
}
const host = (_a = element.querySelector(`[data-window-element="title"]`)) !== null && _a !== void 0 ? _a : element.querySelector(`[data-window-element="action-bar"]`);
if (host) {
popup.setupDragging(host);
}
const anyAutofocus = element.querySelector(`*[autofocus]`);
if (!anyAutofocus) {
const cb = element.querySelector(".popup-close-button");
if (cb) {
cb.focus();
}
return;
}
(_c = (_b = anyAutofocus).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
};
_export("default", PopupWindow = class PopupWindow extends AtomControl {
constructor() {
super(...arguments);
this.initialized = false;
}
static showWindow(window, options) {
var arguments_1 = arguments;
return __awaiter(this, void 0, void 0, function* () {
if (arguments_1.length <= 1) {
options = arguments_1[0];
window = this;
}
yield sleep(1);
const PS = yield loadPopupService();
return PS.showWindow(PS.lastTarget, window, options);
});
}
static showModal(window, options) {
var arguments_2 = arguments;
return __awaiter(this, void 0, void 0, function* () {
var _a;
if (arguments_2.length <= 1) {
options = arguments_2[0];
window = this;
}
options !== null && options !== void 0 ? options : options = {};
(_a = options.modal) !== null && _a !== void 0 ? _a : options.modal = true;
yield sleep(1);
const PS = yield loadPopupService();
return PS.showWindow(PS.lastTarget, window, options);
});
}
onPropertyChanged(name) {
super.onPropertyChanged(name);
switch (name) {
case "iconRenderer":
this.recreate(name, "icon");
break;
case "actionBarRenderer":
this.recreate(name, "action-bar");
break;
case "footerRenderer":
this.recreate(name, "footer");
break;
case "titleRenderer":
this.recreate(name, "title");
break;
case "headerRenderer":
this.recreate(name, "header");
break;
case "closeButtonRenderer":
this.recreate(name, "close");
break;
}
}
init() {}
requestCancel() {
return __awaiter(this, void 0, void 0, function* () {
if (this.closeWarning) {
if (!(yield ConfirmPopup.confirm({
message: this.closeWarning
}))) {
return;
}
}
this.cancel();
});
}
recreate(renderer, name) {
var _a, _b, _c;
const node = (_b = (_a = this[renderer]) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : undefined;
for (const e of ChildEnumerator.enumerate(this.element)) {
if (e.getAttribute("data-window-element") === name) {
this.dispose(e);
e.remove();
break;
}
}
if (node) {
const na = (_c = node.attributes) !== null && _c !== void 0 ? _c : node.attributes = {};
na["data-window-element"] = name;
super.render(XNode.create("div", null, node));
return this.element.querySelector(`[data-window-element="${name}"]`);
}
return null;
}
rendererChanged() {
for (const content of ChildEnumerator.where(this.element, e => e.getAttribute("data-window-element") === "content")) {
this.dispose(content);
content.remove();
}
const r = this.renderer;
if (!r) {
return;
}
delete this.render;
this.render(r);
}
preCreate() {
this.title = null;
this.viewModelTitle = null;
this.element.setAttribute("not-ready", "1");
const c = new CancelToken();
this.cancelToken = c;
this.registerDisposable({
dispose() {
c.cancel();
}
});
const handler = e => {
if (e.key === "Escape") {
this.app.runAsync(() => this.requestCancel());
e.preventDefault();
return;
}
};
this.bindEvent(this.element, "keydown", handler);
this.element.setAttribute("data-popup-window", "popup-window");
setTimeout(p => {
p.setAttribute("data-ready", "true");
}, 10, this.element);
setTimeout(p => {
var _a;
const parent = (_a = p.offsetParent) !== null && _a !== void 0 ? _a : document.body;
const left = `${(parent.offsetWidth - p.offsetWidth) / 2}px`;
const top = `${(parent.offsetHeight - p.offsetHeight) / 2}px`;
p.style.left = left;
p.style.top = top;
p.removeAttribute("not-ready");
}, 1000, this.element);
}
render(node, e, creator) {
var _a, _b, _c, _d, _e;
if (e || ((_a = node === null || node === void 0 ? void 0 : node.attributes) === null || _a === void 0 ? void 0 : _a["data-window-element"])) {
super.render(node, e, creator);
return;
}
this.render = super.render;
(_b = this.titleRenderer) !== null && _b !== void 0 ? _b : this.titleRenderer = () => XNode.create("div", {
class: "title-text",
text: Bind.oneWay(() => this.title || this.viewModelTitle)
});
(_c = this.closeButtonRenderer) !== null && _c !== void 0 ? _c : this.closeButtonRenderer = () => XNode.create("button", {
class: "popup-close-button",
text: "x",
eventClick: Bind.event(() => this.requestCancel())
});
(_d = this.actionBarRenderer) !== null && _d !== void 0 ? _d : this.actionBarRenderer = () => XNode.create("div", null);
const a = (_e = node.attributes) !== null && _e !== void 0 ? _e : node.attributes = {};
a["data-window-content"] = "window-content";
a["data-window-element"] = "content";
const extracted = this.extractControlProperties(node);
super.render(XNode.create("div", Object.assign({
viewModelTitle: Bind.oneWay(() => this.viewModel.title)
}, extracted), node), e, creator);
if (!this.initialized) {
this.initialized = true;
this.runAfterInit(() => {
setTimeout(focus, 100, this);
});
}
}
setupDragging(tp) {
this.bindEvent(tp, "mousedown", startEvent => {
if (startEvent.target.tagName === "BUTTON") {
return;
}
startEvent.preventDefault();
const disposables = [];
const element = this.element;
const offset = {
x: element.offsetLeft,
y: element.offsetTop
};
this.element.dataset.dragging = "true";
const rect = {
x: startEvent.clientX,
y: startEvent.clientY
};
const cursor = tp.style.cursor;
tp.style.cursor = "move";
disposables.push(this.bindEvent(document.body, "mousemove", moveEvent => {
const {
clientX,
clientY
} = moveEvent;
const dx = clientX - rect.x;
const dy = clientY - rect.y;
const finalX = offset.x + dx;
const finalY = offset.y + dy;
if (finalX < 5 || finalY < 5) {
return;
}
offset.x = finalX;
offset.y = finalY;
this.element.style.left = offset.x + "px";
this.element.style.top = offset.y + "px";
rect.x = clientX;
rect.y = clientY;
}));
disposables.push(this.bindEvent(document.body, "mouseup", endEvent => {
tp.style.cursor = cursor;
this.element.removeAttribute("data-dragging");
for (const iterator of disposables) {
iterator.dispose();
}
}));
});
}
});
__decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "title", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "titleRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "closeButtonRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "footerRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "headerRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "iconRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", Function)], PopupWindow.prototype, "actionBarRenderer", void 0);
__decorate([BindableProperty, __metadata("design:type", String)], PopupWindow.prototype, "closeWarning", void 0);
delete PopupWindow.prototype.init;
_export("ConfirmPopup", ConfirmPopup = class ConfirmPopup extends PopupWindow {
static confirm(_a) {
return __awaiter(this, arguments, void 0, function* ({
message,
title = "Confirm",
yesLabel = "Yes",
noLabel = "No",
cancelLabel = null
}) {
const PS = yield loadPopupService();
return PS.confirm({
title,
message,
yesLabel,
noLabel,
cancelLabel
});
});
}
preCreate() {
super.preCreate();
this.yesLabel = "Yes";
this.noLabel = "No";
this.cancelLabel = null;
this.element.setAttribute("data-confirm-popup", "confirm-popup");
this.footerRenderer = () => XNode.create("div", null, XNode.create("button", {
class: "yes",
autofocus: true,
text: Bind.oneWay(() => this.yesLabel),
eventClick: () => this.close(true),
"style-display": Bind.oneWay(() => !!this.yesLabel)
}), XNode.create("button", {
class: "no",
text: Bind.oneWay(() => this.noLabel),
eventClick: () => this.close(false),
"style-display": Bind.oneWay(() => !!this.noLabel)
}), XNode.create("button", {
class: "cancel",
text: Bind.oneWay(() => this.cancelLabel),
eventClick: () => this.requestCancel(),
"style-display": Bind.oneWay(() => !!this.cancelLabel)
}));
this.closeButtonRenderer = () => XNode.create("div", {
"style-display": "none"
});
}
requestCancel() {
this.cancel();
return Promise.resolve();
}
});
}
};
});
//# sourceMappingURL=PopupWindow.js.map