mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 08:36:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #358 from avandecreme/fullscreen-inputs

Browse Source 
Update full screen API.
This commit is contained in:
iangilman 2014-03-27 09:02:16 -07:00
commit dc3eebc144
3 changed files with 94 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.txt
View File

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

174
src/fullscreen.js
View File

@ -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 {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} getFullScreenElement Return the element 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; },
getFullScreenElement: function() { return null; },
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 ) {
// W3C standard
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'];
}
fullScreenApi.getFullScreenElement = function() {
return document.fullscreenElement;
};
fullScreenApi.requestFullScreen = function( element ) {
return (this.prefix === '') ?
element.requestFullScreen() :
element[this.prefix + 'RequestFullScreen']();
return element.requestFullscreen();
};
fullScreenApi.exitFullScreen = function() {
document.exitFullscreen();
};
fullScreenApi.fullScreenEventName = "fullscreenchange";
fullScreenApi.fullScreenErrorEventName = "fullscreenerror";
} else if ( document.msExitFullscreen ) {
// IE 11
fullScreenApi.supportsFullScreen = true;
fullScreenApi.getFullScreenElement = function() {
return document.msFullscreenElement;
};
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() {
return (this.prefix === '') ?
document.cancelFullScreen() :
document[this.prefix + 'CancelFullScreen']();
$.console.error("cancelFullScreen is deprecated. Use exitFullScreen instead.");
fullScreenApi.exitFullScreen();
};
} else if ( typeof window.ActiveXObject !== "undefined" ){
// Older IE. 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(){
/* global ActiveXObject:true */
var wscript = new ActiveXObject("WScript.Shell");
if ( wscript !== null ) {
wscript.SendKeys("{F11}");
}
return false;
};
fullScreenApi.cancelFullScreen = fullScreenApi.requestFullScreen;
}
// export api
$.extend( $, fullScreenApi );

2
src/viewer.js
View File

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