Fancybox always exits fullscreen mode

ekutner commented 1 year ago

Describe the bug

When Fancybox is closed it is always existing fullscreen mode, even if it was entered before Fancybox was started. At a minimum it should exit fullscreen if it user didn't enter it from the Fancybox toolbar. Even better would be an option that would allow 3 possibilities: always exit, exit only if started by Fancybox, never exit. It would also be nice to be able to cancel the exit of fullscreen mode when handling the close event.

Reproduction

Just set the page to fullscreen before opening Fancybox, then open and close it. The expectation is to stay in fullscreen.

Additional context

No response

fancyapps commented 1 year ago

Hi,

Sorry, but I don't really understand your problem. Fancybox does not exit full screen mode on closing, if user is enabled it before opening. Also, it is not possible to determine if the user has already switched to full screen mode, therefore toolbar button might not show correct state.

ekutner commented 1 year ago

It does exit fullscreen.

Reproduction:

Save this code to a file and open it in a browser:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
</head>

<body>
    <button onclick="document.documentElement.requestFullscreen()">fullscreen</button>
    <a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
        <img class="rounded" src="https://lipsum.app/id/60/200x150" />
    </a>
    <script>
        Fancybox.bind('[data-fancybox="gallery"]');
    </script>
</body>
</html>

Click the full screen button.
Click the image to open the light box.
Close the light box.

Result: When the light box closes fullscreen mode is exited.

Expected result: The browser should stay in fullscreen until the user explicitly exists it, or at least it should be configurable if it automatically exists or not.

Workaround: Override the fsAPI exit function just before closing:

            Fancybox.bind('[data-fancybox="gallery"]',
                {
                    on: {
                        shouldClose: (fancybox, event) => {
                            fancybox.fsAPI.exit = () => {};
                            return true;
                        },
                    }
                }
            );

As a side note document.fullscreenElement seems to work pretty reliably in modern browsers for detecting current fullsceen mode and it seems to be working ok in the fancybox toolbar as well.

fancyapps commented 1 year ago

Oh, you mean programmatically launched fullscreen, I thought you were talking about the case where the user presses F11 to enter fullscreen.

fancyapps commented 1 year ago

This should be fixed in the latest release.

ekutner commented 1 year ago

Thank you. It does indeed fix the issue of exiting fullscreen that was started before opening the light box. However, it still always exits if the fullscreen was entered from the light box. I understand why it does that but it would be better if that behavior was optional. My own preference is that if the user explicitly activated fullscreen then it should be the user's decision to exit it.

fancyapps / ui