mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-21 20:56:09 +03:00
Merge pull request #596 from openseadragon/m2
More on m2 demo (alternate images) including a multi-image open() bug fix
This commit is contained in:
Ian Gilman
commit
32fa3fc13f
@ -35,6 +35,7 @@ OPENSEADRAGON CHANGELOG
|
||||
* Rect and Point now have clone functions
|
||||
* New Viewport method for managing homeBounds as well as constraints: setHomeBounds
|
||||
* Viewport.open supports positioning config properties
|
||||
* For multi-image open, drawing isn't started until all tileSources have been opened
|
||||
* Margins option to push the home region in from the edges of the Viewer (#505)
|
||||
* Rect and Point toString() functions are now consistent: rounding values to nearest hundredth
|
||||
* Overlays appear in the DOM immediately on open or addOverlay (#507)
|
||||
|
||||
@ -524,6 +524,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
return;
|
||||
}
|
||||
|
||||
this._opening = true;
|
||||
|
||||
var expected = tileSources.length;
|
||||
var successes = 0;
|
||||
var failures = 0;
|
||||
@ -552,6 +554,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
}
|
||||
|
||||
_this._drawOverlays();
|
||||
_this._opening = false;
|
||||
|
||||
/**
|
||||
* Raised when the viewer has opened and loaded one or more TileSources.
|
||||
@ -566,6 +569,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
// TODO: what if there are multiple sources?
|
||||
_this.raiseEvent( 'open', { source: source } );
|
||||
} else {
|
||||
_this._opening = false;
|
||||
|
||||
/**
|
||||
* Raised when an error occurs loading a TileSource.
|
||||
*
|
||||
@ -655,6 +660,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
return this;
|
||||
}
|
||||
|
||||
this._opening = false;
|
||||
|
||||
if ( this.navigator ) {
|
||||
this.navigator.close();
|
||||
}
|
||||
@ -2794,6 +2801,10 @@ function updateOnce( viewer ) {
|
||||
|
||||
//viewer.profiler.beginUpdate();
|
||||
|
||||
if (viewer._opening) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( viewer.autoResize ) {
|
||||
var containerSize = _getSafeElemSize( viewer.container );
|
||||
if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
|
||||
|
||||
@ -10,11 +10,12 @@ http://showcase.iiif.io/viewer/mirador/
|
||||
|
||||
## To Do
|
||||
|
||||
* Choosing between multiple versions of a page
|
||||
* 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?
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
|
||||
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/page.js"></script>
|
||||
<!-- <script src="js/harvard-tilesources.js"></script> -->
|
||||
<script src="js/openseadragon-svg-overlay.js"></script>
|
||||
<style type="text/css">
|
||||
|
||||
@ -19,16 +19,27 @@
|
||||
'page'
|
||||
];
|
||||
|
||||
this.pages = this.createPages();
|
||||
|
||||
var tileSources = $.map(this.pages, function(v, i) {
|
||||
return v.tileSource;
|
||||
});
|
||||
|
||||
this.viewer = OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../../build/openseadragon/images/",
|
||||
autoResize: false,
|
||||
showHomeControl: false,
|
||||
tileSources: this.getTileSources()
|
||||
tileSources: tileSources
|
||||
});
|
||||
|
||||
this.viewer.addHandler('open', function() {
|
||||
self.$el = $(self.viewer.element);
|
||||
|
||||
$.each(self.pages, function(i, v) {
|
||||
v.tiledImage = self.viewer.world.getItemAt(i);
|
||||
});
|
||||
|
||||
self.setMode({
|
||||
mode: 'thumbs',
|
||||
immediately: true
|
||||
@ -40,6 +51,7 @@
|
||||
var result = self.hitTest(self.viewer.viewport.getCenter());
|
||||
if (result) {
|
||||
self.page = result.index;
|
||||
self.update();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -93,11 +105,13 @@
|
||||
})
|
||||
.mousemove(function(event) {
|
||||
var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
|
||||
pixel.y -= self.$scrollCover.position().top;
|
||||
var result = self.hitTest(self.viewer.viewport.pointFromPixel(pixel));
|
||||
self.updateHover(result ? result.index : -1);
|
||||
})
|
||||
.click(function(event) {
|
||||
var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
|
||||
pixel.y -= self.$scrollCover.position().top;
|
||||
var result = self.hitTest(self.viewer.viewport.pointFromPixel(pixel));
|
||||
if (result) {
|
||||
self.setMode({
|
||||
@ -214,6 +228,37 @@
|
||||
$.each(this.modeNames, function(i, v) {
|
||||
$('.' + v).toggleClass('active', v === self.mode);
|
||||
});
|
||||
|
||||
// alternates menu
|
||||
if (this.$alternates) {
|
||||
this.$alternates.remove();
|
||||
this.$alternates = null;
|
||||
}
|
||||
|
||||
var page = this.pages[this.page];
|
||||
if (page && page.alternates && page.alternates.length) {
|
||||
this.$alternates = $('<select>')
|
||||
.change(function() {
|
||||
page.selectAlternate(parseInt(self.$alternates.val(), 10));
|
||||
})
|
||||
.appendTo('.nav');
|
||||
|
||||
$('<option>')
|
||||
.attr('value', -1)
|
||||
.text(page.label || 'Default')
|
||||
.appendTo(self.$alternates);
|
||||
|
||||
$.each(page.alternates, function(i, v) {
|
||||
if (v.label) {
|
||||
$('<option>')
|
||||
.attr('value', i)
|
||||
.text(v.label)
|
||||
.appendTo(self.$alternates);
|
||||
}
|
||||
});
|
||||
|
||||
this.$alternates.val(page.alternateIndex);
|
||||
}
|
||||
},
|
||||
|
||||
// ----------
|
||||
@ -413,7 +458,7 @@
|
||||
item = this.viewer.world.getItemAt(this.page - 1);
|
||||
if (item) {
|
||||
box = item.getBounds();
|
||||
x -= width;
|
||||
x -= box.width;
|
||||
width += box.width;
|
||||
}
|
||||
}
|
||||
@ -583,10 +628,14 @@
|
||||
},
|
||||
|
||||
// ----------
|
||||
getTileSources: function() {
|
||||
createPages: function() {
|
||||
var self = this;
|
||||
|
||||
if (this.tileSources) {
|
||||
return $.map(this.tileSources.slice(0, this.maxImages), function(v, i) {
|
||||
return new OpenSeadragon.IIIFTileSource(v);
|
||||
return new self.Page($.extend({
|
||||
pageIndex: i
|
||||
}, v));
|
||||
});
|
||||
}
|
||||
|
||||
@ -654,12 +703,15 @@
|
||||
}
|
||||
];
|
||||
|
||||
var outputs = [];
|
||||
var pages = [];
|
||||
for (var i = 0; i < this.maxImages; i++) {
|
||||
outputs.push(inputs[Math.floor(Math.random() * inputs.length)]);
|
||||
pages.push(new this.Page({
|
||||
pageIndex: i,
|
||||
tileSource: inputs[Math.floor(Math.random() * inputs.length)]
|
||||
}));
|
||||
}
|
||||
|
||||
return outputs;
|
||||
return pages;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
44
test/demo/m2/js/page.js
Normal file
44
test/demo/m2/js/page.js
Normal file
@ -0,0 +1,44 @@
|
||||
/* 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.alternateIndex = -1;
|
||||
};
|
||||
|
||||
// ----------
|
||||
component.prototype = {
|
||||
// ----------
|
||||
selectAlternate: function(index) {
|
||||
var self = this;
|
||||
|
||||
if (index === this.alternateIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tileSource = (index === -1 ? this.tileSource : this.alternates[index].tileSource);
|
||||
|
||||
var tiledImage = App.viewer.world.getItemAt(this.pageIndex);
|
||||
var bounds = tiledImage.getBounds();
|
||||
|
||||
App.viewer.world.removeItem(tiledImage);
|
||||
App.viewer.addTiledImage({
|
||||
tileSource: tileSource,
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
height: bounds.height,
|
||||
index: this.pageIndex,
|
||||
success: function(event) {
|
||||
self.tiledImage = event.item;
|
||||
}
|
||||
});
|
||||
|
||||
this.alternateIndex = index;
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user