1 import { lowerFirst, uniqueId } from 'lodash-es'
2 import { take } from 'rxjs/operators'
5 ChangeDetectionStrategy,
15 } from '@angular/core'
16 import { ScreenService } from '@app/core'
17 import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
18 import * as debug from 'debug'
20 const debugLogger = debug('peertube:main:ListOverflowItem')
22 export interface ListOverflowItem {
24 routerLink: string | any[]
28 selector: 'my-list-overflow',
29 templateUrl: './list-overflow.component.html',
30 styleUrls: [ './list-overflow.component.scss' ],
31 changeDetection: ChangeDetectionStrategy.OnPush
33 export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
35 @Input() itemTemplate: TemplateRef<{item: T}>
37 @ViewChild('modal', { static: true }) modal: ElementRef
38 @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
39 @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
41 showItemsUntilIndexExcluded: number
43 isInMobileView = false
45 private openedOnHover = false
48 private cdr: ChangeDetectorRef,
49 private modalService: NgbModal,
50 private screenService: ScreenService
54 setTimeout(() => this.onWindowResize(), 0)
58 return !!this.showItemsUntilIndexExcluded
61 @HostListener('window:resize')
63 this.isInMobileView = !!this.screenService.isInMobileView()
65 const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
66 let showItemsUntilIndexExcluded: number
69 debugLogger('Parent width is %d', parentWidth)
71 for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
72 accWidth += el.nativeElement.getBoundingClientRect().width
73 if (showItemsUntilIndexExcluded === undefined) {
74 showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
77 const e = document.getElementById(this.getId(index))
78 const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
79 e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
82 debugLogger('Accumulated children width is %d so exclude index is %d', accWidth, showItemsUntilIndexExcluded)
84 this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
85 this.cdr.markForCheck()
88 openDropdownOnHover (dropdown: NgbDropdown) {
89 this.openedOnHover = true
95 .subscribe(() => this.openedOnHover = false)
98 dropdownAnchorClicked (dropdown: NgbDropdown) {
99 if (this.openedOnHover) {
100 this.openedOnHover = false
104 return dropdown.toggle()
107 closeDropdownIfHovered (dropdown: NgbDropdown) {
108 if (this.openedOnHover === false) return
111 this.openedOnHover = false
115 this.modalService.open(this.modal, { centered: true })
118 dismissOtherModals () {
119 this.modalService.dismissAll()
122 getId (id: number | string = uniqueId()): string {
123 return lowerFirst(this.constructor.name) + '_' + id