Scrollwheel for thumbs (m2)

changelog.txt

@@ -39,6 +39,7 @@ OPENSEADRAGON CHANGELOG
 * Rect and Point toString() functions are now consistent: rounding values to nearest hundredth
 * Overlays appear in the DOM immediately on open or addOverlay (#507)
 * imageLoaderLimit now works (#544)
+* Turning off scrollToZoom in gestureSettings now allows scroll events to propagate
 
 1.2.0: (in progress)
 

src/viewer.js

@@ -2534,9 +2534,12 @@ function onCanvasScroll( event ) {
         shift: event.shift,
         originalEvent: event.originalEvent
     });
+
+    if (gestureSettings && gestureSettings.scrollToZoom) {
         //cancels event
         return false;
     }
+}
 
 function onContainerExit( event ) {
     if ( !event.insideElementPressed ) {

test/demo/m2/README.md

@@ -0,0 +1,12 @@
+# To Do
+
+* Correct page height for thumbs
+* Scroll view: go to current page when entering mode; clamp at first and last
+
+* Constraints
+  * Thumbs: no zoom, no pan
+  * Scroll: can't zoom out much, can't pan up and down
+  * Book, Page: just the shown item
+* Resize on window resize
+* When going to thumbs, scroll to the proper part of the page
+* Show/hide pages?

test/demo/m2/index.html

@@ -12,7 +12,15 @@
                 width: 100%;
                 height: 100%;
                 margin: 0;
+            }
+
+            body {
                 background: #eee;
+                overflow: scroll;
+            }
+
+            .header {
+                height: 30px;
             }
 
             .nav {
@@ -29,12 +37,18 @@
             }
 
             .openseadragon1 {
+                background: white;
+            }
+
+            .openseadragon1.full {
                 position: absolute;
                 left: 0;
                 top: 30px;
                 right: 0;
                 bottom: 0;
-                background: white;
+            }
+
+            .openseadragon1.thumbs {
             }
 
         </style>

test/demo/m2/js/main.js

@@ -41,16 +41,19 @@
             this.viewer = OpenSeadragon({
                 id: "contentDiv",
                 prefixUrl: "../../../build/openseadragon/images/",
-                // zoomPerClick: 1,
+                autoResize: false,
+                // animationTime: 10,
+                // springStiffness: 2,
                 tileSources: tileSources
             });
 
             this.viewer.addHandler('open', function() {
+                self.$el = $(self.viewer.element);
                 self.setMode('thumbs');
             });
 
             this.viewer.addHandler('canvas-click', function(event) {
-                if (self.mode !== 'thumbs') {
+                if (self.mode !== 'thumbs' || !event.quick) {
                     return;
                 }
 
@@ -111,6 +114,8 @@
 
         // ----------
         setMode: function(mode, page) {
+            var self = this;
+
             if (this.mode === mode) {
                 if (page !== undefined) {
                     this.goToPage(page);
@@ -125,6 +130,45 @@
                 this.page = page; // Need to do this before layout
             }
 
+            var oldSize = new OpenSeadragon.Point(this.$el.width(), this.$el.height());
+            var oldBounds = this.viewer.viewport.getBounds();
+            var scrollTop = $(window).scrollTop();
+            var scrollMax = $(document).height() - $(window).height();
+            var scrollFactor = (scrollMax > 0 ? scrollTop / scrollMax : 0);
+
+            if (this.mode === 'thumbs') {
+                this.viewer.gestureSettingsMouse.scrollToZoom = false;
+                this.viewer.zoomPerClick = 1;
+                $('.openseadragon1')
+                    .addClass('thumbs')
+                    .removeClass('full')
+                    .css({
+                        height: 2000
+                    });
+            } else {
+                this.viewer.gestureSettingsMouse.scrollToZoom = true;
+                this.viewer.zoomPerClick = 2;
+                $('.openseadragon1')
+                    .addClass('full')
+                    .removeClass('thumbs')
+                    .css({
+                        height: 'auto'
+                    });
+            }
+
+            var newSize = new OpenSeadragon.Point(this.$el.width(), this.$el.height());
+            if (oldSize.x !== newSize.x || oldSize.y !== newSize.y) {
+                this.viewer.viewport.resize(newSize, false);
+                var newBounds = this.viewer.viewport.getBounds();
+                var box = oldBounds.clone();
+                box.height = box.width * (newBounds.height / newBounds.width);
+
+                var boxMax = oldBounds.height - box.height;
+                box.y += boxMax * scrollFactor;
+                this.viewer.viewport.fitBounds(box, true);
+                this.viewer.viewport.update();
+            }
+
             if (this.mode === 'thumbs') {
                 this.doThumbnails();
             }
@@ -230,10 +274,13 @@
                 buffer: buffer
             });
 
+            var bounds = this.viewer.world.getItemAt(0).getBounds();
+            var x = bounds.x - buffer;
+            var y = bounds.y - buffer;
             var width = columns + (buffer * (columns + 1));
             var height = width * (viewerHeight / viewerWidth);
 
-            this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(-buffer, -buffer, width, height));
+            this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height));
         },
 
         // ----------
@@ -246,11 +293,13 @@
                 buffer: buffer
             });
 
-            var height = this.viewer.world.getItemAt(0).getBounds().height;
+            var bounds = this.viewer.world.getItemAt(0).getBounds();
-            height += buffer * 2;
+            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(-buffer, -buffer, width, height));
+            this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height));
         },
 
         // ----------