Helper methods to handle vendor specific methods provided by the HTML5 fullscreen API for the web platform. See readme.md for details.

readme.md

Helper functions to handle vendor specific methods provided by the HTML5 fullscreen API for the web platform. See the following sites to get detailed information about the API:

• http://fullscreen.spec.whatwg.org
• https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
• http://docs.webplatform.org/wiki/tutorials/using_the_full-screen_api

jquery.fullScreenHelper.js

/**
     * Checking the browsers fullscreen ability. Returns vendor specific methods.
     * @return {Object} return.requestMethod The browser specific requestFullScreen method 
     * @return {Object} return.cancelMethod The browser specific cancelFullScreen method 
     */
    var checkFullScreenAbility = function() {
        var fullScreenAbility = {},
            requestMethod = document.body.requestFullScreen ||
            document.body.webkitRequestFullScreen ||
            document.body.mozRequestFullScreen ||
            document.body.msRequestFullscreen,
            cancelMethod = document.cancelFullScreen ||
                document.webkitCancelFullScreen ||
                document.mozCancelFullScreen ||
                document.msCancelfullScreen;
        if (requestMethod && cancelMethod) {
            fullScreenAbility.requestMethod = requestMethod;
            fullScreenAbility.cancelMethod = cancelMethod;
        }

        return fullScreenAbility;
    };
    
    /**
    * Checking whether the browser is in fullscreen mode. 
    * @return {Boolean} true or false depending on state.
    */
    var isInFullScreen = function () {
        var isFullScreen = false;
        
        if (document.fullScreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement) {
            isFullScreen = true;
        }

        return isFullScreen;
    };
    
    /**
    * Changing the class of the button to toogle fullscreen 
    */
    var toggleFullScreenButton = function() {
        var $button = $('#toggleFullscreen'),
             isFullScreen = isInFullScreen();
        
        if (isFullScreen === true) {
            $button.addClass('fullScreen');
        } else {
            $button.removeClass('fullScreen');
        }
    };

    /**
     * Handling the fullscreen functionality via fullscreen API
     * See:
     * - http://fullscreen.spec.whatwg.org/ 
     * - https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
     * @param {Object} event jQuery event object
     */
    var toggleFullScreen = function(event) {
        var element = document.body,
            isFullScreen = isInFullScreen();

        console.warn(isFullScreen);
        event.preventDefault();
        
        if (isFullScreen === true) {
            toggleFullScreenButton();
            event.data.fullScreenAbility.cancelMethod.apply(document);
        } else {
            toggleFullScreenButton();
            event.data.fullScreenAbility.requestMethod.apply(element);
        }

    };
    
    var bind = function () {
        var fullScreenAbility = checkFullScreenAbility(),
            $target = $('.timeTabArea');

        if ($.isEmptyObject(fullScreenAbility) === false) {
            $target.prepend('<a id="toggleFullscreen" href="#">Fullscreen</a>');
            $target.on('click', '#toggleFullscreen', { fullScreenAbility: fullScreenAbility }, toggleFullScreen);
            $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', toggleFullScreenButton);
        }
        
    };