fullscreen - Angular Material - 一些脚本停止以全屏模式运行

问题描述

我在 Angular 8 中创建了一个 Web 应用程序。在我的页面上，我有一个“viewArea”，它有一个非常长的容器（水平长）和许多带有脚本的按钮，可以使用这个容器，包括水平滚动它。一切正常，但不是全屏模式。某些脚本不能以全屏模式运行。当我退出全屏时，我看到它们运行了......我注意到所有这些脚本都调用了一个 mat-dialog 窗口。确切地说，它是这样工作的：通过按下一个按钮，一个弹出窗口（角度材料对话框）出现一个问题，输入后脚本运行。但是在全屏模式下我按下按钮并没有弹出窗口出现，我退出全屏，然后在屏幕上看到这个弹出窗口。有没有人有同样的问题？问题是什么？

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)
}

标签： fullscreen

fullscreen - Angular Material - 一些脚本停止以全屏模式运行

问题描述

解决方案

推荐阅读