@luminela/menu
Version:
A simple menubar component for Angular.
251 lines (242 loc) • 13.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@luminela/contextmenu'), require('uuid'), require('@angular/cdk/a11y'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('@luminela/menu', ['exports', '@angular/core', '@luminela/contextmenu', 'uuid', '@angular/cdk/a11y', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.luminela = global.luminela || {}, global.luminela.menu = {}), global.ng.core, global.contextmenu, global.uuid, global.ng.cdk.a11y, global.ng.common));
}(this, (function (exports, core, contextmenu, uuid, a11y, common) { 'use strict';
var MenuComponent = /** @class */ (function () {
function MenuComponent() {
this.uid = uuid.v4();
this.focused = false;
this.disabled = false;
this.menuItems = [];
}
MenuComponent.prototype.ngOnInit = function () {
};
MenuComponent.prototype.ngOnDestroy = function () {
var _a;
(_a = this.subMenuItemsSubscription$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
};
MenuComponent.prototype.ngAfterContentInit = function () {
var _this = this;
var _a;
if (((_a = this.menuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
return;
}
this.createMenuItems();
this.initializeMenuItems(this.menuItems);
this.subMenuItemsSubscription$ = this.subMenuItems.changes.subscribe(function () {
_this.createMenuItems();
_this.initializeMenuItems(_this.menuItems);
});
};
MenuComponent.prototype.setActiveStyles = function () {
if (!this.disabled) {
this.focused = true;
}
};
MenuComponent.prototype.setInactiveStyles = function () {
this.focused = false;
};
MenuComponent.prototype.createMenuItems = function () {
if (!this.menuItems || this.menuItems.length === 0) {
this.menuItems = this.subMenuItems.map(function (smi) { return smi.getMenuItemData(); });
}
};
MenuComponent.prototype.initializeMenuItems = function (items) {
var _this = this;
items.forEach(function (item) {
var _a;
item.visible = item.visible !== false;
_this.initializeMenuItems(((_a = item.menuItems) === null || _a === void 0 ? void 0 : _a.length) > 0 ? item.menuItems : []);
});
};
return MenuComponent;
}());
MenuComponent.decorators = [
{ type: core.Component, args: [{
selector: "yui-menu",
template: ""
},] }
];
MenuComponent.ctorParameters = function () { return []; };
MenuComponent.propDecorators = {
subMenuItems: [{ type: core.ContentChildren, args: [contextmenu.MenuItemComponent,] }],
disabled: [{ type: core.Input }],
menuClass: [{ type: core.Input }],
menuItems: [{ type: core.Input }],
target: [{ type: core.Input }],
text: [{ type: core.Input }],
textTemplate: [{ type: core.Input }]
};
var MenuBarComponent = /** @class */ (function () {
function MenuBarComponent(hostElementRef) {
this.hostElementRef = hostElementRef;
this.menuThemeClass = "theme-light";
this.menuTheme = "light";
this.menuClass = "";
}
Object.defineProperty(MenuBarComponent.prototype, "theme", {
set: function (theme) {
this.menuTheme = theme;
this.menuThemeClass = theme === "dark" ? "theme-dark" : "theme-light";
},
enumerable: false,
configurable: true
});
Object.defineProperty(MenuBarComponent.prototype, "lt", {
get: function () {
return this.menuThemeClass === "theme-light";
},
enumerable: false,
configurable: true
});
Object.defineProperty(MenuBarComponent.prototype, "dt", {
get: function () {
return this.menuThemeClass === "theme-dark";
},
enumerable: false,
configurable: true
});
MenuBarComponent.prototype.ngOnInit = function () {
};
MenuBarComponent.prototype.ngAfterContentInit = function () {
console.log(this.menuList);
};
MenuBarComponent.prototype.ngAfterViewInit = function () {
this.keyManager = new a11y.ActiveDescendantKeyManager(this.menuList.toArray()).withWrap(true).skipPredicate(function (m) { return m.disabled; });
};
MenuBarComponent.prototype.onMenuChange = function (data) {
this.menuChangeData = data;
};
MenuBarComponent.prototype.onMenuClose = function (data) {
this.keyManager.setActiveItem(null);
this.previousMenuData = null;
if (!!this.currentMenu) {
this.currentMenu.focused = false;
this.currentMenu = null;
}
this.menuChangeData = null;
};
MenuBarComponent.prototype.onMenuClick = function (event, menu) {
var _a;
if (this.previousMenuElement === event.target.closest("[data-uid='" + menu.uid + "']")) {
menu.focused = !menu.focused;
if (!menu.focused) {
(_a = this.previousMenuData) === null || _a === void 0 ? void 0 : _a.contextMenuRef.popupRef.close();
}
return;
}
this.previousMenuElement = event.target.closest("li").firstChild;
this.keyManager.setActiveItem(this.menuList.find(function (m) { return m.uid === menu.uid; }));
this.currentMenu = menu;
};
MenuBarComponent.prototype.onMenuMouseEnter = function (event, menu) {
var _a;
if (this.previousMenuData) {
if (this.previousMenuElement === event.target.closest("[data-uid='" + menu.uid + "']")) {
return;
}
(_a = this.previousMenuData) === null || _a === void 0 ? void 0 : _a.contextMenuRef.popupRef.close();
event.target.dispatchEvent(new MouseEvent("click", Object.assign({}, event)));
this.keyManager.setActiveItem(this.menuList.find(function (m) { return m.uid === menu.uid; }));
}
this.previousMenuElement = event.target.closest("li").firstChild;
this.currentMenu = menu;
};
MenuBarComponent.prototype.onMenuMouseLeave = function (event, menu) {
// this.currentMenu = null;
// menu.focused = false;
// this.keyManager.setActiveItem(null);
};
MenuBarComponent.prototype.onMenuOpen = function (data) {
if (data.depth > 0) {
return;
}
this.previousMenuData = data;
};
MenuBarComponent.prototype.onKeydown = function (event) {
var _a, _b, _c;
if (!this.previousMenuData) {
return;
}
switch (event.key) {
case "Enter":
case "NumEnter":
case " ":
this.keyManager.setActiveItem(null);
return;
case "ArrowUp":
case "ArrowDown":
console.log("Ignore " + event.key);
return;
case "ArrowLeft":
if (((_a = this.menuChangeData) === null || _a === void 0 ? void 0 : _a.depth) > 1) {
return;
}
this.keyManager.setPreviousItemActive();
break;
case "ArrowRight":
if (((_c = (_b = this.menuChangeData) === null || _b === void 0 ? void 0 : _b.item.menuItems) === null || _c === void 0 ? void 0 : _c.length) > 0) {
return;
}
this.keyManager.setNextItemActive();
break;
default:
this.keyManager.onKeydown(event);
break;
}
if (this.keyManager.activeItem) {
this.currentMenu = this.keyManager.activeItem;
document.querySelector("[data-uid='" + this.currentMenu.uid + "']").dispatchEvent(new MouseEvent("mouseenter"));
}
};
return MenuBarComponent;
}());
MenuBarComponent.decorators = [
{ type: core.Component, args: [{
selector: "yui-menu-bar",
template: "<div class=\"wrapper\">\n <ul class=\"menubar-list\" *ngIf=\"menuList?.length > 0\">\n <li *ngFor=\"let item of menuList\" #listElement (mouseenter)=\"onMenuMouseEnter($event, item)\"\n (mouseleave)=\"onMenuMouseLeave($event, item)\" (click)=\"onMenuClick($event, item)\"\n [attr.data-uid]=\"item.uid\"\n [ngClass]=\"{'active': item.focused && !item.disabled, 'disabled': item.disabled}\">\n <span *ngIf=\"!item.textTemplate\">{{item.text}}</span>\n <ng-container [ngTemplateOutlet]=\"item.textTemplate\" *ngIf=\"!!item.textTemplate\"></ng-container>\n <yui-contextmenu [target]=\"listElement\" [menuItems]=\"item.menuItems\" [theme]=\"menuTheme\" [menuClass]=\"menuClass\"\n [precise]=\"false\" trigger=\"click\" (menuOpen)=\"onMenuOpen($event)\"\n (menuClose)=\"onMenuClose($event)\" (menuChange)=\"onMenuChange($event)\"></yui-contextmenu>\n </li>\n </ul>\n</div>\n",
styles: ["div.wrapper{height:25px;width:100%}div.wrapper,div.wrapper *{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;box-sizing:border-box;user-select:none}ul.menubar-list{justify-content:flex-start;width:100%}ul.menubar-list,ul.menubar-list>li{align-items:center;display:flex;height:100%}ul.menubar-list>li{border-left:1px solid transparent;border-right:1px solid transparent;font-size:13px;font-weight:600;justify-content:center;padding:0 10px}ul.menubar-list>li.disabled{pointer-events:none}:host-context(.theme-light) ul.menubar-list{background:#e8e8e8;border-bottom:1px solid #d1d1d1}:host-context(.theme-light) ul.menubar-list>li{color:#383848}:host-context(.theme-light) ul.menubar-list>li.active,:host-context(.theme-light) ul.menubar-list>li:hover:not(.disabled){background:#f2f2f4}:host-context(.theme-light) ul.menubar-list>li.active:not(:first-child),:host-context(.theme-light) ul.menubar-list>li:hover:not(.disabled):not(:first-child){border-left:1px solid #d1d1d1}:host-context(.theme-light) ul.menubar-list>li.disabled{color:#a7a7af}:host-context(.theme-dark) ul.menubar-list{background:#383838;border-bottom:1px solid #585858}:host-context(.theme-dark) ul.menubar-list>li{color:#c0c0c6}:host-context(.theme-dark) ul.menubar-list>li.active,:host-context(.theme-dark) ul.menubar-list>li:hover:not(.disabled){background:#47474f}:host-context(.theme-dark) ul.menubar-list>li.active:not(:first-child),:host-context(.theme-dark) ul.menubar-list>li:hover:not(.disabled):not(:first-child){border-left:1px solid #585858}:host-context(.theme-dark) ul.menubar-list>li.disabled{color:#6a6a70}"]
},] }
];
MenuBarComponent.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MenuBarComponent.propDecorators = {
menuList: [{ type: core.ContentChildren, args: [MenuComponent,] }],
menuClass: [{ type: core.Input }],
theme: [{ type: core.Input }],
lt: [{ type: core.HostBinding, args: ["class.theme-light",] }],
dt: [{ type: core.HostBinding, args: ["class.theme-dark",] }],
onKeydown: [{ type: core.HostListener, args: ["window:keydown", ["$event"],] }]
};
var MenuModule = /** @class */ (function () {
function MenuModule() {
}
return MenuModule;
}());
MenuModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [MenuBarComponent, MenuComponent],
imports: [
common.CommonModule,
contextmenu.ContextMenuModule
],
exports: [
MenuBarComponent,
MenuComponent
]
},] }
];
/*
* Public API Surface of menu
*/
/**
* Generated bundle index. Do not edit.
*/
exports.MenuBarComponent = MenuBarComponent;
exports.MenuComponent = MenuComponent;
exports.MenuModule = MenuModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=luminela-menu.umd.js.map