UNPKG

5.02 kBJavaScriptView Raw
1import { a as __extends } from './tslib.es6-863e3717.js';
2import { event, select } from 'd3';
3import { C as Component } from './Component-5b66527b.js';
4
5var EllipsisMenu = /** @class */ (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: //tab
29 this.focusOnMenuItem(i + 1);
30 event.preventDefault();
31 break;
32 case 27: //escape
33 this.setMenuVisibility(false);
34 this.buttonElement.node().focus();
35 event.preventDefault();
36 break;
37 case 38: // up arrow
38 this.focusOnMenuItem(i - 1);
39 event.preventDefault();
40 break;
41 case 40: // down arrow
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
112export { EllipsisMenu as E };