From f50dc3048466308a3dc479bc22534f3ec54ffb78 Mon Sep 17 00:00:00 2001
From: cesc fabregas <cfabregas@163.com>
Date: Sun, 14 Jul 2019 14:07:52 +0800
Subject: [PATCH] [improvement] ImagePreview: support dbclick zoom (#3839)

---
 src/image-preview/ImagePreview.js    | 37 +++++++++++++++++++++-------
 src/image-preview/test/index.spec.js | 23 +++++++++++++++--
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index d1fd56969..29106040a 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -77,7 +77,8 @@ export default createComponent({
       moveY: 0,
       moving: false,
       zooming: false,
-      active: 0
+      active: 0,
+      doubleClickTimer: null
     };
   },
 
@@ -120,16 +121,26 @@ export default createComponent({
 
       // prevent long tap to close component
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
-        const index = this.active;
+        if (!this.doubleClickTimer) {
+          this.doubleClickTimer = setTimeout(() => {
+            const index = this.active;
 
-        this.resetScale();
-        this.$emit('close', {
-          index,
-          url: this.images[index]
-        });
+            this.resetScale();
+            this.$emit('close', {
+              index,
+              url: this.images[index]
+            });
 
-        if (!this.asyncClose) {
-          this.$emit('input', false);
+            if (!this.asyncClose) {
+              this.$emit('input', false);
+            }
+
+            this.doubleClickTimer = null;
+          }, 300);
+        } else {
+          clearTimeout(this.doubleClickTimer);
+          this.doubleClickTimer = null;
+          this.toggleScale();
         }
       }
     },
@@ -228,6 +239,14 @@ export default createComponent({
       this.scale = 1;
       this.moveX = 0;
       this.moveY = 0;
+    },
+
+    toggleScale() {
+      const scale = this.scale > 1 ? 1 : 2;
+
+      this.scale = scale;
+      this.moveX = 0;
+      this.moveY = 0;
     }
   },
 
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index bf7e265f5..8bbe5e970 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -20,7 +20,7 @@ const images = [
   'https://img.yzcdn.cn/3.png'
 ];
 
-test('render image', () => {
+test('render image', async () => {
   const wrapper = mount(ImagePreviewVue, {
     propsData: { images, value: true }
   });
@@ -31,6 +31,9 @@ test('render image', () => {
   triggerDrag(swipe, 500, 0);
   expect(wrapper.emitted('input')).toBeFalsy();
   triggerDrag(swipe, 0, 0);
+
+  await later(300);
+
   expect(wrapper.emitted('input')[0][0]).toBeFalsy();
   expect(wrapper.emitted('change')[0][0]).toEqual(2);
 });
@@ -64,6 +67,22 @@ test('function call', done => {
   });
 });
 
+test('double click', async done => {
+  const instance = ImagePreview(images);
+
+  const swipe = instance.$el.querySelector('.van-swipe__track');
+  triggerDrag(swipe, 0, 0);
+  triggerDrag(swipe, 0, 0);
+  expect(instance.scale).toEqual(2);
+
+  await later();
+
+  triggerDrag(swipe, 0, 0);
+  triggerDrag(swipe, 0, 0);
+  expect(instance.scale).toEqual(1);
+  done();
+});
+
 test('onClose option', async done => {
   const onClose = jest.fn();
   const instance = ImagePreview({
@@ -75,7 +94,7 @@ test('onClose option', async done => {
   instance.$emit('input', true);
   expect(onClose).toHaveBeenCalledTimes(0);
 
-  await later();
+  await later(300);
 
   const wrapper = document.querySelector('.van-image-preview');
   const swipe = wrapper.querySelector('.van-swipe__track');