8 ChangeDetectionStrategy,
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'
18 export interface ListOverflowItem {
20 routerLink: string | any[]
24 selector: 'list-overflow',
25 templateUrl: './list-overflow.component.html',
26 styleUrls: [ './list-overflow.component.scss' ],
27 changeDetection: ChangeDetectionStrategy.OnPush
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>
34 @Input() itemTemplate: TemplateRef<{item: T}>
36 showItemsUntilIndexExcluded: number
38 isInTouchScreen = false
39 isInMobileView = false
41 private openedOnHover = false
44 private cdr: ChangeDetectorRef,
45 private modalService: NgbModal,
46 private screenService: ScreenService
50 return !!this.showItemsUntilIndexExcluded
53 @HostListener('window:resize', ['$event'])
55 this.isInTouchScreen = !!this.screenService.isInTouchScreen()
56 this.isInMobileView = !!this.screenService.isInMobileView()
58 const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
59 let showItemsUntilIndexExcluded: number
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
68 const e = document.getElementById(this.getId(index))
69 const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
70 e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
73 this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
74 this.cdr.markForCheck()
77 openDropdownOnHover (dropdown: NgbDropdown) {
78 this.openedOnHover = true
84 .subscribe(() => this.openedOnHover = false)
87 dropdownAnchorClicked (dropdown: NgbDropdown) {
88 if (this.openedOnHover) {
89 this.openedOnHover = false
93 return dropdown.toggle()
96 closeDropdownIfHovered (dropdown: NgbDropdown) {
97 if (this.openedOnHover === false) return
100 this.openedOnHover = false
104 this.modalService.open(this.modal, { centered: true })
107 dismissOtherModals () {
108 this.modalService.dismissAll()
111 getId (id: number | string = uniqueId()): string {
112 return lowerFirst(this.constructor.name) + '_' + id