Native Fullscreen JavaScript API toggle button

Question

I can't figure out how to modify the below code to include a toggle button. When in 'normal' mode the button would make the element go fullscreen and then change its function to go back to 'normal' state.

I've modified the code from John Dyer's Native Fullscreen JavaScript API example:

var fsButton = document.getElementById('fsbutton'),
    fsElement = document.getElementById('specialstuff'),
    fsStatus = document.getElementById('fsstatus');


if (window.fullScreenApi.supportsFullScreen) {
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
    fsStatus.className = 'fullScreenSupported';

    // handle button click
    fsButton.addEventListener('click', function() {
        window.fullScreenApi.requestFullScreen(fsElement);
    }, true);

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            fsStatus.innerHTML = 'Whoa, you went fullscreen';
        } else {
            fsStatus.innerHTML = 'Back to normal';
        }
    }, true);

} else {
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

to this:

var container = document.getElementById('canvas'),
fsButton = document.getElementById('fsbutton');

if (window.fullScreenApi.supportsFullScreen) { // fullscreen supported
    fsButton.style.display = 'block';

    container.addEventListener(fullScreenApi.fullScreenEventName, function() {
        fsButton.addEventListener('click', function() {
            if (fullScreenApi.isFullScreen()) { // fullscreen is on
                window.fullScreenApi.CancelFullScreen( container );
                fsButton.className = 'fs-off';
            } else { // fullscreen is off
                window.fullScreenApi.requestFullScreen( container );
                container.style.width = "100%";
                container.style.height = "100%";
                fsButton.className = 'fs-on';
            }
        }, true)

    }, true);

} else {
    // no fullscreen support - do nothing
}

But it doesn't work. Any suggestions much appreciated!

Answer 1

First of all, you shouldn't nest fsButton click event listener into fullScreenApi's event listener because it won't work until container goes fullscreen. fsButton's click is responsible for going fullscreen, event listener is being attached after going fullscreen so the action will never happen.

Here's a modified version of the code which should suit your needs:

var fsButton = document.getElementById('fsbutton'),
    container = document.getElementById('canvas');


if (window.fullScreenApi.supportsFullScreen) {
    fsButton.style.display = 'block';

    fsButton.addEventListener('click', function() {
        if (fsButton.className == 'fs-off') {
            window.fullScreenApi.requestFullScreen(container);
        } else {
            window.fullScreenApi.cancelFullScreen(container);
        }
    }, true);

    container.addEventListener(fullScreenApi.fullScreenEventName, function() {
        if (fullScreenApi.isFullScreen()) {
            container.style.width = container.style.height = '100%';
            fsButton.className = 'fs-on';
        } else {
            fsButton.className = 'fs-off';
        }
    }, true);
} else {
    // no fullscreen support - do nothing
}