From d75ff762c8eded3ef5119074187940355e79af2d Mon Sep 17 00:00:00 2001
From: Silvester <silvester.triebnig@eox.at>
Date: Wed, 12 Dec 2018 10:47:40 +0100
Subject: [PATCH 1/2] Fixed overlay flickering while dragging handle

When dragging the handle, the .twentytwenty-overlay previously faded in and out as soon as the mouse left the handle div. Now, the hover class is applied to the .twentytwenty-container directly and gets overwritten at the startSlide() event. Also, v-on:touchstart="startSlide" and v-on:mousedown="startSlide" were moved from the .twentytwenty-overlay to the .twentytwenty-handle to create a user experience more consistent with the original http://zurb.com/playground/twentytwenty.
---
 src/TwentyTwenty.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/TwentyTwenty.vue b/src/TwentyTwenty.vue
index 2a9c38d..4a3109b 100644
--- a/src/TwentyTwenty.vue
+++ b/src/TwentyTwenty.vue
@@ -1,20 +1,21 @@
 <template>
   <div class="twentytwenty-container"
-    v-bind:style="containerStyle"
-    v-on:touchstart="startSlide"
-    v-on:mousedown="startSlide">
+    v-bind:style="containerStyle">
     <img :src="after" alt="after"
       v-on:mousedown.prevent
       v-on:load="setDimensions" />
     <img :src="before" alt="before"
       v-on:mousedown.prevent
       v-bind:style="beforeImgStyle" />
-    <div class="twentytwenty-overlay">
+    <div class="twentytwenty-overlay"
+      v-bind:style="overlayStyle">
       <div v-if="beforeLabel" class="twentytwenty-before-label">{{beforeLabel}}</div>
       <div v-if="afterLabel" class="twentytwenty-after-label">{{afterLabel}}</div>
     </div>
     <div class="twentytwenty-handle"
-      v-bind:style="handleStyle">
+      v-bind:style="handleStyle"
+      v-on:touchstart="startSlide"
+      v-on:mousedown="startSlide">
         <div class="twentytwenty-arrow-left"></div>
         <div class="twentytwenty-arrow-right"></div>
     </div>
@@ -28,7 +29,8 @@ export default {
       imgOffset: null,
       slideOffset: this.offset,
       sliding: false,
-      containerStyle: {}
+      containerStyle: {},
+      overlayStyle: {}
     }
   },
 
@@ -66,6 +68,7 @@ export default {
     startSlide (event) {
       this.sliding = true
       this.moveSlide(event)
+      this.overlayStyle = { opacity: 0 }
     },
 
     moveSlide (event) {
@@ -77,7 +80,10 @@ export default {
       }
     },
 
-    endSlide () { this.sliding = false },
+    endSlide () {
+      this.sliding = false
+      this.overlayStyle = {}
+    },
 
     resize () {
       this.containerStyle = {};
@@ -175,7 +181,7 @@ export default {
 .twentytwenty-container .twentytwenty-overlay .twentytwenty-after-label {
   right: 0;
 }
-.twentytwenty-container .twentytwenty-overlay:hover {
+.twentytwenty-container:hover > .twentytwenty-overlay {
   opacity: 1;
 }
 .twentytwenty-container .twentytwenty-handle {

From 4ea04ccf6471816c5ba530f67eb9160138c50921 Mon Sep 17 00:00:00 2001
From: Mark Hayes <mhayes@repairpal.com>
Date: Wed, 12 Dec 2018 14:35:54 -0800
Subject: [PATCH 2/2] Revert change to handle positioning

---
 src/TwentyTwenty.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/TwentyTwenty.vue b/src/TwentyTwenty.vue
index 4a3109b..99ff61c 100644
--- a/src/TwentyTwenty.vue
+++ b/src/TwentyTwenty.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="twentytwenty-container"
-    v-bind:style="containerStyle">
+    v-bind:style="containerStyle"
+    v-on:touchstart="startSlide"
+    v-on:mousedown="startSlide">
     <img :src="after" alt="after"
       v-on:mousedown.prevent
       v-on:load="setDimensions" />
@@ -13,9 +15,7 @@
       <div v-if="afterLabel" class="twentytwenty-after-label">{{afterLabel}}</div>
     </div>
     <div class="twentytwenty-handle"
-      v-bind:style="handleStyle"
-      v-on:touchstart="startSlide"
-      v-on:mousedown="startSlide">
+      v-bind:style="handleStyle">
         <div class="twentytwenty-arrow-left"></div>
         <div class="twentytwenty-arrow-right"></div>
     </div>