corrections des erreurs remarquées par Wilfried
This commit is contained in:
parent
d1ac1b77f0
commit
939e5f4df1
33 changed files with 66 additions and 112 deletions
|
|
@ -87,7 +87,7 @@
|
||||||
|
|
||||||
<!-- Advertiser Column -->
|
<!-- Advertiser Column -->
|
||||||
<ng-container matColumnDef="company">
|
<ng-container matColumnDef="company">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Entreprise </th>
|
||||||
<td mat-cell *matCellDef="let advert">
|
<td mat-cell *matCellDef="let advert">
|
||||||
{{advert.company}}
|
{{advert.company}}
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<!-- login -->
|
<!-- login -->
|
||||||
<div class="row myRow">
|
<div class="row myRow">
|
||||||
<div class="col-6 myLabel">Login:</div>
|
<div class="col-6 myLabel">Pseudo:</div>
|
||||||
<div class="col-6 myValue"> {{admin.login}} </div>
|
<div class="col-6 myValue"> {{admin.login}} </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ export class PopupUpdateAdminComponent implements OnInit
|
||||||
checkField()
|
checkField()
|
||||||
{
|
{
|
||||||
if(this.adminCopy.login.length === 0) {
|
if(this.adminCopy.login.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'login'" ;
|
this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.adminCopy.email.length === 0) {
|
else if(this.adminCopy.email.length === 0) {
|
||||||
|
|
@ -113,4 +113,5 @@ export class PopupUpdateAdminComponent implements OnInit
|
||||||
}
|
}
|
||||||
return hash.toString();
|
return hash.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
<mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
|
<mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
|
||||||
Utilisateur
|
Utilisateur
|
||||||
</mat-radio-button><br>
|
</mat-radio-button><br>
|
||||||
<mat-radio-button value="url" (click)="this.roleName = 'url'; onFilter()">
|
<mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
|
||||||
Annonceur
|
Annonceur
|
||||||
</mat-radio-button><br>
|
</mat-radio-button><br>
|
||||||
<mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
|
<mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
|
||||||
|
|
@ -99,7 +99,7 @@
|
||||||
|
|
||||||
<!-- Login Column -->
|
<!-- Login Column -->
|
||||||
<ng-container matColumnDef="login">
|
<ng-container matColumnDef="login">
|
||||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Login </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pseudo </th>
|
||||||
<td mat-cell *matCellDef="let user">
|
<td mat-cell *matCellDef="let user">
|
||||||
{{user.login}}
|
{{user.login}}
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
|
|
||||||
<!-- Login -->
|
<!-- Login -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Login</mat-label>
|
<mat-label>Pseudo</mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="user.login" required>
|
<input matInput type="text" [(ngModel)]="user.login" required>
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
|
|
||||||
|
|
@ -130,7 +130,7 @@
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
<!-- login -->
|
<!-- login -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Login</mat-label>
|
<mat-label>Pseudo</mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="user.login">
|
<input matInput type="text" [(ngModel)]="user.login">
|
||||||
</mat-form-field><br>
|
</mat-form-field><br>
|
||||||
<!-- company -->
|
<!-- company -->
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ export class PopupCreateUserComponent implements OnInit
|
||||||
checkField(): void
|
checkField(): void
|
||||||
{
|
{
|
||||||
if(this.user.login.length === 0) {
|
if(this.user.login.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'login'.";
|
this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.user.email.length === 0) {
|
else if(this.user.email.length === 0) {
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@
|
||||||
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
|
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item active monLi">
|
<li class="nav-item active monLi">
|
||||||
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des pubs</a>
|
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des publicités</a>
|
||||||
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des pubs</a>
|
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des publicités</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -68,7 +68,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
|
||||||
checkField()
|
checkField()
|
||||||
{
|
{
|
||||||
if(this.advertiserCopy.login.length === 0) {
|
if(this.advertiserCopy.login.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'login'" ;
|
this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.advertiserCopy.email.length === 0) {
|
else if(this.advertiserCopy.email.length === 0) {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,6 @@ import {MatDividerModule} from "@angular/material/divider";
|
||||||
import {MatCheckboxModule} from "@angular/material/checkbox";
|
import {MatCheckboxModule} from "@angular/material/checkbox";
|
||||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||||
import {MatSnackBarModule} from "@angular/material/snack-bar";
|
import {MatSnackBarModule} from "@angular/material/snack-bar";
|
||||||
import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive';
|
|
||||||
import {MatGridListModule} from "@angular/material/grid-list";
|
import {MatGridListModule} from "@angular/material/grid-list";
|
||||||
import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
|
import { PageMyPlaylistsComponent } from './user/myPlaylists/page-my-playlists/page-my-playlists.component';
|
||||||
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
|
import { PlaylistListComponent } from './user/myPlaylists/playlist-list/playlist-list.component';
|
||||||
|
|
@ -43,15 +42,15 @@ import {MatSelectModule} from "@angular/material/select";
|
||||||
import { PopupVisualizeImagesAdvertiserComponent } from './advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component';
|
import { PopupVisualizeImagesAdvertiserComponent } from './advertiser/adList/popup-visualize-images-advertiser/popup-visualize-images-advertiser.component';
|
||||||
import {IvyCarouselModule} from "angular-responsive-carousel";
|
import {IvyCarouselModule} from "angular-responsive-carousel";
|
||||||
import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and-drop.component';
|
import { DragAndDropComponent } from './advertiser/adList/drag-and-drop/drag-and-drop.component';
|
||||||
import { DragAndDropDirective } from './utils/directives/dragAndDrop/drag-and-drop.directive';
|
import { DragAndDropDirective } from './advertiser/utils/dragAndDrop/drag-and-drop.directive';
|
||||||
import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component';
|
import { PageProfilUserComponent } from './user/myProfil/page-profil-user/page-profil-user.component';
|
||||||
import { NavbarUserComponent } from './user/utils/components/navbar-user/navbar-user.component';
|
import { NavbarUserComponent } from './user/utils/components/navbar-user/navbar-user.component';
|
||||||
import { NavbarAdvertiserComponent } from './advertiser/utils/components/navbar-advertiser/navbar-advertiser.component';
|
import { NavbarAdvertiserComponent } from './advertiser/utils/navbar-advertiser/navbar-advertiser.component';
|
||||||
import { NavbarAdminComponent } from './admin/utils/components/navbar-admin/navbar-admin.component';
|
import { NavbarAdminComponent } from './admin/utils/navbar-admin/navbar-admin.component';
|
||||||
import { PageProfilAdvertiserComponent } from './advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component';
|
import { PageProfilAdvertiserComponent } from './advertiser/myProfil/page-profil-advertiser/page-profil-advertiser.component';
|
||||||
import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component';
|
import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component';
|
||||||
import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component';
|
import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component';
|
||||||
import { NavbarBeforeConnexionComponent } from './beforeConnexion/navbar-before-connexion/navbar-before-connexion.component';
|
import { NavbarBeforeConnexionComponent } from './beforeConnexion/utils/navbar-before-connexion/navbar-before-connexion.component';
|
||||||
import {MatRadioModule} from "@angular/material/radio";
|
import {MatRadioModule} from "@angular/material/radio";
|
||||||
import { InputInterestsProfilComponent } from './user/myProfil/input-interests-profil/input-interests-profil.component';
|
import { InputInterestsProfilComponent } from './user/myProfil/input-interests-profil/input-interests-profil.component';
|
||||||
import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/page-profil-admin.component';
|
import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/page-profil-admin.component';
|
||||||
|
|
@ -85,7 +84,6 @@ import { PopupDeletePlaylistComponent } from './user/myPlaylists/popup-delete-pl
|
||||||
AdvertComponent,
|
AdvertComponent,
|
||||||
VideoGridComponent,
|
VideoGridComponent,
|
||||||
PopupAddVideoToPlaylistsComponent,
|
PopupAddVideoToPlaylistsComponent,
|
||||||
IframeTrackerDirective,
|
|
||||||
PageMyPlaylistsComponent,
|
PageMyPlaylistsComponent,
|
||||||
VideoListComponent,
|
VideoListComponent,
|
||||||
PlaylistListComponent,
|
PlaylistListComponent,
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@
|
||||||
|
|
||||||
<!-- Login Form -->
|
<!-- Login Form -->
|
||||||
<form>
|
<form>
|
||||||
<input [(ngModel)]="pseudo" type="text" id="login" class="fadeIn second" name="login" placeholder="Login">
|
<input [(ngModel)]="email" type="text" id="email" class="fadeIn second" name="email" placeholder="Email">
|
||||||
<input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="Mot de passe">
|
<input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="password" placeholder="Mot de passe">
|
||||||
<!-- Message d'erreur -->
|
<!-- Message d'erreur -->
|
||||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||||
<span class="mat-error"> {{errorMessage}} </span>
|
<span class="mat-error"> {{errorMessage}} </span>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||||
})
|
})
|
||||||
export class PageLoginComponent implements OnInit
|
export class PageLoginComponent implements OnInit
|
||||||
{
|
{
|
||||||
pseudo: string = "" ;
|
email: string = "" ;
|
||||||
password: string = "" ;
|
password: string = "" ;
|
||||||
hasError: boolean = false;
|
hasError: boolean = false;
|
||||||
errorMessage: string = "";
|
errorMessage: string = "";
|
||||||
|
|
@ -33,8 +33,8 @@ export class PageLoginComponent implements OnInit
|
||||||
if(!this.hasError)
|
if(!this.hasError)
|
||||||
{
|
{
|
||||||
let data = {
|
let data = {
|
||||||
login: this.pseudo,
|
email: this.email,
|
||||||
hashPass: this.password
|
hashPass: this.hashage(this.password)
|
||||||
};
|
};
|
||||||
this.messageService
|
this.messageService
|
||||||
.sendMessage('user/auth', data)
|
.sendMessage('user/auth', data)
|
||||||
|
|
@ -58,8 +58,8 @@ export class PageLoginComponent implements OnInit
|
||||||
|
|
||||||
checkError(): void
|
checkError(): void
|
||||||
{
|
{
|
||||||
if(this.pseudo === "") {
|
if(this.email === "") {
|
||||||
this.errorMessage = "Veuillez remplir le champ login" ;
|
this.errorMessage = "Veuillez remplir le champ email" ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.password === "") {
|
else if(this.password === "") {
|
||||||
|
|
@ -72,4 +72,16 @@ export class PageLoginComponent implements OnInit
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fonction de hashage (faible)
|
||||||
|
hashage(input: string): string
|
||||||
|
{
|
||||||
|
let hash = 0;
|
||||||
|
for (let i = 0; i < input.length; i++) {
|
||||||
|
let ch = input.charCodeAt(i);
|
||||||
|
hash = ((hash << 5) - hash) + ch;
|
||||||
|
hash = hash & hash;
|
||||||
|
}
|
||||||
|
return hash.toString();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
|
|
||||||
<!-- Login -->
|
<!-- Login -->
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Login</mat-label>
|
<mat-label>Pseudo</mat-label>
|
||||||
<input matInput type="text" [(ngModel)]="user.login" required>
|
<input matInput type="text" [(ngModel)]="user.login" required>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<br>
|
<br>
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,7 @@ export class PageRegisterComponent
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.user.login.length === 0) {
|
else if(this.user.login.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'login'.";
|
this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.user.email.length === 0) {
|
else if(this.user.email.length === 0) {
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,9 @@
|
||||||
|
|
||||||
<!-- Date Column -->
|
<!-- Date Column -->
|
||||||
<ng-container matColumnDef="date">
|
<ng-container matColumnDef="date">
|
||||||
<th mat-header-cell *matHeaderCellDef> Date </th>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
|
||||||
<td mat-cell *matCellDef="let video">
|
<td mat-cell *matCellDef="let video">
|
||||||
{{video.watchedDates[video.watchedDates.length-1] | date:'dd/LL/YYYY à HH:mm:ss'}}
|
{{video.date | date:'dd/LL/YYYY à HH:mm:ss'}}
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,15 @@ import {Router} from "@angular/router";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface VideoHistory {
|
||||||
|
imageUrl: string,
|
||||||
|
title: string,
|
||||||
|
date: Date,
|
||||||
|
source: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-page-history-user',
|
selector: 'app-page-history-user',
|
||||||
templateUrl: './page-history-user.component.html',
|
templateUrl: './page-history-user.component.html',
|
||||||
|
|
@ -37,8 +46,10 @@ export class PageHistoryUserComponent implements AfterViewInit
|
||||||
this.userHistoryService.clearTabVideoUrlClicked();
|
this.userHistoryService.clearTabVideoUrlClicked();
|
||||||
|
|
||||||
// --- FAUX CODE ---
|
// --- FAUX CODE ---
|
||||||
const tabVideo: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
|
const tabVideoAll: VideoAll[] = this.fictitiousVideosService.getTabVideoAll(8);
|
||||||
this.dataSource = new MatTableDataSource(tabVideo);
|
let tabVideoHistory: VideoHistory[] = [];
|
||||||
|
for(let videoAll of tabVideoAll) tabVideoHistory.push(this.videoAllToVideoHistory(videoAll));
|
||||||
|
this.dataSource = new MatTableDataSource(tabVideoHistory);
|
||||||
this.dataSource.sort = this.sort;
|
this.dataSource.sort = this.sort;
|
||||||
this.dataSource.paginator = this.paginator;
|
this.dataSource.paginator = this.paginator;
|
||||||
this.dataSource = this.dataSource;
|
this.dataSource = this.dataSource;
|
||||||
|
|
@ -67,15 +78,6 @@ export class PageHistoryUserComponent implements AfterViewInit
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Retourne la source de la video en fonction de l'url
|
|
||||||
getSourceByUrl(url: string): string
|
|
||||||
{
|
|
||||||
if(url.includes("youtu")) return "Youtube" ;
|
|
||||||
else if(url.includes("daily")) return "Dailymotion" ;
|
|
||||||
else return "???" ;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Supprime la video
|
// Supprime la video
|
||||||
onDelete(video: VideoAll): void
|
onDelete(video: VideoAll): void
|
||||||
{
|
{
|
||||||
|
|
@ -109,4 +111,15 @@ export class PageHistoryUserComponent implements AfterViewInit
|
||||||
this.router.navigateByUrl(url);
|
this.router.navigateByUrl(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
videoAllToVideoHistory(videoAll: VideoAll): VideoHistory
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
imageUrl: videoAll.imageUrl,
|
||||||
|
title: videoAll.title,
|
||||||
|
date: videoAll.watchedDates[videoAll.watchedDates.length-1],
|
||||||
|
source: videoAll.source,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
|
|
||||||
<!-- login -->
|
<!-- login -->
|
||||||
<div class="row myRow">
|
<div class="row myRow">
|
||||||
<div class="col-8 myLabel">Login:</div>
|
<div class="col-8 myLabel">Pseudo:</div>
|
||||||
<div class="col-4 myValue"> {{user.login}} </div>
|
<div class="col-4 myValue"> {{user.login}} </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
|
|
||||||
<!-- login -->
|
<!-- login -->
|
||||||
<div class="form-group row myRow">
|
<div class="form-group row myRow">
|
||||||
<label for="login" class="col-sm-6 col-form-label myLeftLabel">Login:</label>
|
<label for="login" class="col-sm-6 col-form-label myLeftLabel">Pseudo:</label>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
|
<input type="text" class="form-control myValue" id="login" [(ngModel)]="userCopy.login">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ export class PopupUpdateUserComponent implements OnInit
|
||||||
checkField()
|
checkField()
|
||||||
{
|
{
|
||||||
if(this.userCopy.login.length === 0) {
|
if(this.userCopy.login.length === 0) {
|
||||||
this.errorMessage = "Veuillez remplir le champ 'login'." ;
|
this.errorMessage = "Veuillez remplir le champ 'pseudo'." ;
|
||||||
this.hasError = true;
|
this.hasError = true;
|
||||||
}
|
}
|
||||||
else if(this.userCopy.email.length === 0) {
|
else if(this.userCopy.email.length === 0) {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import { IframeTrackerDirective } from './iframe-tracker.directive';
|
|
||||||
|
|
||||||
describe('IframeTrackerDirective', () => {
|
|
||||||
it('should create an instance', () => {
|
|
||||||
const directive = new IframeTrackerDirective();
|
|
||||||
expect(directive).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import {
|
|
||||||
Directive,
|
|
||||||
ElementRef,
|
|
||||||
OnInit,
|
|
||||||
Renderer2,
|
|
||||||
Input,
|
|
||||||
Output,
|
|
||||||
EventEmitter,
|
|
||||||
HostListener
|
|
||||||
} from '@angular/core';
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
selector: '[appIframeTracker]'
|
|
||||||
})
|
|
||||||
export class IframeTrackerDirective implements OnInit {
|
|
||||||
private iframeMouseOver: boolean;
|
|
||||||
|
|
||||||
@Input() debug: boolean;
|
|
||||||
|
|
||||||
@Output() iframeClick = new EventEmitter<ElementRef>();
|
|
||||||
|
|
||||||
constructor(private el: ElementRef, private renderer: Renderer2) {}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.renderer.listen(window, 'blur', () => this.onWindowBlur());
|
|
||||||
}
|
|
||||||
|
|
||||||
@HostListener('mouseover')
|
|
||||||
private onIframeMouseOver() {
|
|
||||||
this.log('Iframe mouse over');
|
|
||||||
this.iframeMouseOver = true;
|
|
||||||
this.resetFocusOnWindow();
|
|
||||||
}
|
|
||||||
|
|
||||||
@HostListener('mouseout')
|
|
||||||
private onIframeMouseOut() {
|
|
||||||
this.log('Iframe mouse out');
|
|
||||||
this.iframeMouseOver = false;
|
|
||||||
this.resetFocusOnWindow();
|
|
||||||
}
|
|
||||||
|
|
||||||
private onWindowBlur() {
|
|
||||||
if (this.iframeMouseOver) {
|
|
||||||
this.log('WOW! Iframe click!!!');
|
|
||||||
this.resetFocusOnWindow();
|
|
||||||
this.iframeClick.emit(this.el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private resetFocusOnWindow() {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.log('reset focus to window');
|
|
||||||
window.focus();
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
private log(message: string) {
|
|
||||||
if (this.debug) {
|
|
||||||
console.log(message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in a new issue