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

Merge pull request #602 from openseadragon/m2

Browse Source 
M2 demo: detail view
This commit is contained in:
Ian Gilman 2015-02-16 10:22:47 -08:00
commit 4e074cde32
3 changed files with 144 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/demo/m2/README.md
View File

@ -10,12 +10,10 @@ http://showcase.iiif.io/viewer/mirador/
## To Do ## To Do
* Detail images overlaid on the page
* Cropped images * Cropped images
### Maybe ### Maybe
* Alternates: align with default image
* Alternates: wait until tiles have loaded before switching * Alternates: wait until tiles have loaded before switching
* Show/hide pages? * Show/hide pages?
* Lazyloading tilesources? * Lazyloading tilesources?

111
test/demo/m2/js/main.js
View File

@ -11,7 +11,7 @@
this.mode = 'none'; this.mode = 'none';
this.pageBuffer = 0.05; this.pageBuffer = 0.05;
this.bigBuffer = 0.2; this.bigBuffer = 0.2;
this.page = 0; this.pageIndex = 0;
this.modeNames = [ this.modeNames = [
'thumbs', 'thumbs',
'scroll', 'scroll',
@ -22,7 +22,7 @@
this.pages = this.createPages(); this.pages = this.createPages();
var tileSources = $.map(this.pages, function(v, i) { var tileSources = $.map(this.pages, function(v, i) {
return v.tileSource; return v.starter.tileSource;
}); });
this.viewer = OpenSeadragon({ this.viewer = OpenSeadragon({
@ -37,7 +37,8 @@
self.$el = $(self.viewer.element); self.$el = $(self.viewer.element);
$.each(self.pages, function(i, v) { $.each(self.pages, function(i, v) {
v.tiledImage = self.viewer.world.getItemAt(i); v.setTiledImage(self.viewer.world.getItemAt(i));
v.addDetails();
}); });
self.setMode({ self.setMode({
@ -50,7 +51,7 @@
if (self.mode === 'scroll') { if (self.mode === 'scroll') {
var result = self.hitTest(self.viewer.viewport.getCenter()); var result = self.hitTest(self.viewer.viewport.getCenter());
if (result) { if (result) {
self.page = result.index; self.pageIndex = result.index;
self.update(); self.update();
} }
} }
@ -116,7 +117,7 @@
if (result) { if (result) {
self.setMode({ self.setMode({
mode: 'page', mode: 'page',
page: result.index pageIndex: result.index
}); });
} }
}); });
@ -155,40 +156,39 @@
// ---------- // ----------
next: function() { next: function() {
var page = this.page + (this.mode === 'book' ? 2 : 1); var pageIndex = this.pageIndex + (this.mode === 'book' ? 2 : 1);
if (this.mode === 'book' && page % 2 === 0 && page !== 0) { if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
page --; pageIndex --;
} }
this.goToPage({ this.goToPage({
page: page pageIndex: pageIndex
}); });
}, },
// ---------- // ----------
previous: function() { previous: function() {
var page = this.page - (this.mode === 'book' ? 2 : 1); var pageIndex = this.pageIndex - (this.mode === 'book' ? 2 : 1);
if (this.mode === 'book' && page % 2 === 0 && page !== 0) { if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
page --; pageIndex --;
} }
this.goToPage({ this.goToPage({
page: page pageIndex: pageIndex
}); });
}, },
// ---------- // ----------
hitTest: function(pos) { hitTest: function(pos) {
var count = this.viewer.world.getItemCount(); var count = this.pages.length;
var item, box; var page, box;
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
item = this.viewer.world.getItemAt(i); page = this.pages[i];
box = item.getBounds(); box = page.getBounds();
if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width && if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width &&
pos.y < box.y + box.height) { pos.y < box.y + box.height) {
return { return {
item: item,
index: i index: i
}; };
} }
@ -222,8 +222,8 @@
var self = this; var self = this;
$('.nav').toggle(this.mode === 'scroll' || this.mode === 'book' || this.mode === 'page'); $('.nav').toggle(this.mode === 'scroll' || this.mode === 'book' || this.mode === 'page');
$('.previous').toggleClass('hidden', this.page <= 0); $('.previous').toggleClass('hidden', this.pageIndex <= 0);
$('.next').toggleClass('hidden', this.page >= this.viewer.world.getItemCount() - 1); $('.next').toggleClass('hidden', this.pageIndex >= this.pages.length - 1);
$.each(this.modeNames, function(i, v) { $.each(this.modeNames, function(i, v) {
$('.' + v).toggleClass('active', v === self.mode); $('.' + v).toggleClass('active', v === self.mode);
@ -235,7 +235,7 @@
this.$alternates = null; this.$alternates = null;
} }
var page = this.pages[this.page]; var page = this.pages[this.pageIndex];
if (page && page.alternates && page.alternates.length) { if (page && page.alternates && page.alternates.length) {
this.$alternates = $('<select>') this.$alternates = $('<select>')
.change(function() { .change(function() {
@ -303,8 +303,8 @@
this.mode = config.mode; this.mode = config.mode;
if (config.page !== undefined) { if (config.pageIndex !== undefined) {
this.page = config.page; // Need to do this before layout this.pageIndex = config.pageIndex; // Need to do this before layout
} }
this.ignoreScroll = true; this.ignoreScroll = true;
@ -354,9 +354,9 @@
viewportBounds.y += info.viewportMax * info.scrollFactor; viewportBounds.y += info.viewportMax * info.scrollFactor;
viewportBounds.height = info.viewportHeight; viewportBounds.height = info.viewportHeight;
var itemBounds = this.viewer.world.getItemAt(this.page).getBounds(); var pageBounds = this.pages[this.pageIndex].getBounds();
var top = itemBounds.y - this.bigBuffer; var top = pageBounds.y - this.bigBuffer;
var bottom = top + itemBounds.height + (this.bigBuffer * 2); var bottom = top + pageBounds.height + (this.bigBuffer * 2);
var normalY; var normalY;
if (top < viewportBounds.y) { if (top < viewportBounds.y) {
@ -394,8 +394,8 @@
return; return;
} }
var item = this.viewer.world.getItemAt(this.page); var page = this.pages[this.pageIndex];
var box = item.getBounds(); var box = page.getBounds();
this.highlight this.highlight
.style('opacity', 1) .style('opacity', 1)
@ -406,8 +406,8 @@
}, },
// ---------- // ----------
updateHover: function(page) { updateHover: function(pageIndex) {
if (page === -1 || this.mode !== 'thumbs') { if (pageIndex === -1 || this.mode !== 'thumbs') {
this.hover.style('opacity', 0); this.hover.style('opacity', 0);
this.$scrollCover.css({ this.$scrollCover.css({
'cursor': 'default' 'cursor': 'default'
@ -420,8 +420,8 @@
'cursor': 'pointer' 'cursor': 'pointer'
}); });
var item = this.viewer.world.getItemAt(page); var page = this.pages[pageIndex];
var box = item.getBounds(); var box = page.getBounds();
this.hover this.hover
.style('opacity', 0.3) .style('opacity', 0.3)
@ -435,12 +435,12 @@
goToPage: function(config) { goToPage: function(config) {
var self = this; var self = this;
var itemCount = this.viewer.world.getItemCount(); var pageCount = this.pages.length;
this.page = Math.max(0, Math.min(itemCount - 1, config.page)); this.pageIndex = Math.max(0, Math.min(pageCount - 1, config.pageIndex));
var viewerWidth = this.$el.width(); var viewerWidth = this.$el.width();
var viewerHeight = this.$el.height(); var viewerHeight = this.$el.height();
var bounds = this.viewer.world.getItemAt(this.page).getBounds(); var bounds = this.pages[this.pageIndex].getBounds();
var x = bounds.x; var x = bounds.x;
var y = bounds.y; var y = bounds.y;
var width = bounds.width; var width = bounds.width;
@ -448,16 +448,16 @@
var box; var box;
if (this.mode === 'book') { if (this.mode === 'book') {
var item; var page;
if (this.page % 2) { // First in a pair if (this.pageIndex % 2) { // First in a pair
item = this.viewer.world.getItemAt(this.page + 1); if (this.pageIndex < this.pages.length - 1) {
if (item) { page = this.pages[this.pageIndex + 1];
width += item.getBounds().width; width += page.getBounds().width;
} }
} else { } else {
item = this.viewer.world.getItemAt(this.page - 1); if (this.pageIndex > 0) {
if (item) { page = this.pages[this.pageIndex - 1];
box = item.getBounds(); box = page.getBounds();
x -= box.width; x -= box.width;
width += box.width; width += box.width;
} }
@ -470,10 +470,10 @@
height += (this.pageBuffer * 2); height += (this.pageBuffer * 2);
if (this.mode === 'scroll') { if (this.mode === 'scroll') {
if (this.page === 0) { if (this.pageIndex === 0) {
x = bounds.x - this.pageBuffer; x = bounds.x - this.pageBuffer;
width = height * (viewerWidth / viewerHeight); width = height * (viewerWidth / viewerHeight);
} else if (this.page === this.viewer.world.getItemCount() - 1) { } else if (this.pageIndex === this.pages.length - 1) {
width = height * (viewerWidth / viewerHeight); width = height * (viewerWidth / viewerHeight);
x = (bounds.x + bounds.width + this.pageBuffer) - width; x = (bounds.x + bounds.width + this.pageBuffer) - width;
} }
@ -488,8 +488,8 @@
if (self.mode === 'page' || self.mode === 'book') { if (self.mode === 'page' || self.mode === 'book') {
self.panBounds = box; self.panBounds = box;
} else if (self.mode === 'scroll') { } else if (self.mode === 'scroll') {
self.panBounds = self.viewer.world.getItemAt(0).getBounds() self.panBounds = self.pages[0].getBounds()
.union(self.viewer.world.getItemAt(itemCount - 1).getBounds()); .union(self.pages[pageCount - 1].getBounds());
self.panBounds.x -= self.pageBuffer; self.panBounds.x -= self.pageBuffer;
self.panBounds.y -= self.pageBuffer; self.panBounds.y -= self.pageBuffer;
@ -535,17 +535,17 @@
specs: [] specs: []
}; };
var count = this.viewer.world.getItemCount(); var count = this.pages.length;
var x = 0; var x = 0;
var y = 0; var y = 0;
var offset = new OpenSeadragon.Point(); var offset = new OpenSeadragon.Point();
var rowHeight = 0; var rowHeight = 0;
var item, box; var box, page;
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
item = this.viewer.world.getItemAt(i); page = this.pages[i];
box = item.getBounds(); box = page.getBounds();
if (i === this.page) { if (i === this.pageIndex) {
offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y)); offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y));
} }
@ -562,7 +562,7 @@
rowHeight = Math.max(rowHeight, box.height); rowHeight = Math.max(rowHeight, box.height);
layout.specs.push({ layout.specs.push({
item: item, page: page,
bounds: box bounds: box
}); });
@ -602,8 +602,7 @@
for (var i = 0; i < config.layout.specs.length; i++) { for (var i = 0; i < config.layout.specs.length; i++) {
spec = config.layout.specs[i]; spec = config.layout.specs[i];
spec.item.setPosition(spec.bounds.getTopLeft(), config.immediately); spec.page.place(spec.bounds, config.immediately);
spec.item.setWidth(spec.bounds.width, config.immediately);
} }
}, },
@ -621,7 +620,7 @@
this.viewer.viewport.fitBounds(box, config.immediately); this.viewer.viewport.fitBounds(box, config.immediately);
} else { } else {
this.goToPage({ this.goToPage({
page: this.page, pageIndex: this.pageIndex,
immediately: config.immediately immediately: config.immediately
}); });
} }

101
test/demo/m2/js/page.js
View File

@ -1,17 +1,48 @@
/* global App */ /* global App, $ */
(function() { (function() {
// ---------- // ----------
var component = App.Page = function(config) { var component = App.Page = function(config) {
this.label = config.label; this.label = config.label;
this.tileSource = config.tileSource;
this.alternates = config.alternates; this.alternates = config.alternates;
this.pageIndex = config.pageIndex; this.pageIndex = config.pageIndex;
this.details = config.details;
if (config.masterWidth && config.masterHeight) {
this.bounds = new OpenSeadragon.Rect(0, 0, config.masterWidth, config.masterHeight);
}
this.starter = {
x: config.x,
y: config.y,
width: config.width,
tileSource: config.tileSource
};
this.main = {};
this.alternateIndex = -1; this.alternateIndex = -1;
}; };
// ---------- // ----------
component.prototype = { component.prototype = {
// ----------
setTiledImage: function(tiledImage) {
this.setDetail(this.main, this.starter, tiledImage);
if (!this.bounds) {
this.bounds = this.main.tiledImage.getBounds();
}
},
// ----------
setDetail: function(detail, info, tiledImage) {
detail.tiledImage = tiledImage;
detail.x = info.x || 0;
detail.y = info.y || 0;
detail.width = info.width || 1;
},
// ---------- // ----------
selectAlternate: function(index) { selectAlternate: function(index) {
var self = this; var self = this;
@ -20,24 +51,70 @@
return; return;
} }
var tileSource = (index === -1 ? this.tileSource : this.alternates[index].tileSource); var itemInfo = (index === -1 ? this.starter : this.alternates[index]);
var tiledImage = App.viewer.world.getItemAt(this.pageIndex); App.viewer.world.removeItem(this.main.tiledImage);
var bounds = tiledImage.getBounds();
App.viewer.world.removeItem(tiledImage);
App.viewer.addTiledImage({ App.viewer.addTiledImage({
tileSource: tileSource, tileSource: itemInfo.tileSource,
x: bounds.x,
y: bounds.y,
height: bounds.height,
index: this.pageIndex, index: this.pageIndex,
success: function(event) { success: function(event) {
self.tiledImage = event.item; self.setDetail(self.main, itemInfo, event.item);
self.placeDetail(self.main, true);
} }
}); });
this.alternateIndex = index; this.alternateIndex = index;
},
// ----------
addDetails: function() {
var self = this;
if (!this.details) {
return;
}
$.each(this.details, function(i, v) {
App.viewer.addTiledImage({
tileSource: v.tileSource,
success: function(event) {
v.tiledImage = event.item;
self.placeDetail(v, true);
}
});
});
},
// ----------
getBounds: function() {
return this.bounds.clone();
},
// ----------
place: function(bounds, immediately) {
var self = this;
this.bounds = bounds.clone();
this.placeDetail(this.main, immediately);
if (this.details) {
$.each(this.details, function(i, v) {
if (v.tiledImage) {
self.placeDetail(v, immediately);
}
});
}
},
// ----------
placeDetail: function(detail, immediately) {
var position = new OpenSeadragon.Point(
this.bounds.x + (this.bounds.width * detail.x),
this.bounds.y + (this.bounds.width * detail.y));
detail.tiledImage.setPosition(position, immediately);
detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
} }
}; };