Hybrid 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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,811
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the contribution.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Location
    Singapore
    Posts
    15
    Vote Rating
    0
    skumarsamy1969 is on a distinguished road

      0  

    Default How-to implement

    How-to implement


    Hi Michael,

    I'm new to extjs and learning how-to.
    Will you please give me some detail how the full screen code need to be integrated.

    thanks & regards
    Kumar

    Quote Originally Posted by MichaelOstrovsky View Post
    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();
        }

  4. #4
    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

      0  

    Default


    These are stand-alone methods that can be added to any class.
    For example, add "Utils.js" to your app folder ( taking that your application called 'myapp' ):

    Code:
    Ext.define('myapp.Utils', {
        singleton: true,
            // here goes all the methods
    });
    call them in an event listener of some button

    Code:
                Ext.widget('button', {
                    text: 'Full screen',
                    renderTo: Ext.getBody(),
                    handler: function(){
                        myapp.Utils.setFullScreen(true);
                    }
                })

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Location
    Singapore
    Posts
    15
    Vote Rating
    0
    skumarsamy1969 is on a distinguished road

      0  

    Thumbs up Perfect Solution: worked out

    Perfect Solution: worked out


    Dear Michael,
    Thank you very much for your reply and solution.

    Your solution worked out for me.

    I have small problem now, i'm using the fullscreen mode during login success. The event button is in login.js, after login the system redirects to index.html, which loads the application, hence the browser turns to normal mode.

    Is there any way that i can run the script during the index.html load

    Looking forward for your support.
    Thanks and Regards
    Kumar

  6. #6
    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

      0  

    Default


    Glad to help )

    Not sure it's possible to force full screen on page load , particularly in a cross-browser manner.
    If you find an answer ( Maybe the resources listed above will help ), please let know )

    Regards

  7. #7
    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

      0  

    Default


    By the way.. a possible solution to your case may be not-reloading the page after login.
    It can be done by 'card' layout on the whole viewport , having the first 'card' be the login page , and the second the application itself. when user passes authentication -> just switch to the second card.

  8. #8
    Sencha User kwjaccard's Avatar
    Join Date
    Jul 2014
    Location
    Winchester, TN - USA
    Posts
    1
    Vote Rating
    0
    kwjaccard is on a distinguished road

      0  

    Default


    Michael from Tel Aviv, can you please do a step-by-step description of how to get your solution to work. It would be greatly appreciated.