Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Issue :when I go fullscreen the popup modal is not visible on the main screen

Answered
Dama Ankaiah asked on October 27, 2020

Hi Team,
I have created a new custom button in toolbar and opening a custom popup modal(a component which is created in angular) on click in angular. The problem is when I go full screen the popup modal is not visible on the main screen, I have to minimize the flex monster to see my popup.
I have found the below relevant link and followed the given suggestion but I could not able to make it work in angular.
https://www.flexmonster.com/question/issues-while-going-fullscreen
If it is possible, could you please  provide a sample in angular to open a model popup when I go to full screen on button click .
 
Thanks,
Ankaiah

2 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 29, 2020

Hello, Ankaiah,
 
Thank you for your question.
 
You are right about the fact that the mentioned example is not a suitable option for Angular. It is due to the specific way Angular operates with elements.
 
Instead, we have prepared a sample demonstrating implementation of the custom pop-up within the full-screen mode. It can be found in attachments. Run the following commands to launch the sample:

npm install
ng serve

 
Also, we want to provide explanation about the approach itself.
It implies overwriting the function responsible for opening the full-screen mode.
 
First, create the desired pop-up element and place it right after/before Flexmonster container. Next, wrap both the pop-up and the container with an additional div element, as shown below:

<div id="wrapper">
    <div id="custom-popup">
    </div>
    <fm-pivot></fm-pivot>
</div>

 
Next, specify the height and width parameters of the component as '100%':

<fm-pivot [width]="'100%'" [height]="'100%'"></fm-pivot>

It is required to fit the dimensions of the container with the wrapper.
An additional step is to apply specific styling after the component is rendered. Use the ready event to invoke the function responsible for this operation:

<fm-pivot [width]="'100%'" [height]="'100%'" (ready)="adjustDimensions()"></fm-pivot>

The function adjustDimensions() itself has the following structure:

adjustDimensions() {
  let subWrapper = <HTMLElement>document.querySelector("#wrapper > fm-pivot > div");
  subWrapper.style.height = "100%";
}

 
Finally, overwrite the handler of the “Fullscreen” button so that it use the wrapper as a root for the full-screen mode:

customizeToolbar(toolbar: Flexmonster.Toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    tabs[tabs.length - 1].handler = toggleFullscreen;
    return tabs;
  };

  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen();
    else document.getElementById("wrapper").requestFullscreen();
  };
}

Complement the Toolbar with the mentioned button that opens the pop-up itself.
 
Please note that the pop-up should not be displayed by default. Show it after the user presses the dedicated button. For example:

customizeToolbar(toolbar: Flexmonster.Toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    tabs.unshift({
      id: "open-custom-popup",
      title: "Pop-Up",
      icon: tabs[1].icon,
      handler: openPopup
    });
    tabs[tabs.length - 1].handler = toggleFullscreen;
    return tabs;
  };

  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen();
    else document.getElementById("wrapper").requestFullscreen();
  };

  function openPopup() {
    document.getElementById("custom-popup").style.display = "block";
  }
}

 
Please let us know if it works for you.
Do not hesitate to contact us in case additional questions arise.
 
Best regards,
 
Illia

Attachments:
pivot-angular.zip

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 9, 2020

Hello, Ankaiah,
 
Our team is wondering whether the provided approach works for your case.
 
We are looking forward to hearing from you.
 
Best regards,
Illia

Please login or Register to Submit Answer