EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3947 iframe: Fix error when setting allowfullscreen 

Now this attribute needs to be static
main
Dani Palou 2024-01-10 12:49:35 +01:00
parent 0af73bd413
commit 4397446acd
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/core/components/iframe/core-iframe.html
View File

@ -11,9 +11,17 @@
</ion-button> </ion-button>
</core-navbar-buttons> </core-navbar-buttons>
<iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl" <!-- allowfullscreen cannot be set dynamically using attribute binding, define 2 iframe elements. -->
[attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null" [class.core-iframe-loading]="loading"> <ng-container *ngIf="allowFullscreen">
</iframe> <iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
allowfullscreen="true" [class.core-iframe-loading]="loading">
</iframe>
</ng-container>
<ng-container *ngIf="!allowFullscreen">
<iframe #iframe class="core-iframe" [attr.id]="id" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
[class.core-iframe-loading]="loading">
</iframe>
</ng-container>
<ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog" <ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
class="core-button-as-link core-iframe-help"> class="core-button-as-link core-iframe-help">

22
src/core/components/iframe/iframe.ts
View File

@ -85,12 +85,6 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
this.initialized = true; this.initialized = true;
this.iframeWidth = (this.iframeWidth && CoreDomUtils.formatPixelsSize(this.iframeWidth)) || '100%';
this.iframeHeight = (this.iframeHeight && CoreDomUtils.formatPixelsSize(this.iframeHeight)) || '100%';
this.allowFullscreen = CoreUtils.isTrueOrOne(this.allowFullscreen);
this.showFullscreenOnToolbar = CoreUtils.isTrueOrOne(this.showFullscreenOnToolbar);
this.autoFullscreenOnRotate = CoreUtils.isTrueOrOne(this.autoFullscreenOnRotate);
if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) { if (this.showFullscreenOnToolbar || this.autoFullscreenOnRotate) {
// Leave fullscreen when navigating. // Leave fullscreen when navigating.
this.navSubscription = Router.events this.navSubscription = Router.events
@ -157,6 +151,22 @@ export class CoreIframeComponent implements OnChanges, OnDestroy {
* Detect changes on input properties. * Detect changes on input properties.
*/ */
async ngOnChanges(changes: {[name: string]: SimpleChange }): Promise<void> { async ngOnChanges(changes: {[name: string]: SimpleChange }): Promise<void> {
if (changes.iframeWidth) {
this.iframeWidth = (this.iframeWidth && CoreDomUtils.formatPixelsSize(this.iframeWidth)) || '100%';
}
if (changes.iframeHeight) {
this.iframeHeight = (this.iframeHeight && CoreDomUtils.formatPixelsSize(this.iframeHeight)) || '100%';
}
if (changes.allowFullscreen) {
this.allowFullscreen = CoreUtils.isTrueOrOne(this.allowFullscreen);
}
if (changes.showFullscreenOnToolbar) {
this.showFullscreenOnToolbar = CoreUtils.isTrueOrOne(this.showFullscreenOnToolbar);
}
if (changes.autoFullscreenOnRotate) {
this.autoFullscreenOnRotate = CoreUtils.isTrueOrOne(this.autoFullscreenOnRotate);
}
if (!changes.src) { if (!changes.src) {
return; return;
} }