Merge pull request #358 from avandecreme/fullscreen-inputs

Update full screen API.

changelog.txt

@@ -6,7 +6,9 @@ OPENSEADRAGON CHANGELOG
 * BREAKING CHANGE: the openseadragon-canvas element now has two child divs. This means: (#298)
     * The drawer element is no longer accessible via viewer.canvas.firstChild but via viewer.drawersContainer.firstChild or viewer.drawer.canvas.
     * The overlays elements are no longer accessible via viewer.canvas.childNodes but via viewer.overlaysContainer.childNodes or viewer.currentOverlays[i].element.
+* BREAKING CHANGE: Pseudo full screen mode on IE<11 using activex has been dropped. OpenSeadragon will run in full page if full screen mode is requested.
 * DEPRECATION: overlay functions have been moved from Drawer to Viewer (#331)
+* DEPRECATION: OpenSeadragon.cancelFullScreen has been renamed OpenSeadragon.exitFullScreen (#358)
 * Added layers support. Multiple images can now been displayed on top of each other with transparency via the Viewer.addLayer method (#298)
 * Improved overlay functions (#331)
 * Fixed: Nav button highlight states aren't quite aligned on Firefox (#303)
@@ -23,6 +25,7 @@ OPENSEADRAGON CHANGELOG
 * Added pre-draw event for tiles to allow applications to alter the image (#348)
 * Added optional Rotate Left/Right buttons to standard controls (#341)
 * Added optimization for large numbers of overlays: `checkResize = false` option for OpenSeadragon.Overlay (#365)
+* Updated full screen API, adding support for Opera and IE11 and allowing keyboard input in Chrome (#358)
 
 1.0.0:
 

src/fullscreen.js

@@ -32,114 +32,112 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/*
- * Implementation and research by John Dyer in:
- * http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
- * John Dyer has released this fullscreen code under the MIT license; see
- * <https://github.com/openseadragon/openseadragon/issues/81>.
- *
- * Copyright (C) 2011 John Dyer
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included
- * in all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
- * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
- * OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
- * THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-
 (function( $ ) {
     /**
-     * Determined native full screen support we can get from the browser.
+     * Determine native full screen support we can get from the browser.
      * @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} getFullScreenElement Return the element currently in full screen mode.
-     * @property {Function} cancelFullScreen
+     * @property {Function} requestFullScreen Make a request to go in full screen mode.
-     * @property {String} fullScreenEventName
+     * @property {Function} exitFullScreen Make a request to exit full screen mode.
-     * @property {String} fullScreenErrorEventName
+     * @property {Function} cancelFullScreen Deprecated, use exitFullScreen instead.
-     * @property {String} prefix
+     * @property {String} fullScreenEventName Event fired when the full screen mode change.
+     * @property {String} fullScreenErrorEventName Event fired when a request to go
+     * in full screen mode failed.
      */
     var fullScreenApi = {
-            supportsFullScreen: false,
+        supportsFullScreen: false,
-            isFullScreen: function() { return false; },
+        isFullScreen: function() { return false; },
-            requestFullScreen: function() {},
+        getFullScreenElement: function() { return null; },
-            cancelFullScreen: function() {},
+        requestFullScreen: function() {},
-            fullScreenEventName: '',
+        exitFullScreen: function() {},
-            fullScreenErrorEventName: '',
+        cancelFullScreen: function() {},
-            prefix: ''
+        fullScreenEventName: '',
-        },
+        fullScreenErrorEventName: ''
-        browserPrefixes = 'webkit moz o ms khtml'.split(' ');
+    };
 
     // check for native support
-    if (typeof document.cancelFullScreen != 'undefined') {
+    if ( document.exitFullscreen ) {
+        // W3C standard
         fullScreenApi.supportsFullScreen = true;
-    } else {
+        fullScreenApi.getFullScreenElement = function() {
-        // check for fullscreen support by vendor prefix
+            return document.fullscreenElement;
-        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) {
-                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']();
         };
-    } else if ( typeof window.ActiveXObject !== "undefined" ){
+        fullScreenApi.fullScreenEventName = "fullscreenchange";
-        // Older IE.  Support based on:
+        fullScreenApi.fullScreenErrorEventName = "fullscreenerror";
-        // http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen/7525760
+    } else if ( document.msExitFullscreen ) {
-        fullScreenApi.requestFullScreen = function(){
+        // IE 11
-            /* global ActiveXObject:true */
+        fullScreenApi.supportsFullScreen = true;
-            var wscript = new ActiveXObject("WScript.Shell");
+        fullScreenApi.getFullScreenElement = function() {
-            if ( wscript !== null ) {
+            return document.msFullscreenElement;
-                wscript.SendKeys("{F11}");
-            }
-            return false;
         };
-        fullScreenApi.cancelFullScreen = fullScreenApi.requestFullScreen;
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.msRequestFullscreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.msExitFullscreen();
+        };
+        fullScreenApi.fullScreenEventName = "MSFullscreenChange";
+        fullScreenApi.fullScreenErrorEventName = "MSFullscreenError";
+    } else if ( document.webkitExitFullscreen ) {
+        // Recent webkit
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.getFullScreenElement = function() {
+            return document.webkitFullscreenElement;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.webkitRequestFullscreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.webkitExitFullscreen();
+        };
+        fullScreenApi.fullScreenEventName = "webkitfullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "webkitfullscreenerror";
+    } else if ( document.webkitCancelFullScreen ) {
+        // Old webkit
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.getFullScreenElement = function() {
+            return document.webkitCurrentFullScreenElement;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.webkitRequestFullScreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.webkitCancelFullScreen();
+        };
+        fullScreenApi.fullScreenEventName = "webkitfullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "webkitfullscreenerror";
+    } else if ( document.mozCancelFullScreen ) {
+        // Firefox
+        fullScreenApi.supportsFullScreen = true;
+        fullScreenApi.getFullScreenElement = function() {
+            return document.mozFullScreenElement;
+        };
+        fullScreenApi.requestFullScreen = function( element ) {
+            return element.mozRequestFullScreen();
+        };
+        fullScreenApi.exitFullScreen = function() {
+            document.mozCancelFullScreen();
+        };
+        fullScreenApi.fullScreenEventName = "mozfullscreenchange";
+        fullScreenApi.fullScreenErrorEventName = "mozfullscreenerror";
     }
+    fullScreenApi.isFullScreen = function() {
+        return fullScreenApi.getFullScreenElement() !== null;
+    };
+    fullScreenApi.cancelFullScreen = function() {
+        $.console.error("cancelFullScreen is deprecated. Use exitFullScreen instead.");
+        fullScreenApi.exitFullScreen();
+    };
 
     // export api
     $.extend( $, fullScreenApi );

src/viewer.js

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