Commit 44d49217 authored by Christopher Fullarton's avatar Christopher Fullarton

Fixes nickname manager for emojis

parent 13adb033
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { Filter } from '../../lib/enums/enums';
import { LanguageLoaderService } from '../../service/language-loader/language-loader.service';
import { ProjectLoaderService } from '../../service/project-loader/project-loader.service';
@Component({
selector: 'app-key-output',
......@@ -33,8 +32,7 @@ export class KeyOutputComponent {
@Output() private changeEmitter = new EventEmitter<Object>();
constructor(public projectLoaderService: ProjectLoaderService, public languageLoaderService: LanguageLoaderService, private cd: ChangeDetectorRef) {
}
constructor(public languageLoaderService: LanguageLoaderService, private cd: ChangeDetectorRef) {}
public selectKey(key: string): void {
if (this.selectedKey === key) {
......
<div class="row text-dark">
<div class="col-12 nicknameFilter">
<input type="text"
class="rounded p-1 w-100 mb-3 form-control"
<input (input)="filterForKeyword($event)"
[placeholder]="'component.nickname_categories.filter' | translate"
[title]="'component.nickname_categories.filter' | translate"
(input)="filterForKeyword($event)"/>
class="rounded p-1 w-100 mb-3 form-control"
type="text"/>
</div>
<div class="col-12 nickCategoryWrapper"
<div [class.col-md-6]="hasSelectedCategory()"
[class.col-sm-4]="hasSelectedCategory()"
[class.col-md-6]="hasSelectedCategory()">
class="col-12 nickCategoryWrapper">
<div class="row no-gutters">
<div *ngFor="let cat of availableNickCategories()"
class="nickCategory cursor-pointer col-6"
[class.disabled]="!getNumberOfAvailableNicksForCategory(cat)"
[class.selectedCategory]="hasSelectedCategory(cat)"
<div (click)="toggleSelectedCategory(cat)"
*ngFor="let cat of availableNickCategories()"
[class.col-sm-12]="hasSelectedCategory()"
[class.col-sm-6]="!hasSelectedCategory()"
(click)="toggleSelectedCategory(cat)">
[class.disabled]="!getNumberOfAvailableNicksForCategory(cat)"
[class.selectedCategory]="hasSelectedCategory(cat)"
class="nickCategory cursor-pointer col-6">
<div class="nickCategoryText bg-secondary cursor-pointer rounded p-2 m-1">
<p class="mb-0"
[innerHTML]="getCategoryTranslation(cat) | translate"></p>
<p [innerHTML]="getCategoryTranslation(cat) | translate"
class="mb-0"></p>
<p class="mb-0">({{getNumberOfSelectedNicksOfCategory(cat)}} / {{getNumberOfAvailableNicksForCategory(cat)}})</p>
</div>
</div>
</div>
</div>
<div *ngIf="hasSelectedCategory()"
class="col-12 col-sm-8 col-md-6">
<div (scrolled)="onScrollDown()"
*ngIf="hasSelectedCategory()"
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollThrottle]="throttle"
class="col-12 col-sm-8 col-md-6"
infinite-scroll>
<div class="bg-secondary rounded pt-2 mt-2 mt-sm-0">
<div class="mx-2">
<button class="btn btn-block cursor-pointer"
[class.btn-warning]="hasSelectedAllNicks()"
<button (click)="toggleAllNicks()"
[class.btn-success]="!hasSelectedAllNicks()"
(click)="toggleAllNicks()">
[class.btn-warning]="hasSelectedAllNicks()"
class="btn btn-block cursor-pointer">
<span *ngIf="hasSelectedAllNicks()">{{'component.nickname_categories.remove_all' | translate}}</span>
<span *ngIf="!hasSelectedAllNicks()">{{'component.nickname_categories.choose_all' | translate}}</span>
</button>
</div>
<div *ngFor="let nick of availableNicks[selectedCategory]"
(click)="selectNick(nick)"
class="nickStyle rounded p-2 m-2 cursor-pointer border-bottom"
[class.selectedNickName]="hasSelectedNick(nick)">
<div (click)="selectNick(nick)"
*ngFor="let nick of availableNicks[selectedCategory] | justafew:visibleData"
[class.selectedNickName]="hasSelectedNick(nick)"
class="nickStyle rounded p-2 m-2 cursor-pointer border-bottom">
<span [innerHTML]="parseAvailableNick(nick)"
class="nickName d-inline-block pb-1"></span>
</div>
......
import { Component, OnDestroy, OnInit, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { StorageKey } from '../../../lib/enums/enums';
......@@ -13,12 +13,15 @@ import { QuizService } from '../../../service/quiz/quiz.service';
selector: 'app-nickname-manager',
templateUrl: './nickname-manager.component.html',
styleUrls: ['./nickname-manager.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NicknameManagerComponent implements OnInit, OnDestroy {
public static TYPE = 'NicknameManagerComponent';
public readonly throttle = 0;
public readonly scrollDistance = 4;
public visibleData = 20;
private _availableNicks: IAvailableNicks;
private readonly _destroy = new Subject();
get availableNicks(): IAvailableNicks {
return this._availableNicks;
......@@ -39,6 +42,12 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
return this._selectedCategory;
}
set selectedCategory(value: string) {
this._selectedCategory = value;
this.visibleData = 20;
}
private readonly _destroy = new Subject();
private _availableNicksBackup: IAvailableNicks;
private _previousSearchValue = '';
......@@ -46,7 +55,9 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
private sanitizer: DomSanitizer,
private quizService: QuizService,
private footerBarService: FooterBarService,
private nickApiService: NickApiService, private customMarkdownService: CustomMarkdownService,
private nickApiService: NickApiService,
private customMarkdownService: CustomMarkdownService,
private cd: ChangeDetectorRef,
) {
this.footerBarService.TYPE_REFERENCE = NicknameManagerComponent.TYPE;
......@@ -57,6 +68,11 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
this.quizService.loadDataToEdit(sessionStorage.getItem(StorageKey.CurrentQuizName));
}
public onScrollDown(): void {
this.visibleData += 20;
this.cd.markForCheck();
}
public filterForKeyword(event: Event): void {
const searchValue = (<HTMLInputElement>event.target).value.toString().toLowerCase();
......@@ -77,8 +93,9 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
});
}
public sanitizeHTML(value: string): string {
return this.sanitizer.sanitize(SecurityContext.HTML, `${value}`);
public sanitizeHTML(value: string): SafeHtml {
// bypassSecurityTrustHtml is required because the img tag of the emoji must be rendered
return this.sanitizer.bypassSecurityTrustHtml(`${value}`);
}
public availableNickCategories(): Array<string> {
......@@ -90,7 +107,7 @@ export class NicknameManagerComponent implements OnInit, OnDestroy {
return;
}
this._selectedCategory = this.selectedCategory === name ? '' : name;
this.selectedCategory = this.selectedCategory === name ? '' : name;
}
public selectNick(name: any): void {
......
......@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MarkdownModule } from 'ngx-markdown';
import { LivePreviewModule } from '../../live-preview/live-preview.module';
import { MarkdownBarModule } from '../../markdown/markdown-bar.module';
......@@ -71,11 +72,9 @@ const quizManagerRoutes: Routes = [
@NgModule({
imports: [
FormsModule,
SharedModule,
QuizManagerDetailsModule, MarkdownBarModule,
SharedModule, QuizManagerDetailsModule, MarkdownBarModule,
LivePreviewModule,
RouterModule.forChild(quizManagerRoutes),
PipesModule, MarkdownModule.forChild(),
RouterModule.forChild(quizManagerRoutes), PipesModule, MarkdownModule.forChild(), InfiniteScrollModule,
],
declarations: [
QuizManagerComponent, NicknameManagerComponent, SoundManagerComponent, MemberGroupManagerComponent, QuizTypeSelectModalComponent,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment