2022-12-08 01:46:25 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>OpenSeadragon Viewer Resizing Demo</title>
|
|
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
2022-12-14 00:49:23 +03:00
|
|
|
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
|
|
|
|
|
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
|
2022-12-08 01:46:25 +03:00
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
.outer-container{
|
|
|
|
|
width:800px;
|
|
|
|
|
height:600px;
|
|
|
|
|
margin-right:20px;
|
|
|
|
|
border: medium gray dashed;
|
|
|
|
|
background-color:beige;
|
|
|
|
|
position:relative;
|
|
|
|
|
display:flex;
|
|
|
|
|
flex-direction:row;
|
|
|
|
|
}
|
|
|
|
|
.inner-container{
|
|
|
|
|
width:800px;
|
|
|
|
|
height:600px;
|
|
|
|
|
border: thin black solid;
|
|
|
|
|
background-color:paleturquoise;
|
|
|
|
|
position:absolute;
|
|
|
|
|
left:50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
.v2-container{
|
|
|
|
|
display:flex;
|
|
|
|
|
flex-direction:row;
|
|
|
|
|
height:400px;
|
|
|
|
|
}
|
|
|
|
|
.narrow{
|
|
|
|
|
width:50px;
|
|
|
|
|
background-color:pink;
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
.wide{
|
|
|
|
|
width:150px;
|
|
|
|
|
background-color:burlywood;
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
.v2-container:not([data-index="1"]) .narrow{
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
|
|
|
|
.v2-container:not([data-index="2"]) .wide{
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
|
|
|
|
#viewer, #viewer2 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
#buttons button{
|
|
|
|
|
width:18em;
|
|
|
|
|
text-align:center;
|
|
|
|
|
margin:5px;
|
|
|
|
|
}
|
|
|
|
|
.layout{
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns:auto 1fr;
|
|
|
|
|
row-gap:10px;
|
|
|
|
|
padding:10px;
|
|
|
|
|
}
|
|
|
|
|
.method{
|
|
|
|
|
border:medium gray solid;
|
|
|
|
|
margin:2px;
|
|
|
|
|
background-color:rgb(240, 240, 240)
|
|
|
|
|
}
|
|
|
|
|
.method.selected{
|
|
|
|
|
border:medium red solid;
|
|
|
|
|
background-color: lightgoldenrodyellow;
|
|
|
|
|
}
|
|
|
|
|
.options{
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns: 50% 50%;
|
|
|
|
|
row-gap:10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="layout">
|
|
|
|
|
<div class="outer-container">
|
|
|
|
|
<div class="inner-container">
|
|
|
|
|
<div id="viewer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="controls">
|
|
|
|
|
<div>
|
|
|
|
|
Simple demo page to show viewer behavior during resizing of the container.
|
|
|
|
|
The viewers' container elements are styled with width and height of 100%,
|
|
|
|
|
with dimensions set by CSS properties on a parent element.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3>Pick options to test:</h3>
|
|
|
|
|
<p>These options apply to both of the demo viewers on the left (top and bottom).</p>
|
|
|
|
|
<div class="options">
|
|
|
|
|
<div class="method logic-method selected" data-value="0">
|
|
|
|
|
<pre>Use v3.1 resize logic</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method logic-method" data-value="1">
|
|
|
|
|
<pre>Use new resize logic</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="method listener-method selected" data-value="0">
|
|
|
|
|
<pre>Use polling</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method listener-method" data-value="1">
|
|
|
|
|
<pre>Use ResizeObserver</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="method preserve-method selected" data-value="0">
|
|
|
|
|
<pre>preserveImageSizeOnResize: false</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method preserve-method" data-value="1">
|
|
|
|
|
<pre>preserveImageSizeOnResize: true</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="method auto-method selected" data-value="1">
|
|
|
|
|
<pre>autoResize: true</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method auto-method" data-value="0">
|
|
|
|
|
<pre>autoResize: false</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Click to resize the viewer:</h3>
|
|
|
|
|
<div id="buttons">
|
|
|
|
|
<div>
|
|
|
|
|
<button>Resize width only</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button>Resize height only</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button>Resize with constant aspect ratio</button>
|
|
|
|
|
</div>
|
2022-12-14 00:49:23 +03:00
|
|
|
<div>
|
|
|
|
|
<button>Toggle resizable inner container</button>
|
2022-12-08 01:46:25 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var viewer = window.v1 = OpenSeadragon({
|
|
|
|
|
id: "viewer",
|
|
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
|
|
|
tileSources: "../data/iiif_2_0_sizes/info.json",
|
|
|
|
|
minZoomImageRatio: 0,
|
|
|
|
|
maxZoomPixelRatio: 10,
|
|
|
|
|
visibilityRatio:1.0,
|
|
|
|
|
constrainDuringPan:true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var _onViewerResize = viewer._onViewerResize;
|
|
|
|
|
var _origViewerResize = viewer._origViewerResize;
|
|
|
|
|
|
2022-12-14 00:49:23 +03:00
|
|
|
updateViewer();
|
2022-12-08 01:46:25 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var actions = ['Resize width only', 'Resize height only', 'Resize with constant aspect ratio']
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var buttons=$('#buttons button').on('click',function(){
|
|
|
|
|
switch($(this).text()){
|
|
|
|
|
case 'Resize width only': resizeWidth(this); break;
|
|
|
|
|
case 'Resize height only': resizeHeight(this); break;
|
|
|
|
|
case 'Resize with constant aspect ratio': resizeBoth(this); break;
|
2022-12-14 00:49:23 +03:00
|
|
|
case 'Toggle resizable inner container': toggleResizable(this); break;
|
2022-12-08 01:46:25 +03:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2022-12-14 00:49:23 +03:00
|
|
|
function updateViewer(){
|
|
|
|
|
viewer._onViewerResize = !!parseInt($('.logic-method.selected').data('value')) ? _onViewerResize : _origViewerResize;
|
2022-12-08 01:46:25 +03:00
|
|
|
|
2022-12-14 00:49:23 +03:00
|
|
|
viewer.preserveImageSizeOnResize = !!parseInt($('.preserve-method.selected').data('value'));
|
2022-12-08 01:46:25 +03:00
|
|
|
|
2022-12-14 00:49:23 +03:00
|
|
|
viewer.autoResize = !!parseInt($('.auto-method.selected').data('value'));
|
2022-12-08 01:46:25 +03:00
|
|
|
|
|
|
|
|
var useResizeObserver=!!parseInt($('.listener-method.selected').data('value'));
|
|
|
|
|
if(useResizeObserver){
|
|
|
|
|
if(viewer._resizeObserver && viewer._autoResizePolling){
|
|
|
|
|
viewer._resizeObserver.observe(viewer.container);
|
2022-12-14 00:49:23 +03:00
|
|
|
viewer._autoResizePolling = false;
|
2022-12-08 01:46:25 +03:00
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if(viewer._resizeObserver && !viewer._autoResizePolling){
|
|
|
|
|
viewer._resizeObserver.observe(viewer.container);
|
2022-12-14 00:49:23 +03:00
|
|
|
viewer._autoResizePolling = true;
|
2022-12-08 01:46:25 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$('.logic-method').on('click',function(){
|
|
|
|
|
$('.logic-method').removeClass('selected');
|
|
|
|
|
$(this).addClass('selected');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.preserve-method').on('click',function(){
|
|
|
|
|
$('.preserve-method').removeClass('selected');
|
|
|
|
|
$(this).addClass('selected');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.auto-method').on('click',function(){
|
|
|
|
|
$('.auto-method').removeClass('selected');
|
|
|
|
|
$(this).addClass('selected');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(!window.ResizeObserver){
|
|
|
|
|
$('.listener-method[data-value=1]').text('ResizeObserver not support in your browser').addClass('invalid');
|
|
|
|
|
}
|
|
|
|
|
$('.listener-method').on('click',function(){
|
|
|
|
|
$('.listener-method').removeClass('selected');
|
|
|
|
|
if(!$(this).hasClass('invalid')) $(this).addClass('selected');
|
|
|
|
|
})
|
|
|
|
|
|
2022-12-14 00:49:23 +03:00
|
|
|
$('.method').on('click',updateViewer);
|
2022-12-08 01:46:25 +03:00
|
|
|
|
|
|
|
|
var container = $('.inner-container');
|
|
|
|
|
function resizeWidth(b){
|
|
|
|
|
if(container.height() !== 600) return;
|
|
|
|
|
if(container.width()==800){
|
|
|
|
|
container.width(600);
|
|
|
|
|
$('#buttons button').prop('disabled', true);
|
|
|
|
|
$(b).prop('disabled', false);
|
|
|
|
|
} else {
|
|
|
|
|
container.width(800);
|
|
|
|
|
$('#buttons button').prop('disabled', false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function resizeHeight(b){
|
|
|
|
|
if(container.width() !== 800) return;
|
|
|
|
|
if(container.height()==600){
|
|
|
|
|
container.height(450);
|
|
|
|
|
$('#buttons button').prop('disabled', true);
|
|
|
|
|
$(b).prop('disabled', false);
|
|
|
|
|
} else {
|
|
|
|
|
container.height(600);
|
|
|
|
|
$('#buttons button').prop('disabled', false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function resizeBoth(b){
|
|
|
|
|
if(container.height()==600){
|
|
|
|
|
container.width(600);
|
|
|
|
|
container.height(450);
|
|
|
|
|
$('#buttons button').prop('disabled', true);
|
|
|
|
|
$(b).prop('disabled', false);
|
|
|
|
|
} else {
|
|
|
|
|
container.width(800);
|
|
|
|
|
container.height(600);
|
|
|
|
|
$('#buttons button').prop('disabled', false);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-12-14 00:49:23 +03:00
|
|
|
function toggleResizable(b){
|
|
|
|
|
if(container.isResizable){
|
|
|
|
|
container.isResizable = false;
|
|
|
|
|
container.resizable('destroy');
|
|
|
|
|
container.width(800);
|
|
|
|
|
container.height(600);
|
|
|
|
|
$('#buttons button').prop('disabled', false);
|
|
|
|
|
} else {
|
|
|
|
|
container.isResizable = true;
|
|
|
|
|
// container.resizable({containment:"parent", maxWidth: 800, maxHeight: 600,});
|
|
|
|
|
container.resizable();
|
|
|
|
|
$('#buttons button').prop('disabled', true);
|
|
|
|
|
container.width(800);
|
|
|
|
|
container.height(600);
|
|
|
|
|
$(b).prop('disabled', false);
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-12-08 01:46:25 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
