Skirda/skirda-go-launcher-interface
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

popup call example (game-page component)

Browse Source
This commit is contained in:
svensken 2022-11-13 17:42:19 +03:00
parent c4cb3fd236
commit 1c009c5d3e
3 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
projects/ui/src/lib/popup/popup.component.scss
View File

@ -58,6 +58,7 @@
justify-content: center;
align-items: center;
opacity: 0;
z-index: 100;
&.shown {
animation: showOverlay 0.2s ease 0s 1 forwards;

22
src/app/components/main/sections/game-page/game-page.component.html
View File

@ -1,12 +1,15 @@
<!-- <ng-template [skirdaPopup]></ng-template>
<!-- File: name.component.html -->
<!-- 1. Создать ng-template с директивой [skirdaPopup], в котором
будет спавниться оверлей с окном (в будущем этот портал будет глобальным) -->
<ng-template [skirdaPopup]></ng-template>
<!-- 2. Если в окне нужно что-то более сложное, чем просто текст,
то нужно создать шаблон тела окна (то, что между шапкой окна и кнопками действий) -->
<ng-template #popupContent>
<h1 style="font-size: 72px">😳🕶🤏</h1>
<p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
</ng-template> -->
<!-- <skirda-button (click)="openPopup(popupContent)">
<skirda-icon name="play" size="16"></skirda-icon>
Run game
</skirda-button> -->
</ng-template>
<div class="section">
<div class="section-head">
@ -41,10 +44,13 @@
<skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
</div>
</div>
<skirda-button size="large" appearance="secondary">
<!-- 6. Вызываем в нужном месте (в html компонента) открытие попап окна и передаем в метод из ts шаблон
(название переменной popupContent должно совпадать с аттрибутом
у описанного шаблона из пункта 2 (<ng-template #popupContent>)) -->
<skirda-button size="large" appearance="primary" (click)="openPopup(popupContent)">
<skirda-icon name="play" size="32"></skirda-icon>
<skirda-heading size="1">Play</skirda-heading>
</skirda-button>
</div>
</div>
</div>
</div>

83
src/app/components/main/sections/game-page/game-page.component.ts
View File

@ -1,12 +1,10 @@
import { inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { PopupConfiguration } from 'projects/ui/src/lib/popup/popup.class';
import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive';
import { PopupService } from 'projects/ui/src/lib/popup/popup.service';
import { first, Subscription } from 'rxjs';
import { Game } from 'src/app/interfaces/game.interface';
import { UiService } from 'src/app/services/ui.service';
import { Component, inject, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'
import { NavigationEnd, Router } from '@angular/router'
import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive'
import { PopupService } from 'projects/ui/src/lib/popup/popup.service'
import { Subscription } from 'rxjs'
import { Game } from 'src/app/interfaces/game.interface'
import { UiService } from 'src/app/services/ui.service'
@Component({
selector: 'app-game-page',
@ -14,7 +12,10 @@ import { UiService } from 'src/app/services/ui.service';
styleUrls: ['./game-page.component.scss'],
})
export class GamePageComponent implements OnInit, OnDestroy {
// @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
// File: name.component.ts
// 3. Получить в классе компонента элемент с директивой (портал из 1 пункта)
@ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
uiService = inject(UiService)
subs: Map<string, Subscription> = new Map();
game: Game = {
@ -40,8 +41,11 @@ export class GamePageComponent implements OnInit, OnDestroy {
]
constructor(
private router: Router
) {} // private popup: PopupService
private router: Router,
// 4. Импортировать сервис для попап окон
private popup: PopupService
) {}
ngOnInit(): void {
this.observeNavigation()
@ -64,39 +68,24 @@ export class GamePageComponent implements OnInit, OnDestroy {
return this.tempImages[Math.floor(0 + Math.random() * ((this.tempImages.length - 1) + 1 - 0))]
}
// openPopup(template?: TemplateRef<any>) {
// this.subs.set(
// 'popup-events',
// this.popup
// .open(this.popupPortal, undefined, {
// header: { closable: false, title: 'Warning' },
// actions: [
// {
// title: 'I understand, delete file',
// event: 'delete',
// appearance: 'primary',
// },
// {
// title: 'Do not delete',
// event: 'cancel',
// appearance: 'outline',
// },
// // {
// // title: 'Primary button',
// // event: 'button-2',
// // appearance: 'primary',
// // },
// ],
// overlay: {
// closable: true,
// // background: 'rgba(255, 255, 255, 1)',
// },
// body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.',
// theme: 'dark',
// })
// .subscribe((event) => {
// console.log(`event: ${event}`);
// })
// );
// }
// 5. Написать метод для вызова попап окна, куда аргументом передается
// шаблон тела окна (из пункта 2)
openPopup(template?: TemplateRef<any>) {
// Здесь мы подписываемся на ивента попап окна и сохраняем подписку, чтобы потом
// при дестрое компонента можно было от них отписаться
this.subs.set(
'popup-events',
// при вызове передается:
// 1. popupPortal - портал для спавна оверлея с окном (пункт 1 в html, пункт 3 в ts),
// 2. template - шаблон тела окна, если он есть
// 3. объект с настройками окна (необязательный параметр), где можно кастомизировать внешний вид
// типа PopupConfig (\projects\ui\src\lib\popup\popup.class.ts)
this.popup
.open(this.popupPortal, template, {})
.subscribe((event) => {
// здесь описываются обработчики по нажатию на кнопки действий в попап окне
console.log(`event: ${event}`);
})
);
}
}