@web-atoms/core
Version:
71 lines (70 loc) • 3.28 kB
JavaScript
System.register(["../../../controls/AtomControl", "../../../controls/AtomGridSplitter", "../../../controls/AtomGridView", "../../../controls/AtomItemsControl"], function (_export, _context) {
"use strict";
var AtomControl, AtomGridSplitter, AtomGridView, AtomItemsControl, MovieList, MovieListItemTemplate;
_export("MovieList", void 0);
return {
setters: [function (_controlsAtomControl) {
AtomControl = _controlsAtomControl.AtomControl;
}, function (_controlsAtomGridSplitter) {
AtomGridSplitter = _controlsAtomGridSplitter.AtomGridSplitter;
}, function (_controlsAtomGridView) {
AtomGridView = _controlsAtomGridView.AtomGridView;
}, function (_controlsAtomItemsControl) {
AtomItemsControl = _controlsAtomItemsControl.AtomItemsControl;
}],
execute: function () {
_export("MovieList", MovieList = class MovieList extends AtomGridView {
create() {
const style = this.element.style;
style.position = "absolute";
style.left = style.right = style.top = style.bottom = "0";
this.setPrimitiveValue(this.element, "columns", "30%,5,*");
this.setPrimitiveValue(this.element, "rows", "30,*");
const header = document.createElement("header");
header.textContent = "Header";
this.setPrimitiveValue(header, "cell", "0:3,0");
this.append(header);
const ul = new AtomItemsControl(this.app, document.createElement("ul"));
this.append(ul);
ul.itemTemplate = MovieListItemTemplate;
ul.bind(ul.element, "items", [["viewModel", "movies"]], false);
ul.bind(ul.element, "selectedItem", [["viewModel", "selectedMovie"]], true);
ul.setPrimitiveValue(ul.element, "cell", "0,1");
const right = document.createElement("div");
right.textContent = "right";
right.style.backgroundColor = "green";
this.setPrimitiveValue(right, "cell", "2,1");
this.append(right);
const splitter = new AtomGridSplitter(this.app);
this.append(splitter);
splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
}
});
MovieListItemTemplate = class MovieListItemTemplate extends AtomControl {
constructor(app, e) {
super(app, e || document.createElement("li"));
}
create() {
this.element.style.margin = "2px";
const span = document.createElement("span");
this.append(span);
this.bind(span, "text", [["data", "label"], ["data", "category"]], false, (label, category) => `${label} (${category})`);
this.bind(span, "styleFontWeight", [["data"], ["viewModel", "selectedMovie"]], false, (d, s) => {
return d === s ? "bold" : "";
});
this.bindEvent(span, "click", e => {
this.viewModel.onItemClick(this.data);
});
const button = document.createElement("button");
this.append(button);
button.textContent = "Delete";
button.style.marginLeft = "10px";
this.bindEvent(button, "click", e => {
this.viewModel.onDelete(this.data);
});
}
};
}
};
});
//# sourceMappingURL=MovieList.js.map