@aurelia-mdc-web/tree-view
Version:
Wrapper for Material Components Web Tree View
197 lines • 10 kB
JavaScript
define(["require", "exports", "tslib", "@aurelia-mdc-web/base", "@material/base", "aurelia-framework"], function (require, exports, tslib_1, base_1, base_2, aurelia_framework_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcTreeView = exports.MDCTreeViewFoundation = void 0;
var id = 0;
var templateLookup = {};
var getNextNodeTemplateId = function () { return ++id; };
var NODE_SELECTED_EVENT = 'mdctree:node-selected';
var MDCTreeViewFoundation = /** @class */ (function (_super) {
tslib_1.__extends(MDCTreeViewFoundation, _super);
function MDCTreeViewFoundation() {
return _super !== null && _super.apply(this, arguments) || this;
}
return MDCTreeViewFoundation;
}(base_2.MDCFoundation));
exports.MDCTreeViewFoundation = MDCTreeViewFoundation;
var MdcTreeView = /** @class */ (function (_super) {
tslib_1.__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(aurelia_framework_1.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(aurelia_framework_1.ViewCompiler).compile("<template>".concat(nodeTemplate, "</template>"), container.get(aurelia_framework_1.ViewResources));
return nodeViewFactory;
}
else {
// create a default <mdc-tree-node/> factory
// eslint-disable-next-line no-template-curly-in-string
return container.get(aurelia_framework_1.ViewCompiler).compile('<template>${$node}</template>', container.get(aurelia_framework_1.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 tslib_1.__spreadArray([i], tslib_1.__read(childPath), false);
}
}
return path;
};
MdcTreeView.prototype.expandPath = function (path) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var filteredNodes, childTreeView;
var _this = this;
return tslib_1.__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 tslib_1.__awaiter(this, void 0, void 0, function () {
var filteredNodes, path;
var _this = this;
return tslib_1.__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;
tslib_1.__decorate([
aurelia_framework_1.bindable,
tslib_1.__metadata("design:type", Array)
], MdcTreeView.prototype, "nodes", void 0);
tslib_1.__decorate([
aurelia_framework_1.bindable,
tslib_1.__metadata("design:type", Function)
], MdcTreeView.prototype, "filter", void 0);
tslib_1.__decorate([
aurelia_framework_1.bindable,
tslib_1.__metadata("design:type", Object)
], MdcTreeView.prototype, "rootBindingContext", void 0);
MdcTreeView = MdcTreeView_1 = tslib_1.__decorate([
(0, aurelia_framework_1.inject)(Element, aurelia_framework_1.Container),
(0, aurelia_framework_1.customElement)('mdc-tree-view'),
(0, aurelia_framework_1.useView)(aurelia_framework_1.PLATFORM.moduleName('./mdc-tree-view.html')),
(0, aurelia_framework_1.processContent)(MdcTreeView.processContent),
tslib_1.__metadata("design:paramtypes", [HTMLElement, aurelia_framework_1.Container])
], MdcTreeView);
return MdcTreeView;
}(base_1.MdcComponent));
exports.MdcTreeView = MdcTreeView;
});
//# sourceMappingURL=mdc-tree-view.js.map