ALx ALx - 4 months ago 14
Javascript Question

Native Fullscreen JavaScript API toggle button

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

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
}
Comments