From 70e08a02ce1849551eb5fae25db588efa3088032 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 16 Feb 2015 10:18:59 -0800 Subject: [PATCH] Positioning alternates better (m2) --- test/demo/m2/README.md | 2 -- test/demo/m2/js/main.js | 53 ++++++++++++++---------------- test/demo/m2/js/page.js | 72 +++++++++++++++++++++++++++++------------ 3 files changed, 76 insertions(+), 51 deletions(-) diff --git a/test/demo/m2/README.md b/test/demo/m2/README.md index 881cfbdb..84028718 100644 --- a/test/demo/m2/README.md +++ b/test/demo/m2/README.md @@ -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? diff --git a/test/demo/m2/js/main.js b/test/demo/m2/js/main.js index 24ebed2a..cf1e1a3f 100644 --- a/test/demo/m2/js/main.js +++ b/test/demo/m2/js/main.js @@ -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); } }, diff --git a/test/demo/m2/js/page.js b/test/demo/m2/js/page.js index 1d42e88b..a812d38d 100644 --- a/test/demo/m2/js/page.js +++ b/test/demo/m2/js/page.js @@ -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); } };