Fullscreen API

Wrapper class testing for fullscreen API

by Oliver Caldwell

HTML

<div id='target'>
    <input type='submit' value='Enter fullscreen' id='fs-enter'><br>
    <input type='submit' value='Exit fullscreen' id='fs-exit'>
</div>

CSS

div#target {
    width: 200px;
    margin: 100px auto;
    background-color: #CCCCCC;
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
}

div#target:-moz-full-screen {
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

div#target:-webkit-full-screen {
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

JavaScript

(function(exports) {
    'use strict';
    
    /**
     * Class for handling fullscreen calls across modern browsers
     * 
     * @param {Element} target Optional element to make fullscreen, defaults to the whole document
     */
    function Fullscreen(target) {
        // Store the target
        // Default to the whole document
        this.target = target || document.documentElement;
    }
    
    /**
     * Requests the browser to enter fullscreen mode
     */
    Fullscreen.prototype.request = function() {
        // Initialise variables
        var doc = this.target;
        
        // Request full screen
        if(doc.requestFullscreen) {
            doc.requestFullscreen();
        }
        else if(doc.mozRequestFullScreen) {
            doc.mozRequestFullScreen();
        }
        else if(doc.webkitRequestFullScreen) {
            doc.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    };
    
    /**
     * Exits fullscreen mode
     */
    Fullscreen.prototype.exit = function() {
        // Initialise variables
        var doc = document;
        
        // Exit full screen
        if(doc.exitFullscreen) {
            doc.exitFullscreen();
        }
        else if(doc.mozCancelFullScreen) {
            doc.mozCancelFullScreen();
        }
        else if(doc.webkitCancelFullScreen) {
            doc.webkitCancelFullScreen();
        }
    };
    
    // Expose the class
    exports.Fullscreen = Fullscreen;
}(this));

document.addEvent('domready', function() {
    var f = new Fullscreen($('target'));
    
    $('fs-enter').addEvent('click', function() {
        f.request();
    });
    
    $('fs-exit').addEvent('click', function() {
        f.exit();
    });
});