| /******************************************************************************** |
| * Copyright (c) 2015-2020 Contributors to the Eclipse Foundation |
| * |
| * See the NOTICE file(s) distributed with this work for additional |
| * information regarding copyright ownership. |
| * |
| * This program and the accompanying materials are made available under the |
| * terms of the Eclipse Public License v. 2.0 which is available at |
| * http://www.eclipse.org/legal/epl-2.0. |
| * |
| * SPDX-License-Identifier: EPL-2.0 |
| * |
| ********************************************************************************/ |
| |
| |
| import { Component, ViewEncapsulation, OnInit, OnDestroy, AfterViewInit } from '@angular/core'; |
| |
| import { BsDropdownModule, AccordionConfig, BsDropdownConfig } from 'ngx-bootstrap'; |
| |
| import {NodeService} from '../navigator/node.service'; |
| import {Node} from '../navigator/node'; |
| import {NodeproviderService} from '../navigator/nodeprovider.service'; |
| |
| import {MDMNotificationService} from '../core/mdm-notification.service'; |
| |
| import { TranslateService } from '@ngx-translate/core'; |
| import Split from 'split.js'; |
| |
| @Component({ |
| selector: 'mdm-navigator-view', |
| templateUrl: 'mdm-navigator-view.component.html', |
| styleUrls: [ './mdm-navigator-view.component.css' ], |
| providers: [BsDropdownConfig, AccordionConfig], |
| encapsulation: ViewEncapsulation.None |
| }) |
| export class MDMNavigatorViewComponent implements OnInit, OnDestroy, AfterViewInit { |
| |
| selectedNode = new Node; |
| activeNode: Node; |
| closeOther = false; |
| |
| activeNodeprovider: any; |
| _comp = 'Navigation'; |
| subscription: any; |
| |
| div: any; |
| scrollBtnVisible = false; |
| |
| split: Split; |
| |
| constructor(private nodeProviderService: NodeproviderService, |
| private notificationService: MDMNotificationService, |
| private translateService: TranslateService) {} |
| |
| onScrollTop() { |
| this.div.scrollTop = 0; |
| } |
| |
| onScroll(event: any) { |
| if (event.target.scrollTop > 0) { |
| this.scrollBtnVisible = true; |
| } else { |
| this.scrollBtnVisible = false; |
| } |
| this.div = event.target; |
| } |
| |
| updateSelectedNode(node: Node) { |
| this.selectedNode = node; |
| } |
| updateActiveNode(node: Node) { |
| this.activeNode = node; |
| } |
| activateNodeProvider(nodeprovider: any) { |
| this.nodeProviderService.setActiveNodeprovider(nodeprovider); |
| } |
| |
| getNodeproviders() { |
| return this.nodeProviderService.getNodeproviders(); |
| } |
| |
| ngOnInit() { |
| this.activeNodeprovider = this.nodeProviderService.getActiveNodeprovider(); |
| this.subscription = this.nodeProviderService.nodeProviderChanged |
| .subscribe( |
| np => this.activeNodeprovider = np, |
| error => this.notificationService.notifyError( |
| this.translateService.instant('navigator-view.mdm-navigator-view.err-cannot-update-node-provider'), error) |
| ); |
| |
| } |
| |
| ngAfterViewInit(): void { |
| this.split = Split(['#leftsidenav', '#rightsidenav'], { |
| sizes: [this.initRatio(), this.initRatioRight()], |
| minSize: this.minWidthLeft(), |
| gutterSize: 10, |
| gutterStyle: function (dimension, gutterSize) { |
| return { |
| 'width': gutterSize + 'px', |
| 'height': (document.getElementById('leftsidenav').clientHeight - 5) + 'px' |
| }; |
| }, |
| }); |
| } |
| |
| ngOnDestroy() { |
| this.subscription.unsubscribe(); |
| } |
| |
| activate(comp: string) { |
| this._comp = comp; |
| } |
| |
| isActive(comp: string) { |
| if (comp === this._comp) { |
| return 'active'; |
| } |
| } |
| |
| isDropActive(comp: string) { |
| if (comp === this._comp) { |
| return 'open '; |
| } |
| } |
| |
| minWidthLeft() { |
| return 180; |
| } |
| |
| minWidthRight() { |
| return 0.20 * window.innerWidth; |
| } |
| |
| initRatio() { |
| return Math.floor(Math.max(250 / window.innerWidth, 0.20) * 100); |
| } |
| initRatioRight() { |
| return 100 - this.initRatio(); |
| } |
| |
| } |