mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-07 18:39:23 +03:00
Code Issues Projects Releases Wiki Activity

* Correct page height for thumbs (m2)

Browse Source
This commit is contained in:
Ian Gilman 2015-01-09 13:53:48 -08:00
parent 4fa6fea850
commit 70e461c214
2 changed files with 97 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
test/demo/m2/README.md
View File

@ -1,6 +1,5 @@
# To Do # To Do
* Correct page height for thumbs
* Scroll view: go to current page when entering mode; clamp at first and last * Scroll view: go to current page when entering mode; clamp at first and last
* Constraints * Constraints

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

@ -11,6 +11,7 @@
this.mode = 'none'; this.mode = 'none';
this.pageBuffer = 0.05; this.pageBuffer = 0.05;
this.bigBuffer = 0.2;
this.page = 0; this.page = 0;
this.modeNames = [ this.modeNames = [
'thumbs', 'thumbs',
@ -130,6 +131,8 @@
this.page = page; // Need to do this before layout this.page = page; // Need to do this before layout
} }
var layout = this.createLayout();
var oldSize = new OpenSeadragon.Point(this.$el.width(), this.$el.height()); var oldSize = new OpenSeadragon.Point(this.$el.width(), this.$el.height());
var oldBounds = this.viewer.viewport.getBounds(); var oldBounds = this.viewer.viewport.getBounds();
var scrollTop = $(window).scrollTop(); var scrollTop = $(window).scrollTop();
@ -139,16 +142,20 @@
if (this.mode === 'thumbs') { if (this.mode === 'thumbs') {
this.viewer.gestureSettingsMouse.scrollToZoom = false; this.viewer.gestureSettingsMouse.scrollToZoom = false;
this.viewer.zoomPerClick = 1; this.viewer.zoomPerClick = 1;
$('.openseadragon1') var viewerWidth = this.$el.width();
var width = layout.bounds.width + (this.bigBuffer * 2);
var height = layout.bounds.height + (this.bigBuffer * 2);
var newHeight = viewerWidth * (height / width);
this.$el
.addClass('thumbs') .addClass('thumbs')
.removeClass('full') .removeClass('full')
.css({ .css({
height: 2000 height: newHeight
}); });
} else { } else {
this.viewer.gestureSettingsMouse.scrollToZoom = true; this.viewer.gestureSettingsMouse.scrollToZoom = true;
this.viewer.zoomPerClick = 2; this.viewer.zoomPerClick = 2;
$('.openseadragon1') this.$el
.addClass('full') .addClass('full')
.removeClass('thumbs') .removeClass('thumbs')
.css({ .css({
@ -169,24 +176,12 @@
this.viewer.viewport.update(); this.viewer.viewport.update();
} }
if (this.mode === 'thumbs') { this.setLayout(layout);
this.doThumbnails();
}
if (this.mode === 'scroll') {
this.doScroll();
}
if (this.mode === 'book') {
this.doBook();
}
if (this.mode === 'page') {
this.doPage();
}
if (page !== undefined) { if (page !== undefined) {
this.goToPage(page); // Need to do this after layout; does the zoom/pan this.goToPage(page); // Need to do this after layout; does the zoom/pan
} else {
this.goHome();
} }
this.update(); this.update();
@ -233,7 +228,28 @@
}, },
// ---------- // ----------
doLayout: function(config) { createLayout: function() {
var viewerWidth = this.$el.width();
var viewerHeight = this.$el.height();
var layoutConfig = {};
if (this.mode === 'thumbs') {
layoutConfig.columns = Math.floor(viewerWidth / 150);
layoutConfig.buffer = this.bigBuffer;
} else if (this.mode === 'scroll') {
layoutConfig.buffer = this.pageBuffer;
} else if (this.mode === 'book') {
layoutConfig.book = true;
layoutConfig.buffer = this.bigBuffer;
} else if (this.mode === 'page') {
layoutConfig.buffer = 2;
}
var layout = {
bounds: null,
specs: []
};
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
var x = 0; var x = 0;
var y = 0; var y = 0;
@ -243,12 +259,12 @@
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
item = this.viewer.world.getItemAt(i); item = this.viewer.world.getItemAt(i);
points.push(new OpenSeadragon.Point(x, y)); points.push(new OpenSeadragon.Point(x, y));
if (config.columns && i % config.columns === config.columns - 1) { if (layoutConfig.columns && i % layoutConfig.columns === layoutConfig.columns - 1) {
x = 0; x = 0;
y += item.getBounds().height + config.buffer; y += item.getBounds().height + layoutConfig.buffer;
} else { } else {
if (!config.book || i % 2 === 0) { if (!layoutConfig.book || i % 2 === 0) {
x += config.buffer; x += layoutConfig.buffer;
} }
x += 1; x += 1;
@ -257,68 +273,79 @@
var tl = this.viewer.world.getItemAt(this.page).getBounds().getTopLeft(); var tl = this.viewer.world.getItemAt(this.page).getBounds().getTopLeft();
var offset = tl.minus(points[this.page]); var offset = tl.minus(points[this.page]);
var box, pos;
for (i = 0; i < count; i++) { for (i = 0; i < count; i++) {
item = this.viewer.world.getItemAt(i); item = this.viewer.world.getItemAt(i);
item.setPosition(points[i].plus(offset)); box = item.getBounds();
pos = points[i].plus(offset);
box.x = pos.x;
box.y = pos.y;
layout.specs.push({
item: item,
bounds: box
});
if (layout.bounds) {
layout.bounds = this.union(layout.bounds, box);
} else {
layout.bounds = box.clone();
}
}
return layout;
},
// ----------
setLayout: function(layout) {
var spec;
for (var i = 0; i < layout.specs.length; i++) {
spec = layout.specs[i];
spec.item.setPosition(spec.bounds.getTopLeft());
} }
}, },
// ---------- // ----------
doThumbnails: function() { goHome: function() {
var viewerWidth = $(this.viewer.element).width(); var viewerWidth = this.$el.width();
var viewerHeight = $(this.viewer.element).height(); var viewerHeight = this.$el.height();
var columns = Math.floor(viewerWidth / 150); var layoutConfig = {};
var buffer = 0.2;
this.doLayout({
columns: columns,
buffer: buffer
});
var bounds = this.viewer.world.getItemAt(0).getBounds(); var box;
var x = bounds.x - buffer; if (this.mode === 'thumbs') {
var y = bounds.y - buffer; box = this.viewer.world.getHomeBounds();
var width = columns + (buffer * (columns + 1)); box.x -= this.bigBuffer;
var height = width * (viewerHeight / viewerWidth); box.y -= this.bigBuffer;
box.width += (this.bigBuffer * 2);
this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height)); box.height = box.width * (viewerHeight / viewerWidth);
this.viewer.viewport.fitBounds(box);
} else if (this.mode === 'scroll') {
this.goToPage(this.page);
} else if (this.mode === 'book') {
this.goToPage(this.page);
} else if (this.mode === 'page') {
this.goToPage(this.page);
}
}, },
// ---------- // ----------
doScroll: function() { doScroll: function() {
var viewerWidth = $(this.viewer.element).width(); // var bounds = this.viewer.world.getItemAt(0).getBounds();
var viewerHeight = $(this.viewer.element).height(); // var x = bounds.x - buffer;
var buffer = 0.05; // var y = bounds.y - buffer;
// var height = bounds.height + (buffer * 2);
this.doLayout({ // var width = height * (viewerWidth / viewerHeight);
buffer: buffer
});
var bounds = this.viewer.world.getItemAt(0).getBounds();
var x = bounds.x - buffer;
var y = bounds.y - buffer;
var height = bounds.height + (buffer * 2);
var width = height * (viewerWidth / viewerHeight);
this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height));
}, },
// ---------- // ----------
doBook: function() { union: function(box1, box2) {
this.doLayout({ var left = Math.min(box1.x, box2.x);
buffer: 0.2, var top = Math.min(box1.y, box2.y);
book: true var right = Math.max(box1.x + box1.width, box2.x + box2.width);
}); var bottom = Math.max(box1.y + box1.height, box2.y + box2.height);
this.goToPage(this.page); return new OpenSeadragon.Rect(left, top, right - left, bottom - top);
},
// ----------
doPage: function() {
this.doLayout({
buffer: 2
});
this.goToPage(this.page);
} }
}; };