Threaded View

  1. #1
    Sencha Premium Member MichaelOstrovsky's Avatar
    Join Date
    May 2008
    Location
    Tel Aviv, Israel
    Posts
    135
    Vote Rating
    6
    MichaelOstrovsky is on a distinguished road

      4  

    Default Full screen mode methods

    Full screen mode methods


    Hello. I've made an attempt to provide cross-browser solution to controlling full-screen mode.
    Following is the solution so far ( combining all resources i could find and personal touches ).

    Works on:
    Win7 [ IE9, Firefox 18, Chrome 24, Safari 5.1, Opera 12.12 ]

    Hope it helps anyone.
    I'll be very thankfull for any corrections , feedback or test results ( and will update the script of course ).

    resources:
    http://stackoverflow.com/questions/1...ver-the-screen
    https://hacks.mozilla.org/2012/01/us...-web-browsers/
    http://stackoverflow.com/questions/1...ll-screen-mode
    http://stackoverflow.com/questions/2...-in-fullscreen
    http://johndyer.name/native-fullscre...jquery-plugin/
    http://www.paulund.co.uk/javascript-full-screen-api

    Code:
        /**
         * Check if window is in full screen mode.
         * @return {Boolean} full screen mode
         */
        isInFullScreen: function(){
    
    
            if(document.fullScreenElement !==undefined){
               return !!document.fullScreenElement;
            }
    
    
            if(document.mozFullScreen !== undefined){
                return !!document.mozFullScreen;
            }
    
    
            if(document.webkitIsFullScreen !== undefined){
                return !!document.webkitIsFullScreen;
            }
    
    
            if(window['fullScreen'] !== undefined) {
                return !!window.fullScreen;
            }
    
    
            if(window.navigator.standalone !== undefined){
                return !!window.navigator.standalone;
            }
    
    
            //________________________________________________________
            // heuristic method
    
    
            // 5px height margin, just in case (needed by e.g. IE)
            var heightMargin = 5;
            if(Ext.isWebKit && /Apple Computer/.test(navigator.vendor)) {
                // Safari in full screen mode shows the navigation bar,which is 40px
                heightMargin = 42;
            }
            return screen.width == window.innerWidth &&
                Math.abs(screen.height - window.innerHeight) < heightMargin;
    
    
        },
    
    
        /**
         * Switch to/from fullscreen mode.
         * Must be triggered by mouse event
         *
         * @param {Boolean} b on/off fullscreen
         */
        setFullScreen: function(b){
    
    
            if(b){
    
    
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.body.requestFullscreen) {
                    document.body.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                } else if (document.body.webkitRequestFullScreen) {
                    document.body.webkitRequestFullScreen();
                } else if(typeof window.ActiveXObject != "undefined"){
                    // for Internet Explorer
                    var wscript = new ActiveXObject("WScript.Shell");
                    if(wscript != null){
                        wscript.SendKeys("{F11}");
                    }
                }
    
    
            }else{
    
    
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if(document.exitFullscreen){
                    document.exitFullscreen();
                } else if(typeof window.ActiveXObject != "undefined"){
                    // for Internet Explorer
                    var wscript = new ActiveXObject("WScript.Shell");
                    if(wscript != null){
                        wscript.SendKeys("{F11}");
                    }
                }
            }
    
    
        },
    
    
        /**
         * Toggle full screen mode.
         * @return {Boolean} the new full-screen mode
         */
        toggleFullScreen:function(){
            var isInFullScreen = this.isInFullScreen();
            this.setFullScreen(!isInFullScreen);
            return this.isInFullScreen();
        }
    Last edited by MichaelOstrovsky; 23 Jan 2013 at 2:36 AM. Reason: Script update