img-comparison-slider - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

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

@@ -110,5 +110,5 @@ 'use strict';
     get el() { return __chunk_1.getElement(this); }
-    static get style() { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-bg-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-hover:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-hover)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-bg-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; }
+    static get style() { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-active:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-active)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; }
 }
 
 exports.img_comparison_slider = ImgComparisonSlider;

dist/component/component.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as e}from"./p-f5cc54d5.js";o().then(o=>e([["p-0eutc65p",[[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}));
+import{p as o,b as e}from"./p-f5cc54d5.js";o().then(o=>e([["p-ouviw0su",[[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/component/p-e26e4f60.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-87e029a6.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-9gcxeqik.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})})}}});
+System.register(["./p-87e029a6.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-qhlzddvq.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/esm/img-comparison-slider.entry.js

@@ -106,5 +106,5 @@ import { r as registerInstance, h, g as getElement } from './chunk-5474dda1.js';
     get el() { return getElement(this); }
-    static get style() { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-bg-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-hover:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-hover)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-bg-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; }
+    static get style() { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-active:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-active)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; }
 }
 
 export { ImgComparisonSlider as img_comparison_slider };

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

@@ -113,3 +113,3 @@ import { r as registerInstance, h, g as getElement } from './chunk-5474dda1.js';
     Object.defineProperty(ImgComparisonSlider, "style", {
-        get: function () { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-bg-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-hover:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-hover)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-bg-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; },
+        get: function () { return ":host{--divider:1px solid #d7d7d7;--hint-size:40px;--hint-color:#d7d7d7;--hint-opacity:0.5;--hint-opacity-active:0;position:relative;display:inline-block;font-size:0;overflow:hidden}:host(:focus) .hint,:host(:hover) .hint{opacity:0}::slotted(img){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component:hover .hint{opacity:var(--hint-opacity-active)}.hint{position:absolute;width:var(--hint-size);height:var(--hint-size);background-color:var(--hint-color);top:50%;margin-top:calc(var(--hint-size) / (-2));margin-left:calc(var(--hint-size) / (-2));-webkit-transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,-webkit-transform 1s;transition:opacity 1s,transform 1s;transition:opacity 1s,transform 1s,-webkit-transform 1s;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.75);box-shadow:0 0 15px 0 rgba(0,0,0,.75);pointer-events:none;opacity:var(--hint-opacity);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.focused .hint{-webkit-transform:rotate(45deg) scale(1.5);transform:rotate(45deg) scale(1.5)}.after{position:absolute;left:0;top:0;bottom:0;overflow:hidden;border-right:var(--divider)}"; },
         enumerable: true,
@@ -116,0 +116,0 @@ configurable: true

package.json

 {
   "name": "img-comparison-slider",
-  "version": "2.1.0",
-  "description": "Stencil Component Starter",
+  "version": "2.1.1",
+  "description": "Slider component to compare images before and after",
   "main": "dist/index.js",
@@ -17,2 +17,10 @@ "module": "dist/index.mjs",
   ],
+  "keywords": [
+    "image",
+    "img",
+    "slider",
+    "compare",
+    "comparison",
+    "web-component"
+  ],
   "scripts": {
@@ -19,0 +27,0 @@ "clean": "rimraf .stencil dist loader www",

README.md

 # img-comparison-slider
 
+Slider component to compare images before and after.
+
 [![npm package](https://img.shields.io/npm/v/img-comparison-slider.svg)](https://www.npmjs.com/package/img-comparison-slider)
@@ -12,8 +14,13 @@ [![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)
 
-## Features
+## Overview
 
+This is the best comparison slider because it:
+
 * Looks great on mobile devices
 * Supports keyboard
+* Responsive
+* Works with plain HTML pages, React, Angular, or Vue
 * Easy to install
-* Web component. Works with HTML, React, Angular, or Vue
+* Lightweight ~7kb
+* Zero dependencies
 
@@ -27,2 +34,3 @@ ## Installation
 <script nomodule="" src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@latest/dist/collection/styles/initial.css">
 
@@ -35,105 +43,31 @@ <img-comparison-slider>
 
-### React
+### Frameworks support
 
-```bash
-yarn add img-comparison-slider
-```
+* [React](docs/installation/react.md)
+* [Angular](docs/installation/angular.md)
+* [Vue](docs/installation/vue.md)
 
-```js
-// index.js
-import { defineCustomElements as defineImgComparisonSlider } from 'img-comparison-slider/loader';
+## Styling
 
-defineImgComparisonSlider(window);
-```
+The component could be styled with the help of CSS3 variables.
 
-```jsx
-render() {
-    return (
-      <img-comparison-slider>
-        <img slot="before" src="before.jpg" />
-        <img slot="after" src="after.jpg" />
-      </img-comparison-slider>
-    )
-}
-```
+Example:
 
-## Angular
-
-```bash
-npm install --save img-comparison-slider
+```html
+<style type="text/css">
+  img-comparison-slider {
+    --divider: 3px solid #c0c0c0;
+    --hint-opacity: 0.3;
+  }
+</style>
 ```
 
-`CUSTOM_ELEMENTS_SCHEMA` should be added into the
-`AppModule` and in every other modules that uses `img-comparison-slider`:
+### Available variables
 
-```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, FormsModule],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class AppModule {}
-```
-
-Define slider in `main.ts`:
-
-```typescript
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-// Note: loader import location set using "esmLoaderPath" within the output target confg
-import { defineCustomElements as defineImgComponentSlider } from 'img-comparison-slider/loader';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
-defineImgComponentSlider(window);
-```
-
-## Vue
-
-```bash
-npm install --save img-comparison-slider
-```
-
-Steps to reproduce
-
-* importing the node module
-* tell Vue to ignore the custom element tags (see https://vuejs.org/v2/api/#ignoredElements)
-* bind `img-comparison-slider` code to the window object
-
-```js
-import Vue from 'vue';
-import App from './App.vue';
-
-import { applyPolyfills, defineCustomElements } from 'img-comparison-slider/loader';
-
-Vue.config.productionTip = false;
-
-// Tell Vue to ignore all components defined in the test-components
-// package. The regex assumes all components names are prefixed
-// 'test'
-Vue.config.ignoredElements = [/test-\w*/];
-
-// Bind the custom elements to the window object
-applyPolyfills().then(() => {
-  defineCustomElements(window);
-});
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app');
-```
+| Variable | Description | Default value |
+| --- | --- | --- |
+| `--divider` | Vertical line dividing before and after image | `1px solid #d7d7d7` |
+| `--hint-size` | Size of hint arrows at the middle of divider | `40px` |
+| `--hint-color` | Color of hint arrows at the middle of divider | `#d7d7d7` |
+| `--hint-opacity` | Opacity of hint arrows | `0.5` |
+| `--hint-opacity-active` | On hover/focus opacity of hint arrows | `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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

844735

decreased by-0.15%

Number of lines in readme file

70

decreased by-48.53%

No dependency changes