mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +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
* 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?

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

@ -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,7 @@
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();
});
@ -181,15 +181,14 @@
// ----------
hitTest: function(pos) {
var count = this.pages.length;
var item, box;
var page, box;
for (var i = 0; i < count; i++) {
item = this.pages[i].tiledImage;
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
};
}
@ -355,9 +354,9 @@
viewportBounds.y += info.viewportMax * info.scrollFactor;
viewportBounds.height = info.viewportHeight;
var itemBounds = this.pages[this.pageIndex].tiledImage.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) {
@ -395,8 +394,8 @@
return;
}
var item = this.pages[this.pageIndex].tiledImage;
var box = item.getBounds();
var page = this.pages[this.pageIndex];
var box = page.getBounds();
this.highlight
.style('opacity', 1)
@ -421,8 +420,8 @@
'cursor': 'pointer'
});
var item = this.pages[pageIndex].tiledImage;
var box = item.getBounds();
var page = this.pages[pageIndex];
var box = page.getBounds();
this.hover
.style('opacity', 0.3)
@ -436,12 +435,12 @@
goToPage: function(config) {
var self = this;
var itemCount = this.pages.length;
this.pageIndex = Math.max(0, Math.min(itemCount - 1, config.pageIndex));
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.pages[this.pageIndex].tiledImage.getBounds();
var bounds = this.pages[this.pageIndex].getBounds();
var x = bounds.x;
var y = bounds.y;
var width = bounds.width;
@ -449,16 +448,16 @@
var box;
if (this.mode === 'book') {
var item;
var page;
if (this.pageIndex % 2) { // First in a pair
if (this.pageIndex < this.pages.length - 1) {
item = this.pages[this.pageIndex + 1].tiledImage;
width += item.getBounds().width;
page = this.pages[this.pageIndex + 1];
width += page.getBounds().width;
}
} else {
if (this.pageIndex > 0) {
item = this.pages[this.pageIndex - 1].tiledImage;
box = item.getBounds();
page = this.pages[this.pageIndex - 1];
box = page.getBounds();
x -= box.width;
width += box.width;
}
@ -489,8 +488,8 @@
if (self.mode === 'page' || self.mode === 'book') {
self.panBounds = box;
} else if (self.mode === 'scroll') {
self.panBounds = self.pages[0].tiledImage.getBounds()
.union(self.pages[itemCount - 1].tiledImage.getBounds());
self.panBounds = self.pages[0].getBounds()
.union(self.pages[pageCount - 1].getBounds());
self.panBounds.x -= self.pageBuffer;
self.panBounds.y -= self.pageBuffer;
@ -541,11 +540,10 @@
var y = 0;
var offset = new OpenSeadragon.Point();
var rowHeight = 0;
var item, box, page;
var box, page;
for (var i = 0; i < count; i++) {
page = this.pages[i];
item = page.tiledImage;
box = item.getBounds();
box = page.getBounds();
if (i === this.pageIndex) {
offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y));
@ -565,7 +563,6 @@
layout.specs.push({
page: page,
item: item,
bounds: box
});
@ -605,7 +602,7 @@
for (var i = 0; i < config.layout.specs.length; 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) {
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;
@ -21,20 +51,15 @@
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);
}
});
@ -54,37 +79,42 @@
tileSource: v.tileSource,
success: function(event) {
v.tiledImage = event.item;
var bounds = self.tiledImage.getBounds();
self.placeDetail(v, bounds.getTopLeft(), bounds.width, true);
self.placeDetail(v, true);
}
});
});
},
// ----------
place: function(position, width, immediately) {
getBounds: function() {
return this.bounds.clone();
},
// ----------
place: function(bounds, immediately) {
var self = this;
this.tiledImage.setPosition(position, immediately);
this.tiledImage.setWidth(width, immediately);
this.bounds = bounds.clone();
this.placeDetail(this.main, immediately);
if (this.details) {
$.each(this.details, function(i, v) {
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(
masterPosition.x + (masterWidth * detail.x),
masterPosition.y + (masterWidth * detail.y));
this.bounds.x + (this.bounds.width * detail.x),
this.bounds.y + (this.bounds.width * detail.y));
detail.tiledImage.setPosition(position, immediately);
detail.tiledImage.setWidth(masterWidth * detail.width, immediately);
detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
}
};