diff --git a/src/openseadragon.js b/src/openseadragon.js index af41bf6a..9cd7dd49 100644 --- a/src/openseadragon.js +++ b/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 diff --git a/src/viewer.js b/src/viewer.js index c620ccdb..3fe24002 100644 --- a/src/viewer.js +++ b/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 - document.removeEventListener("mozfullscreenchange", this.tmp); - document.removeEventListener("webkitfullscreenchange", this.tmp); + if( $.supportsFullScreen ){ + document.removeEventListener( + $.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 ));