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

Merge pull request #256 from avandecreme/fullscreen

Browse Source 
Recenter the image after switching fullscreen mode. #62 and #170
This commit is contained in:
iangilman 2013-11-11 10:07:44 -08:00
commit d982035b64
6 changed files with 425 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/fullscreen.js
View File

@ -72,6 +72,7 @@
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
fullScreenErrorEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
@ -95,6 +96,7 @@
// 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) {

56
src/openseadragon.js
View File

@ -900,7 +900,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
/**
* Determines the pages current scroll position.
* Determines the page's current scroll position.
* @function
* @name OpenSeadragon.getPageScroll
* @returns {Point}
@ -931,14 +931,64 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
);
};
} else {
$.getPageScroll = function(){
// We can't reassign the function yet, as there was no scroll.
return new $.Point(0,0);
};
}
return $.getPageScroll();
},
/**
* Set the page scroll position.
* @function
* @name OpenSeadragon.getPageScroll
* @returns {Point}
*/
setPageScroll: function( scroll ) {
if ( typeof ( window.scrollTo ) !== "undefined" ) {
$.setPageScroll = function( scroll ) {
window.scrollTo( scroll.x, scroll.y );
};
} else {
var originalScroll = $.getPageScroll();
if ( originalScroll.x === scroll.x &&
originalScroll.y === scroll.y ) {
// We are already correctly positioned and there
// is no way to detect the correct method.
return;
}
document.body.scrollLeft = scroll.x;
document.body.scrollTop = scroll.y;
var currentScroll = $.getPageScroll();
if ( currentScroll.x !== originalScroll.x &&
currentScroll.y !== originalScroll.y ) {
$.setPageScroll = function( scroll ) {
document.body.scrollLeft = scroll.x;
document.body.scrollTop = scroll.y;
};
return;
}
document.documentElement.scrollLeft = scroll.x;
document.documentElement.scrollTop = scroll.y;
currentScroll = $.getPageScroll();
if ( currentScroll.x !== originalScroll.x &&
currentScroll.y !== originalScroll.y ) {
$.setPageScroll = function( scroll ) {
document.documentElement.scrollLeft = scroll.x;
document.documentElement.scrollTop = scroll.y;
};
return;
}
// We can't find anything working, so we do nothing.
$.setPageScroll = function( scroll ) {
};
}
return $.setPageScroll( scroll );
},
/**
* Determines the size of the browsers window.

248
src/viewer.js
View File

@ -659,27 +659,44 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
var body = document.body,
bodyStyle = body.style,
docStyle = document.documentElement.style,
canvasStyle = this.canvas.style,
_this = this,
oldBounds,
newBounds,
viewer,
hash,
nodes,
i;
//dont bother modifying the DOM if we are already in full page mode.
if ( fullPage == this.isFullPage() ) {
return;
return this;
}
var fullPageEventArgs = {
fullPage: fullPage,
preventDefaultAction: false
};
this.raiseEvent( 'pre-full-page', fullPageEventArgs );
if ( fullPageEventArgs.preventDefaultAction ) {
return this;
}
if ( fullPage ) {
this.bodyOverflow = bodyStyle.overflow;
this.docOverflow = docStyle.overflow;
bodyStyle.overflow = "hidden";
docStyle.overflow = "hidden";
this.elementSize = $.getElementSize( this.element );
this.pageScroll = $.getPageScroll();
this.elementMargin = this.element.style.margin;
this.element.style.margin = "0";
this.elementPadding = this.element.style.padding;
this.element.style.padding = "0";
this.bodyMargin = bodyStyle.margin;
this.docMargin = docStyle.margin;
bodyStyle.margin = "0";
docStyle.margin = "0";
this.bodyPadding = bodyStyle.padding;
this.docPadding = docStyle.padding;
bodyStyle.padding = "0";
docStyle.padding = "0";
this.bodyWidth = bodyStyle.width;
this.bodyHeight = bodyStyle.height;
@ -719,36 +736,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
$.addClass( this.element, 'fullpage' );
body.appendChild( this.element );
if( $.supportsFullScreen ){
THIS[ this.hash ].onfullscreenchange = function() {
/*
fullscreenchange events don't include the new fullscreen status so we need to
retrieve the current status from the fullscreen API. See:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/fullscreenchange
*/
if( $.isFullScreen() ){
_this.setFullPage( true );
} else {
_this.setFullPage( false );
}
};
$.requestFullScreen( document.body );
// The target of the event is always the document,
// but it is possible to retrieve the fullscreen element through the API
// 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 = (
@ -761,26 +750,20 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
// mouse will be inside container now
$.delegate( this, onContainerEnter )( {} );
} else {
if( $.supportsFullScreen ){
document.removeEventListener(
$.fullScreenEventName,
THIS[ this.hash ].onfullscreenchange
);
$.cancelFullScreen( document );
}
this.element.style.margin = this.elementMargin;
this.element.style.padding = this.elementPadding;
bodyStyle.overflow = this.bodyOverflow;
docStyle.overflow = this.docOverflow;
bodyStyle.margin = this.bodyMargin;
docStyle.margin = this.docMargin;
bodyStyle.padding = this.bodyPadding;
docStyle.padding = this.docPadding;
bodyStyle.width = this.bodyWidth;
bodyStyle.height = this.bodyHeight;
canvasStyle.backgroundColor = "";
canvasStyle.color = "";
body.removeChild( this.element );
nodes = this.previousBody.length;
for ( i = 0; i < nodes; i++ ) {
@ -801,69 +784,111 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
//Make sure the user has some ability to style the toolbar based
//on the mode
$.removeClass( this.toolbar.element, 'fullpage' );
//this.toolbar.element.style.position = 'relative';
this.toolbar.parentNode.insertBefore(
this.toolbar.element,
this.toolbar.nextSibling
);
delete this.toolbar.parentNode;
delete this.toolbar.nextSibling;
//this.container.style.top = 'auto';
}
this.element.style.width = THIS[ this.hash ].prevElementWidth;
this.element.style.height = THIS[ this.hash ].prevElementHeight;
// After exiting fullPage or fullScreen, it can take some time
// before the browser can actually set the scroll.
var restoreScrollCounter = 0;
var restoreScroll = function() {
$.setPageScroll( _this.pageScroll );
var pageScroll = $.getPageScroll();
restoreScrollCounter++;
if ( restoreScrollCounter < 10 &&
pageScroll.x !== _this.pageScroll.x ||
pageScroll.y !== _this.pageScroll.y ) {
$.requestAnimationFrame( restoreScroll );
}
};
$.requestAnimationFrame( restoreScroll );
THIS[ this.hash ].fullPage = false;
// mouse will likely be outside now
$.delegate( this, onContainerExit )( { } );
}
this.raiseEvent( 'fullpage', { fullpage: fullPage } );
if ( this.viewport ) {
oldBounds = this.viewport.getBounds();
this.viewport.resize( THIS[ this.hash ].prevContainerSize );
newBounds = this.viewport.getBounds();
if ( fullPage ) {
THIS[ this.hash ].fsBoundsDelta = new $.Point(
newBounds.width / oldBounds.width,
newBounds.height / oldBounds.height
);
} else {
this.viewport.update();
this.viewport.zoomBy(
Math.max(
THIS[ this.hash ].fsBoundsDelta.x,
THIS[ this.hash ].fsBoundsDelta.y
),
null,
true
);
//Ensures that if multiple viewers are on a page, the viewers that
//were hidden during fullpage are 'reopened'
for( hash in VIEWERS ){
viewer = VIEWERS[ hash ];
if( viewer !== this && viewer != this.navigator ){
viewer.open( viewer.source );
if( viewer.navigator ){
viewer.navigator.open( viewer.source );
}
}
}
}
THIS[ this.hash ].forceRedraw = true;
updateOnce( this );
this.raiseEvent( 'full-page', { fullPage: fullPage } );
}
return this;
},
/**
* Toggle full screen mode if supported. Toggle full page mode otherwise.
* @function
* @name OpenSeadragon.Viewer.prototype.setFullScreen
* @param {Boolean} fullScreen
* If true, enter full screen mode. If false, exit full screen mode.
* @return {OpenSeadragon.Viewer} Chainable.
*/
setFullScreen: function( fullScreen ) {
var _this = this;
if ( !$.supportsFullScreen ) {
return this.setFullPage( fullScreen );
}
if ( $.isFullScreen() === fullScreen ) {
return this;
}
var fullScreeEventArgs = {
fullScreen: fullScreen,
preventDefaultAction: false
};
this.raiseEvent( 'pre-full-screen', fullScreeEventArgs );
if ( fullScreeEventArgs.preventDefaultAction ) {
return this;
}
if ( fullScreen ) {
this.setFullPage( true );
// If the full page mode is not actually entered, we need to prevent
// the full screen mode.
if ( !this.isFullPage() ) {
return this;
}
this.fullPageStyleWidth = this.element.style.width;
this.fullPageStyleHeight = this.element.style.height;
this.element.style.width = '100%';
this.element.style.height = '100%';
var onFullScreenChange = function() {
var isFullScreen = $.isFullScreen();
if ( !isFullScreen ) {
$.removeEvent( document, $.fullScreenEventName, onFullScreenChange );
$.removeEvent( document, $.fullScreenErrorEventName, onFullScreenChange );
_this.setFullPage( false );
if ( _this.isFullPage() ) {
_this.element.style.width = _this.fullPageStyleWidth;
_this.element.style.height = _this.fullPageStyleHeight;
}
}
_this.raiseEvent( 'full-screen', { fullScreen: isFullScreen } );
};
$.addEvent( document, $.fullScreenEventName, onFullScreenChange );
$.addEvent( document, $.fullScreenErrorEventName, onFullScreenChange );
$.requestFullScreen( document.body );
} else {
$.cancelFullScreen();
}
return this;
},
/**
* @function
@ -988,7 +1013,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
beginZoomingOutHandler = $.delegate( this, beginZoomingOut ),
doSingleZoomOutHandler = $.delegate( this, doSingleZoomOut ),
onHomeHandler = $.delegate( this, onHome ),
onFullPageHandler = $.delegate( this, onFullPage ),
onFullScreenHandler = $.delegate( this, onFullScreen ),
onFocusHandler = $.delegate( this, onFocus ),
onBlurHandler = $.delegate( this, onBlur ),
navImages = this.navImages,
@ -1063,7 +1088,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
srcGroup: resolveUrl( this.prefixUrl, navImages.fullpage.GROUP ),
srcHover: resolveUrl( this.prefixUrl, navImages.fullpage.HOVER ),
srcDown: resolveUrl( this.prefixUrl, navImages.fullpage.DOWN ),
onRelease: onFullPageHandler,
onRelease: onFullScreenHandler,
onFocus: onFocusHandler,
onBlur: onBlurHandler
}));
@ -1633,8 +1658,11 @@ function updateOnce( viewer ) {
containerSize = _getSafeElemSize( viewer.container );
if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
// maintain image position
viewer.viewport.resize( containerSize, true );
var oldBounds = viewer.viewport.getBounds();
var oldCenter = viewer.viewport.getCenter();
resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
THIS[ viewer.hash ].prevContainerSize = containerSize;
THIS[ viewer.hash ].forceRedraw = true;
}
animated = viewer.viewport.update();
@ -1675,7 +1703,30 @@ function updateOnce( viewer ) {
//viewer.profiler.endUpdate();
}
// This function resizes the viewport and recenters the image
// as it was before resizing.
// TODO: better adjust width and height. The new width and height
// should depend on the image dimensions and on the dimensions
// of the viewport before and after switching mode.
function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter ) {
var viewport = viewer.viewport;
viewport.resize( containerSize, true );
// We try to remove blanks as much as possible
var imageHeight = 1 / viewer.source.aspectRatio;
var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
var newHeight = oldBounds.height <= imageHeight ?
oldBounds.height : imageHeight;
var newBounds = new $.Rect(
oldCenter.x - ( newWidth / 2.0 ),
oldCenter.y - ( newHeight / 2.0 ),
newWidth,
newHeight
);
viewport.fitBounds( newBounds, true );
}
///////////////////////////////////////////////////////////////////////////////
// Navigation Controls
@ -1765,8 +1816,13 @@ function onHome() {
}
function onFullPage() {
this.setFullPage( !this.isFullPage() );
function onFullScreen() {
if ( this.isFullPage() && !$.isFullScreen() ) {
// Is fullPage but not fullScreen
this.setFullPage( false );
} else {
this.setFullScreen( !this.isFullPage() );
}
// correct for no mouseout event on change
if ( this.buttons ) {
this.buttons.emulateExit();

64
test/basic.js
View File

@ -174,22 +174,80 @@
});
// ----------
asyncTest('Fullscreen', function() {
asyncTest('FullPage', function() {
viewer.addHandler("open", function () {
ok(!viewer.isFullPage(), 'Started out not fullpage');
ok(!$(viewer.element).hasClass('fullpage'),
'No fullpage class on div');
viewer.setFullPage(true);
var checkEnteringPreFullPage = function(event) {
viewer.removeHandler('pre-full-page', checkEnteringPreFullPage);
ok(event.fullPage, 'Switching to fullpage');
ok(!viewer.isFullPage(), 'Not yet fullpage');
};
var checkEnteringFullPage = function(event) {
viewer.removeHandler('full-page', checkEnteringFullPage);
ok(event.fullPage, 'Switched to fullpage');
ok(viewer.isFullPage(), 'Enabled fullpage');
ok($(viewer.element).hasClass('fullpage'),
'Fullpage class added to div');
viewer.setFullPage(false);
var checkExitingPreFullPage = function(event) {
viewer.removeHandler('pre-full-page', checkExitingPreFullPage);
ok(!event.fullPage, 'Exiting fullpage');
ok(viewer.isFullPage(), 'Still fullpage');
};
var checkExitingFullPage = function(event) {
viewer.removeHandler('full-page', checkExitingFullPage);
ok(!event.fullPage, 'Exiting fullpage');
ok(!viewer.isFullPage(), 'Disabled fullpage');
ok(!$(viewer.element).hasClass('fullpage'),
'Fullpage class removed from div');
start();
};
viewer.addHandler("pre-full-page", checkExitingPreFullPage);
viewer.addHandler("full-page", checkExitingFullPage);
viewer.setFullPage(false);
};
viewer.addHandler("pre-full-page", checkEnteringPreFullPage);
viewer.addHandler("full-page", checkEnteringFullPage);
viewer.setFullPage(true);
});
viewer.open('/test/data/testpattern.dzi');
});
asyncTest('FullScreen', function() {
if (!OpenSeadragon.supportsFullScreen) {
expect(0);
start();
return;
}
viewer.addHandler("open", function () {
ok(!OpenSeadragon.isFullScreen(), 'Started out not fullscreen');
var checkEnteringPreFullScreen = function(event) {
viewer.removeHandler('pre-full-screen', checkEnteringPreFullScreen);
ok(event.fullScreen, 'Switching to fullscreen');
ok(!OpenSeadragon.isFullScreen(), 'Not yet fullscreen');
};
// The fullscreen mode is always denied during tests so we are
// exiting directly.
var checkExitingFullScreen = function(event) {
viewer.removeHandler('full-screen', checkExitingFullScreen);
ok(!event.fullScreen, 'Exiting fullscreen');
ok(!OpenSeadragon.isFullScreen(), 'Disabled fullscreen');
start();
};
viewer.addHandler("pre-full-screen", checkEnteringPreFullScreen);
viewer.addHandler("full-screen", checkExitingFullScreen);
viewer.setFullScreen(true);
});
viewer.open('/test/data/testpattern.dzi');

128
test/polyfills.js Normal file
View File

@ -0,0 +1,128 @@
/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
( function() {
module( 'Polyfills', {
setup: function() {
testLog.reset();
}
} );
// ----------
test( 'pageScroll', function() {
// Setup
var origWidth = $( "body" ).width(),
origHeight = $( "body" ).height();
$( "body" ).width( origWidth + 10000 );
$( "body" ).height( origHeight + 10000 );
$( document ).scrollLeft( 0 );
$( document ).scrollTop( 0 );
// End setup
// Test get
var originalGetPageScroll = OpenSeadragon.getPageScroll;
var scroll = OpenSeadragon.getPageScroll();
equal( scroll.x, 0, "Scroll should be 0 at beginning." );
equal( scroll.y, 0, "Scroll should be 0 at beginning." );
// If window.pageXOffset is not supported, the getPageScroll method should
// not have been redefined
if ( typeof ( window.pageXOffset ) != "number" ) {
equal( originalGetPageScroll, OpenSeadragon.getPageScroll,
"OpenSeadragon.getPageScroll must not be redefined when on 0,0" +
" and window API is not supported." );
} else {
notEqual( originalGetPageScroll, OpenSeadragon.getPageScroll,
"OpenSeadragon.getPageScroll must be redefined when window API " +
"is supported." );
}
$( document ).scrollLeft( 200 );
$( document ).scrollTop( 100 );
scroll = originalGetPageScroll();
equal( scroll.x, 200, "First call to getScroll." );
equal( scroll.y, 100, "First call to getScroll." );
$( document ).scrollLeft( 500 );
$( document ).scrollTop( 600 );
scroll = OpenSeadragon.getPageScroll();
equal( scroll.x, 500, "Second call to getScroll." );
equal( scroll.y, 600, "Second call to getScroll." );
// Test set, must be imperatively be done after tests for get to not
// break them.
var originalSetPageScroll = OpenSeadragon.setPageScroll;
$( document ).scrollLeft( 0 );
$( document ).scrollTop( 0 );
var scroll = new OpenSeadragon.Point( 0, 0 );
OpenSeadragon.setPageScroll( scroll );
equal( $( document ).scrollLeft(), 0, "First call to 0,0 while already on 0,0." );
equal( $( document ).scrollTop(), 0, "First call to 0,0 while already on 0,0." );
// If window.pageXOffset is not supported, the getPageScroll method should
// not have been redefined
if ( typeof ( window.scrollTo ) === "undefined" ) {
equal( originalSetPageScroll, OpenSeadragon.setPageScroll,
"OpenSeadragon.setPageScroll must not be redefined when not moving." );
} else {
notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
"OpenSeadragon.setPageScroll must be redefined when window API is supported." );
}
OpenSeadragon.setPageScroll = originalSetPageScroll;
$( document ).scrollLeft( 100 );
$( document ).scrollTop( 200 );
var scroll = new OpenSeadragon.Point( 100, 200 );
OpenSeadragon.setPageScroll( scroll );
equal( $( document ).scrollLeft(), 100, "First call to 100,200 while already on 100,200." );
equal( $( document ).scrollTop(), 200, "First call to 100,200 while already on 100,200." );
// If window.pageXOffset is not supported, the getPageScroll method should
// not have been redefined
if ( typeof ( window.scrollTo ) === "undefined" ) {
equal( originalSetPageScroll, OpenSeadragon.setPageScroll,
"OpenSeadragon.setPageScroll must not be redefined when not moving." );
} else {
notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
"OpenSeadragon.setPageScroll must be redefined when window API is supported." );
}
OpenSeadragon.setPageScroll = originalSetPageScroll;
$( document ).scrollLeft( 20000 );
$( document ).scrollTop( 20000 );
var actualScrollLeft = $( document ).scrollLeft();
var actualScrollTop = $( document ).scrollTop();
$( document ).scrollLeft( 0 );
$( document ).scrollTop( 0 );
var scroll = new OpenSeadragon.Point( 20000, 20000 );
OpenSeadragon.setPageScroll( scroll );
equal( $( document ).scrollLeft(), actualScrollLeft, "First call to position above limits." );
equal( $( document ).scrollTop(), actualScrollTop, "First call to position above limits." );
notEqual( originalSetPageScroll, OpenSeadragon.setPageScroll,
"Even if outside scroll limits, OpenSeadragon.setPageScroll can be " +
"reassigned on first call." );
var currentSetPageScroll = OpenSeadragon.setPageScroll;
var scroll = new OpenSeadragon.Point( 200, 200 );
OpenSeadragon.setPageScroll( scroll );
equal( $( document ).scrollLeft(), 200, "Second call." );
equal( $( document ).scrollTop(), 200, "Second call." );
equal( currentSetPageScroll, OpenSeadragon.setPageScroll,
"OpenSeadragon.setPageScroll must not be reassigned after first call." );
// Teardown
$( "body" ).width( origWidth );
$( "body" ).height( origHeight );
$( document ).scrollLeft( 0 );
$( document ).scrollTop( 0 );
} );
} )();

4
test/test.html
View File

@ -16,6 +16,10 @@
<script src="/test/lib/jquery.simulate.js"></script>
<script src="/build/openseadragon/openseadragon.min.js"></script>
<script src="/test/test.js"></script>
<!-- Polyfill must be inserted first because it is testing functions
reassignments which could be done by other test. -->
<script src="/test/polyfills.js"></script>
<script src="/test/basic.js"></script>
<script src="/test/navigator.js"></script>
<script src="/test/strings.js"></script>