1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { event, select } from 'd3';
|
3 | import { C as Component } from './Component-5b66527b.js';
|
4 |
|
5 | var EllipsisMenu = (function (_super) {
|
6 | __extends(EllipsisMenu, _super);
|
7 | function EllipsisMenu(renderTarget) {
|
8 | return _super.call(this, renderTarget) || this;
|
9 | }
|
10 | EllipsisMenu.prototype.createIconPath = function (iconName, theme) {
|
11 | var supportedNames = ["flag", "grid", "download"];
|
12 | return (supportedNames.indexOf(iconName) != -1) ? iconName + "Icon" : "";
|
13 | };
|
14 | EllipsisMenu.prototype.setMenuVisibility = function (isVisible) {
|
15 | this.menuIsVisible = isVisible;
|
16 | this.containerElement.classed("tsi-ellipsisMenuShown", this.menuIsVisible);
|
17 | };
|
18 | EllipsisMenu.prototype.focusOnMenuItem = function (itemIndex) {
|
19 | if (itemIndex === void 0) { itemIndex = 0; }
|
20 | itemIndex = (itemIndex + this.menuItems.length) % this.menuItems.length;
|
21 | var menuItem = this.menuElement.selectAll(".tsi-ellipsisMenuItem").filter(function (d, i) {
|
22 | return (itemIndex === i);
|
23 | });
|
24 | menuItem.node().focus();
|
25 | };
|
26 | EllipsisMenu.prototype.menuItemKeyHandler = function (d, i) {
|
27 | switch (event.keyCode) {
|
28 | case 9:
|
29 | this.focusOnMenuItem(i + 1);
|
30 | event.preventDefault();
|
31 | break;
|
32 | case 27:
|
33 | this.setMenuVisibility(false);
|
34 | this.buttonElement.node().focus();
|
35 | event.preventDefault();
|
36 | break;
|
37 | case 38:
|
38 | this.focusOnMenuItem(i - 1);
|
39 | event.preventDefault();
|
40 | break;
|
41 | case 40:
|
42 | this.focusOnMenuItem(i + 1);
|
43 | event.preventDefault();
|
44 | break;
|
45 | }
|
46 | };
|
47 | EllipsisMenu.prototype.render = function (menuItems, options) {
|
48 | var _this = this;
|
49 | if (options === void 0) { options = {}; }
|
50 | this.menuIsVisible = false;
|
51 | this.chartOptions.setOptions(options);
|
52 | this.containerElement = select(this.renderTarget).classed("tsi-ellipsisMenuContainer", true);
|
53 | this.setMenuItems(menuItems);
|
54 | select(this.renderTarget).selectAll("*").remove();
|
55 | _super.prototype.themify.call(this, this.containerElement, this.chartOptions.theme);
|
56 | var self = this;
|
57 | this.buttonElement = select(this.renderTarget).insert("button")
|
58 | .attr("class", "tsi-ellipsisButton")
|
59 | .attr("aria-label", this.getString("Show ellipsis menu"))
|
60 | .attr("role", "menu")
|
61 | .attr("title", this.getString("Show ellipsis menu"))
|
62 | .attr("type", "button")
|
63 | .on("click", function () {
|
64 | select(this).attr("aria-label", !self.menuIsVisible ? self.getString("Show ellipsis menu") : self.getString("Hide ellipsis menu"))
|
65 | .attr("title", !self.menuIsVisible ? self.getString("Show ellipsis menu") : self.getString("Hide ellipsis menu"));
|
66 | self.setMenuVisibility(!self.menuIsVisible);
|
67 | if (self.menuIsVisible) {
|
68 | self.focusOnMenuItem(0);
|
69 | }
|
70 | });
|
71 | this.menuElement = select(this.renderTarget).insert("div")
|
72 | .attr("class", "tsi-ellipsisMenu");
|
73 | this.menuElement.selectAll(".tsi-ellipsisMenuItem").data(this.menuItems)
|
74 | .enter()
|
75 | .append("button")
|
76 | .classed("tsi-ellipsisMenuItem", true)
|
77 | .attr("aria-label", function (d) { return d.label; })
|
78 | .attr("type", "button")
|
79 | .attr("role", "menuitem")
|
80 | .on('keydown', function (d, i) { _this.menuItemKeyHandler(d, i); })
|
81 | .on("click", function (d) {
|
82 | d.action();
|
83 | })
|
84 | .each(function () {
|
85 | select(this)
|
86 | .append("div")
|
87 | .attr("class", function (d) { return "tsi-ellipsisMenuIcon " + self.createIconPath(d.iconClass, self.chartOptions.theme); });
|
88 | select(this)
|
89 | .append("div")
|
90 | .classed("tsi-ellipsisMenuLabel", true)
|
91 | .text(function (d) { return d.label; });
|
92 | select(this)
|
93 | .append("div")
|
94 | .classed("tsi-ellipsisMenuDescription", true)
|
95 | .style("display", "none");
|
96 | });
|
97 | };
|
98 | EllipsisMenu.prototype.setMenuItems = function (rawMenuItems) {
|
99 | this.menuItems = rawMenuItems.reduce(function (menuItems, currMenuItem) {
|
100 | menuItems.push({
|
101 | iconClass: currMenuItem.iconClass,
|
102 | label: currMenuItem.label,
|
103 | action: currMenuItem.action,
|
104 | description: currMenuItem.description
|
105 | });
|
106 | return menuItems;
|
107 | }, []);
|
108 | };
|
109 | return EllipsisMenu;
|
110 | }(Component));
|
111 |
|
112 | export { EllipsisMenu as E };
|