@web-atoms/core
Version:
266 lines (265 loc) • 12 kB
JavaScript
System.register(["tslib", "../../App", "../../core/AtomBinder", "../../core/AtomList", "../../core/AtomLoader", "../../core/AtomOnce", "../../core/AtomUri", "../../core/Bind", "../../core/BindableProperty", "../../core/StringHelper", "../../core/XNode", "../../di/Inject", "../../services/NavigationService", "../../view-model/AtomViewModel", "../../view-model/AtomWindowViewModel", "../../view-model/bindProperty", "../../view-model/bindUrlParameter", "../services/WindowService", "../styles/AtomTabbedPageStyle", "./AtomControl", "./AtomItemsControl", "./AtomPage"], function (_export, _context) {
"use strict";
var __awaiter, __decorate, __metadata, __param, App, AtomBinder, AtomList, AtomLoader, AtomOnce, AtomUri, Bind, BindableProperty, StringHelper, XNode, Inject, NavigationService, AtomViewModel, Watch, AtomWindowViewModel, bindProperty, bindUrlParameter, WindowService, AtomTabbedPageStyle, AtomControl, AtomItemsControl, AtomPage, AtomTabbedPage, BindPage, AtomTabViewModel;
_export("AtomTabbedPage", void 0);
return {
setters: [function (_tslib) {
__awaiter = _tslib.__awaiter;
__decorate = _tslib.__decorate;
__metadata = _tslib.__metadata;
__param = _tslib.__param;
}, function (_App) {
App = _App.App;
}, function (_coreAtomBinder) {
AtomBinder = _coreAtomBinder.AtomBinder;
}, function (_coreAtomList) {
AtomList = _coreAtomList.AtomList;
}, function (_coreAtomLoader) {
AtomLoader = _coreAtomLoader.AtomLoader;
}, function (_coreAtomOnce) {
AtomOnce = _coreAtomOnce.AtomOnce;
}, function (_coreAtomUri) {
AtomUri = _coreAtomUri.AtomUri;
}, function (_coreBind) {
Bind = _coreBind.default;
}, function (_coreBindableProperty) {
BindableProperty = _coreBindableProperty.BindableProperty;
}, function (_coreStringHelper) {
StringHelper = _coreStringHelper.StringHelper;
}, function (_coreXNode) {
XNode = _coreXNode.default;
}, function (_diInject) {
Inject = _diInject.Inject;
}, function (_servicesNavigationService) {
NavigationService = _servicesNavigationService.NavigationService;
}, function (_viewModelAtomViewModel) {
AtomViewModel = _viewModelAtomViewModel.AtomViewModel;
Watch = _viewModelAtomViewModel.Watch;
}, function (_viewModelAtomWindowViewModel) {
AtomWindowViewModel = _viewModelAtomWindowViewModel.AtomWindowViewModel;
}, function (_viewModelBindProperty) {
bindProperty = _viewModelBindProperty.default;
}, function (_viewModelBindUrlParameter) {
bindUrlParameter = _viewModelBindUrlParameter.default;
}, function (_servicesWindowService) {
WindowService = _servicesWindowService.WindowService;
}, function (_stylesAtomTabbedPageStyle) {
AtomTabbedPageStyle = _stylesAtomTabbedPageStyle.AtomTabbedPageStyle;
}, function (_AtomControl) {
AtomControl = _AtomControl.AtomControl;
}, function (_AtomItemsControl) {
AtomItemsControl = _AtomItemsControl.AtomItemsControl;
}, function (_AtomPage) {
AtomPage = _AtomPage.AtomPage;
}],
execute: function () {
BindPage = Bind.forData();
_export("AtomTabbedPage", AtomTabbedPage = class AtomTabbedPage extends AtomControl {
get windowService() {
return this.mWindowService || (this.mWindowService = this.resolve(WindowService));
}
get selectedPage() {
return this.mSelectedPage;
}
set selectedPage(value) {
this.mSelectedPage = value;
if (value && value.element) {
const pe = value.element.parentElement;
if (pe !== this.presenter) {
this.presenter.appendChild(value.element);
const ve = value;
value.bind(value.element, "styleDisplay", [["this", "selectedPage"]], false, v => v === ve ? "" : "none", this);
}
}
this.invalidate();
AtomBinder.refreshValue(this, "selectedPage");
}
constructor(app, e) {
super(app, e !== null && e !== void 0 ? e : document.createElement("section"));
}
preCreate() {
super.preCreate();
this.defaultControlStyle = AtomTabbedPageStyle;
this.tabChannelName = "app";
this.titleTemplate = null;
this.mSelectedPage = null;
this.runAfterInit(() => {
this.setPrimitiveValue(this.element, "styleClass", `atom-tabbed-page ${this.controlStyle.name}`);
});
this.localViewModel = this.resolve(AtomTabViewModel, () => ({
owner: this
}));
this.render(XNode.create("section", {
selectedPage: Bind.twoWays(() => this.localViewModel.selectedPage)
}, XNode.create(AtomTabbedPage.titleTemplate, null, XNode.create("div", {
styleClass: BindPage.oneWay(x => ({
"tab-item": 1,
"selected-tab-item": x.data === this.localViewModel.selectedPage
}))
}, XNode.create("div", {
eventClick: BindPage.event(x => this.localViewModel.selectedPage = x.data),
text: BindPage.oneWay(x => x.data.viewModelTitle || x.data.title)
}), XNode.create("img", {
class: "close-button",
eventClick: BindPage.event(x => this.localViewModel.closePage(x.data))
}))), XNode.create(AtomItemsControl, {
class: "tabs",
allowMultipleSelection: false,
allowSelectFirst: true,
items: Bind.oneWay(() => this.localViewModel.pages),
selectedItem: Bind.twoWays(() => this.localViewModel.selectedPage),
itemTemplate: Bind.oneWay(() => this.titleTemplate)
}), XNode.create("div", {
class: "presenter page-host atom-tabbed-page-host",
presenter: Bind.presenter("presenter")
})));
this.registerDisposable(this.windowService.registerHostForWindow(e => this.getParentHost(e)));
}
getParentHost(e) {
while (e) {
const pe = e._logicalParent || e.parentElement;
if (pe === this.presenter) {
return e.parentElement;
}
if (!pe) {
return null;
}
e = pe;
}
}
});
AtomTabbedPage.titleTemplate = XNode.prepare("titleTemplate", true, true);
AtomTabViewModel = class AtomTabViewModel extends AtomViewModel {
constructor(app, owner) {
super(app);
this.owner = owner;
this.pageUpdater = new AtomOnce();
this.pages = new AtomList();
bindProperty(this, this, "selectedUrl", this, [["selectedPage"]], {
fromSource: v => {
return v.tag;
},
fromTarget: v => {
if (!this.pages) {
return null;
}
return this.pages.find(p => p.tag === v);
}
});
bindUrlParameter(this, "selectedUrl", "url");
}
init() {
return __awaiter(this, void 0, void 0, function* () {
const ch = this.owner.tabChannelName;
this.storageKey = `${this.app.contextId}_${ch}`;
const d = this.navigationService.registerNavigationHook((uri, {
target
}) => {
if (target === this.owner.tabChannelName || uri.protocol === "tab:" && uri.host === this.owner.tabChannelName) {
return this.loadPageForReturn(uri);
}
});
this.registerDisposable(d);
const urls = sessionStorage.getItem(this.storageKey) || "null";
const urlState = JSON.parse(urls) || {
name,
urls: [],
selectedUrl: null
};
for (const iterator of urlState.urls) {
const page = yield this.loadPage(new AtomUri(iterator), true);
if (page.tag === urlState.selectedUrl) {
this.pageUpdater.run(() => {
this.selectedPage = page;
});
}
}
if (!this.selectedPage) {
this.selectedPage = this.pages[0];
}
});
}
watchSelectedPage() {
this.saveState(this.selectedPage);
}
closePage(page) {
this.app.runAsync(() => this.navigationService.remove(page));
}
saveState(a) {
const state = {
urls: this.pages.map(p => p.tag),
selectedUrl: this.selectedUrl
};
sessionStorage.setItem(this.storageKey, JSON.stringify(state));
}
loadPageForReturn(url) {
return __awaiter(this, void 0, void 0, function* () {
const p = yield this.loadPage(url, false);
try {
return yield p.returnPromise;
} catch (ex) {
if ((ex.message ? ex.message : ex) === "cancelled") {
console.warn(ex);
return;
}
throw ex;
}
});
}
loadPage(url, doNotSetSelected) {
return __awaiter(this, void 0, void 0, function* () {
const uriString = url.toString();
const ws = this.navigationService;
const existing = this.pages.find(x => x.tag === uriString);
if (existing) {
if (!doNotSetSelected) {
if (this.selectedPage !== existing) {
this.selectedPage = existing;
}
}
return existing;
}
const {
view: page,
disposables
} = yield AtomLoader.loadView(url, this.app, true, () => new AtomWindowViewModel(this.app));
page.title || (page.title = StringHelper.fromPascalToTitleCase(page.constructor.name));
page.tag = uriString;
if (url.query && url.query.title) {
page.title || (page.title = url.query.title.toString());
}
page.viewModelTitle = null;
page.bind(page.element, "viewModelTitle", [["viewModel", "title"]]);
page.bind(page.element, "styleDisplay", [["this", "selectedPage"]], false, v => v === page ? "" : "none", this);
this.pages.add(page);
if (!doNotSetSelected) {
this.selectedPage = page;
}
const e = page.element;
disposables.add(() => {
const index = this.pages.indexOf(page);
if (this.pages.length <= 1 && index <= 0) {
return;
}
this.pages.remove(page);
e.remove();
if (this.selectedPage === page) {
this.selectedPage = this.pages[index - 1];
}
});
this.saveState();
return page;
});
}
};
__decorate([BindableProperty, __metadata("design:type", AtomList)], AtomTabViewModel.prototype, "pages", void 0);
__decorate([BindableProperty, __metadata("design:type", AtomPage)], AtomTabViewModel.prototype, "selectedPage", void 0);
__decorate([BindableProperty, __metadata("design:type", String)], AtomTabViewModel.prototype, "selectedUrl", void 0);
__decorate([BindableProperty, __metadata("design:type", Object)], AtomTabViewModel.prototype, "tabState", void 0);
__decorate([Inject, __metadata("design:type", NavigationService)], AtomTabViewModel.prototype, "navigationService", void 0);
__decorate([Watch, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], AtomTabViewModel.prototype, "watchSelectedPage", null);
AtomTabViewModel = __decorate([__param(0, Inject), __metadata("design:paramtypes", [App, AtomTabbedPage])], AtomTabViewModel);
}
};
});
//# sourceMappingURL=AtomTabbedPage.js.map