desktop-menu-bar
Version:
An angular component for a desktop like menu bar
121 lines (114 loc) • 6.52 kB
JavaScript
import { __decorate } from 'tslib';
import { Input, Component, NgModule, ApplicationRef, ComponentFactoryResolver, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable } from '@angular/core';
import { CommonModule } from '@angular/common';
var DesktopMenuBarComponent = /** @class */ (function () {
function DesktopMenuBarComponent() {
this.items = [];
}
DesktopMenuBarComponent.prototype.ngOnInit = function () { };
__decorate([
Input()
], DesktopMenuBarComponent.prototype, "items", void 0);
DesktopMenuBarComponent = __decorate([
Component({
selector: 'desktop-menu-bar',
template: "<div class=\"menu-bar\">\n <div class=\"menu-bar-item\" *ngFor=\"let item of items\">\n <span>{{ item.text }}</span>\n <desktop-menu-bar-vertical class=\"dropdown\" [items]=\"item.children\"></desktop-menu-bar-vertical>\n </div>\n</div>\n",
styles: [".menu-bar{background-color:#d3d3d3;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-bar .menu-bar-item{padding:6px 12px;cursor:pointer;position:relative}.menu-bar .menu-bar-item:hover{background-color:#b9b9b9}.menu-bar .menu-bar-item .dropdown{z-index:1;position:absolute;top:100%;left:0;visibility:hidden;-webkit-transition:visibility;transition:visibility}.menu-bar .menu-bar-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}"]
})
], DesktopMenuBarComponent);
return DesktopMenuBarComponent;
}());
var DesktopMenuBarVerticalComponent = /** @class */ (function () {
function DesktopMenuBarVerticalComponent() {
}
DesktopMenuBarVerticalComponent.prototype.ngOnInit = function () { };
__decorate([
Input()
], DesktopMenuBarVerticalComponent.prototype, "items", void 0);
DesktopMenuBarVerticalComponent = __decorate([
Component({
selector: 'desktop-menu-bar-vertical',
template: "<div>\n <div *ngFor=\"let item of items\" class=\"vertical-menu-item\">\n <span (click)=\"item.action ? item.action() : null\">\n {{ item.text }}\n <span *ngIf=\"item.children && item.children.length\">></span>\n </span>\n <desktop-menu-bar-vertical class=\"dropdown\" [items]=\"item.children\"></desktop-menu-bar-vertical>\n </div>\n</div>\n",
styles: [".vertical-menu-item{white-space:nowrap;background-color:#d3d3d3;padding:6px 12px;cursor:pointer;position:relative}.vertical-menu-item:hover{background-color:#b9b9b9}.vertical-menu-item .dropdown{z-index:1;position:absolute;top:0;left:100%;visibility:hidden;-webkit-transition:visibility;transition:visibility}.vertical-menu-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}.vertical-menu-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.4)}"]
})
], DesktopMenuBarVerticalComponent);
return DesktopMenuBarVerticalComponent;
}());
var DesktopMenuBarModule = /** @class */ (function () {
function DesktopMenuBarModule() {
}
DesktopMenuBarModule = __decorate([
NgModule({
declarations: [DesktopMenuBarComponent, DesktopMenuBarVerticalComponent],
imports: [CommonModule],
exports: [DesktopMenuBarComponent]
})
], DesktopMenuBarModule);
return DesktopMenuBarModule;
}());
var DesktopMenuBarService = /** @class */ (function () {
function DesktopMenuBarService(applicationRef, resolver, injector) {
this.applicationRef = applicationRef;
this.resolver = resolver;
this.injector = injector;
this.menuComponentRef = null;
this.menuItems = null;
}
DesktopMenuBarService.prototype.setMenuBarItems = function (items) {
this.menuItems = items;
this.updateMenuBarItemsInComponent();
};
DesktopMenuBarService.prototype.updateMenuBarItemsInComponent = function () {
if (this.isMenuBarVisible()) {
this.menuComponentRef.instance.items = this.menuItems;
}
};
DesktopMenuBarService.prototype.showMenuBar = function () {
if (!this.isMenuBarVisible()) {
var componentFactory = this.resolver.resolveComponentFactory(DesktopMenuBarComponent);
this.menuComponentRef = componentFactory.create(this.injector);
this.applicationRef.attachView(this.menuComponentRef.hostView);
this.moveToDocumentBody(this.menuComponentRef);
this.updateMenuBarItemsInComponent();
}
};
DesktopMenuBarService.prototype.hideMenuBar = function () {
if (this.isMenuBarVisible()) {
this.applicationRef.detachView(this.menuComponentRef.hostView);
this.detachFromDocument(this.menuComponentRef);
this.menuComponentRef = null;
}
};
DesktopMenuBarService.prototype.isMenuBarVisible = function () {
return !!this.menuComponentRef;
};
DesktopMenuBarService.prototype.moveToElement = function (componentRef, element) {
element.insertBefore(componentRef.location.nativeElement, element.firstChild);
};
DesktopMenuBarService.prototype.moveToDocumentBody = function (componentRef) {
this.moveToElement(componentRef, document.querySelector('body'));
};
DesktopMenuBarService.prototype.detachFromDocument = function (componentRef) {
var element = componentRef.location.nativeElement;
if (element.parentNode) {
element.parentNode.removeChild(element);
}
};
DesktopMenuBarService.ctorParameters = function () { return [
{ type: ApplicationRef },
{ type: ComponentFactoryResolver },
{ type: Injector }
]; };
DesktopMenuBarService.ɵprov = ɵɵdefineInjectable({ factory: function DesktopMenuBarService_Factory() { return new DesktopMenuBarService(ɵɵinject(ApplicationRef), ɵɵinject(ComponentFactoryResolver), ɵɵinject(INJECTOR)); }, token: DesktopMenuBarService, providedIn: "root" });
DesktopMenuBarService = __decorate([
Injectable({
providedIn: 'root'
})
], DesktopMenuBarService);
return DesktopMenuBarService;
}());
/**
* Generated bundle index. Do not edit.
*/
export { DesktopMenuBarComponent, DesktopMenuBarModule, DesktopMenuBarService, DesktopMenuBarVerticalComponent as ɵa };
//# sourceMappingURL=desktop-menu-bar.js.map