Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cloudfour/image-compare
Advanced tools
@cloudfour/image-compare - npm Package Compare versions
Comparing version 0.0.5 to 0.0.6
| const template = document.createElement("template"); | ||
| // Styling range input thumbs requires you to separately define the CSS rules | ||
| // for different browsers. We store them once here for ease of maintenance. | ||
| const thumbStyles = ` | ||
@@ -20,5 +22,6 @@ background-color: var(--thumb-background-color); | ||
| const thumbSvgWidth = 4; | ||
| // Since the code below is a template string literal, it will not be minified or | ||
| // transpiled | ||
| template.innerHTML = /*html*/` | ||
@@ -31,3 +34,3 @@ <style> | ||
| --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="${thumbSvgWidth}" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="${thumbSvgWidth}" d="M40 20 L50 30 L40 40"/></svg>'); | ||
| --thumb-size: 3em; | ||
| --thumb-size: clamp(3em, 10vmin, 5em); | ||
| --thumb-radius: 50%; | ||
@@ -40,4 +43,4 @@ --thumb-border-color: hsla(0, 0%, 0%, 0.9); | ||
| --border-width: 2px; | ||
| --border-color: hsla(0, 0%, 0%, 0.9); | ||
| --divider-width: 2px; | ||
| --divider-color: hsla(0, 0%, 0%, 0.9); | ||
@@ -57,10 +60,10 @@ display: flex; | ||
| clip-path: polygon( | ||
| calc(var(--exposure) + var(--border-width)/2) 0, | ||
| calc(var(--exposure) + var(--divider-width)/2) 0, | ||
| 100% 0, | ||
| 100% 100%, | ||
| calc(var(--exposure) + var(--border-width)/2) 100%); | ||
| calc(var(--exposure) + var(--divider-width)/2) 100%); | ||
| } | ||
| slot { | ||
| display: block; | ||
| display: flex; | ||
| width: 100%; | ||
@@ -72,3 +75,3 @@ } | ||
| top:0; | ||
| filter: drop-shadow(calc(var(--border-width) * -1) 0 0 var(--border-color)); | ||
| filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color)); | ||
| } | ||
@@ -120,6 +123,2 @@ | ||
| input:focus { | ||
| box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color); | ||
| } | ||
| input:focus::-moz-range-thumb { | ||
@@ -148,2 +147,23 @@ ${thumbFocusStyles} | ||
| /** | ||
| * Our ImageCompare web component class | ||
| * | ||
| * @attr {string} label-text - Provide additional context to screen reader users. | ||
| * | ||
| * @slot image-1 - Your first image. Will appear on the "left" | ||
| * @slot image-2 - Your second image. Will appear on the "right" | ||
| * | ||
| * @cssprop --thumb-background-color - The background color of the range slider handle. | ||
| * @cssprop --thumb-background-image - The background image of the range slider handle. | ||
| * @cssprop --thumb-size - The size of the range slider handle. | ||
| * @cssprop --thumb-radius - The background image of the range slider handle. | ||
| * @cssprop --thumb-border-color - The color of the range slider handle border. | ||
| * @cssprop --thumb-border-size - The width of the range slider handle border. | ||
| * | ||
| * @ccprop --focus-width - The width of the range slider handle's focus outline. | ||
| * @ccprop --focus-color - The color of the range slider handle's focus outline. | ||
| * | ||
| * @ccprop --divider-width - The width of the divider shown between the two images. | ||
| * @ccprop --divider-color - The color of the divider shown between the two images. | ||
| */ | ||
| class ImageCompare extends HTMLElement { | ||
@@ -157,3 +177,6 @@ constructor() { | ||
| this.shadowRoot.appendChild(template.content.cloneNode(true)); | ||
| this.shadowRoot.querySelector("input").addEventListener('input', this.update); | ||
| this.shadowRoot.querySelector("input").addEventListener('input', ({target}) => { | ||
| this.shadowRoot.host.style.setProperty('--exposure', `${target.value}%`) | ||
| }); | ||
@@ -165,8 +188,4 @@ const customLabel = this.shadowRoot.host.getAttribute('label-text'); | ||
| } | ||
| update = (e) => { | ||
| this.shadowRoot.host.style.setProperty('--exposure', `${e.target.value}%`) | ||
| } | ||
| } | ||
| customElements.define("image-compare", ImageCompare); |
@@ -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.85);\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: 3em;\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 --border-width: 2px;\n --border-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 width: 100%;\n }\n\n ::slotted([slot='image-2']) {\n clip-path: polygon(\n calc(var(--exposure) + var(--border-width)/2) 0, \n 100% 0, \n 100% 100%, \n calc(var(--exposure) + var(--border-width)/2) 100%);\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot[name='image-2'] {\n position: absolute;\n top:0;\n filter: drop-shadow(calc(var(--border-width) * -1) 0 0 var(--border-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 height: 100%;\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 {\n box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\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)),this.shadowRoot.querySelector("input").addEventListener("input",this.update);const n=this.shadowRoot.host.getAttribute("label-text");n&&(this.shadowRoot.querySelector(".js-label-text").textContent=n)}update=n=>{this.shadowRoot.host.style.setProperty("--exposure",`${n.target.value}%`)}}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.85);\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 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 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 height: 100%;\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)),this.shadowRoot.querySelector("input").addEventListener("input",(({target:n})=>{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); |
| { | ||
| "name": "@cloudfour/image-compare", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "A web component for comparing two images using a slider", | ||
@@ -9,12 +9,20 @@ "license": "ISC", | ||
| "main": "dist/index.js", | ||
| "prepare": "npm run build", | ||
| "prepare": "npm run prepare", | ||
| "files": [ | ||
| "dist" | ||
| "dist", | ||
| "manifests" | ||
| ], | ||
| "scripts": { | ||
| "start": "browser-sync start --server", | ||
| "clean": "del dist", | ||
| "copy": "cpy src/*.js dist", | ||
| "minify": "minify dist/index.js > dist/index.min.js", | ||
| "build": "npm run clean && npm run copy && npm run minify" | ||
| "start": "run-p start:*", | ||
| "start:browser-sync": "browser-sync start --server", | ||
| "start:watch": "npx chokidar \"src/index.js\" -c \"npm run document\"", | ||
| "build": "run-s build:*", | ||
| "build:clean": "del dist", | ||
| "build:copy": "cpy src/*.js dist", | ||
| "build:minify": "minify dist/index.js > dist/index.min.js", | ||
| "document": "run-p document:*", | ||
| "document:json": "wca analyze src/index.js --outFile manifests/manifest.json", | ||
| "document:vscode": "wca analyze src/index.js --format vscode --outFile manifests/manifest-vscode.json", | ||
| "document:md": "wca analyze src/index.js --outFile manifests/manifest.md", | ||
| "prepare": "run-p build document" | ||
| }, | ||
@@ -25,4 +33,7 @@ "devDependencies": { | ||
| "del-cli": "^4.0.0", | ||
| "minify": "^7.0.2" | ||
| "minify": "^7.0.2", | ||
| "npm-run-all": "^4.1.5", | ||
| "web-component-analyzer": "^1.1.6", | ||
| "chokidar-cli": "^2.1.0" | ||
| } | ||
| } |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by47.45%
15846
- Number of package files
- increased by80%
9
- Lines of code
- increased by59.33%
239
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by75%
7
No dependency changes