better encapsulation of native fullscreen api

src/openseadragon.js

@@ -1655,6 +1655,86 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
 
     })();
 
+    /**
+     * Determines the appropriate level of native full secreen support we can get 
+     * from the browser.
+     * Thanks to John Dyer for the implementation and research
+     * http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
+     * Also includes older IE support based on
+     * http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen/7525760
+     * @name $.supportsFullScreen
+     */
+    (function() {
+        var fullScreenApi = {
+                supportsFullScreen: false,
+                isFullScreen: function() { return false; },
+                requestFullScreen: function() {},
+                cancelFullScreen: function() {},
+                fullScreenEventName: '',
+                prefix: ''
+            },
+            browserPrefixes = 'webkit moz o ms khtml'.split(' ');
+     
+        // check for native support
+        if (typeof document.cancelFullScreen != 'undefined') {
+            fullScreenApi.supportsFullScreen = true;
+        } else {
+            // check for fullscreen support by vendor prefix
+            for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
+                fullScreenApi.prefix = browserPrefixes[i];
+     
+                if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
+                    fullScreenApi.supportsFullScreen = true;
+     
+                    break;
+                }
+            }
+        }
+     
+        // update methods to do something useful
+        if (fullScreenApi.supportsFullScreen) {
+            fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
+     
+            fullScreenApi.isFullScreen = function() {
+                switch (this.prefix) {
+                    case '':
+                        return document.fullScreen;
+                    case 'webkit':
+                        return document.webkitIsFullScreen;
+                    default:
+                        return document[this.prefix + 'FullScreen'];
+                }
+            };
+            fullScreenApi.requestFullScreen = function( element ) {
+                return (this.prefix === '') ? 
+                    element.requestFullScreen() : 
+                    element[this.prefix + 'RequestFullScreen']();
+
+            };
+            fullScreenApi.cancelFullScreen = function( element ) {
+                return (this.prefix === '') ? 
+                    document.cancelFullScreen() : 
+                    document[this.prefix + 'CancelFullScreen']();
+            };
+        } else if ( typeof window.ActiveXObject !== "undefined" ){
+            // Older IE.
+            fullScreenApi.requestFullScreen = function(){
+                var wscript = new ActiveXObject("WScript.Shell");
+                if ( wscript !== null ) {
+                    wscript.SendKeys("{F11}");
+                }
+                return false;
+            };
+            fullScreenApi.cancelFullScreen = fullScreenApi.requestFullScreen;
+        }
+
+     
+        // export api
+        $.extend( $, fullScreenApi );
+
+    })();
+
+
     //TODO: $.console is often used inside a try/catch block which generally
     //      prevents allowings errors to occur with detection until a debugger
     //      is attached.  Although I've been guilty of the same anti-pattern

src/viewer.js

@@ -128,7 +128,8 @@ $.Viewer = function( options ) {
         "lastZoomTime":      null,
         // did we decide this viewer has a sequence of tile sources
         "sequenced":         false,
-        "sequence":          0
+        "sequence":          0,
+        "onfullscreenchange": null
     };
 
     //Inherit some behaviors and properties
@@ -627,28 +628,13 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         if ( fullPage == this.isFullPage() ) {
             return;
         }
-        this.tmp = function( event ) {
+
-            // The event object doesn't carry information about the fullscreen state of the browser,
-            // but it is possible to retrieve it through the fullscreen API
-            if( (document.fullScreenElement && document.fullScreenElement !== null) || 
-                (document.mozFullScreen || document.webkitIsFullScreen) ){
-                 console.log( document.webkitIsFullScreen );
-                // The target of the event is always the document,
-                // but it is possible to retrieve the fullscreen element through the API
-                _this.setFullPage( true );
-            } else {
-                _this.setFullPage( false );
-            }
-        };
 
         if ( fullPage ) {
 
-            requestFullScreen( document.body );
+            if( $.supportsFullScreen ){
 
-
+            }
-            // Note that the API is still vendor-prefixed in browsers implementing it
-            document.addEventListener("mozfullscreenchange", this.tmp);
-            document.addEventListener("webkitfullscreenchange", this.tmp);
             
             this.bodyOverflow   = bodyStyle.overflow;
             this.docOverflow    = docStyle.overflow;
@@ -695,21 +681,43 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                     'class',
                     this.toolbar.element.className +" fullpage"
                 );
-                //this.toolbar.element.style.position = 'fixed';
-
-                //this.container.style.top = $.getElementSize(
-                //    this.toolbar.element
-                //).y + 'px';
             }
+            
             body.appendChild( this.element );
+            
+            if( $.supportsFullScreen ){
+                THIS[ this.hash ].onfullscreenchange = function( event ) {
+                    // The event object doesn't carry information about the 
+                    // fullscreen state of the browser, but it is possible to
+                    // retrieve it through the fullscreen API
+                    if( $.isFullScreen() ){
+                        // The target of the event is always the document,
+                        // but it is possible to retrieve the fullscreen element through the API
+                        _this.setFullPage( true );
+                    } else {
+                        _this.setFullPage( false );
+                    }
+                };
+
+                $.requestFullScreen( document.body );
+
+                // Note that the API is still vendor-prefixed in browsers implementing it
+                document.addEventListener(
+                    $.fullScreenEventName, 
+                    THIS[ this.hash ].onfullscreenchange
+                );
+                this.element.style.height = '100%';
+                this.element.style.width = '100%';
+            }else{
+                this.element.style.height = $.getWindowSize().y + 'px';
+                this.element.style.width = $.getWindowSize().x + 'px';
+            }
+
             if( this.toolbar && this.toolbar.element ){
                 this.element.style.height = (
-                    $.getWindowSize().y - $.getElementSize( this.toolbar.element ).y
+                    $.getElementSize( this.element ).y - $.getElementSize( this.toolbar.element ).y
                 ) + 'px';
-            }else{
-                this.element.style.height = '100%';
             }
-            this.element.style.width = '100%';
 
             // mouse will be inside container now
             $.delegate( this, onContainerEnter )();
@@ -717,9 +725,13 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
 
         } else {
 
-            // Note that the API is still vendor-prefixed in browsers implementing it
+            if( $.supportsFullScreen ){
-            document.removeEventListener("mozfullscreenchange", this.tmp);
+                document.removeEventListener( 
-            document.removeEventListener("webkitfullscreenchange", this.tmp);
+                    $.fullScreenEventName, 
+                    THIS[ this.hash ].onfullscreenchange
+                );
+                $.cancelFullScreen( document );
+            }
 
             bodyStyle.overflow  = this.bodyOverflow;
             docStyle.overflow   = this.docOverflow;
@@ -771,7 +783,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             // mouse will likely be outside now
             $.delegate( this, onContainerExit )();
 
-            cancelFullScreen( document );
 
         }
         this.raiseEvent( 'fullpage', { fullpage: fullPage, viewer: this } );
@@ -1502,49 +1513,7 @@ function onNext(){
     this.goToPage( next );
 }
 
-//////////////////////////////////////////////////////////////////
-// True "Full Screen" as opposed to "Full Page"
-// Implementation based on 
-// http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen/7525760#7525760
-//////////////////////////////////////////////////////////////////
-function cancelFullScreen(el) {
-    var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
-    if (requestMethod) { // cancel full screen.
-        requestMethod.call(el);
-    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
-        var wscript = new ActiveXObject("WScript.Shell");
-        if (wscript !== null) {
-            wscript.SendKeys("{F11}");
-        }
-    }
-}
 
-function requestFullScreen(el) {
-    // Supports most browsers and their versions.
-    var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
-
-    if (requestMethod) { // Native full screen.
-        requestMethod.call(el);
-    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
-        var wscript = new ActiveXObject("WScript.Shell");
-        if (wscript !== null) {
-            wscript.SendKeys("{F11}");
-        }
-    }
-    return false;
-}
-
-function toggleFull() {
-    var elem = document.body; // Make the body go full screen.
-    var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);
-
-    if (isInFullScreen) {
-        cancelFullScreen(document);
-    } else {
-        requestFullScreen(elem);
-    }
-    return false;
-}
 
 
 }( OpenSeadragon ));