@web-atoms/core
Version:
248 lines (247 loc) • 9.36 kB
JavaScript
System.register(["../../App", "../../core/Bind", "../../core/XNode", "../styles/AtomWindowStyle", "./AtomControl", "./AtomTemplate"], function (_export, _context) {
"use strict";
var App, Bind, XNode, AtomWindowStyle, AtomControl, AtomTemplate, AtomWindowFrameTemplate, AtomWindowTitleTemplate, AtomWindow;
function getTemplateParent(e) {
const tp = e._templateParent;
if (tp) {
return tp;
}
const p = e._logicalParent || e.parentElement;
if (p) {
return getTemplateParent(p);
}
}
_export({
getTemplateParent: getTemplateParent,
AtomWindowFrameTemplate: void 0,
AtomWindow: void 0
});
return {
setters: [function (_App) {
App = _App.App;
}, function (_coreBind) {
Bind = _coreBind.default;
}, function (_coreXNode) {
XNode = _coreXNode.default;
}, function (_stylesAtomWindowStyle) {
AtomWindowStyle = _stylesAtomWindowStyle.AtomWindowStyle;
}, function (_AtomControl) {
AtomControl = _AtomControl.AtomControl;
}, function (_AtomTemplate) {
AtomTemplate = _AtomTemplate.AtomTemplate;
}],
execute: function () {
_export("AtomWindowFrameTemplate", AtomWindowFrameTemplate = class AtomWindowFrameTemplate extends AtomTemplate {
get templateParent() {
return getTemplateParent(this.element);
}
preCreate() {
this.titlePresenter = null;
this.commandPresenter = null;
this.contentPresenter = null;
super.preCreate();
}
create() {
this.render(XNode.create("div", {
class: "frame",
styleWidth: Bind.oneWay(() => this.templateParent.width || undefined),
styleHeight: Bind.oneWay(() => this.templateParent.height || undefined),
styleLeft: Bind.oneWay(() => this.templateParent.x >= 0 ? `${this.templateParent.x}px` : undefined),
styleTop: Bind.oneWay(() => this.templateParent.y >= 0 ? `${this.templateParent.y}px` : undefined),
styleMarginTop: Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined),
styleMarginLeft: Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined),
styleMarginRight: Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined),
styleMarginBottom: Bind.oneWay(() => this.templateParent.x >= 0 ? "0" : undefined)
}, XNode.create("div", {
class: "title-presenter",
presenter: Bind.presenter("titlePresenter")
}), XNode.create("div", {
class: "content-presenter",
presenter: Bind.presenter("contentPresenter")
}), XNode.create("div", {
class: "command-bar-presenter",
presenter: Bind.presenter("commandPresenter")
})));
}
});
AtomWindowTitleTemplate = class AtomWindowTitleTemplate extends AtomControl {
get templateParent() {
return getTemplateParent(this.element);
}
create() {
this.render(XNode.create("div", {
class: "title-host"
}, XNode.create("span", {
class: "title",
text: Bind.oneWay(() => this.templateParent.title)
}), XNode.create("button", {
class: "close-button",
eventClick: Bind.event(() => this.templateParent.close())
})));
}
};
_export("AtomWindow", AtomWindow = class AtomWindow extends AtomControl {
constructor() {
super(...arguments);
this.title = "";
this.width = "";
this.height = "";
this.x = -1;
this.y = -1;
this.titleTemplate = AtomWindowTitleTemplate;
this.frameTemplate = AtomWindowFrameTemplate;
this.isReady = false;
}
get templateParent() {
return getTemplateParent(this.element);
}
onPropertyChanged(name) {
switch (name) {
case "windowTemplate":
case "commandTemplate":
case "frameTemplate":
this.invalidate();
break;
}
}
close() {
const vm = this.viewModel;
if (vm.cancel) {
this.app.runAsync(() => vm.cancel());
return;
}
const message = `atom-window-cancel:${this.id}`;
const device = this.app.resolve(App);
device.broadcast(message, "cancelled");
}
onUpdateUI() {
if (!(this.windowTemplate && this.frameTemplate)) {
return;
}
if (this.isReady) {
return;
}
this.bind(this.element, "title", [["viewModel", "title"]]);
const frame = new this.frameTemplate(this.app);
const fe = frame.element;
const titleContent = new this.titleTemplate(this.app);
titleContent.element._templateParent = this;
frame.titlePresenter.appendChild(titleContent.element);
this.setupDragging(frame.titlePresenter);
this.element.classList.add("frame-host");
fe._logicalParent = this.element;
fe._templateParent = this;
if (!frame.contentPresenter) {
throw new Error("ContentPresenter must be set inside frameTemplate before creating window");
}
const content = new this.windowTemplate(this.app);
content.element._templateParent = this;
this.setElementClass(content.element, {
content: 1
});
frame.contentPresenter.appendChild(content.element);
if (this.commandTemplate) {
if (!frame.commandPresenter) {
throw new Error("CommandPresenter must be set inside frameTemplate" + "before creating window if command template is present");
}
const command = new this.commandTemplate(this.app);
command.element._templateParent = this;
this.setElementClass(command.element, {
"command-bar": 1
});
frame.commandPresenter.appendChild(command.element);
}
this.append(frame);
setTimeout(() => {
this.centerFrame(frame.element);
}, 100);
this.isReady = true;
}
preCreate() {
this.defaultControlStyle = AtomWindowStyle;
this.title = null;
this.width = "";
this.height = "";
this.x = -1;
this.y = -1;
this.windowTemplate = null;
this.commandTemplate = null;
this.titleTemplate = AtomWindowTitleTemplate;
this.frameTemplate = AtomWindowFrameTemplate;
super.preCreate();
this.render(XNode.create("div", {
styleClass: Bind.oneTime(() => this.controlStyle.name)
}));
}
centerFrame(e) {
if (!this.element) {
return;
}
const parent = this.element.parentElement;
if (parent === window || parent === document.body) {
return;
}
if (parent.offsetWidth <= 0 || parent.offsetHeight <= 0) {
setTimeout(() => {
this.centerFrame(e);
}, 100);
return;
}
if (e.offsetWidth <= 0 || e.offsetHeight <= 0) {
setTimeout(() => {
this.centerFrame(e);
}, 100);
return;
}
const x = (parent.offsetWidth - e.offsetWidth) / 2;
const y = (parent.offsetHeight - e.offsetHeight) / 2;
this.x = x;
this.y = y;
e.style.opacity = "1";
this.element.style.removeProperty("opacity");
}
setupDragging(tp) {
this.bindEvent(tp, "mousedown", startEvent => {
startEvent.preventDefault();
const disposables = [];
const offset = {
x: tp.parentElement.offsetLeft,
y: tp.parentElement.offsetTop
};
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;
offset.x += dx;
offset.y += dy;
this.x = offset.x;
this.y = offset.y;
rect.x = clientX;
rect.y = clientY;
}));
disposables.push(this.bindEvent(document.body, "mouseup", endEvent => {
tp.style.cursor = cursor;
for (const iterator of disposables) {
iterator.dispose();
}
}));
});
}
});
AtomWindow.windowTemplate = XNode.prepare("windowTemplate", true, true);
AtomWindow.commandTemplate = XNode.prepare("commandTemplate", true, true);
AtomWindow.titleTemplate = XNode.prepare("titleTemplate", true, true);
AtomWindow.frameTemplate = XNode.prepare("frameTemplate", true, true);
}
};
});
//# sourceMappingURL=AtomWindow.js.map