img-comparison-slider - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/cjs/img-comparison-slider.cjs.entry.js

@@ -16,2 +16,6 @@ 'use strict';
 };
+const KeySlideOffset = {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+};
 class ImgComparisonSlider {
@@ -34,11 +38,20 @@ constructor(hostRef) {
     onKeyDown(e) {
-        if (e.key === 'ArrowLeft') {
-            this.slide(-1);
+        if (this.keyboardSlideAnimationTimeoutId) {
             return;
         }
-        if (e.key === 'ArrowRight') {
-            this.slide(1);
+        const key = e.key;
+        if (!Object.keys(KeySlideOffset).includes(key)) {
             return;
         }
+        this.startSlideAnimation(KeySlideOffset[key]);
     }
+    onKeyUp(e) {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        if (!Object.keys(KeySlideOffset).includes(e.key)) {
+            return;
+        }
+        this.stopSlideAnimation();
+    }
     onMouseDown(e) {
@@ -56,2 +69,5 @@ this.isMouseDown = true;
     }
+    onBlur() {
+        this.stopSlideAnimation();
+    }
     updateAfterWidth() {
@@ -66,2 +82,22 @@ this.imageWidth = this.el.offsetWidth;
     }
+    startSlideAnimation(offset) {
+        const fps = 120;
+        const fraction = 1 * offset;
+        const slide = () => {
+            this.keyboardSlideAnimationTimeoutId = window.setTimeout(() => {
+                this.animationRequestId = window.requestAnimationFrame(slide);
+            }, 1000 / fps);
+            this.slide(fraction);
+        };
+        slide();
+    }
+    stopSlideAnimation() {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        window.clearTimeout(this.keyboardSlideAnimationTimeoutId);
+        window.cancelAnimationFrame(this.animationRequestId);
+        this.keyboardSlideAnimationTimeoutId = null;
+        this.animationRequestId = null;
+    }
     render() {
@@ -68,0 +104,0 @@ return __chunk_1.h("div", null, __chunk_1.h("div", { ref: el => this.before = el }, __chunk_1.h("slot", { name: "before" })), __chunk_1.h("div", { class: "after", ref: el => this.after = el }, __chunk_1.h("div", { ref: el => this.afterImageContainer = el }, __chunk_1.h("slot", { name: "after" }))), __chunk_1.h("div", { class: "hint", ref: el => this.hint = el }));

dist/cjs/img-comparison-slider.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 __chunk_1.patchBrowser().then(resourcesUrl => {
-  return __chunk_1.bootstrapLazy([["img-comparison-slider.cjs",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[9,"resize","updateAfterWidth"]]]]]], { resourcesUrl });
+  return __chunk_1.bootstrapLazy([["img-comparison-slider.cjs",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[0,"blur","onBlur"],[9,"resize","updateAfterWidth"]]]]]], { resourcesUrl });
 });

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return __chunk_1.patchEsm().then(() => {
-    __chunk_1.bootstrapLazy([["img-comparison-slider.cjs",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[9,"resize","updateAfterWidth"]]]]]], options);
+    __chunk_1.bootstrapLazy([["img-comparison-slider.cjs",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[0,"blur","onBlur"],[9,"resize","updateAfterWidth"]]]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/collection/components/img-comparison-slider/img-comparison-slider.js

@@ -11,2 +11,6 @@ import { h } from '@stencil/core';
 };
+const KeySlideOffset = {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+};
 export class ImgComparisonSlider {
@@ -28,11 +32,20 @@ constructor() {
     onKeyDown(e) {
-        if (e.key === 'ArrowLeft') {
-            this.slide(-1);
+        if (this.keyboardSlideAnimationTimeoutId) {
             return;
         }
-        if (e.key === 'ArrowRight') {
-            this.slide(1);
+        const key = e.key;
+        if (!Object.keys(KeySlideOffset).includes(key)) {
             return;
         }
+        this.startSlideAnimation(KeySlideOffset[key]);
     }
+    onKeyUp(e) {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        if (!Object.keys(KeySlideOffset).includes(e.key)) {
+            return;
+        }
+        this.stopSlideAnimation();
+    }
     onMouseDown(e) {
@@ -50,2 +63,5 @@ this.isMouseDown = true;
     }
+    onBlur() {
+        this.stopSlideAnimation();
+    }
     updateAfterWidth() {
@@ -60,2 +76,22 @@ this.imageWidth = this.el.offsetWidth;
     }
+    startSlideAnimation(offset) {
+        const fps = 120;
+        const fraction = 1 * offset;
+        const slide = () => {
+            this.keyboardSlideAnimationTimeoutId = window.setTimeout(() => {
+                this.animationRequestId = window.requestAnimationFrame(slide);
+            }, 1000 / fps);
+            this.slide(fraction);
+        };
+        slide();
+    }
+    stopSlideAnimation() {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        window.clearTimeout(this.keyboardSlideAnimationTimeoutId);
+        window.cancelAnimationFrame(this.animationRequestId);
+        this.keyboardSlideAnimationTimeoutId = null;
+        this.animationRequestId = null;
+    }
     render() {
@@ -86,2 +122,8 @@ return h("div", null,
         }, {
+            "name": "keyup",
+            "method": "onKeyUp",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
             "name": "touchstart",
@@ -123,2 +165,8 @@ "method": "onMouseDown",
         }, {
+            "name": "blur",
+            "method": "onBlur",
+            "target": undefined,
+            "capture": false,
+            "passive": false
+        }, {
             "name": "resize",
@@ -125,0 +173,0 @@ "method": "updateAfterWidth",

dist/esm/img-comparison-slider.entry.js

@@ -12,2 +12,6 @@ import { r as registerInstance, h, g as getElement } from './chunk-a29885d4.js';
 };
+const KeySlideOffset = {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+};
 class ImgComparisonSlider {
@@ -30,11 +34,20 @@ constructor(hostRef) {
     onKeyDown(e) {
-        if (e.key === 'ArrowLeft') {
-            this.slide(-1);
+        if (this.keyboardSlideAnimationTimeoutId) {
             return;
         }
-        if (e.key === 'ArrowRight') {
-            this.slide(1);
+        const key = e.key;
+        if (!Object.keys(KeySlideOffset).includes(key)) {
             return;
         }
+        this.startSlideAnimation(KeySlideOffset[key]);
     }
+    onKeyUp(e) {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        if (!Object.keys(KeySlideOffset).includes(e.key)) {
+            return;
+        }
+        this.stopSlideAnimation();
+    }
     onMouseDown(e) {
@@ -52,2 +65,5 @@ this.isMouseDown = true;
     }
+    onBlur() {
+        this.stopSlideAnimation();
+    }
     updateAfterWidth() {
@@ -62,2 +78,22 @@ this.imageWidth = this.el.offsetWidth;
     }
+    startSlideAnimation(offset) {
+        const fps = 120;
+        const fraction = 1 * offset;
+        const slide = () => {
+            this.keyboardSlideAnimationTimeoutId = window.setTimeout(() => {
+                this.animationRequestId = window.requestAnimationFrame(slide);
+            }, 1000 / fps);
+            this.slide(fraction);
+        };
+        slide();
+    }
+    stopSlideAnimation() {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        window.clearTimeout(this.keyboardSlideAnimationTimeoutId);
+        window.cancelAnimationFrame(this.animationRequestId);
+        this.keyboardSlideAnimationTimeoutId = null;
+        this.animationRequestId = null;
+    }
     render() {
@@ -64,0 +100,0 @@ return h("div", null, h("div", { ref: el => this.before = el }, h("slot", { name: "before" })), h("div", { class: "after", ref: el => this.after = el }, h("div", { ref: el => this.afterImageContainer = el }, h("slot", { name: "after" }))), h("div", { class: "hint", ref: el => this.hint = el }));

dist/esm/legacy/img-comparison-slider.entry.js

@@ -11,2 +11,6 @@ import { r as registerInstance, h, g as getElement } from './chunk-a29885d4.js';
 };
+var KeySlideOffset = {
+    'ArrowLeft': -1,
+    'ArrowRight': 1,
+};
 var ImgComparisonSlider = /** @class */ (function () {
@@ -30,11 +34,20 @@ function ImgComparisonSlider(hostRef) {
     ImgComparisonSlider.prototype.onKeyDown = function (e) {
-        if (e.key === 'ArrowLeft') {
-            this.slide(-1);
+        if (this.keyboardSlideAnimationTimeoutId) {
             return;
         }
-        if (e.key === 'ArrowRight') {
-            this.slide(1);
+        var key = e.key;
+        if (!Object.keys(KeySlideOffset).includes(key)) {
             return;
         }
+        this.startSlideAnimation(KeySlideOffset[key]);
     };
+    ImgComparisonSlider.prototype.onKeyUp = function (e) {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        if (!Object.keys(KeySlideOffset).includes(e.key)) {
+            return;
+        }
+        this.stopSlideAnimation();
+    };
     ImgComparisonSlider.prototype.onMouseDown = function (e) {
@@ -52,2 +65,5 @@ this.isMouseDown = true;
     };
+    ImgComparisonSlider.prototype.onBlur = function () {
+        this.stopSlideAnimation();
+    };
     ImgComparisonSlider.prototype.updateAfterWidth = function () {
@@ -62,2 +78,23 @@ this.imageWidth = this.el.offsetWidth;
     };
+    ImgComparisonSlider.prototype.startSlideAnimation = function (offset) {
+        var _this = this;
+        var fps = 120;
+        var fraction = 1 * offset;
+        var slide = function () {
+            _this.keyboardSlideAnimationTimeoutId = window.setTimeout(function () {
+                _this.animationRequestId = window.requestAnimationFrame(slide);
+            }, 1000 / fps);
+            _this.slide(fraction);
+        };
+        slide();
+    };
+    ImgComparisonSlider.prototype.stopSlideAnimation = function () {
+        if (!this.keyboardSlideAnimationTimeoutId) {
+            return;
+        }
+        window.clearTimeout(this.keyboardSlideAnimationTimeoutId);
+        window.cancelAnimationFrame(this.animationRequestId);
+        this.keyboardSlideAnimationTimeoutId = null;
+        this.animationRequestId = null;
+    };
     ImgComparisonSlider.prototype.render = function () {
@@ -64,0 +101,0 @@ var _this = this;

dist/img-comparison-slider/img-comparison-slider.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as e}from"./p-13b0f39b.js";o().then(o=>e([["p-sqbnw0br",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[9,"resize","updateAfterWidth"]]]]]],{resourcesUrl:o}));
+import{p as o,b as e}from"./p-13b0f39b.js";o().then(o=>e([["p-pnvlrzcn",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[0,"blur","onBlur"],[9,"resize","updateAfterWidth"]]]]]],{resourcesUrl:o}));

dist/img-comparison-slider/p-14d8eb68.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-334f7fd6.system.js"],function(){"use strict";var e,o;return{setters:[function(n){e=n.p;o=n.b}],execute:function(){e().then(function(e){return o([["p-0e3gxf51.system",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[9,"resize","updateAfterWidth"]]]]]],{resourcesUrl:e})})}}});
+System.register(["./p-334f7fd6.system.js"],function(){"use strict";var e,o;return{setters:[function(n){e=n.p;o=n.b}],execute:function(){e().then(function(e){return o([["p-af4blkbo.system",[[1,"img-comparison-slider",null,[[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"],[1,"touchstart","onMouseDown"],[1,"mousedown","onMouseDown"],[1,"touchend","onMouseUp"],[9,"mouseup","onMouseUp"],[1,"mousemove","onMouseMove"],[1,"touchmove","onMouseMove"],[0,"blur","onBlur"],[9,"resize","updateAfterWidth"]]]]]],{resourcesUrl:e})})}}});

dist/types/components/img-comparison-slider/img-comparison-slider.d.ts

@@ -10,11 +10,17 @@ export declare class ImgComparisonSlider {
     private isMouseDown;
+    private keyboardSlideAnimationTimeoutId;
+    private animationRequestId;
     componentDidRender(): void;
     slide(increment?: number): void;
     onKeyDown(e: KeyboardEvent): void;
+    onKeyUp(e: KeyboardEvent): void;
     onMouseDown(e: MouseEvent): void;
     onMouseUp(e: MouseEvent): void;
     onMouseMove(e: MouseEvent): void;
+    onBlur(): void;
     updateAfterWidth(): void;
     slideToEvent(e: MouseEvent): void;
+    private startSlideAnimation;
+    private stopSlideAnimation;
     render(): any;
 }

package.json

 {
   "name": "img-comparison-slider",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # img-comparison-slider
 
+[![npm package](https://img.shields.io/npm/v/img-comparison-slider.svg)](https://www.npmjs.com/package/img-comparison-slider)
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d)](https://stenciljs.com)
+
 ## Browsers support
@@ -4,0 +7,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

844641

increased by1.01%

Lines of code

11021

increased by1.5%

Number of lines in readme file

136

increased by2.26%

No dependency changes