From d7cee6e8f4d588e2d33f431cee70ff8c8146dc83 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 12 Oct 2017 20:26:28 -0500
Subject: [PATCH] [new feature] ImagePreview reconstruct (#201)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

* [bugfix] Swipe shouid reinitialize when item changes

* [new feature] ImagePreview reconstruct
---
 packages/image-preview/image-preview.vue | 102 +++++++----------------
 packages/image-preview/index.js          |  19 +----
 packages/vant-css/src/image-preview.css  |  25 ++----
 test/unit/specs/image-preview.spec.js    |  86 ++++++++-----------
 4 files changed, 78 insertions(+), 154 deletions(-)

diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index 660efcb03..ea0f8e084 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -1,17 +1,21 @@
 <template>
-  <transition name="image-fade">
-    <div class="van-image-preview" ref="previewContainer" v-show="value">
-      <van-swipe>
-        <van-swipe-item v-for="(item, index) in images" :key="index">
-          <img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
-        </van-swipe-item>
-      </van-swipe>
-    </div>
-  </transition>
+  <div
+    v-show="value"
+    class="van-image-preview"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <van-swipe>
+      <van-swipe-item v-for="(item, index) in images" :key="index">
+        <img class="van-image-preview__image" :src="item" >
+      </van-swipe-item>
+    </van-swipe>
+  </div>  
 </template>
 
 <script>
-import Vue from 'vue';
 import Popup from '../mixins/popup';
 import Swipe from '../swipe';
 import SwipeItem from '../swipe-item';
@@ -30,11 +34,9 @@ export default {
     overlay: {
       default: true
     },
-
     lockOnScroll: {
       default: true
     },
-
     closeOnClickOverlay: {
       default: true
     }
@@ -42,73 +44,31 @@ export default {
 
   data() {
     return {
-      images: [],
-      viewportSize: null
+      images: []
     };
   },
 
   methods: {
-    handleLoad(event) {
-      const container = this.$refs.previewContainer;
-      const containerSize = container.getBoundingClientRect();
-      const ratio = containerSize.width / containerSize.height;
-      const target = event.currentTarget;
-      const targetRatio = target.width / target.height;
-
-      const centerClass = 'van-image-preview__image--center';
-      const bigClass = 'van-image-preview__image--big';
-
-      if (targetRatio > ratio) {
-        target.className += (' ' + centerClass);
-      } else {
-        target.className += (' ' + bigClass);
-      }
+    onTouchStart(event) {
+      this.touchStartTime = new Date();
+      this.touchStartX = event.touches[0].clientX;
+      this.touchStartY = event.touches[0].clientY;
+      this.deltaX = 0;
+      this.deltaY = 0;
     },
 
-    close() {
-      /* istanbul ignore if */
-      if (this.closing) return;
+    onTouchMove(event) {
+      event.preventDefault();
+      this.deltaX = event.touches[0].clientX - this.touchStartX;
+      this.deltaY = event.touches[0].clientY - this.touchStartY;
+    },
 
-      this.closing = true;
-
-      this.value = false;
-
-      /* istanbul ignore else */
-      if (this.lockOnScroll) {
-        setTimeout(() => {
-          if (this.overlay && this.bodyOverflow !== 'hidden') {
-            document.body.style.overflow = this.bodyOverflow;
-          }
-          this.bodyOverflow = null;
-        }, 200);
-      }
-
-      this.opened = false;
-      this.doAfterClose();
-    }
-  },
-
-  mounted() {
-    const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
-    const container = this.$refs.previewContainer;
-
-    /* istanbul ignore else */
-    if (supportTouch) {
-      let touchStartTime;
-
-      container.addEventListener('touchstart', () => {
-        touchStartTime = new Date();
-      });
-      container.addEventListener('touchend', () => {
-        /* istanbul ignore else */
-        if (new Date() - touchStartTime < 100) {
-          this.value = false;
-        }
-      });
-    } else {
-      container.addEventListener('click', () => {
+    onTouchEnd() {
+      // prevent long tap to close component
+      const deltaTime = new Date() - this.touchStartTime;
+      if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
         this.value = false;
-      });
+      }
     }
   }
 };
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index aed24c69b..095ed6788 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -6,30 +6,19 @@ let instance;
 const ImagePreviewConstructor = Vue.extend(ImagePreview);
 
 const initInstance = () => {
-  /* istanbul ignore if */
-  if (Vue.prototype.$isServer) return;
   instance = new ImagePreviewConstructor({
     el: document.createElement('div')
   });
+  document.body.appendChild(instance.$el);
 };
 
-var ImagePreviewBox = images => {
-  /* istanbul ignore if */
-  if (Vue.prototype.$isServer) return;
+const ImagePreviewBox = images => {
   if (!instance) {
     initInstance();
   }
 
-  /* istanbul ignore else */
-  if (!instance.value) {
-    instance.images = images;
-
-    document.body.appendChild(instance.$el);
-
-    Vue.nextTick(() => {
-      instance.value = true;
-    });
-  }
+  instance.images = images;
+  instance.value = true;
 };
 
 export default ImagePreviewBox;
diff --git a/packages/vant-css/src/image-preview.css b/packages/vant-css/src/image-preview.css
index 01fe3e673..07f49603d 100644
--- a/packages/vant-css/src/image-preview.css
+++ b/packages/vant-css/src/image-preview.css
@@ -1,30 +1,21 @@
 @import './common/var.css';
 
 .van-image-preview {
-  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: auto;
+  position: fixed;
 
   &__image {
-    position: absolute;
+    top: 0;
     left: 0;
-
-    &--center {
-      width: 100%;
-      height: auto;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-    }
-  }
-
-  .van-image-preview__image--big {
-    height: 100%;
-    width: auto;
-    left: 50%;
-    transform: translate3d(-50%, 0, 0);
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
   }
 
   .van-swipe {
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index d6ad06931..f2b1ffc30 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -1,65 +1,49 @@
+import Vue from 'vue';
+import { mount } from 'avoriaz';
+import { triggerTouch } from '../utils';
 import ImagePreview from 'packages/image-preview';
-import Wrapper from 'avoriaz/dist/Wrapper';
+import ImagePreviewVue from 'packages/image-preview/image-preview';
+
+const images = [
+  'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+  'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+  'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+];
 
 describe('ImagePreview', () => {
-  beforeEach(() => {
-    document.body.style.overflow = '';
-  });
+  let wrapper;
 
   afterEach(() => {
-    const el = document.querySelector('.van-image-preview');
-    if (!el) return;
-    if (el.parentNode) {
-      el.parentNode.removeChild(el);
-    }
+    wrapper && wrapper.destroy();
   });
 
-  it('create a image preview', (done) => {
-    ImagePreview([
-      'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-      'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-      'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-    ]);
-
-    expect(document.querySelector('.van-image-preview')).to.exist;
-
-    setTimeout(() => {
-      const image = document.querySelector('.van-image-preview');
-      const avImage = new Wrapper({ elm: image }, () => {}, false);
-      avImage.trigger('click');
-      avImage.trigger('touchstart');
-      avImage.trigger('touchend');
-      setTimeout(() => {
-        expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
-        expect(document.body.style.overflow).to.equal('');
-        done();
-      }, 500);
-    }, 500);
+  it('call ImagePreview Function', (done) => {
+    ImagePreview(images);
+    Vue.nextTick(() => {
+      expect(document.querySelectorAll('.van-image-preview img').length).to.equal(3);
+      done();
+    });
   });
 
-  it('create a body hidden image preview', (done) => {
-    document.body.style.overflow = 'hidden';
+  it('create a ImagePreview Component', (done) => {
+    wrapper = mount(ImagePreviewVue);
+    wrapper.vm.images = images;
+    wrapper.vm.value = true;
 
-    ImagePreview([
-      'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
-      'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
-      'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
-    ]);
+    expect(wrapper.hasClass('van-image-preview')).to.be.true;
 
-    expect(document.querySelector('.van-image-preview')).to.exist;
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('img').length).to.equal(3);
+      triggerTouch(wrapper, 'touchstart', 0, 0);
+      triggerTouch(wrapper, 'touchmove', 100, 100);
+      triggerTouch(wrapper, 'touchend', 0, 0);
+      expect(wrapper.vm.value).to.be.true;
 
-    setTimeout(() => {
-      const image = document.querySelector('.van-image-preview');
-      const avImage = new Wrapper({ elm: image }, () => {}, false);
-      avImage.trigger('click');
-      avImage.trigger('touchstart');
-      avImage.trigger('touchend');
-
-      setTimeout(() => {
-        expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
-        expect(document.body.style.overflow).to.equal('hidden');
-        done();
-      }, 500);
-    }, 500);
+      triggerTouch(wrapper, 'touchstart', 0, 0);
+      triggerTouch(wrapper, 'touchmove', 0, 0);
+      triggerTouch(wrapper, 'touchend', 0, 0);
+      expect(wrapper.vm.value).to.be.false;
+      done();
+    });
   });
 });