mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
Ian Gilman
commit
4e074cde32
@ -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?
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user