Update full screen API.

src/fullscreen.js

@@ -66,69 +66,82 @@
      * @member fullScreenApi
      * @memberof OpenSeadragon
      * @type {object}
-     * @property {Boolean} supportsFullScreen
+     * @property {Boolean} supportsFullScreen Return true if full screen API is supported.
-     * @property {Function} isFullScreen
+     * @property {Function} isFullScreen Return true if currently in full screen mode.
-     * @property {Function} requestFullScreen
+     * @property {Function} requestFullScreen Make a request to go in full screen mode.
-     * @property {Function} cancelFullScreen
+     * @property {Function} exitFullScreen Make a request to exit full screen mode.
-     * @property {String} fullScreenEventName
+     * @property {Function} cancelFullScreen Deprecated, use exitFullScreen instead.
-     * @property {String} fullScreenErrorEventName
+     * @property {String} fullScreenEventName Event fired when the full screen mode change.
-     * @property {String} prefix
+     * @property {String} fullScreenErrorEventName Event fired when a request to go
+     * in full screen mode failed.
      */
     var fullScreenApi = {
             supportsFullScreen: false,
             isFullScreen: function() { return false; },
             requestFullScreen: function() {},
+            exitFullScreen: function() {},
             cancelFullScreen: function() {},
             fullScreenEventName: '',
-            fullScreenErrorEventName: '',
+            fullScreenErrorEventName: ''
-            prefix: ''
+        };
-        },
-        browserPrefixes = 'webkit moz o ms khtml'.split(' ');
 
     // check for native support
-    if (typeof document.cancelFullScreen != 'undefined') {
+    if ( document.exitFullscreen ) {
         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.fullScreenErrorEventName = fullScreenApi.prefix + 'fullscreenerror';
-
         fullScreenApi.isFullScreen = function() {
-            switch (this.prefix) {
+            return document.fullscreenElement !== null;
-                case '':
-                    return document.fullScreen;
-                case 'webkit':
-                    return document.webkitIsFullScreen;
-                default:
-                    return document[this.prefix + 'FullScreen'];
-            }
         };
         fullScreenApi.requestFullScreen = function( element ) {
-            return (this.prefix === '') ?
+            return element.requestFullscreen();
-                element.requestFullScreen() :
-                element[this.prefix + 'RequestFullScreen']();
-
         };
-        fullScreenApi.cancelFullScreen = function() {
+        fullScreenApi.exitFullScreen = function() {
-            return (this.prefix === '') ?
+            document.exitFullscreen();
-                document.cancelFullScreen() :
-                document[this.prefix + 'CancelFullScreen']();
         };
+        fullScreenApi.fullScreenEventName = "fullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "fullscreenerror";
+    } else if ( document.msExitFullscreen ) {
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.isFullScreen = function() {
+            return document.msFullscreenElement !== undefined;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.msRequestFullscreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.msExitFullscreen();
+        };
+        fullScreenApi.fullScreenEventName = "MSFullscreenChange";
+        fullScreenApi.fullScreenErrorEventName = "MSFullscreenError";
+    } else if ( document.webkitExitFullscreen ) {
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.isFullScreen = function() {
+            return document.webkitIsFullScreen;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.webkitRequestFullscreen( Element.ALLOW_KEYBOARD_INPUT );
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.webkitExitFullscreen();
+        };
+        fullScreenApi.fullScreenEventName = "webkitfullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "webkitfullscreenerror";
+    } else if ( document.mozCancelFullScreen ) {
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.isFullScreen = function() {
+            return document.mozFullScreen;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.mozRequestFullScreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.mozCancelFullScreen();
+        };
+        fullScreenApi.fullScreenEventName = "mozfullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "mozfullscreenerror";
     } else if ( typeof window.ActiveXObject !== "undefined" ) {
-        // Older IE.  Support based on:
+        // Older IE. Note that supportsFullScreen stay to false because not all
+        // methods and events are supported.
+        // Support based on:
         // http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen/7525760
         fullScreenApi.requestFullScreen = function() {
             /* global ActiveXObject:true */
@@ -138,8 +151,12 @@
             }
             return false;
         };
-        fullScreenApi.cancelFullScreen = fullScreenApi.requestFullScreen;
+        fullScreenApi.exitFullScreen = fullScreenApi.requestFullScreen;
     }
+    fullScreenApi.cancelFullScreen = function() {
+        $.console.error("cancelFullScreen is deprecated. Use exitFullScreen instead.");
+        fullScreenApi.exitFullScreen();
+    };
 
     // export api
     $.extend( $, fullScreenApi );

src/viewer.js

@@ -1016,7 +1016,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             $.requestFullScreen( document.body );
 
         } else {
-            $.cancelFullScreen();
+            $.exitFullScreen();
         }
         return this;
     },