hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-13 21:13:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

116404: Replaced ViewChild logic with a CSS selector

Browse Source 
This change avoids triggering an additional change detection cycle

(cherry picked from commit f7bb83013a)
This commit is contained in:
Alexandre Vryghem
2024-10-27 14:11:05 +01:00
committed by github-actions[bot]
parent daf2f50b00
commit a984957af9
5 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
View File

@@ -7,12 +7,11 @@ import {
import {
AfterViewChecked,
Component,
ElementRef,
HostListener,
Inject,
Injector,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core';
import { RouterLinkActive } from '@angular/router';
import { Observable } from 'rxjs';
@@ -24,7 +23,6 @@ import { MenuService } from '../../shared/menu/menu.service';
import { MenuID } from '../../shared/menu/menu-id.model';
import { MenuSection } from '../../shared/menu/menu-section.model';
import { HoverOutsideDirective } from '../../shared/utils/hover-outside.directive';
import { VarDirective } from '../../shared/utils/var.directive';
import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
/**
@@ -43,12 +41,9 @@ import { NavbarSectionComponent } from '../navbar-section/navbar-section.compone
NgFor,
NgIf,
RouterLinkActive,
VarDirective,
],
})
export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit {
@ViewChild('expandableNavbarSectionContainer') expandableNavbarSection: ElementRef;
export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit, OnDestroy {
/**
* This section resides in the Public Navbar
@@ -77,6 +72,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
*/
addArrowEventListeners = false;
/**
* List of current dropdown items who have event listeners
*/
private dropdownItems: NodeListOf<HTMLElement>;
@HostListener('window:resize', ['$event'])
onResize() {
this.isMobile$.pipe(
@@ -106,23 +106,43 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
this.subs.push(this.active$.subscribe((active: boolean) => {
if (active === true) {
this.addArrowEventListeners = true;
} else {
this.unsubscribeFromEventListeners();
}
}));
}
ngAfterViewChecked(): void {
if (this.addArrowEventListeners) {
const dropdownItems: NodeListOf<HTMLElement> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
dropdownItems.forEach((item: HTMLElement) => {
this.dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
this.dropdownItems.forEach((item: HTMLElement) => {
item.addEventListener('keydown', this.navigateDropdown.bind(this));
});
if (dropdownItems.length > 0) {
dropdownItems.item(0).focus();
if (this.dropdownItems.length > 0) {
this.dropdownItems.item(0).focus();
}
this.addArrowEventListeners = false;
}
}
ngOnDestroy(): void {
super.ngOnDestroy();
this.unsubscribeFromEventListeners();
}
/**
* Removes all the current event listeners on the dropdown items (called when the menu is closed & on component
* destruction)
*/
unsubscribeFromEventListeners(): void {
if (this.dropdownItems) {
this.dropdownItems.forEach((item: HTMLElement) => {
item.removeEventListener('keydown', this.navigateDropdown.bind(this));
});
this.dropdownItems = undefined;
}
}
/**
* When the mouse enters the section toggler activate the menu section
* @param $event