How do I toggle FullScreen with a button in a TMS WEB Core Website?

Question

I'm making a TMS WEB Core website in Delphi where I want to have a button that toggles the website in and out of FullScreen (Like when you press F11 in a browser).

In FireMonkey, you have a FullScreen property on the form to do that and then in code in an FMX app, I can literally just do the following code for that:

MyForm.FullScreen := not(MyForm.FullScreen)

The TWebForm doesn't have a FullScreen property.

But how can I do this on a website in a browser using Delphi and TMS WEB Core?

Answer 1

I wrote a little Delphi function that can toggle FullScreen in TMS WEB Core Websites:

procedure ToggleFullScreen();
begin
  asm
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    } else {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    }
  end;
end;

This should work on all modern browsers also. I tested it on Microsoft Edge, Google Chrome, and Mozilla Firefox. You can use it by simply calling ToggleFullScreen() in a button's onClick event:

procedure TForm2.WebButton1Click(Sender: TObject);
begin
  ToggleFullScreen();
end;