Friday, March 7, 2014

Native Fullscreen JavaScript/jQuery API

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

My name pritom


jQuery code


$(document).ready(function () {
    var fullScreenCheck = $("div#main-body").checkFullScreen();
    if (fullScreenCheck.enter && fullScreenCheck.exit && fullScreenCheck.fullscreen && fullScreenCheck.change && fullScreenCheck.error) {
        $(document).bind(fullScreenCheck.change, fullScreenChangeHandler);
        $(document).bind(fullScreenCheck.error, fullScreenErrorHandler);
        $(".fsmode").html("Full screen would work...");
        $("div#main-body .fullscreen").click(function () {
            if(document[fullScreenCheck.fullscreen]) {
                console.log("Going to normal screen...");
                document[fullScreenCheck.exit]();
            } else {
                console.log("Going to full screen...");
                $("div#main-body")[0][fullScreenCheck.enter]();
            }
        })
        $("div#main-body").click(function () {
            $(document).trigger("fullscreenchange");
        })
        $(document).bind("fullscreenchange", function() {
            if (document[fullScreenCheck.fullscreen]) {
                $(".fsmode").html("Window is now full screen...");
            } else {
                $(".fsmode").html("Window is now normal screen...");
            }
        });
    } else {
        $(".fsmode").html("Full screen would not work...");
        $("div#main-body .fullscreen").remove();
    }

    function fullScreenChangeHandler(event) {
        $(document).trigger(new $.Event("fullscreenchange"));
    }

    function fullScreenErrorHandler(event) {
        console.log(event.originalEvent);
    }
})

jQuery.fn.checkFullScreen = function () {
    var enter, exit, fullscreen
// support for entering fullscreen
    var dom = document.createElement('div');
    if ('requestFullscreen' in dom) {
        enter = 'requestFullscreen' // W3C proposal
    } else if ('requestFullScreen' in dom) {
        enter = 'requestFullScreen' // mozilla proposal
    } else if ('webkitRequestFullScreen' in dom) {
        enter = 'webkitRequestFullScreen' // webkit
    } else if ('mozRequestFullScreen' in dom) {
        enter = 'mozRequestFullScreen' // firefox
    } else if ('msRequestFullscreen' in dom) {
        enter = 'msRequestFullscreen' // ms
    } else {
        enter = null // not supported in this browser
    }
// support for exiting fullscreen
    if ('exitFullscreen' in document) {
        exit = 'exitFullscreen' // W3C proposal
    } else if ('cancelFullScreen' in document) {
        exit = 'cancelFullScreen' // mozilla proposal
    } else if ('webkitCancelFullScreen' in document) {
        exit = 'webkitCancelFullScreen' // webkit
    } else if ('mozCancelFullScreen' in document) {
        exit = 'mozCancelFullScreen' // firefox
    } else if ('msExitFullscreen' in document) {
        exit = 'msExitFullscreen' // ms
    } else {
        exit = null // not supported in this browser
    }
// support for detecting when in fullscreen
    if ('fullscreen' in document) {
        fullscreen = 'fullscreen' // W3C proposal
    } else if ('fullScreen' in document) {
        fullscreen = 'fullScreen' // mozilla proposal
    } else if ('webkitIsFullScreen' in document) {
        fullscreen = 'webkitIsFullScreen' // webkit
    } else if ('mozFullScreen' in document) {
        fullscreen = 'mozFullScreen' // firefox
    } else if ('msFullscreenElement' in document) {
        fullscreen = 'msFullscreenElement' // ms
    } else {
        fullscreen = null // not supported in this browser
    }

    if (document["webkitCancelFullScreen"]) {
        change = "webkitfullscreenchange";
        error = "webkitfullscreenerror";
    } else if (document["msExitFullscreen"]) {
        change = "MSFullscreenChange";
        error = "MSFullscreenError";
    } else if (document["mozCancelFullScreen"]) {
        change = "mozfullscreenchange";
        error = "mozfullscreenerror";
    } else {
        change = "fullscreenchange";
        error = "fullscreenerror";
    }

    return {
        enter: enter,
        exit: exit,
        fullscreen: fullscreen,
        change: change,
        error: error
    }
};

No comments:

Post a Comment