img-comparison-slider
Advanced tools
Comparing version 7.1.3 to 7.2.0
@@ -7,2 +7,3 @@ export declare class HTMLImgComparisonSliderElement extends HTMLElement { | ||
private exposure; | ||
private slideOnHover; | ||
private isMouseDown; | ||
@@ -14,7 +15,11 @@ private isAnimating; | ||
set value(newValue: any); | ||
get hover(): any; | ||
set hover(newValue: any); | ||
static get observedAttributes(): string[]; | ||
constructor(); | ||
private connectedCallback; | ||
private disconnectedCallback; | ||
private attributeChangedCallback; | ||
private slide; | ||
private onWindowMouseMove; | ||
private onMouseMove; | ||
private bodyUserSelectStyle; | ||
@@ -21,0 +26,0 @@ private onMouseDown; |
@@ -1,2 +0,2 @@ | ||
(()=>{"use strict";var e={90:(e,t,i)=>{i.d(t,{Z:()=>n});var s=i(645),o=i.n(s)()((function(e){return e[1]}));o.push([e.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}::slotted(*){-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}.first{position:absolute;left:0;top:0;line-height:normal;font-size:100%;max-height:100%;--exposure: 50%;--transition-time: 0ms;transform:translateX(calc(var(--exposure) * -1));transition:transform var(--transition-time)}.first .first-overlay-container{position:relative;transform:translateX(var(--exposure));transition:transform var(--transition-time)}.first .first-overlay{overflow:hidden}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:0;height:100%;display:flex;align-items:flex-end;justify-content:center;flex-direction:column}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translateX(-0.5px)}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}',""]);const n=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i=e(t);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i})).join("")},t.i=function(e,i,s){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(s)for(var n=0;n<this.length;n++){var r=this[n][0];null!=r&&(o[r]=!0)}for(var a=0;a<e.length;a++){var d=[].concat(e[a]);s&&o[d[0]]||(i&&(d[2]?d[2]="".concat(i," and ").concat(d[2]):d[2]=i),t.push(d))}},t}}},t={};function i(s){var o=t[s];if(void 0!==o)return o.exports;var n=t[s]={id:s,exports:{}};return e[s](n,n.exports,i),n.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var s in t)i.o(t,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e=i(90);const t="rendered",s=document.createElement("template");s.innerHTML=`<style>${e.Z}</style><div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> `;const o={ArrowLeft:-1,ArrowRight:1},n=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY});class r extends HTMLElement{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.isMouseDown=!1,this.isFocused=!1,this.onWindowMouseMove=e=>{this.isMouseDown&&this.slideToPageX(e.pageX)},this.bodyUserSelectStyle="",this.onMouseDown=e=>{window.addEventListener("mousemove",this.onWindowMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition(),this.slideToPageX(e.pageX),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,window.document.body.style.userSelect="none"},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.removeEventListener("mousemove",this.onWindowMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=e=>{this.touchStartPoint=n(e),this.isFocused&&(this.enableTransition(),this.slideToPageX(e.touches[0].pageX))},this.onTouchMove=e=>{if(this.isTouchComparing)return this.slideToPageX(e.touches[0].pageX),e.preventDefault(),!1;if(!this.hasTouchMoved){const t=n(e);if(Math.abs(t.y-this.touchStartPoint.y)<Math.abs(t.x-this.touchStartPoint.x))return this.isTouchComparing=!0,this.focus(),this.slideToPageX(e.touches[0].pageX),e.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1},this.onFocus=()=>{this.isFocused=!0},this.onKeyDown=e=>{if(this.isAnimating)return;this.isAnimating=!0;const t=e.key;void 0!==o[t]&&this.startSlideAnimation(o[t])},this.onKeyUp=e=>{this.isAnimating&&void 0!==o[e.key]&&this.stopSlideAnimation()},this.resetWidth=()=>{this.imageWidth=this.offsetWidth};const e=this.attachShadow({mode:"open"});e.appendChild(s.content.cloneNode(!0)),this.firstElement=e.getElementById("first"),this.firstImageContainerElement=e.getElementById("firstImageContainer"),this.secondElement=e.getElementById("second")}get value(){return this.exposure}set value(e){this.exposure=parseFloat(e),this.slide()}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",(e=>(e.preventDefault(),!1))),new ResizeObserver(this.resetWidth).observe(this),this.slide(0),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.resetWidth(),this.classList.contains(t)||this.classList.add(t),this.querySelectorAll('[slot="before"], [slot="after"]').length>0&&console.warn('<img-comparison-slider>: slot names "before" and "after" are deprecated and soon won\'t be supported. Please use slot="first" instead of slot="after", and slot="second" instead of slot="before".')}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}slide(e=0){var t;this.exposure=(100,(t=this.exposure+e)<0?0:t>100?100:t),this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slideToPageX(e){const t=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=t/this.imageWidth*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout((()=>{this.firstElement.style.setProperty("--transition-time","0ms"),this.transitionTimer=null}),100)}startSlideAnimation(e){let t=null;const i=s=>{null===t&&(t=s);const o=(s-t)/16.666666666666668*e;this.slide(o),this.isAnimating&&(window.requestAnimationFrame(i),t=s)};window.requestAnimationFrame(i)}stopSlideAnimation(){this.isAnimating=!1}}window.customElements.define("img-comparison-slider",r)})()})(); | ||
(()=>{"use strict";var e={90:(e,t,s)=>{s.d(t,{Z:()=>n});var i=s(645),o=s.n(i)()((function(e){return e[1]}));o.push([e.id,':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}::slotted(*){-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}.first{position:absolute;left:0;top:0;line-height:normal;font-size:100%;max-height:100%;--exposure: 50%;--transition-time: 0ms;transform:translateX(calc(var(--exposure) * -1));transition:transform var(--transition-time)}.first .first-overlay-container{position:relative;transform:translateX(var(--exposure));transition:transform var(--transition-time)}.first .first-overlay{overflow:hidden}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:0;height:100%;display:flex;align-items:flex-end;justify-content:center;flex-direction:column}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translateX(-0.5px)}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}',""]);const n=o},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var s=e(t);return t[2]?"@media ".concat(t[2]," {").concat(s,"}"):s})).join("")},t.i=function(e,s,i){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(i)for(var n=0;n<this.length;n++){var r=this[n][0];null!=r&&(o[r]=!0)}for(var a=0;a<e.length;a++){var d=[].concat(e[a]);i&&o[d[0]]||(s&&(d[2]?d[2]="".concat(s," and ").concat(d[2]):d[2]=s),t.push(d))}},t}}},t={};function s(i){var o=t[i];if(void 0!==o)return o.exports;var n=t[i]={id:i,exports:{}};return e[i](n,n.exports,s),n.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var i in t)s.o(t,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e=s(90);const t="rendered",i=document.createElement("template");i.innerHTML=`<style>${e.Z}</style><div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> `;const o={ArrowLeft:-1,ArrowRight:1},n=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY});class r extends HTMLElement{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.isMouseDown=!1,this.isFocused=!1,this.onMouseMove=e=>{(this.isMouseDown||this.slideOnHover)&&this.slideToPageX(e.pageX)},this.bodyUserSelectStyle="",this.onMouseDown=e=>{this.slideOnHover||(window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition(),this.slideToPageX(e.pageX),this.focus(),this.bodyUserSelectStyle=window.document.body.style.userSelect,window.document.body.style.userSelect="none")},this.onWindowMouseUp=()=>{this.isMouseDown=!1,window.document.body.style.userSelect=this.bodyUserSelectStyle,window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("mouseup",this.onWindowMouseUp)},this.isTouchComparing=!1,this.hasTouchMoved=!1,this.onTouchStart=e=>{this.touchStartPoint=n(e),this.isFocused&&(this.enableTransition(),this.slideToPageX(e.touches[0].pageX))},this.onTouchMove=e=>{if(this.isTouchComparing)return this.slideToPageX(e.touches[0].pageX),e.preventDefault(),!1;if(!this.hasTouchMoved){const t=n(e);if(Math.abs(t.y-this.touchStartPoint.y)<Math.abs(t.x-this.touchStartPoint.x))return this.isTouchComparing=!0,this.focus(),this.slideToPageX(e.touches[0].pageX),e.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1},this.onFocus=()=>{this.isFocused=!0},this.onKeyDown=e=>{if(this.isAnimating)return;this.isAnimating=!0;const t=e.key;void 0!==o[t]&&this.startSlideAnimation(o[t])},this.onKeyUp=e=>{this.isAnimating&&void 0!==o[e.key]&&this.stopSlideAnimation()},this.resetWidth=()=>{this.imageWidth=this.offsetWidth};const e=this.attachShadow({mode:"open"});e.appendChild(i.content.cloneNode(!0)),this.firstElement=e.getElementById("first"),this.firstImageContainerElement=e.getElementById("firstImageContainer"),this.secondElement=e.getElementById("second")}get value(){return this.exposure}set value(e){this.exposure=parseFloat(e),this.slide()}get hover(){return this.slideOnHover}set hover(e){this.slideOnHover="false"!==e.toString().toLowerCase(),this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}static get observedAttributes(){return["hover"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",(e=>(e.preventDefault(),!1))),new ResizeObserver(this.resetWidth).observe(this),this.slide(0),this.addEventListener("keydown",this.onKeyDown),this.addEventListener("keyup",this.onKeyUp),this.addEventListener("focus",this.onFocus),this.addEventListener("blur",this.onBlur),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchmove",this.onTouchMove,{passive:!1}),this.addEventListener("touchend",this.onTouchEnd),this.addEventListener("mousedown",this.onMouseDown),this.hover=!!this.hasAttribute("hover")&&this.getAttribute("hover"),this.resetWidth(),this.classList.contains(t)||this.classList.add(t),this.querySelectorAll('[slot="before"], [slot="after"]').length>0&&console.warn('<img-comparison-slider>: slot names "before" and "after" are deprecated and soon won\'t be supported. Please use slot="first" instead of slot="after", and slot="second" instead of slot="before".')}disconnectedCallback(){this.transitionTimer&&window.clearTimeout(this.transitionTimer)}attributeChangedCallback(e,t,s){this.hover=s}slide(e=0){var t;this.exposure=(100,(t=this.exposure+e)<0?0:t>100?100:t),this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slideToPageX(e){const t=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=t/this.imageWidth*100,this.slide(0)}enableTransition(){this.firstElement.style.setProperty("--transition-time","100ms"),this.transitionTimer=window.setTimeout((()=>{this.firstElement.style.setProperty("--transition-time","0ms"),this.transitionTimer=null}),100)}startSlideAnimation(e){let t=null;const s=i=>{null===t&&(t=i);const o=(i-t)/16.666666666666668*e;this.slide(o),this.isAnimating&&(window.requestAnimationFrame(s),t=i)};window.requestAnimationFrame(s)}stopSlideAnimation(){this.isAnimating=!1}}window.customElements.define("img-comparison-slider",r)})()})(); | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "img-comparison-slider", | ||
"version": "7.1.3", | ||
"version": "7.2.0", | ||
"description": "Slider component to compare images before and after", | ||
@@ -5,0 +5,0 @@ "homepage": "https://img-comparison-slider.sneas.io", |
@@ -6,3 +6,3 @@ # img-comparison-slider | ||
Slider component for comparing images (before and after). | ||
## Slider Component for Comparing Images (Before and After). | ||
@@ -13,3 +13,3 @@ Usage examples: [https://img-comparison-slider.sneas.io/examples.html](https://img-comparison-slider.sneas.io/examples.html) | ||
## Key Features | ||
## Most Important Features | ||
@@ -19,3 +19,3 @@ - Mobile friendly | ||
- Responsive | ||
- Compact - less than 9 kB minified (Or less than 3 kB when gzipped) | ||
- Compact - less than 9 kB minified (Or less than 3 kB if gzipped) | ||
- Compatible with modern frameworks ([React](bindings/react/README.md), | ||
@@ -25,3 +25,3 @@ [Angular](docs/installation/angular.md), | ||
[Vue3](bindings/vue/README.md)) | ||
- Distributed through CDN or NPM | ||
- Distributed via CDN or NPM | ||
@@ -81,8 +81,9 @@ <!-- | ||
| `value` | Position of the divider in percents. | `50` | `0..100` | | ||
| `hover` | Automatically slide on mouse over. | `false` | | | ||
## Styling | ||
Some styling techniques and ideas could be found in [examples](https://img-comparison-slider.sneas.io/examples.html). | ||
Some styling techniques and ideas can be found in [examples](https://img-comparison-slider.sneas.io/examples.html). | ||
The component items such as the default handle or divider could be styled with the help of CSS3 variables. | ||
The component elements like the default handle or the separator line could be styled using CSS3 variables. | ||
@@ -103,14 +104,14 @@ Example: | ||
| Variable | Description | Default value | Example value | | ||
| -------------------------- | -------------------------------------------------------- | ------------- | -------------------------------- | | ||
| `--divider-width` | Width of the vertical line dividing both images | `1px` | `1em` | | ||
| `--divider-color` | Color of the vertical line dividing both images | `#fff` | `rgba(0, 0, 0, 0.5)` | | ||
| `--divider-shadow` | Shadow casting by the vertical line dividing both images | `none` | `0px 0px 5px rgba(0, 0, 0, 0.5)` | | ||
| `--default-handle-width` | Width of the default handle | `50px` | | | ||
| `--default-handle-color` | Color of the default handle | `#fff` | `rgba(0, 0, 0, 0.5)` | | ||
| `--default-handle-opacity` | Opacity of the default handle | `1` | `0.3` | | ||
| `--default-handle-shadow` | Shadow from the default handle | `none` | `0px 0px 5px rgba(0, 0, 0, 1)` | | ||
| Variable | Description | Default value | Example value | | ||
| -------------------------- | ---------------------------------------------------------- | ------------- | -------------------------------- | | ||
| `--divider-width` | Width of the vertical line separating both images | `1px` | `1em` | | ||
| `--divider-color` | Color of the vertical line separating the two images | `#fff` | `rgba(0, 0, 0, 0.5)` | | ||
| `--divider-shadow` | Shadow cast by the vertical line separating the two images | `none` | `0px 0px 5px rgba(0, 0, 0, 0.5)` | | ||
| `--default-handle-width` | Width of the default handle | `50px` | | | ||
| `--default-handle-color` | Color of the default handle | `#fff` | `rgba(0, 0, 0, 0.5)` | | ||
| `--default-handle-opacity` | Opacity of the default handle | `1` | `0.3` | | ||
| `--default-handle-shadow` | Shadow cast by the default handle | `none` | `0px 0px 5px rgba(0, 0, 0, 1)` | | ||
### Handle | ||
The component's handle could be changed by assigning `slot="handle"` attribute to any element inside `img-comparison-slider`. | ||
The handle of the component can be changed by assigning the attribute `slot="handle"` to any element within `img-comparison-slider`. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
38702
87
112