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
* Detail images overlaid on the page
* Cropped images
### Maybe
* Alternates: align with default image
* Alternates: wait until tiles have loaded before switching
* Show/hide pages?
* Lazyloading tilesources?

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

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

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

@ -1,17 +1,48 @@
/* global App */
/* global App, $ */
(function() {
// ----------
var component = App.Page = function(config) {
this.label = config.label;
this.tileSource = config.tileSource;
this.alternates = config.alternates;
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;
};
// ----------
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) {
var self = this;
@ -20,24 +51,70 @@
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);
var bounds = tiledImage.getBounds();
App.viewer.world.removeItem(tiledImage);
App.viewer.world.removeItem(this.main.tiledImage);
App.viewer.addTiledImage({
tileSource: tileSource,
x: bounds.x,
y: bounds.y,
height: bounds.height,
tileSource: itemInfo.tileSource,
index: this.pageIndex,
success: function(event) {
self.tiledImage = event.item;
self.setDetail(self.main, itemInfo, event.item);
self.placeDetail(self.main, true);
}
});
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);
}
};