From 7856ae1097e32611f73882820353da62b70ad1f4 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Tue, 27 Dec 2016 13:47:37 +0800
Subject: [PATCH] Carousel: improve arrow hover behavior in card mode

---
 examples/docs/zh-CN/carousel.md              |  3 +-
 packages/carousel/src/item.vue               |  4 ++-
 packages/carousel/src/main.vue               | 30 ++++++++++++++++++++
 packages/theme-default/src/carousel-item.css |  3 +-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/examples/docs/zh-CN/carousel.md b/examples/docs/zh-CN/carousel.md
index 3a69382c9..7a4d5c748 100644
--- a/examples/docs/zh-CN/carousel.md
+++ b/examples/docs/zh-CN/carousel.md
@@ -36,9 +36,8 @@
   
   .demo-carousel .el-carousel__item {
     h3 {
-      color: #475669;
+      color: #fff;
       font-size: 18px;
-      opacity: 0.75;
       line-height: 300px;
       margin: 0;
     }
diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 60d295ad3..01cc595a6 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -5,7 +5,8 @@
     :class="{
       'is-active': active,
       'el-carousel__item--card': $parent.type === 'card',
-      'is-in-stage': inStage
+      'is-in-stage': inStage,
+      'is-hover': hover
     }"
     @click="handleItemClick"
     :style="{
@@ -33,6 +34,7 @@
 
     data() {
       return {
+        hover: false,
         translate: 0,
         scale: 1,
         active: false,
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index 2ea2eaff5..7bdd898fb 100644
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -11,6 +11,8 @@
         <button
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
+          @mouseenter="handleButtonEnter('left')"
+          @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex - 1)"
           class="el-carousel__arrow el-carousel__arrow--left">
           <i class="el-icon-arrow-left"></i>
@@ -20,6 +22,8 @@
         <button
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
+          @mouseenter="handleButtonEnter('right')"
+          @mouseleave="handleButtonLeave"
           @click.stop="throttledArrowClick(activeIndex + 1)"
           class="el-carousel__arrow el-carousel__arrow--right">
           <i class="el-icon-arrow-right"></i>
@@ -109,6 +113,32 @@ export default {
       this.startTimer();
     },
 
+    itemInStage(item, index) {
+      const length = this.items.length;
+      if (index === length - 1 && item.inStage && this.items[0].active ||
+        (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
+        return 'left';
+      } else if (index === 0 && item.inStage && this.items[length - 1].active ||
+        (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
+        return 'right';
+      }
+      return false;
+    },
+
+    handleButtonEnter(arrow) {
+      this.items.forEach((item, index) => {
+        if (arrow === this.itemInStage(item, index)) {
+          item.hover = true;
+        }
+      });
+    },
+
+    handleButtonLeave() {
+      this.items.forEach(item => {
+        item.hover = false;
+      });
+    },
+
     handleItemChange() {
       debounce(100, () => {
         this.updateItems();
diff --git a/packages/theme-default/src/carousel-item.css b/packages/theme-default/src/carousel-item.css
index 3fc00d4b7..8991757b9 100644
--- a/packages/theme-default/src/carousel-item.css
+++ b/packages/theme-default/src/carousel-item.css
@@ -20,7 +20,8 @@
         &.is-in-stage {
           cursor: pointer;
           z-index: var(--index-normal);
-          &:hover .el-carousel__mask {
+          &:hover .el-carousel__mask,
+          &.is-hover .el-carousel__mask {
             opacity: 0.12;
           }
         }