add keystroke event detection, thanks @micheleriva

Author: mhayes

README.md

@@ -89,6 +89,7 @@ var YourComponent = Vue.extend({
 |after|URL of after image|true|String|-|
 |afterLabel|When hovering over image what label should show up over after image|false|String|-|
 |offset|How far from the left the slider should be on load (between 0 and 1)|false|Number|0.5|
+|keyboardStep|How far the slider should be moved on arrow key press (between 0 and 1)|false|Number|0.2|
 
 ## Usage
 

demo/Demo.vue

@@ -3,6 +3,7 @@
     <h2>Demo</h2>
     <TwentyTwenty
       offset="0.7"
+      keyboardStep="0.1"
       before="//placehold.it/600x200/E8117F/FFFFFF"
       beforeLabel="before"
       after="//placehold.it/600x200/CCCCCC/FFFFFF"

package.json

@@ -3,7 +3,11 @@
   "version": "0.8.1",
   "main": "./dist/vue-twentytwenty.common.js",
   "author": "Mark Hayes <[email protected]>",
-  "license": "MIT",
+  "contributors": [
+    "Mattia Astorino (https://equinsuocha.io)",
+    "Michele Riva (https://micheleriva.it)"
+  ],
+  "license": "MIT",  
   "repository": {
     "type": "git",
     "url": "https://github.com/mhayes/vue-twentytwenty"
@@ -16,12 +20,36 @@
   ],
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-service": "^4.3.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },
   "scripts": {
     "serve": "vue-cli-service serve demo/index.js",
-    "build": "vue-cli-service build --target lib --name vue-twentytwenty ./src/index.js"
-  }
+    "build": "vue-cli-service build --target lib --name vue-twentytwenty ./src/index.js",
+    "lint": "vue-cli-service lint"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/TwentyTwenty.vue

@@ -3,26 +3,33 @@
     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" />
+
     <img :src="before" alt="before"
       v-on:mousedown.prevent
       v-bind:style="beforeImgStyle" />
+
     <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"
+      tabindex="0"
+      v-on:keydown="handleArrowNavigation">
         <div class="twentytwenty-arrow-left"></div>
         <div class="twentytwenty-arrow-right"></div>
     </div>
   </div>
 </template>
 
 <script>
+
 export default {
   data () {
     return {
@@ -33,7 +40,6 @@ export default {
       overlayStyle: {}
     }
   },
-
   props: {
     before: {
       type: String,
@@ -52,50 +58,57 @@ export default {
     offset: {
       type: [String, Number],
       default: 0.5,
-      validator: (value) => {
-        return (value > 0 && value <= 1)
-      }
+      validator: (value) => (value > 0 && value <= 1)
+    },
+    keyboardStep: {
+      type: [String, Number],
+      default: 0.2,
+      validator: (value) => (value > 0 && value <= 1)
     }
   },
-
   methods: {
     setDimensions () {
       const img = this.$el.querySelector("img")
       this.imgOffset = img.getBoundingClientRect()
       this.containerStyle = { width: `${this.w}px`, height: `${this.h}px` };
     },
-
     startSlide (event) {
       this.sliding = true
       this.moveSlide(event)
       this.overlayStyle = { opacity: 0 }
     },
-
+    handleArrowNavigation(event) {
+      return this.moveSlide(event)
+    },
     moveSlide (event) {
       if (this.sliding) {
         var x = (event.touches ? event.touches[0].pageX : event.pageX) - this.imgOffset.left
         x = (x < 0) ? 0 : ((x > this.w) ? this.w : x)
-
-        this.slideOffset = (x / this.w)
+        return this.slideOffset = (x / this.w)
+      }
+      if (event.key) {
+        switch(event.key) {
+          case "Left":     // IE/Edge key
+          case "ArrowLeft":  this.slideOffset = ((this.floatOffset - this.floatKeyboardStep) >= 0) ? this.floatOffset - this.floatKeyboardStep : 0 ; break;
+          case "Right":    // IE/Edge key
+          case "ArrowRight": this.slideOffset = ((this.floatOffset + this.floatKeyboardStep) <= 1) ? this.floatOffset + this.floatKeyboardStep : 1 ; break;
+          default: return;
+        }
       }
     },
-
     endSlide () {
       this.sliding = false
       this.overlayStyle = {}
     },
-
     resize () {
       this.containerStyle = {};
       this.$nextTick(() => this.setDimensions());
     }
   },
-
   computed: {
     beforeImgStyle () {
       return { clip: `rect(0, ${this.x}px, ${this.h}px, 0)` }
     },
-
     handleStyle () {
       const size = 40;
       return {
@@ -105,30 +118,29 @@ export default {
         left: `calc(${this.slideOffset*100}% - ${size/2}px)`
       }
     },
-
     x () {
       return this.w * this.slideOffset
     },
-
     w () {
-      if (this.imgOffset)
-        return this.imgOffset.width
+      return this.imgOffset ? this.imgOffset.width : null
     },
-
     h () {
-      if (this.imgOffset)
-        return this.imgOffset.height
+      return this.imgOffset ? this.imgOffset.height : null
+    },
+    floatOffset () {
+      return parseFloat(this.slideOffset) 
+    },
+    floatKeyboardStep () {
+      return parseFloat(this.keyboardStep)
     }
   },
-
   mounted () {
     document.addEventListener("touchmove", this.moveSlide)
     document.addEventListener("touchend", this.endSlide)
     document.addEventListener("mousemove", this.moveSlide)
     document.addEventListener("mouseup", this.endSlide)
     window.addEventListener("resize", this.resize)
   },
-
   beforeDestroy () {
     document.removeEventListener("touchmove", this.moveSlide)
     document.removeEventListener("touchend", this.endSlide)
@@ -195,6 +207,10 @@ export default {
   margin-top: -4px;
   user-select: none;
 }
+.twentytwenty-container .twentytwenty-handle:active,
+.twentytwenty-container .twentytwenty-handle:focus {
+  outline: 0;
+}
 .twentytwenty-container .twentytwenty-handle:before, .twentytwenty-container .twentytwenty-handle:after {
   content: "";
   border: 2px solid white;