mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-31 15:12:07 +03:00
Code Issues Projects Releases Wiki Activity

better encapsulation of native fullscreen api

Browse Source
This commit is contained in:
thatcher 2013-02-28 14:28:05 -05:00
parent d6cdd4028c
commit a4477cd765
2 changed files with 123 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/openseadragon.js
View File

@ -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

117
src/viewer.js
View File

@ -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 ));