@aurelia-mdc-web/tree-view
Version:
Wrapper for Material Components Web Tree View
196 lines • 8.78 kB
JavaScript
import { __awaiter, __decorate, __extends, __generator, __metadata, __read, __spreadArray } from "tslib";
import { MdcComponent } from '@aurelia-mdc-web/base';
import { MDCFoundation } from '@material/base';
import { customElement, bindable, useView, PLATFORM, processContent, ViewCompiler, ViewResources, inject, Optional, Container } from 'aurelia-framework';
var id = 0;
var templateLookup = {};
var getNextNodeTemplateId = function () { return ++id; };
var NODE_SELECTED_EVENT = 'mdctree:node-selected';
var MDCTreeViewFoundation = /** @class */ (function (_super) {
__extends(MDCTreeViewFoundation, _super);
function MDCTreeViewFoundation() {
return _super !== null && _super.apply(this, arguments) || this;
}
return MDCTreeViewFoundation;
}(MDCFoundation));
export { MDCTreeViewFoundation };
var MdcTreeView = /** @class */ (function (_super) {
__extends(MdcTreeView, _super);
function MdcTreeView(root, container) {
var _this = _super.call(this, root) || this;
/**
* Allows for filtering tree nodes
*/
_this.filter = function () { return true; };
_this.nodeViewFactory = MdcTreeView_1.getNodeFactory(root, container);
return _this;
}
MdcTreeView_1 = MdcTreeView;
MdcTreeView.prototype.getDefaultFoundation = function () {
return new MDCTreeViewFoundation();
};
MdcTreeView.processContent = function (_viewCompiler, _resources, element) {
var treeNode = element.querySelector('mdc-tree-node');
if (treeNode) {
var nodeTemplateId = getNextNodeTemplateId();
element.setAttribute('data-template-id', nodeTemplateId.toString());
templateLookup[nodeTemplateId] = treeNode.innerHTML;
}
element.innerHTML = '';
return false;
};
/**
* @param element the host element of a <mdc-tree-view/>
* @param container the container associated with a <mdc-tree-view/>
*/
MdcTreeView.getNodeFactory = function (element, container) {
var parent = container.parent ? container.parent.get(Optional.of(MdcTreeView_1)) : null;
var isRoot = !parent;
// a root mdc-tree view means a consumer defined one
// this potentiall contains the template for the tree node
if (isRoot) {
var nodeTemplateId = element.getAttribute('data-template-id');
if (nodeTemplateId && templateLookup[nodeTemplateId]) {
var nodeTemplate = templateLookup[nodeTemplateId];
var nodeViewFactory = container.get(ViewCompiler).compile("<template>".concat(nodeTemplate, "</template>"), container.get(ViewResources));
return nodeViewFactory;
}
else {
// create a default <mdc-tree-node/> factory
// eslint-disable-next-line no-template-curly-in-string
return container.get(ViewCompiler).compile('<template>${$node}</template>', container.get(ViewResources));
}
}
else {
// if it's not a root <mdc-tree-view/>
// assume that the parent has already built the node factory and simply get it from there
return parent.nodeViewFactory;
}
};
MdcTreeView.prototype.bind = function (bindingContext) {
var _a;
this.rootBindingContext = (_a = this.rootBindingContext) !== null && _a !== void 0 ? _a : bindingContext;
};
MdcTreeView.prototype.toggleExpanded = function (n, e) {
n.expanded = !n.expanded;
e.stopPropagation();
return false;
};
MdcTreeView.prototype.nodeClicked = function (n) {
if (this.selectedNode) {
this.selectedNode.selected = false;
}
if (n) {
n.selected = true;
}
this.selectedNode = n;
this.root.dispatchEvent(new CustomEvent(NODE_SELECTED_EVENT, { detail: { node: n }, bubbles: true }));
return true;
};
MdcTreeView.prototype.childNodeSelected = function (n) {
if (this.selectedNode && this.selectedNode !== n) {
this.selectedNode.selected = false;
}
this.selectedNode = n;
};
MdcTreeView.prototype.findPath = function (nodes, predicate) {
var _this = this;
var path = [];
for (var i = 0; i < nodes.length; ++i) {
if (predicate(nodes[i])) {
return [i];
}
if (!nodes[i].children) {
continue;
}
var filteredChildren = nodes[i].children.filter(function (x) { return _this.filter(x); });
var childPath = this.findPath(filteredChildren, predicate);
if (childPath.length) {
return __spreadArray([i], __read(childPath), false);
}
}
return path;
};
MdcTreeView.prototype.expandPath = function (path) {
return __awaiter(this, void 0, void 0, function () {
var filteredNodes, childTreeView;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
filteredNodes = this.nodes.filter(function (x) { return _this.filter(x); });
if (!(path.length === 1)) return [3 /*break*/, 1];
this.nodeClicked(filteredNodes[path[0]]);
this.root.querySelectorAll('.mdc-tree-view__node')[path[0]].scrollIntoView();
return [3 /*break*/, 5];
case 1:
filteredNodes[path[0]].expanded = true;
// child tree views are hidden with 'if.bind'
// promises are created by a helper element `mdc-promisify-reference`
// this lets dependent code to wait till a view model reference is assigned
return [4 /*yield*/, this.initialised];
case 2:
// child tree views are hidden with 'if.bind'
// promises are created by a helper element `mdc-promisify-reference`
// this lets dependent code to wait till a view model reference is assigned
_a.sent();
return [4 /*yield*/, (filteredNodes[path[0]].childTreeViewPromise)];
case 3:
childTreeView = _a.sent();
return [4 /*yield*/, (childTreeView === null || childTreeView === void 0 ? void 0 : childTreeView.expandPath(path.slice(1)))];
case 4:
_a.sent();
_a.label = 5;
case 5: return [2 /*return*/];
}
});
});
};
MdcTreeView.prototype.find = function (predicate) {
return __awaiter(this, void 0, void 0, function () {
var filteredNodes, path;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
filteredNodes = this.nodes.filter(function (x) { return _this.filter(x); });
path = this.findPath(filteredNodes, predicate);
if (!path.length) return [3 /*break*/, 2];
// secondly, expand the path
return [4 /*yield*/, this.expandPath(path)];
case 1:
// secondly, expand the path
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
MdcTreeView.prototype.dispatchEvent = function (type, node) {
this.root.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: { node: node } }));
};
var MdcTreeView_1;
__decorate([
bindable,
__metadata("design:type", Array)
], MdcTreeView.prototype, "nodes", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], MdcTreeView.prototype, "filter", void 0);
__decorate([
bindable,
__metadata("design:type", Object)
], MdcTreeView.prototype, "rootBindingContext", void 0);
MdcTreeView = MdcTreeView_1 = __decorate([
inject(Element, Container),
customElement('mdc-tree-view'),
useView(PLATFORM.moduleName('./mdc-tree-view.html')),
processContent(MdcTreeView.processContent),
__metadata("design:paramtypes", [HTMLElement, Container])
], MdcTreeView);
return MdcTreeView;
}(MdcComponent));
export { MdcTreeView };
//# sourceMappingURL=mdc-tree-view.js.map