I made a web-application in Angular 8. On my page I have a "viewArea" with a very long container (long horizontally) and many buttons with scripts to work with this container including scrolling it horizontally. Everything works fine but not in full screen mode. Some scripts do not run in full screen mode. When I exit full screen, then I see that they run...I noticed that all those scripts call a mat-dialog windows. Precisely it works this way: by pressing a button a pop-up window (angular material dialog) appears with a question, after input a script runs. But in full screen mode I press the button and no pop-up windows appears, I exit the full screen, and then see this pop-up window on the screen. Does any one have the same issue? What is the problem?
my scripts to enter the full screen mode:
openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
closeFullscreen(elem) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (elem.mozCancelFullScreen) { /* Firefox */
elem.mozCancelFullScreen();
} else if (elem.webkitExitFullscreen) { /* Chrome, Safari and Opera */
elem.webkitExitFullscreen();
} else if (elem.msExitFullscreen) { /* IE/Edge */
elem.msExitFullscreen();
}
}
fullScreen(){
this.myService.fullScreenStatus = true;
let elem = document.getElementById('viewArea');
this.openFullscreen(elem);
elem.classList.add('noScrollBars');
elem.style.zoom = "85%" ;
}
exitFullScreen() {
this.myService.fullScreenStatus = false;
let elem = document.getElementById('viewArea');
this.closeFullscreen(elem);
elem.classList.add('noScrollBars');
elem.style.zoom = "100%" ;
}
buttons to open and close full screen:
<button class='btn btn-light half-button'
[hidden]="myService.editStatus === false || myService.fullScreenStatus === true || myService.hideMenuStatus === true"
(click)="indexeDbService.fullScreen()">full screen</button>
<button class='btn btn-light half-button' style='background-color: whitesmoke;'
[hidden]="myService.editStatus === false || myService.fullScreenStatus === false || myService.hideMenuStatus === true"
(click)="indexeDbService.exitFullScreen()">full screen</button>
button to call a mat-dialog window:
<button class='btn btn-light half-button'
[hidden]="myService.editStatus === false || myService.hideMenuStatus === true"
[disabled]="myService.tonalityOriginalStatus === false || myService.protectedStatus === true || myService.readStatus === true"
(click)="openDialogNuance()">add nuance</button>
script on this button:
openDialogNuance() {
this.dialog.open(NuanceComponent, {
panelClass: 'mat-dialog',
// height: '400px',
// width: '1200px',
})
.afterClosed()
.subscribe( result => {
this.indexeDbService.nuanceAdd(result);
})
};
script to run after input in mat-dialog:
async nuanceAdd(nuance){
if (!nuance) {
return
}
let activeElementId = this.activeElementId(this.activeElement());
this.actRegistration.push({'id': activeElementId, 'undoType': 'nuance'});
this.nuanceToRegister(activeElementId, `${nuance}`);
this.deleteAllPreviouslyAddedDivs();
let div = document.createElement('div');
div.id = `${activeElementId}-${nuance}`;
div.className = `nuanceText`;
if (nuance === 'pedal on') div.textContent = this.pedalOn;
if (nuance === 'pedal off') div.textContent = this.pedalOff;
if (nuance === 'flageolet') div.textContent = this.flageolet;
if (nuance === 'slapping') div.textContent = this.slapping;
if (nuance === 'vibrato') div.textContent = this.vibrato;
if (nuance === 'spiccato') div.textContent = this.spiccato;
if (nuance === 'pizzicato') div.textContent = this.pizzicato;
if (nuance === 'ricochet') div.textContent = this.ricochet;
if (nuance === 'portamento') div.textContent = this.portamento;
document.getElementById(activeElementId).appendChild(div);
let datas = await this.getFromIndexeDb();
for (let ms = 0; ms < datas.length; ms++) {
for (let bt = 0; bt < datas[ms].length; bt++){
for (let oct = 0; oct < datas[ms][bt].length; oct++) {
for (let st = 0; st < datas[ms][bt][oct].length; st++){
if (datas[ms][bt][oct][st].id === this.firstFourInId(activeElementId)){
datas[ms][bt][oct][st].nuance = nuance;
datas[ms][bt][oct][st].articulationTime = null;
datas[ms][bt][oct][st].ornament = null;
datas[ms][bt][oct][st].applicature = null;
}}}}}
this.putToIndexeDb(datas)
}
