carbon-components-angular
Version:
Next generation components
147 lines (144 loc) • 6.43 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | overflow-menu-pane.component.js
*
* Copyright 2014, 2018 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __extends = (this && this.__extends) || (function () {
var 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 function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Component, HostListener, ElementRef } from "@angular/core";
import { Dialog } from "../dialog.component";
import { position } from "../../utils/position";
import { getFocusElementList, isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
import { I18n } from "./../../i18n/i18n.module";
/**
* Extend the `Dialog` component to create an overflow menu.
*
* Not used directly. See overflow-menu.component and overflow-menu.directive for more
*/
var OverflowMenuPane = /** @class */ (function (_super) {
__extends(OverflowMenuPane, _super);
function OverflowMenuPane(elementRef, i18n) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
_this.i18n = i18n;
return _this;
}
OverflowMenuPane.prototype.onDialogInit = function () {
var _this = this;
/**
* -20 shifts the menu up to compensate for the
* extra offset generated by the wrapper component.
*
* 60 shifts the menu right to align the arrow.
* (position service trys it's best to center everything,
* so we need to add some compensation)
*/
this.addGap["bottom"] = function (pos) {
if (_this.dialogConfig.flip) {
return position.addOffset(pos, -20, -60);
}
return position.addOffset(pos, -20, 60);
};
if (!this.dialogConfig.menuLabel) {
this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
}
setTimeout(function () {
getFocusElementList(_this.elementRef.nativeElement).every(function (button) {
// Allows user to set tabindex to 0.
if (button.getAttribute("tabindex") === null) {
button.tabIndex = -1;
}
});
_this.listItems()[0].focus();
}, 0);
};
OverflowMenuPane.prototype.hostkeys = function (event) {
var listItems = this.listItems();
switch (event.key) {
case "Down": // IE specific value
case "ArrowDown":
event.preventDefault();
if (!isFocusInLastItem(event, listItems)) {
var index = listItems.findIndex(function (item) { return item === event.target; });
listItems[index + 1].focus();
}
else {
listItems[0].focus();
}
break;
case "Up": // IE specific value
case "ArrowUp":
event.preventDefault();
if (!isFocusInFirstItem(event, listItems)) {
var index = listItems.findIndex(function (item) { return item === event.target; });
listItems[index - 1].focus();
}
else {
listItems[listItems.length - 1].focus();
}
break;
case "Home":
event.preventDefault();
listItems[0].focus();
break;
case "End":
event.preventDefault();
listItems[listItems.length - 1].focus();
break;
case "Esc": // IE specific value
case "Escape":
event.stopImmediatePropagation();
this.doClose();
break;
}
};
OverflowMenuPane.prototype.clickClose = function (event) {
// Opens menu when clicking on the menu button and stays open while navigating through the options
if (this.dialogConfig.parentRef.nativeElement.firstChild.contains(event.target) ||
this.listItems().some(function (button) { return button === event.relatedTarget; }) ||
event.type === "focusout" && event.relatedTarget === this.dialogConfig.parentRef.nativeElement) {
return;
}
this.doClose();
};
OverflowMenuPane.prototype.listItems = function () {
return Array.from(this.elementRef.nativeElement.querySelectorAll(".bx--overflow-menu-options__btn:not([disabled])"));
};
OverflowMenuPane.decorators = [
{ type: Component, args: [{
selector: "ibm-overflow-menu-pane",
template: "\n\t\t<ul\n\t\t\t[attr.aria-label]=\"dialogConfig.menuLabel\"\n\t\t\t[ngClass]=\"{'bx--overflow-menu--flip': dialogConfig.flip}\"\n\t\t\trole=\"menu\"\n\t\t\t#dialog\n\t\t\tclass=\"bx--overflow-menu-options bx--overflow-menu-options--open\"\n\t\t\trole=\"menu\"\n\t\t\t(focusout)=\"clickClose($event)\"\n\t\t\t[attr.aria-label]=\"dialogConfig.menuLabel\">\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t[ngTemplateOutletContext]=\"{overflowMenu: this}\">\n\t\t\t</ng-template>\n\t\t</ul>\n\t"
},] },
];
/** @nocollapse */
OverflowMenuPane.ctorParameters = function () { return [
{ type: ElementRef },
{ type: I18n }
]; };
OverflowMenuPane.propDecorators = {
hostkeys: [{ type: HostListener, args: ["keydown", ["$event"],] }]
};
return OverflowMenuPane;
}(Dialog));
export { OverflowMenuPane };
//# sourceMappingURL=overflow-menu-pane.component.js.map