3 ChangeDetectionStrategy,
13 } from '@angular/core'
14 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
15 import { lowerFirst, uniqueId } from 'lodash-es'
16 import { ScreenService } from './screen.service'
17 import { take } from 'rxjs/operators'
19 export interface ListOverflowItem {
21 routerLink: string | any[]
25 selector: 'list-overflow',
26 templateUrl: './list-overflow.component.html',
27 styleUrls: [ './list-overflow.component.scss' ],
28 changeDetection: ChangeDetectionStrategy.OnPush
30 export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
31 @ViewChild('modal', { static: true }) modal: ElementRef
32 @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
33 @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
35 @Input() itemTemplate: TemplateRef<{item: T}>
37 showItemsUntilIndexExcluded: number
39 isInTouchScreen = false
40 isInMobileView = false
42 private openedOnHover = false
45 private cdr: ChangeDetectorRef,
46 private modalService: NgbModal,
47 private screenService: ScreenService
51 setTimeout(() => this.onWindowResize(), 0)
55 return !!this.showItemsUntilIndexExcluded
58 @HostListener('window:resize', ['$event'])
60 this.isInTouchScreen = !!this.screenService.isInTouchScreen()
61 this.isInMobileView = !!this.screenService.isInMobileView()
63 const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
64 let showItemsUntilIndexExcluded: number
67 for (const [index, el] of this.itemsRendered.toArray().entries()) {
68 accWidth += el.nativeElement.getBoundingClientRect().width
69 if (showItemsUntilIndexExcluded === undefined) {
70 showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
73 const e = document.getElementById(this.getId(index))
74 const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
75 e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
78 this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
79 this.cdr.markForCheck()
82 openDropdownOnHover (dropdown: NgbDropdown) {
83 this.openedOnHover = true
89 .subscribe(() => this.openedOnHover = false)
92 dropdownAnchorClicked (dropdown: NgbDropdown) {
93 if (this.openedOnHover) {
94 this.openedOnHover = false
98 return dropdown.toggle()
101 closeDropdownIfHovered (dropdown: NgbDropdown) {
102 if (this.openedOnHover === false) return
105 this.openedOnHover = false
109 this.modalService.open(this.modal, { centered: true })
112 dismissOtherModals () {
113 this.modalService.dismissAll()
116 getId (id: number | string = uniqueId()): string {
117 return lowerFirst(this.constructor.name) + '_' + id