@cloudfour/image-compare - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.js

@@ -169,4 +169,2 @@ const template = document.createElement("template");
 
-  animationFrame;
-
   connectedCallback() {
@@ -173,0 +171,0 @@ this.shadowRoot.appendChild(template.content.cloneNode(true));

dist/index.min.js

@@ -1,1 +0,1 @@
-const template=document.createElement("template"),thumbStyles="\n  background-color: var(--thumb-background-color);\n  background-image: var(--thumb-background-image);\n  background-size: 90%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border-radius: var(--thumb-radius);\n  border: var(--thumb-border-size) var(--thumb-border-color) solid;\n  color: var(--thumb-border-color);\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n",thumbFocusStyles="\n  box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\n",thumbSvgWidth=4;template.innerHTML=`\n  <style>\n    :host {\n      --exposure: 50%;\n\n      --thumb-background-color: hsla(0, 0%, 100%, 0.9);\n      --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');\n      --thumb-size: clamp(3em, 10vmin, 5em);\n      --thumb-radius: 50%;\n      --thumb-border-color: hsla(0, 0%, 0%, 0.9);\n      --thumb-border-size: 2px;\n\n      --focus-width: var(--thumb-border-size);\n      --focus-color: hsl(200, 100%, 80%);\n\n      --divider-width: 2px;\n      --divider-color: hsla(0, 0%, 0%, 0.9);\n\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(img) {\n      height: auto;\n      width: 100%;\n    }\n\n    ::slotted([slot='image-2']) {\n      clip-path: polygon(\n        calc(var(--exposure) + var(--divider-width)/2) 0, \n        100% 0, \n        100% 100%, \n        calc(var(--exposure) + var(--divider-width)/2) 100%);\n    }\n\n    slot {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    slot[name='image-2'] {\n      position: absolute;\n      top:0;\n      filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));\n    }\n\n    .visually-hidden {\n      border: 0; \n      clip: rect(0 0 0 0); \n      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      height: 1px; \n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n    }\n\n    label {\n      align-items: stretch;\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n\n    input {\n      cursor: col-resize;\n      margin: 0 calc(var(--thumb-size) / -2);\n      width: calc(100% + var(--thumb-size));\n      appearance: none;\n      -webkit-appearance: none;\n      background: none;\n      border: none;\n    }\n\n    ::-moz-range-thumb {\n      ${thumbStyles}\n    }\n\n    ::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${thumbStyles}\n    }\n\n    input:focus::-moz-range-thumb {\n      ${thumbFocusStyles}\n    }\n\n    input:focus::-webkit-slider-thumb {\n      ${thumbFocusStyles}\n    }\n  </style>\n\n  <slot name="image-1"></slot>\n  <slot name="image-2"></slot>\n  \n  <label>\n    <span class="visually-hidden js-label-text">\n      Control how much of each overlapping image is shown. \n      0 means the first image is completely hidden and the second image is fully visible.\n      100 means the first image is fully visible and the second image is completely hidden.\n      50 means both images are half-shown, half-hidden.\n    </span>\n    <input type="range" value="50" min="0" max="100"/>\n  </label>\n`;class ImageCompare extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}animationFrame;connectedCallback(){this.shadowRoot.appendChild(template.content.cloneNode(!0)),["input","change"].forEach((n=>{this.shadowRoot.querySelector("input").addEventListener(n,(({target:n})=>{this.animationFrame&&cancelAnimationFrame(this.animationFrame),this.animationFrame=requestAnimationFrame((()=>{this.shadowRoot.host.style.setProperty("--exposure",`${n.value}%`)}))}))}));const n=this.shadowRoot.host.getAttribute("label-text");n&&(this.shadowRoot.querySelector(".js-label-text").textContent=n)}}customElements.define("image-compare",ImageCompare);
+const template=document.createElement("template"),thumbStyles="\n  background-color: var(--thumb-background-color);\n  background-image: var(--thumb-background-image);\n  background-size: 90%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border-radius: var(--thumb-radius);\n  border: var(--thumb-border-size) var(--thumb-border-color) solid;\n  color: var(--thumb-border-color);\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n",thumbFocusStyles="\n  box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\n",thumbSvgWidth=4;template.innerHTML=`\n  <style>\n    :host {\n      --exposure: 50%;\n\n      --thumb-background-color: hsla(0, 0%, 100%, 0.9);\n      --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');\n      --thumb-size: clamp(3em, 10vmin, 5em);\n      --thumb-radius: 50%;\n      --thumb-border-color: hsla(0, 0%, 0%, 0.9);\n      --thumb-border-size: 2px;\n\n      --focus-width: var(--thumb-border-size);\n      --focus-color: hsl(200, 100%, 80%);\n\n      --divider-width: 2px;\n      --divider-color: hsla(0, 0%, 0%, 0.9);\n\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(img) {\n      height: auto;\n      width: 100%;\n    }\n\n    ::slotted([slot='image-2']) {\n      clip-path: polygon(\n        calc(var(--exposure) + var(--divider-width)/2) 0, \n        100% 0, \n        100% 100%, \n        calc(var(--exposure) + var(--divider-width)/2) 100%);\n    }\n\n    slot {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    slot[name='image-2'] {\n      position: absolute;\n      top:0;\n      filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));\n    }\n\n    .visually-hidden {\n      border: 0; \n      clip: rect(0 0 0 0); \n      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      height: 1px; \n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n    }\n\n    label {\n      align-items: stretch;\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n\n    input {\n      cursor: col-resize;\n      margin: 0 calc(var(--thumb-size) / -2);\n      width: calc(100% + var(--thumb-size));\n      appearance: none;\n      -webkit-appearance: none;\n      background: none;\n      border: none;\n    }\n\n    ::-moz-range-thumb {\n      ${thumbStyles}\n    }\n\n    ::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${thumbStyles}\n    }\n\n    input:focus::-moz-range-thumb {\n      ${thumbFocusStyles}\n    }\n\n    input:focus::-webkit-slider-thumb {\n      ${thumbFocusStyles}\n    }\n  </style>\n\n  <slot name="image-1"></slot>\n  <slot name="image-2"></slot>\n  \n  <label>\n    <span class="visually-hidden js-label-text">\n      Control how much of each overlapping image is shown. \n      0 means the first image is completely hidden and the second image is fully visible.\n      100 means the first image is fully visible and the second image is completely hidden.\n      50 means both images are half-shown, half-hidden.\n    </span>\n    <input type="range" value="50" min="0" max="100"/>\n  </label>\n`;class ImageCompare extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.appendChild(template.content.cloneNode(!0)),["input","change"].forEach((n=>{this.shadowRoot.querySelector("input").addEventListener(n,(({target:n})=>{this.animationFrame&&cancelAnimationFrame(this.animationFrame),this.animationFrame=requestAnimationFrame((()=>{this.shadowRoot.host.style.setProperty("--exposure",`${n.value}%`)}))}))}));const n=this.shadowRoot.host.getAttribute("label-text");n&&(this.shadowRoot.querySelector(".js-label-text").textContent=n)}}customElements.define("image-compare",ImageCompare);

manifests/manifest-vscode.json

@@ -6,3 +6,3 @@ {
       "name": "image-compare",
-      "description": "Our ImageCompare web component class\n\nSlots:\n\n  * `image-1` {} - Your first image. Will appear on the \"left\"\n\n  * `image-2` {} - Your second image. Will appear on the \"right\"\n\nAttributes:\n\n  * `label-text` {string} - Provide additional context to screen reader users.\n\nProperties:\n\n  * `animationFrame` - ",
+      "description": "Our ImageCompare web component class\n\nSlots:\n\n  * `image-1` {} - Your first image. Will appear on the \"left\"\n\n  * `image-2` {} - Your second image. Will appear on the \"right\"\n\nAttributes:\n\n  * `label-text` {string} - Provide additional context to screen reader users.",
       "attributes": [
@@ -9,0 +9,0 @@ {

manifests/manifest.json

@@ -15,7 +15,2 @@ {
       ],
-      "properties": [
-        {
-          "name": "animationFrame"
-        }
-      ],
       "slots": [
@@ -22,0 +17,0 @@ {

manifests/manifest.md

@@ -11,8 +11,2 @@ # image-compare
 
-## Properties
-
-| Property         |
-|------------------|
-| `animationFrame` |
-
 ## Slots
@@ -19,0 +13,0 @@

package.json

 {
   "name": "@cloudfour/image-compare",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A tiny, zero-dependency web component for comparing two images using a slider. Built with a focus on accessibility, performance, and progressive enhancement.",
@@ -32,7 +32,7 @@ "license": "ISC",
     "del-cli": "4.0.1",
-    "minify": "7.0.2",
+    "minify": "8.0.3",
     "npm-run-all": "4.1.5",
     "web-component-analyzer": "1.1.6",
-    "chokidar-cli": "2.1.0"
+    "chokidar-cli": "3.0.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

Worsened metrics

Total package byte prevSize

16807

decreased by-1.43%

Lines of code

249

decreased by-2.73%

No dependency changes