Detail view (m2)

test/demo/m2/js/main.js

@@ -38,6 +38,7 @@
 
                 $.each(self.pages, function(i, v) {
                     v.tiledImage = self.viewer.world.getItemAt(i);
+                    v.addDetails();
                 });
 
                 self.setMode({
@@ -540,9 +541,10 @@
             var y = 0;
             var offset = new OpenSeadragon.Point();
             var rowHeight = 0;
-            var item, box;
+            var item, box, page;
             for (var i = 0; i < count; i++) {
-                item = this.pages[i].tiledImage;
+                page = this.pages[i];
+                item = page.tiledImage;
                 box = item.getBounds();
 
                 if (i === this.pageIndex) {
@@ -562,6 +564,7 @@
                 rowHeight = Math.max(rowHeight, box.height);
 
                 layout.specs.push({
+                    page: page,
                     item: item,
                     bounds: box
                 });
@@ -602,8 +605,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.page.place(spec.bounds.getTopLeft(), spec.bounds.width, config.immediately);
-                spec.item.setWidth(spec.bounds.width, config.immediately);
             }
         },
 

test/demo/m2/js/page.js

@@ -1,4 +1,4 @@
-/* global App */
+/* global App, $ */
 (function() {
 
     // ----------
@@ -7,6 +7,7 @@
         this.tileSource = config.tileSource;
         this.alternates = config.alternates;
         this.pageIndex = config.pageIndex;
+        this.details = config.details;
         this.alternateIndex = -1;
     };
 
@@ -38,6 +39,52 @@
             });
 
             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;
+                        var bounds = self.tiledImage.getBounds();
+                        self.placeDetail(v, bounds.getTopLeft(), bounds.width, true);
+                    }
+                });
+            });
+        },
+
+        // ----------
+        place: function(position, width, immediately) {
+            var self = this;
+
+            this.tiledImage.setPosition(position, immediately);
+            this.tiledImage.setWidth(width, immediately);
+
+            if (this.details) {
+                $.each(this.details, function(i, v) {
+                    if (v.tiledImage) {
+                        self.placeDetail(v, position, width, immediately);
+                    }
+                });
+            }
+        },
+
+        // ----------
+        placeDetail: function(detail, masterPosition, masterWidth, immediately) {
+            var position = new OpenSeadragon.Point(
+                masterPosition.x + (masterWidth * detail.x),
+                masterPosition.y + (masterWidth * detail.y));
+
+            detail.tiledImage.setPosition(position, immediately);
+            detail.tiledImage.setWidth(masterWidth * detail.width, immediately);
         }
     };