From 4fa6fea850e7dc9ec1bb5d5ab5d54ee5fd433381 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Fri, 9 Jan 2015 11:45:53 -0800 Subject: [PATCH] Scrollwheel for thumbs (m2) --- changelog.txt | 1 + src/viewer.js | 7 +++-- test/demo/m2/README.md | 12 ++++++++ test/demo/m2/index.html | 16 ++++++++++- test/demo/m2/js/main.js | 61 +++++++++++++++++++++++++++++++++++++---- 5 files changed, 88 insertions(+), 9 deletions(-) create mode 100644 test/demo/m2/README.md diff --git a/changelog.txt b/changelog.txt index 98a94fd0..6f707cbb 100644 --- a/changelog.txt +++ b/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) diff --git a/src/viewer.js b/src/viewer.js index 781af981..b3350306 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2534,8 +2534,11 @@ function onCanvasScroll( event ) { shift: event.shift, originalEvent: event.originalEvent }); - //cancels event - return false; + + if (gestureSettings && gestureSettings.scrollToZoom) { + //cancels event + return false; + } } function onContainerExit( event ) { diff --git a/test/demo/m2/README.md b/test/demo/m2/README.md new file mode 100644 index 00000000..c6afeccd --- /dev/null +++ b/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? diff --git a/test/demo/m2/index.html b/test/demo/m2/index.html index ce9100ac..c9b924ba 100644 --- a/test/demo/m2/index.html +++ b/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 { } diff --git a/test/demo/m2/js/main.js b/test/demo/m2/js/main.js index 5d429681..7ed3fd4d 100644 --- a/test/demo/m2/js/main.js +++ b/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; - height += buffer * 2; + 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(-buffer, -buffer, width, height)); + this.viewer.viewport.fitBounds(new OpenSeadragon.Rect(x, y, width, height)); }, // ----------