How to expand Voxel desktop view to full screen

This is a small feature to expand Voxel desktop view. Added as an icon on desktop top bar, for example. By clicking it your desktop users can enjoy your Voxel website in full screen mode!

To make this work you just need to assign an ID to the top menu VX action list item you want this function to have. In my case the expand icon.

#1: In the header template give the item the ID “full-screen-button” that you want to have the expand function.

#2: Now you need to add a code snippet, for example as javascript snippet through a plugin like WPCode to be added to the site-wide footer:

document.addEventListener("DOMContentLoaded", function() {
    var fullscreenButton = document.getElementById("full-screen-button");

    if (fullscreenButton) {
        fullscreenButton.addEventListener("click", function() {
            toggleFullScreen();
        });
    }
});

function toggleFullScreen() {
    if (!document.fullscreenElement &&    // Alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        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);
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

And you are good to go! 🙂 Have fun.

If you do not have Voxel yet, you can support me by getting it through this link: Get Voxel

And check out my other Voxel related blog posts!