src/app/layouts/sidebar/SidebarComponent.ts

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 */
  18
  19 /**
  20  * @file Sidebar Component
  21  */
  22 import { Component, Injector, OnInit } from '@angular/core';
  23 import { DeviceCheckService } from 'DeviceCheckService';
  24 import { MENU_ITEMS, MENUITEMS } from 'src/models/MenuModel';
  25 import { isNullOrUndefined } from 'util';
  26
  27 /**
  28  * Creating component
  29  * @Component takes SidebarComponent.html as template url
  30  */
  31 @Component({
  32     selector: 'app-sidebar',
  33     templateUrl: './SidebarComponent.html',
  34     styleUrls: ['./SidebarComponent.scss']
  35 })
  36 /** Exporting a class @exports SidebarComponent */
  37 export class SidebarComponent implements OnInit {
  38     /** To inject services @public */
  39     public injector: Injector;
  40
  41     /** submenu router endpoints @public */
  42     public routerEndpoint: string;
  43
  44     /** submenu router endpoints @public */
  45     public getMenus: MENUITEMS[];
  46
  47     /** selected Menu @public */
  48     public selectedItem: string;
  49
  50     /** get the classlist @public */
  51     public elementCheck: HTMLCollection;
  52
  53     /** Apply active class for Desktop @public */
  54     public classAppliedForDesktop: boolean = false;
  55
  56     /** Apply active class for mobile @public */
  57     public classAppliedForMobile: boolean = false;
  58
  59     /** Device Check service @public */
  60     public deviceCheckService: DeviceCheckService;
  61
  62     /** Check for the mobile @public */
  63     public isMobile$: boolean;
  64
  65     constructor(injector: Injector) {
  66         this.injector = injector;
  67         this.deviceCheckService = this.injector.get(DeviceCheckService);
  68         this.getMenus = MENU_ITEMS;
  69     }
  70
  71     /** Lifecyle Hooks the trigger before component is instantiate @public */
  72     public ngOnInit(): void {
  73         this.deviceCheckService.checkDeviceType();
  74         this.deviceCheckService.isMobile.subscribe((checkIsMobile: boolean) => {
  75             this.isMobile$ = checkIsMobile;
  76             this.getDeviceType();
  77         });
  78     }
  79     /** method to open sideBarOpen in all the views */
  80     public sideBarOpenClose(): void {
  81         if (this.isMobile$) {
  82             this.classAppliedForMobile = !this.classAppliedForMobile;
  83         } else {
  84             this.classAppliedForDesktop = !this.classAppliedForDesktop;
  85         }
  86         this.addClassMainWrapper();
  87     }
  88     /** Add class for mobile/Desktop in main-wrapper @public */
  89     public addClassMainWrapper(): void {
  90         const elementMain: HTMLElement = document.querySelector('#main-wrapper');
  91         if (!isNullOrUndefined(elementMain)) {
  92             if (this.isMobile$) {
  93                 elementMain.classList.toggle('sidebar-mobile');
  94             } else {
  95                 elementMain.classList.toggle('sidebar-desktop');
  96             }
  97         }
  98     }
  99     /** Return the Device type @public */
 100     public getDeviceType(): void {
 101         if (this.isMobile$) {
 102             this.classAppliedForMobile = true;
 103             this.classAppliedForDesktop = false;
 104         } else {
 105             this.classAppliedForMobile = false;
 106             this.classAppliedForDesktop = false;
 107         }
 108         this.addClassMainWrapper();
 109     }
 110     /** Set the SideBar Menus click function @public */
 111     public handleMenuFunction(index: number, method: string, className: string, childExists: boolean): void {
 112         this.selectedItem = method;
 113         if (!isNullOrUndefined(method)) {
 114             this.parentactiveClassAddRemove(index, method, className, childExists);
 115         }
 116     }
 117     /** Removing the parentactive class which is already present and add it to current @public */
 118     public parentactiveClassAddRemove(index: number, method: string, className: string, childExists: boolean): void {
 119         const element: HTMLElement = document.querySelector('#' + method + '' + index);
 120         const checkOpenedelement: boolean = element.classList.contains(className);
 121         if (!checkOpenedelement) {
 122             this.elementCheck = document.getElementsByClassName(className);
 123             if (this.elementCheck.length > 0) {
 124                 this.removeClasses(className);
 125             }
 126         }
 127         if (method !== 'nosubmenu') {
 128             element.classList.toggle(className);
 129         }
 130         if (this.isMobile$ && !childExists) {
 131             this.checkAndCloseSideBar(childExists);
 132         }
 133     }
 134     /** Hide / Show Menus based on the clicking in the menus @public */
 135     public checkAndCloseSideBar(childExists: boolean): void {
 136         event.stopPropagation();
 137         if (this.isMobile$ && !childExists) {
 138             this.sideBarOpenClose();
 139         }
 140     }
 141     /** remove existing Class @public */
 142     public removeClasses(className: string): void {
 143         this.elementCheck[0].classList.remove(className);
 144         if (this.elementCheck[0]) {
 145             this.removeClasses(className);
 146         }
 147     }
 148 }