mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-01-31 15:12:07 +03:00
First version of m2 POC
This commit is contained in:
Ian Gilman
parent
56cd480736
commit
c3d9b102c5
55
test/demo/m2/index.html
Normal file
55
test/demo/m2/index.html
Normal 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
239
test/demo/m2/js/main.js
Normal 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();
|
||||
});
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user