web-atoms-core
Version:
94 lines • 4.73 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
(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 });
var AtomControl_1 = require("../../../controls/AtomControl");
var AtomGridSplitter_1 = require("../../../controls/AtomGridSplitter");
var AtomGridView_1 = require("../../../controls/AtomGridView");
var AtomItemsControl_1 = require("../../../controls/AtomItemsControl");
var MovieList = /** @class */ (function (_super) {
__extends(MovieList, _super);
function MovieList() {
return _super !== null && _super.apply(this, arguments) || this;
}
MovieList.prototype.create = function () {
var 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,*");
var header = document.createElement("header");
header.textContent = "Header";
this.setPrimitiveValue(header, "cell", "0:3,0");
this.append(header);
var 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"]]);
var right = document.createElement("div");
right.textContent = "right";
right.style.backgroundColor = "green";
this.setPrimitiveValue(right, "cell", "2,1");
this.append(right);
var splitter = new AtomGridSplitter_1.AtomGridSplitter(this.app);
this.append(splitter);
splitter.setPrimitiveValue(splitter.element, "cell", "1,1");
};
return MovieList;
}(AtomGridView_1.AtomGridView));
exports.MovieList = MovieList;
var MovieListItemTemplate = /** @class */ (function (_super) {
__extends(MovieListItemTemplate, _super);
function MovieListItemTemplate(app, e) {
return _super.call(this, app, e || document.createElement("li")) || this;
}
MovieListItemTemplate.prototype.create = function () {
var _this = this;
this.element.style.margin = "2px";
var span = document.createElement("span");
this.append(span);
this.bind(span, "text", [["data", "label"], ["data", "category"]], false, function (label, category) { return label + " (" + category + ")"; });
this.bind(span, "styleFontWeight", [["data"], ["viewModel", "selectedMovie"]], false, function (d, s) {
return d === s ? "bold" : "";
});
this.bindEvent(span, "click", function (e) {
_this.viewModel.onItemClick(_this.data);
});
var button = document.createElement("button");
this.append(button);
button.textContent = "Delete";
button.style.marginLeft = "10px";
this.bindEvent(button, "click", function (e) {
_this.viewModel.onDelete(_this.data);
});
};
return MovieListItemTemplate;
}(AtomControl_1.AtomControl));
});
//# sourceMappingURL=MovieList.js.map