From 3d6cbf8b3ee5e616233334c4c15be63689ca82aa Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Wed, 7 Sep 2022 15:20:43 +0300
Subject: [PATCH] add changes for fullscreen chart view on monitor component as
 well

---
 src/app/monitor/monitor.component.html |  4 ++--
 src/app/monitor/monitor.component.ts   | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index d8ba4f3..d916a11 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -189,10 +189,10 @@
                       <!--<div *ngIf="properties.environment === 'development'">
                         Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
                         {{countSelectedFilters()}}</div>-->
-                      <iframe
+                      <iframe [class.uk-blend-multiply]="!isFullscreen"
                           *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
                           [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                          class="uk-width-1-1 uk-blend-multiply" allowfullscreen="true" mozallowfullscreen="true"
+                          class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
                           [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
                       <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
                         <img class="uk-width-1-1 uk-blend-multiply"
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index 1427204..bf70108 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewRef} from '@angular/core';
+import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild, ViewRef} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {DomSanitizer, Meta, Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@@ -81,6 +81,15 @@ export class MonitorComponent implements OnInit, OnDestroy {
   public stickyPageHeader: boolean = false;
 	public showDescriptionOverlay: boolean[] = [];
 
+	public isFullscreen: boolean = false;
+	@HostListener('fullscreenchange', ['$event'])
+	@HostListener('webkitfullscreenchange', ['$event'])
+	@HostListener('mozfullscreenchange', ['$event'])
+	@HostListener('MSFullscreenChange', ['$event'])
+	screenChange(event) {
+		this.isFullscreen = !this.isFullscreen;
+	}
+
   constructor(
     private route: ActivatedRoute,
     private _router: Router,