import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core'; import {select, Store} from '@ngrx/store'; import {AppState, selectLoadedAssets} from '../store/app.reducer'; import {TimelineMax} from 'gsap'; import {createApp, toggleMenuActive} from '../store/app.actions'; import {Application, APPLICATION_CATEGORY} from '@interfaces/interfaces'; import {selectApplicationsByCategory} from '@fsstore/file-explorer.reducer'; @Component({ selector: 'app-menu', template: ` <div class="menu" #menu> <div class="menu-applications"> <h3>Info</h3> <div class="menu-applications-item" *ngFor="let app of (infos$ | async); trackBy: trackByFn" [title]="app.properties?.alt || ''" (click)="create(app)" > <div class="icon" *ngIf="app?.properties?.icon" [innerHTML]="(loadedAssets$ | async)[app?.properties?.iconContrast]?.resource | safe:'html'" ></div> {{app.properties.title}} </div> <h3>Games</h3> <div class="menu-applications-item" *ngFor="let app of (games$ | async); trackBy: trackByFn" [title]="app.properties?.alt || ''" (click)="create(app)" > <div class="icon" *ngIf="app?.properties?.icon" [innerHTML]="(loadedAssets$ | async)[app?.properties?.iconContrast]?.resource | safe:'html'" ></div> {{app.properties.title}} </div> <h3>Utilities</h3> <div class="menu-applications-item" *ngFor="let app of (utilities$ | async); trackBy: trackByFn" [title]="app.properties?.alt || ''" (click)="create(app)" > <div class="icon" *ngIf="app?.properties?.icon" [innerHTML]="(loadedAssets$ | async)[app?.properties?.iconContrast]?.resource | safe:'html'" ></div> {{app.properties.title}} </div> </div> <div class="menu-user"> <div class="menu-user-icon" [style.background]="'url(assets/' + (loadedAssets$ | async)?.about01?.path + ')'"></div> <div class="menu-user-info"> <h4>Nicola Castellani</h4> <b>ADMINISTRATOR</b> </div> </div> </div> `, changeDetection: ChangeDetectionStrategy.OnPush }) export class MenuComponent implements AfterViewInit { loadedAssets$ = this.store$.pipe(select(selectLoadedAssets)); games$ = this.store$.pipe(select(selectApplicationsByCategory, {category: APPLICATION_CATEGORY.GAME})); infos$ = this.store$.pipe(select(selectApplicationsByCategory, {category: APPLICATION_CATEGORY.INFO})); utilities$ = this.store$.pipe(select(selectApplicationsByCategory, {category: APPLICATION_CATEGORY.UTILITY})); menuAnimation: TimelineMax; @ViewChild('menu') _menu: ElementRef; private get menu(): HTMLElement { return this._menu.nativeElement; } constructor(public store$: Store<AppState>) {} ngAfterViewInit() { this.animateIn(); } animateIn() { window.requestAnimationFrame(() => { this.menuAnimation = new TimelineMax({paused: true, reversed: false}); this.menuAnimation.to(this.menu, 1, {y: '0', ease: 'Expo.easeInOut', delay: 2}, 0); this.menuAnimation.play(); }); } toggleMenu() { this.store$.dispatch(toggleMenuActive()); } create(app: Application) { this.store$.dispatch(createApp({app})); this.toggleMenu(); } trackByFn(index, item) { return index; } }