@web-atoms/core-docs
Version:
74 lines • 3.67 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "../../../controls/AtomControl", "../../../controls/AtomGridSplitter", "../../../controls/AtomGridView", "../../../controls/AtomItemsControl"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MovieList = void 0;
const AtomControl_1 = require("../../../controls/AtomControl");
const AtomGridSplitter_1 = require("../../../controls/AtomGridSplitter");
const AtomGridView_1 = require("../../../controls/AtomGridView");
const AtomItemsControl_1 = require("../../../controls/AtomItemsControl");
class MovieList extends AtomGridView_1.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_1.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 e = document.createElement("span");
// this.append(e);
// e.style.color = "red";
// this.bind(e, "text", [["viewModel", "errorSelectedMovie"]]);
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_1.AtomGridSplitter(this.app);
this.append(splitter);
splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
}
}
exports.MovieList = MovieList;
class MovieListItemTemplate extends AtomControl_1.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