Merge pull request #596 from openseadragon/m2

More on m2 demo (alternate images) including a multi-image open() bug fix

changelog.txt

@@ -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)

src/viewer.js

@@ -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 ) ) {

test/demo/m2/README.md

@@ -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?

test/demo/m2/index.html

@@ -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">

test/demo/m2/js/main.js

@@ -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;
         }
     };
 

test/demo/m2/js/page.js

@@ -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;
+        }
+    };
+
+})();