diff --git a/src/fullscreen.js b/src/fullscreen.js index dedbd290..20009695 100644 --- a/src/fullscreen.js +++ b/src/fullscreen.js @@ -66,80 +66,97 @@ * @member fullScreenApi * @memberof OpenSeadragon * @type {object} - * @property {Boolean} supportsFullScreen - * @property {Function} isFullScreen - * @property {Function} requestFullScreen - * @property {Function} cancelFullScreen - * @property {String} fullScreenEventName - * @property {String} fullScreenErrorEventName - * @property {String} prefix + * @property {Boolean} supportsFullScreen Return true if full screen API is supported. + * @property {Function} isFullScreen Return true if currently in full screen mode. + * @property {Function} requestFullScreen Make a request to go in full screen mode. + * @property {Function} exitFullScreen Make a request to exit full screen mode. + * @property {Function} cancelFullScreen Deprecated, use exitFullScreen instead. + * @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, isFullScreen: function() { return false; }, requestFullScreen: function() {}, + exitFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: '', - fullScreenErrorEventName: '', - prefix: '' - }, - browserPrefixes = 'webkit moz o ms khtml'.split(' '); + fullScreenErrorEventName: '' + }; // 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) { - case '': - return document.fullScreen; - case 'webkit': - return document.webkitIsFullScreen; - default: - return document[this.prefix + 'FullScreen']; - } + return document.fullscreenElement !== null; }; fullScreenApi.requestFullScreen = function( element ) { - return (this.prefix === '') ? - element.requestFullScreen() : - element[this.prefix + 'RequestFullScreen'](); - + return element.requestFullscreen(); }; - fullScreenApi.cancelFullScreen = function() { - return (this.prefix === '') ? - document.cancelFullScreen() : - document[this.prefix + 'CancelFullScreen'](); + fullScreenApi.exitFullScreen = function() { + document.exitFullscreen(); }; - } else if ( typeof window.ActiveXObject !== "undefined" ){ - // Older IE. Support based on: + 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. 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(){ + fullScreenApi.requestFullScreen = function() { /* global ActiveXObject:true */ - var wscript = new ActiveXObject("WScript.Shell"); + var wscript = new ActiveXObject( "WScript.Shell" ); if ( wscript !== null ) { - wscript.SendKeys("{F11}"); + wscript.SendKeys( "{F11}" ); } 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 ); diff --git a/src/viewer.js b/src/viewer.js index cd4b5614..b768700f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1016,7 +1016,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, $.requestFullScreen( document.body ); } else { - $.cancelFullScreen(); + $.exitFullScreen(); } return this; },