popup call example (game-page component)
This commit is contained in:
svensken
parent
c4cb3fd236
commit
1c009c5d3e
@ -58,6 +58,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
|
||||
&.shown {
|
||||
animation: showOverlay 0.2s ease 0s 1 forwards;
|
||||
|
||||
@ -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,7 +44,10 @@
|
||||
<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>
|
||||
|
||||
@ -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}`);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user