Update full screen API.

This commit is contained in:
Antoine Vandecreme 2014-03-17 17:01:36 -04:00
parent 13fa798e52
commit 3cfce81705
2 changed files with 70 additions and 53 deletions

View File

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

View File

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