admin-sidebar.component.ts (dspace-angular-dspace-7.0) | : | admin-sidebar.component.ts (dspace-angular-dspace-7.1) | ||
---|---|---|---|---|
import { Component, Injector, OnInit } from '@angular/core'; | import { Component, HostListener, Injector, OnInit } from '@angular/core'; | |||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; | import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; | |||
import { combineLatest, combineLatest as observableCombineLatest, Observable } f | import { combineLatest, combineLatest as observableCombineLatest, Observable, Be | |||
rom 'rxjs'; | haviorSubject } from 'rxjs'; | |||
import { first, map, take } from 'rxjs/operators'; | import { debounceTime, first, map, take, distinctUntilChanged, withLatestFrom } | |||
from 'rxjs/operators'; | ||||
import { AuthService } from '../../core/auth/auth.service'; | import { AuthService } from '../../core/auth/auth.service'; | |||
import { ScriptDataService } from '../../core/data/processes/script-data.service '; | import { ScriptDataService } from '../../core/data/processes/script-data.service '; | |||
import { slideHorizontal, slideSidebar } from '../../shared/animations/slide'; | import { slideHorizontal, slideSidebar } from '../../shared/animations/slide'; | |||
import { CreateCollectionParentSelectorComponent } from '../../shared/dso-select or/modal-wrappers/create-collection-parent-selector/create-collection-parent-sel ector.component'; | import { CreateCollectionParentSelectorComponent } from '../../shared/dso-select or/modal-wrappers/create-collection-parent-selector/create-collection-parent-sel ector.component'; | |||
import { CreateCommunityParentSelectorComponent } from '../../shared/dso-selecto r/modal-wrappers/create-community-parent-selector/create-community-parent-select or.component'; | import { CreateCommunityParentSelectorComponent } from '../../shared/dso-selecto r/modal-wrappers/create-community-parent-selector/create-community-parent-select or.component'; | |||
import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/mod al-wrappers/create-item-parent-selector/create-item-parent-selector.component'; | import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/mod al-wrappers/create-item-parent-selector/create-item-parent-selector.component'; | |||
import { EditCollectionSelectorComponent } from '../../shared/dso-selector/modal -wrappers/edit-collection-selector/edit-collection-selector.component'; | import { EditCollectionSelectorComponent } from '../../shared/dso-selector/modal -wrappers/edit-collection-selector/edit-collection-selector.component'; | |||
import { EditCommunitySelectorComponent } from '../../shared/dso-selector/modal- wrappers/edit-community-selector/edit-community-selector.component'; | import { EditCommunitySelectorComponent } from '../../shared/dso-selector/modal- wrappers/edit-community-selector/edit-community-selector.component'; | |||
import { EditItemSelectorComponent } from '../../shared/dso-selector/modal-wrapp ers/edit-item-selector/edit-item-selector.component'; | import { EditItemSelectorComponent } from '../../shared/dso-selector/modal-wrapp ers/edit-item-selector/edit-item-selector.component'; | |||
import { ExportMetadataSelectorComponent } from '../../shared/dso-selector/modal -wrappers/export-metadata-selector/export-metadata-selector.component'; | import { ExportMetadataSelectorComponent } from '../../shared/dso-selector/modal -wrappers/export-metadata-selector/export-metadata-selector.component'; | |||
skipping to change at line 63 | skipping to change at line 63 | |||
* Is true when the sidebar is closed, is false when the sidebar is animating or open | * Is true when the sidebar is closed, is false when the sidebar is animating or open | |||
* @type {boolean} | * @type {boolean} | |||
*/ | */ | |||
sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished | sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished | |||
/** | /** | |||
* Emits true when either the menu OR the menu's preview is expanded, else emi ts false | * Emits true when either the menu OR the menu's preview is expanded, else emi ts false | |||
*/ | */ | |||
sidebarExpanded: Observable<boolean>; | sidebarExpanded: Observable<boolean>; | |||
inFocus$: BehaviorSubject<boolean>; | ||||
constructor(protected menuService: MenuService, | constructor(protected menuService: MenuService, | |||
protected injector: Injector, | protected injector: Injector, | |||
private variableService: CSSVariableService, | private variableService: CSSVariableService, | |||
private authService: AuthService, | private authService: AuthService, | |||
private modalService: NgbModal, | private modalService: NgbModal, | |||
private authorizationService: AuthorizationDataService, | private authorizationService: AuthorizationDataService, | |||
private scriptDataService: ScriptDataService, | private scriptDataService: ScriptDataService, | |||
) { | ) { | |||
super(menuService, injector); | super(menuService, injector); | |||
this.inFocus$ = new BehaviorSubject(false); | ||||
} | } | |||
/** | /** | |||
* Set and calculate all initial values of the instance variables | * Set and calculate all initial values of the instance variables | |||
*/ | */ | |||
ngOnInit(): void { | ngOnInit(): void { | |||
this.createMenu(); | this.createMenu(); | |||
super.ngOnInit(); | super.ngOnInit(); | |||
this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth'); | this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth'); | |||
this.authService.isAuthenticated() | this.authService.isAuthenticated() | |||
.subscribe((loggedIn: boolean) => { | .subscribe((loggedIn: boolean) => { | |||
if (loggedIn) { | if (loggedIn) { | |||
this.menuService.showMenu(this.menuID); | this.menuService.showMenu(this.menuID); | |||
} | } | |||
}); | }); | |||
this.menuCollapsed.pipe(first()) | this.menuCollapsed.pipe(first()) | |||
.subscribe((collapsed: boolean) => { | .subscribe((collapsed: boolean) => { | |||
this.sidebarOpen = !collapsed; | this.sidebarOpen = !collapsed; | |||
this.sidebarClosed = collapsed; | this.sidebarClosed = collapsed; | |||
}); | }); | |||
this.sidebarExpanded = observableCombineLatest(this.menuCollapsed, this.menu PreviewCollapsed) | this.sidebarExpanded = combineLatest([this.menuCollapsed, this.menuPreviewCo llapsed]) | |||
.pipe( | .pipe( | |||
map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed) ) | map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed) ) | |||
); | ); | |||
this.inFocus$.pipe( | ||||
debounceTime(50), | ||||
distinctUntilChanged(), // disregard focusout in situations like --(focus | ||||
out)-(focusin)-- | ||||
withLatestFrom( | ||||
combineLatest([this.menuCollapsed, this.menuPreviewCollapsed]) | ||||
), | ||||
).subscribe(([inFocus, [collapsed, previewCollapsed]]) => { | ||||
if (collapsed) { | ||||
if (inFocus && previewCollapsed) { | ||||
this.expandPreview(new Event('focusin → expand')); | ||||
} else if (!inFocus && !previewCollapsed) { | ||||
this.collapsePreview(new Event('focusout → collapse')); | ||||
} | ||||
} | ||||
}); | ||||
} | } | |||
/** | /** | |||
* Initialize all menu sections and items for this menu | * Initialize all menu sections and items for this menu | |||
*/ | */ | |||
createMenu() { | createMenu() { | |||
this.createMainMenuSections(); | this.createMainMenuSections(); | |||
this.createSiteAdministratorMenuSections(); | this.createSiteAdministratorMenuSections(); | |||
this.createExportMenuSections(); | this.createExportMenuSections(); | |||
this.createImportMenuSections(); | this.createImportMenuSections(); | |||
skipping to change at line 593 | skipping to change at line 611 | |||
index: 4 | index: 4 | |||
}, | }, | |||
]; | ]; | |||
menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, { | menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, { | |||
shouldPersistOnRouteChange: true, | shouldPersistOnRouteChange: true, | |||
}))); | }))); | |||
}); | }); | |||
} | } | |||
@HostListener('focusin') | ||||
public handleFocusIn() { | ||||
this.inFocus$.next(true); | ||||
} | ||||
@HostListener('focusout') | ||||
public handleFocusOut() { | ||||
this.inFocus$.next(false); | ||||
} | ||||
public handleMouseEnter(event: any) { | ||||
if (!this.inFocus$.getValue()) { | ||||
this.expandPreview(event); | ||||
} else { | ||||
event.preventDefault(); | ||||
} | ||||
} | ||||
public handleMouseLeave(event: any) { | ||||
if (!this.inFocus$.getValue()) { | ||||
this.collapsePreview(event); | ||||
} else { | ||||
event.preventDefault(); | ||||
} | ||||
} | ||||
/** | /** | |||
* Method to change this.collapsed to false when the slide animation ends and is sliding open | * Method to change this.collapsed to false when the slide animation ends and is sliding open | |||
* @param event The animation event | * @param event The animation event | |||
*/ | */ | |||
startSlide(event: any): void { | startSlide(event: any): void { | |||
if (event.toState === 'expanded') { | if (event.toState === 'expanded') { | |||
this.sidebarClosed = false; | this.sidebarClosed = false; | |||
} else if (event.toState === 'collapsed') { | } else if (event.toState === 'collapsed') { | |||
this.sidebarOpen = false; | this.sidebarOpen = false; | |||
} | } | |||
End of changes. 7 change blocks. | ||||
5 lines changed or deleted | 51 lines changed or added |