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

Positioning alternates better (m2)

Browse Source
This commit is contained in:
Ian Gilman 2015-02-16 10:18:59 -08:00
parent 725bc36c4e
commit 70e08a02ce
3 changed files with 76 additions and 51 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?

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

@ -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,7 @@
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(); v.addDetails();
}); });
@ -181,15 +181,14 @@
// ---------- // ----------
hitTest: function(pos) { hitTest: function(pos) {
var count = this.pages.length; 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.pages[i].tiledImage; 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
}; };
} }
@ -355,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.pages[this.pageIndex].tiledImage.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) {
@ -395,8 +394,8 @@
return; return;
} }
var item = this.pages[this.pageIndex].tiledImage; var page = this.pages[this.pageIndex];
var box = item.getBounds(); var box = page.getBounds();
this.highlight this.highlight
.style('opacity', 1) .style('opacity', 1)
@ -421,8 +420,8 @@
'cursor': 'pointer' 'cursor': 'pointer'
}); });
var item = this.pages[pageIndex].tiledImage; 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)
@ -436,12 +435,12 @@
goToPage: function(config) { goToPage: function(config) {
var self = this; var self = this;
var itemCount = this.pages.length; var pageCount = this.pages.length;
this.pageIndex = Math.max(0, Math.min(itemCount - 1, config.pageIndex)); 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.pages[this.pageIndex].tiledImage.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;
@ -449,16 +448,16 @@
var box; var box;
if (this.mode === 'book') { if (this.mode === 'book') {
var item; var page;
if (this.pageIndex % 2) { // First in a pair if (this.pageIndex % 2) { // First in a pair
if (this.pageIndex < this.pages.length - 1) { if (this.pageIndex < this.pages.length - 1) {
item = this.pages[this.pageIndex + 1].tiledImage; page = this.pages[this.pageIndex + 1];
width += item.getBounds().width; width += page.getBounds().width;
} }
} else { } else {
if (this.pageIndex > 0) { if (this.pageIndex > 0) {
item = this.pages[this.pageIndex - 1].tiledImage; page = this.pages[this.pageIndex - 1];
box = item.getBounds(); box = page.getBounds();
x -= box.width; x -= box.width;
width += box.width; width += box.width;
} }
@ -489,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.pages[0].tiledImage.getBounds() self.panBounds = self.pages[0].getBounds()
.union(self.pages[itemCount - 1].tiledImage.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;
@ -541,11 +540,10 @@
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, page; var box, page;
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
page = this.pages[i]; page = this.pages[i];
item = page.tiledImage; box = page.getBounds();
box = item.getBounds();
if (i === this.pageIndex) { if (i === this.pageIndex) {
offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y)); offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y));
@ -565,7 +563,6 @@
layout.specs.push({ layout.specs.push({
page: page, page: page,
item: item,
bounds: box bounds: box
}); });
@ -605,7 +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.page.place(spec.bounds.getTopLeft(), spec.bounds.width, config.immediately); spec.page.place(spec.bounds, config.immediately);
} }
}, },

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

@ -4,15 +4,45 @@
// ---------- // ----------
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; 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;
@ -21,20 +51,15 @@
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);
} }
}); });
@ -54,37 +79,42 @@
tileSource: v.tileSource, tileSource: v.tileSource,
success: function(event) { success: function(event) {
v.tiledImage = event.item; v.tiledImage = event.item;
var bounds = self.tiledImage.getBounds(); self.placeDetail(v, true);
self.placeDetail(v, bounds.getTopLeft(), bounds.width, true);
} }
}); });
}); });
}, },
// ---------- // ----------
place: function(position, width, immediately) { getBounds: function() {
return this.bounds.clone();
},
// ----------
place: function(bounds, immediately) {
var self = this; var self = this;
this.tiledImage.setPosition(position, immediately); this.bounds = bounds.clone();
this.tiledImage.setWidth(width, immediately);
this.placeDetail(this.main, immediately);
if (this.details) { if (this.details) {
$.each(this.details, function(i, v) { $.each(this.details, function(i, v) {
if (v.tiledImage) { if (v.tiledImage) {
self.placeDetail(v, position, width, immediately); self.placeDetail(v, immediately);
} }
}); });
} }
}, },
// ---------- // ----------
placeDetail: function(detail, masterPosition, masterWidth, immediately) { placeDetail: function(detail, immediately) {
var position = new OpenSeadragon.Point( var position = new OpenSeadragon.Point(
masterPosition.x + (masterWidth * detail.x), this.bounds.x + (this.bounds.width * detail.x),
masterPosition.y + (masterWidth * detail.y)); this.bounds.y + (this.bounds.width * detail.y));
detail.tiledImage.setPosition(position, immediately); detail.tiledImage.setPosition(position, immediately);
detail.tiledImage.setWidth(masterWidth * detail.width, immediately); detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
} }
}; };