Merge branch 'master' into add-fullscreenNavigationUI-option

fengyuanchen · Jun 12, 2021 · c066a63 · c066a63
2 parents 8214a36 + cdd94b4
commit c066a63
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## next
 
 - Enhance `fullscreen` option and `play` method to support [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions) (#482, #483).
+- Refactor the `toggle` method for toggling image between current/natural ratio (#477).
 
 ## 1.9.2 (May 29, 2021)
 

diff --git a/README.md b/README.md
@@ -868,7 +868,7 @@ Show the current ratio of the image by percentage.
 
 ### toggle()
 
-Toggle the image size between its natural size and initial size.
+Toggle the image size between its current size and natural size.
 
 > Used by the [`toggleOnDblclick`](#toggleOnDblclick) option.
 

diff --git a/src/js/methods.js b/src/js/methods.js
@@ -701,7 +701,7 @@ export default {
       const newHeight = naturalHeight * ratio;
       const offsetWidth = newWidth - width;
       const offsetHeight = newHeight - height;
-      const oldRatio = width / naturalWidth;
+      const oldRatio = imageData.ratio;
 
       if (isFunction(options.zoom)) {
         addListener(element, EVENT_ZOOM, options.zoom, {
@@ -739,6 +739,7 @@ export default {
       imageData.top = imageData.y;
       imageData.width = newWidth;
       imageData.height = newHeight;
+      imageData.oldRatio = oldRatio;
       imageData.ratio = ratio;
       this.renderImage(() => {
         this.zooming = false;
@@ -1048,10 +1049,10 @@ export default {
     return this;
   },
 
-  // Toggle the image size between its natural size and initial size
+  // Toggle the image size between its current size and natural size
   toggle() {
     if (this.imageData.ratio === 1) {
-      this.zoomTo(this.initialImageData.ratio, true);
+      this.zoomTo(this.imageData.oldRatio, true);
     } else {
       this.zoomTo(1, true);
     }

diff --git a/src/js/render.js b/src/js/render.js
@@ -206,6 +206,7 @@ export default {
         y: top,
         width,
         height,
+        oldRatio: 1,
         ratio: width / naturalWidth,
         aspectRatio,
         naturalWidth,

diff --git a/test/specs/methods/toggle.spec.js b/test/specs/methods/toggle.spec.js
@@ -1,5 +1,5 @@
 describe('toggle (method)', () => {
-  it('should toggle the scale of the current viewing image between its initial ratio and 1', (done) => {
+  it('should toggle the scale of the current viewing image between its current ratio and 1', (done) => {
     const image = window.createImage();
     const viewer = new Viewer(image, {
       viewed() {