org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/navigator-view/mdm-navigator-view.component.ts

/********************************************************************************
 * 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();
  }

}