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

First version of m2 POC

Browse Source
This commit is contained in:
Ian Gilman 2015-01-08 13:22:23 -08:00
parent 56cd480736
commit c3d9b102c5
2 changed files with 294 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
test/demo/m2/index.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>Mirador POC</title>
<script type="text/javascript" src='../../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
<script src="js/main.js"></script>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
background: #eee;
}
.nav {
display: inline-block;
margin-left: 50px;
}
.active {
background: #ddf;
}
.hidden {
visibility: hidden;
}
.openseadragon1 {
position: absolute;
left: 0;
top: 30px;
right: 0;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<div class="header">
<button class="thumbs">Thumbnails</button>
<button class="scroll">Scroll</button>
<button class="book">Book</button>
<button class="page">Page</button>
<div class="nav">
<button class="previous">Previous</button>
<button class="next">Next</button>
</div>
</div>
<div id="contentDiv" class="openseadragon1"></div>
</body>
</html>

239
test/demo/m2/js/main.js Normal file
View File

@ -0,0 +1,239 @@
/* globals $, App */
(function() {
// ----------
window.App = {
// ----------
init: function() {
var self = this;
var count = 50;
this.mode = 'none';
this.pageBuffer = 0.05;
this.page = 0;
this.modeNames = [
'thumbs',
'scroll',
'book',
'page'
];
var tileSource = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
};
var tileSources = [];
for (var i = 0; i < count; i++) {
tileSources.push(tileSource);
}
this.viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../../build/openseadragon/images/",
tileSources: tileSources
});
this.viewer.addHandler('open', function() {
self.setMode('thumbs');
});
$.each(this.modeNames, function(i, v) {
$('.' + v).click(function() {
self.setMode(v);
});
});
$('.next').click(function() {
var page = self.page + (self.mode === 'book' ? 2 : 1);
if (self.mode === 'book' && page % 2 === 0 && page !== 0) {
page --;
}
self.goToPage(page);
});
$('.previous').click(function() {
var page = self.page - (self.mode === 'book' ? 2 : 1);
if (self.mode === 'book' && page % 2 === 0 && page !== 0) {
page --;
}
self.goToPage(page);
});
this.update();
},
// ----------
update: function() {
var self = this;
$('.nav').toggle(this.mode === 'book' || this.mode === 'page');
$('.previous').toggleClass('hidden', this.page <= 0);
$('.next').toggleClass('hidden', this.page >= this.viewer.world.getItemCount() - 1);
$.each(this.modeNames, function(i, v) {
$('.' + v).toggleClass('active', v === self.mode);
});
},
// ----------
setMode: function(mode) {
if (this.mode === mode) {
return;
}
this.mode = mode;
if (this.mode === 'thumbs') {
this.doThumbnails();
}
if (this.mode === 'scroll') {
this.doScroll();
}
if (this.mode === 'book') {
this.doBook();
}
if (this.mode === 'page') {
this.doPage();
}
this.update();
},
// ----------
goToPage: function(page) {
if (page < 0 || page >= this.viewer.world.getItemCount()) {
return;
}
this.page = page;
var bounds = this.viewer.world.getItemAt(this.page).getBounds();
var x = bounds.x;
var y = bounds.y;
var width = bounds.width;
var height = bounds.height;
if (this.mode === 'book') {
var item;
if (this.page % 2) { // First in a pair
item = this.viewer.world.getItemAt(this.page + 1);
if (item) {
width += item.getBounds().width;
}
} else {
item = this.viewer.world.getItemAt(this.page - 1);
if (item) {
var box = item.getBounds();
x -= width;
width += box.width;
}
}
}
x -= this.pageBuffer;
y -= this.pageBuffer;
width += (this.pageBuffer * 2);
height += (this.pageBuffer * 2);
this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height));
this.update();
},
// ----------
doLayout: function(config) {
var count = this.viewer.world.getItemCount();
var x = 0;
var y = 0;
var item;
for (var i = 0; i < count; i++) {
item = this.viewer.world.getItemAt(i);
item.setPosition(new OpenSeadragon.Point(x, y));
if (config.columns && i % config.columns === config.columns - 1) {
x = 0;
y += item.getBounds().height + config.buffer;
} else {
if (!config.book || i % 2 === 0) {
x += config.buffer;
}
x += 1;
}
}
},
// ----------
doThumbnails: function() {
var viewerWidth = $(this.viewer.element).width();
var viewerHeight = $(this.viewer.element).height();
var columns = Math.floor(viewerWidth / 150);
var buffer = 0.2;
this.doLayout({
columns: columns,
buffer: buffer
});
var width = columns + (buffer * (columns + 1));
var height = width * (viewerHeight / viewerWidth);
this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(-buffer, -buffer, width, height));
},
// ----------
doScroll: function() {
var viewerWidth = $(this.viewer.element).width();
var viewerHeight = $(this.viewer.element).height();
var buffer = 0.05;
this.doLayout({
buffer: buffer
});
var height = this.viewer.world.getItemAt(0).getBounds().height;
height += buffer * 2;
var width = height * (viewerWidth / viewerHeight);
this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(-buffer, -buffer, width, height));
},
// ----------
doBook: function() {
this.doLayout({
buffer: 0.2,
book: true
});
this.goToPage(this.page);
},
// ----------
doPage: function() {
this.doLayout({
buffer: 2
});
this.goToPage(this.page);
}
};
// ----------
$(document).ready(function() {
App.init();
});
})();