@akveo/nga-theme
Version:
@akveo/nga-theme
236 lines • 12.4 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { List } from 'immutable';
import { NgaMenuInternalService } from './menu.service';
import { convertToBoolProperty } from '../helpers';
var NgaMenuItemComponent = (function () {
function NgaMenuItemComponent(router) {
this.router = router;
this.menuItem = null;
this.hoverItem = new EventEmitter();
this.toggleSubMenu = new EventEmitter();
this.selectItem = new EventEmitter();
this.itemClick = new EventEmitter();
}
NgaMenuItemComponent.prototype.onToggleSubMenu = function (item) {
this.toggleSubMenu.emit(item);
};
NgaMenuItemComponent.prototype.onHoverItem = function (item) {
this.hoverItem.emit(item);
};
NgaMenuItemComponent.prototype.onSelectItem = function (item) {
this.selectItem.emit(item);
};
NgaMenuItemComponent.prototype.onItemClick = function (item) {
this.itemClick.emit(item);
};
return NgaMenuItemComponent;
}());
__decorate([
Input(),
__metadata("design:type", Object)
], NgaMenuItemComponent.prototype, "menuItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgaMenuItemComponent.prototype, "hoverItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgaMenuItemComponent.prototype, "toggleSubMenu", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgaMenuItemComponent.prototype, "selectItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgaMenuItemComponent.prototype, "itemClick", void 0);
NgaMenuItemComponent = __decorate([
Component({
// tslint:disable-next-line:component-selector
selector: '[ngaMenuItem]',
template: "<span *ngIf=\"menuItem.group\" class=\"menu-group\"> <i class=\"{{ menuItem.icon }}\" *ngIf=\"menuItem.icon\"></i> {{ menuItem.title }} </span> <a *ngIf=\"menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group\" [class.active]=\"menuItem.selected\" [routerLink]=\"menuItem.link\" [attr.target]=\"menuItem.target\" [attr.title]=\"menuItem.title\" (mouseenter)=\"onHoverItem(menuItem)\" (click)=\"onSelectItem(menuItem)\"> <i class=\"{{ menuItem.icon }}\" *ngIf=\"menuItem.icon\"></i> <span>{{ menuItem.title }}</span> </a> <a *ngIf=\"menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group\" [class.active]=\"menuItem.selected\" [attr.href]=\"menuItem.url\" [attr.target]=\"menuItem.target\" [attr.title]=\"menuItem.title\" (mouseenter)=\"onHoverItem(menuItem)\" (click)=\"onSelectItem(menuItem)\"> <i class=\"{{ menuItem.icon }}\" *ngIf=\"menuItem.icon\"></i> <span>{{ menuItem.title }}</span> </a> <a *ngIf=\"!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group\" [class.active]=\"menuItem.selected\" [attr.target]=\"menuItem.target\" [attr.title]=\"menuItem.title\" (mouseenter)=\"onHoverItem(menuItem)\" (click)=\"$event.preventDefault();onItemClick(menuItem)\"> <i class=\"{{ menuItem.icon }}\" *ngIf=\"menuItem.icon\"></i> <span>{{ menuItem.title }}</span> </a> <a *ngIf=\"menuItem.children\" [class.active]=\"menuItem.selected\" (click)=\"$event.preventDefault();onToggleSubMenu(menuItem)\" [attr.target]=\"menuItem.target\" [attr.title]=\"menuItem.title\" (mouseenter)=\"onHoverItem(menuItem)\" href=\"#\"> <i class=\"{{ menuItem.icon }}\" *ngIf=\"menuItem.icon\"></i> <span>{{ menuItem.title }}</span> <i class=\"ion\" [class.ion-chevron-right]=\"!menuItem.expanded\" [class.ion-chevron-up]=\"menuItem.expanded\"></i> </a> <ul *ngIf=\"menuItem.children\" [class.menu-collapsed]=\"!(menuItem.children && menuItem.expanded)\" [class.menu-expanded]=\"menuItem.expanded\"> <li ngaMenuItem *ngFor=\"let item of menuItem.children\" [menuItem]=\"item\" [class.expanded]=\"item.expanded\" [class.collapsed]=\"!item.expanded\" (hoverItem)=\"onHoverItem($event)\" (toggleSubMenu)=\"onToggleSubMenu($event)\" (selectItem)=\"onSelectItem($event)\" (itemClick)=\"onItemClick($event)\"></li> </ul> ",
}),
__metadata("design:paramtypes", [Router])
], NgaMenuItemComponent);
export { NgaMenuItemComponent };
var NgaMenuComponent = (function () {
function NgaMenuComponent(menuInternalService, router) {
this.menuInternalService = menuInternalService;
this.router = router;
this.items = List();
this.stack = List();
}
Object.defineProperty(NgaMenuComponent.prototype, "inverse", {
/**
* Makes colors inverse based on current theme
* @type boolean
*/
set: function (val) {
this.inverseValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
NgaMenuComponent.prototype.ngOnInit = function () {
var _this = this;
this.addItemSubscription = this.menuInternalService.onAddItem()
.subscribe(function (data) {
if (_this.compareTag(data.tag)) {
_this.items = (_a = _this.items).push.apply(_a, data.items.toJS());
_this.menuInternalService.prepareItems(_this.items);
}
var _a;
});
this.navigateHomeSubscription = this.menuInternalService.onNavigateHome()
.subscribe(function (data) {
if (_this.compareTag(data.tag)) {
_this.navigateHome();
}
});
this.getSelectedItemSubscription = this.menuInternalService.onGetSelectedItem()
.subscribe(function (data) {
var selectedItem;
_this.items.forEach(function (i) {
var result = _this.getSelectedItem(i);
if (result) {
selectedItem = result;
return;
}
});
_this.clearStack();
data.listener.next({ tag: _this.tag, item: selectedItem });
});
this.router.events.subscribe(function (event) {
if (event instanceof NavigationEnd) {
_this.menuInternalService.prepareItems(_this.items);
}
});
this.items = (_a = this.items).push.apply(_a, this.menuInternalService.getItems().toJS());
this.menuInternalService.prepareItems(this.items);
var _a;
};
NgaMenuComponent.prototype.ngOnDestroy = function () {
this.addItemSubscription.unsubscribe();
this.navigateHomeSubscription.unsubscribe();
this.getSelectedItemSubscription.unsubscribe();
};
NgaMenuComponent.prototype.onHoverItem = function (item) {
this.menuInternalService.itemHover(item, this.tag);
};
NgaMenuComponent.prototype.onToggleSubMenu = function (item) {
item.expanded = !item.expanded;
this.menuInternalService.submenuToggle(item, this.tag);
};
// TODO: is not fired on page reload
NgaMenuComponent.prototype.onSelectItem = function (item) {
this.menuInternalService.resetItems(this.items);
item.selected = true;
this.menuInternalService.itemSelect(item, this.tag);
};
NgaMenuComponent.prototype.onItemClick = function (item) {
this.menuInternalService.itemClick(item, this.tag);
};
NgaMenuComponent.prototype.navigateHome = function () {
var _this = this;
var homeItem;
this.items.forEach(function (i) {
var result = _this.getHomeItem(i);
if (result) {
homeItem = result;
}
});
this.clearStack();
if (homeItem) {
this.menuInternalService.resetItems(this.items);
homeItem.selected = true;
if (homeItem.link) {
this.router.navigate([homeItem.link]);
}
if (homeItem.url) {
window.location.href = homeItem.url;
}
}
};
NgaMenuComponent.prototype.getHomeItem = function (parent) {
var _this = this;
this.stack = this.stack.push(parent);
if (parent.home) {
return parent;
}
if (parent.children && parent.children.size > 0) {
var first = parent.children.filter(function (c) { return !_this.stack.contains(c); }).first();
if (first) {
return this.getHomeItem(first);
}
}
if (parent.parent) {
return this.getHomeItem(parent.parent);
}
};
NgaMenuComponent.prototype.clearStack = function () {
this.stack = this.stack.clear();
};
NgaMenuComponent.prototype.compareTag = function (tag) {
return !tag || tag === this.tag;
};
NgaMenuComponent.prototype.getSelectedItem = function (parent) {
var _this = this;
this.stack = this.stack.push(parent);
if (parent.selected) {
return parent;
}
if (parent.children && parent.children.size > 0) {
var first = parent.children.filter(function (c) { return !_this.stack.contains(c); }).first();
if (first) {
return this.getSelectedItem(first);
}
}
if (parent.parent) {
return this.getSelectedItem(parent.parent);
}
};
return NgaMenuComponent;
}());
__decorate([
HostBinding('class.inverse'),
__metadata("design:type", Boolean)
], NgaMenuComponent.prototype, "inverseValue", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgaMenuComponent.prototype, "tag", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgaMenuComponent.prototype, "items", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaMenuComponent.prototype, "inverse", null);
NgaMenuComponent = __decorate([
Component({
selector: 'nga-menu',
styles: [":host /deep/ {display:block}:host /deep/ ul{list-style-type:none;padding:0;transition:visibility 0s, opacity 0.2s linear}:host /deep/ ul li .menu-group{display:block}:host /deep/ ul li>ul>li>a{padding-left:2rem}:host /deep/ ul li a{display:flex;align-items:center;flex-direction:row;text-decoration:none;font-size:1em;line-height:1em}:host /deep/ ul li a i:first-child{margin-right:1.25rem;font-size:2rem}:host /deep/ ul li a i{display:block}:host /deep/ ul li a span{display:block;flex:1}:host /deep/ ul.menu-collapsed{visibility:hidden;opacity:0;height:0}:host /deep/ ul.menu-expanded{visibility:visible;opacity:1} "],
template: "\n <ul>\n <li ngaMenuItem *ngFor=\"let item of items\"\n [menuItem]=\"item\"\n [class.expanded]=\"item.expanded\"\n [class.collapsed]=\"!item.expanded\"\n (hoverItem)=\"onHoverItem($event)\"\n (toggleSubMenu)=\"onToggleSubMenu($event)\"\n (selectItem)=\"onSelectItem($event)\"\n (itemClick)=\"onItemClick($event)\"></li>\n </ul>\n ",
}),
__metadata("design:paramtypes", [NgaMenuInternalService, Router])
], NgaMenuComponent);
export { NgaMenuComponent };
//# sourceMappingURL=menu.component.js.map