client/src/app/shared/misc/list-overflow.component.ts

   1 import {
   2   Component,
   3   Input,
   4   TemplateRef,
   5   ViewChildren,
   6   ViewChild,
   7   QueryList,
   8   ChangeDetectionStrategy,
   9   ElementRef,
  10   ChangeDetectorRef,
  11   HostListener
  12 } from '@angular/core'
  13 import { NgbModal, NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
  14 import { uniqueId, lowerFirst } from 'lodash-es'
  15 import { ScreenService } from './screen.service'
  16 import { take } from 'rxjs/operators'
  17
  18 export interface ListOverflowItem {
  19   label: string
  20   routerLink: string | any[]
  21 }
  22
  23 @Component({
  24   selector: 'list-overflow',
  25   templateUrl: './list-overflow.component.html',
  26   styleUrls: [ './list-overflow.component.scss' ],
  27   changeDetection: ChangeDetectionStrategy.OnPush
  28 })
  29 export class ListOverflowComponent<T extends ListOverflowItem> {
  30   @ViewChild('modal', { static: true }) modal: ElementRef
  31   @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
  32   @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
  33   @Input() items: T[]
  34   @Input() itemTemplate: TemplateRef<{item: T}>
  35
  36   showItemsUntilIndexExcluded: number
  37   active = false
  38   isInTouchScreen = false
  39   isInMobileView = false
  40
  41   private openedOnHover = false
  42
  43   constructor (
  44     private cdr: ChangeDetectorRef,
  45     private modalService: NgbModal,
  46     private screenService: ScreenService
  47   ) {}
  48
  49   isMenuDisplayed () {
  50     return !!this.showItemsUntilIndexExcluded
  51   }
  52
  53   @HostListener('window:resize', ['$event'])
  54   onWindowResize () {
  55     this.isInTouchScreen = !!this.screenService.isInTouchScreen()
  56     this.isInMobileView = !!this.screenService.isInMobileView()
  57
  58     const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
  59     let showItemsUntilIndexExcluded: number
  60     let accWidth = 0
  61
  62     for (const [index, el] of this.itemsRendered.toArray().entries()) {
  63       accWidth += el.nativeElement.getBoundingClientRect().width
  64       if (showItemsUntilIndexExcluded === undefined) {
  65         showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
  66       }
  67
  68       const e = document.getElementById(this.getId(index))
  69       const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
  70       e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
  71     }
  72
  73     this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
  74     this.cdr.markForCheck()
  75   }
  76
  77   openDropdownOnHover (dropdown: NgbDropdown) {
  78     this.openedOnHover = true
  79     dropdown.open()
  80
  81     // Menu was closed
  82     dropdown.openChange
  83             .pipe(take(1))
  84             .subscribe(() => this.openedOnHover = false)
  85   }
  86
  87   dropdownAnchorClicked (dropdown: NgbDropdown) {
  88     if (this.openedOnHover) {
  89       this.openedOnHover = false
  90       return
  91     }
  92
  93     return dropdown.toggle()
  94   }
  95
  96   closeDropdownIfHovered (dropdown: NgbDropdown) {
  97     if (this.openedOnHover === false) return
  98
  99     dropdown.close()
 100     this.openedOnHover = false
 101   }
 102
 103   toggleModal () {
 104     this.modalService.open(this.modal, { centered: true })
 105   }
 106
 107   dismissOtherModals () {
 108     this.modalService.dismissAll()
 109   }
 110
 111   getId (id: number | string = uniqueId()): string {
 112     return lowerFirst(this.constructor.name) + '_' + id
 113   }
 114 }