From 641473e2b690f5caff89a1e1dbc602148bf4c044 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Sat, 1 Apr 2017 15:51:47 +0800
Subject: [PATCH] fix image preview

---
 docs/examples-dist/image-preview.vue         |  4 ++--
 docs/examples-dist/uploader.vue              |  4 ++--
 docs/examples-docs/image-preview.md          |  4 ++--
 packages/image-preview/src/image-preview.vue | 22 ++++++++++++++++----
 packages/zanui-css/src/image_preview.css     | 15 ++++++-------
 5 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 708c8ea34..54daf52b4 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -24,9 +24,9 @@ export default {
   methods: {
     handleImagePreview() {
       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',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ]);
     }
   }
diff --git a/docs/examples-dist/uploader.vue b/docs/examples-dist/uploader.vue
index 86256ec17..b8d55e9e6 100644
--- a/docs/examples-dist/uploader.vue
+++ b/docs/examples-dist/uploader.vue
@@ -1,12 +1,12 @@
 <template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
                 <div class="uploader-container">
-    <zan-uploader :before-read="logContent" :after-read="logContent">
+    <zan-uploader :before-read="logContent" @file-readed="logContent">
     </zan-uploader>
 </div>
 
               </example-block><example-block title="自定义上传图标">
                 <div class="uploader-container">
-  <zan-uploader :after-read="logContent">
+  <zan-uploader @file-readed="logContent">
     <zan-icon name="photograph"></zan-icon>
   </zan-uploader>
 </div>
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index b6ddaeb90..e4277db4f 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -18,9 +18,9 @@ export default {
   methods: {
     handleImagePreview() {
       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',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ]);
     }
   }
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 006899050..79b4c9107 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -1,11 +1,9 @@
 <template>
   <transition name="image-fade">
     <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
-      <zan-swipe :show-indicators="false">
+      <zan-swipe>
         <zan-swipe-item v-for="item in images">
-          <img class="zan-image-preview__image" :src="item" alt="" :class="{
-            'zan-image-preview__image--center': true
-          }">
+          <img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
         </zan-swipe-item>
       </zan-swipe>
     </div>
@@ -53,6 +51,22 @@ export default {
       this.value = false;
     },
 
+    handleLoad(event) {
+      const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+      const ratio = containerSize.width / containerSize.height;
+      const target = event.currentTarget;
+      const targetRatio = target.width / target.height;
+
+      const centerClass = 'zan-image-preview__image--center';
+      const bigClass = 'zan-image-preview__image--big';
+
+      if (targetRatio > ratio) {
+        target.className += (' ' + centerClass);
+      } else {
+        target.className += (' ' + bigClass);
+      }
+    },
+
     close() {
       if (this.closing) return;
 
diff --git a/packages/zanui-css/src/image_preview.css b/packages/zanui-css/src/image_preview.css
index d35048d9c..9d78c4384 100644
--- a/packages/zanui-css/src/image_preview.css
+++ b/packages/zanui-css/src/image_preview.css
@@ -11,25 +11,26 @@
 
     @e image {
       display: block;
-      width: 100%;
-      height: auto;
-      transition: .2s ease-out;
       position: absolute;
       left: 0;
 
       @m center {
+        width: 100%;
+        height: auto;
         top: 50%;
         transform: translate3d(0, -50%, 0);
       }
     }
 
-    .zan-swipe {
+    .zan-image-preview__image--big {
       height: 100%;
-      overflow: visible;
+      width: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
     }
 
-    .zan-swipe__items {
-      overflow: visible;
+    .zan-swipe {
+      height: 100%;
     }
   }
 }