img-comparison-slider - npm Package Compare versions

Comparing version 7.6.0 to 7.7.0

dist/index.js

@@ -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%;height:100%;width: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);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:transform}.first.focused .first-overlay-container{will-change:transform}@media not all and (min-resolution: 0.001dpcm){@supports(-webkit-appearance: none){.first.focused{will-change:auto}.first.focused .first-overlay-container{will-change:auto}}}.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)}.vertical.first{transform:translateY(calc(var(--exposure) * -1))}.vertical.first .first-overlay-container{transform:translateY(var(--exposure))}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:0;width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{transform:translateX(-0.5px) rotate(90deg)}',""]);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='<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=["horizontal","vertical"],r=e=>({x:e.touches[0].pageX,y:e.touches[0].pageY}),a=e=>({x:e.pageX,y:e.pageY});class d extends HTMLElement{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.isFocused=!1,this.onMouseMove=e=>{if(this.isMouseDown||this.slideOnHover){const t=a(e);this.slideToPage(t)}},this.bodyUserSelectStyle="",this.onMouseDown=e=>{if(this.slideOnHover)return;window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();const t=a(e);this.slideToPage(t),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=r(e),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint))},this.onTouchMove=e=>{const t=r(e);if(this.isTouchComparing)return this.slideToPage(t),e.preventDefault(),!1;if(!this.hasTouchMoved){const i=Math.abs(t.y-this.touchStartPoint.y),s=Math.abs(t.x-this.touchStartPoint.x);if("horizontal"===this.slideDirection&&i<s||"vertical"===this.slideDirection&&i>s)return this.isTouchComparing=!0,this.focus(),this.slideToPage(t),e.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=e=>{if("disabled"===this.keyboard)return;if(this.isAnimating)return;this.isAnimating=!0;const t=e.key;void 0!==o[t]&&this.startSlideAnimation(o[t])},this.onKeyUp=e=>{"disabled"!==this.keyboard&&this.isAnimating&&void 0!==o[e.key]&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};const t=this.attachShadow({mode:"open"}),i=document.createElement("style");i.innerHTML=e.Z,this.getAttribute("nonce")&&i.setAttribute("nonce",this.getAttribute("nonce")),t.appendChild(i),t.appendChild(s.content.cloneNode(!0)),this.firstElement=t.getElementById("first"),this.firstImageContainerElement=t.getElementById("firstImageContainer"),this.secondElement=t.getElementById("second")}get value(){return this.exposure}set value(e){const t=parseFloat(e);t!==this.exposure&&(this.exposure=t,this.enableTransition(),this.setExposure())}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)}get direction(){return this.slideDirection}set direction(e){this.slideDirection=e.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...n),n.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",(e=>(e.preventDefault(),!1))),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&"disabled"===this.getAttribute("keyboard")?"disabled":"enabled",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.direction=this.hasAttribute("direction")?this.getAttribute("direction"):"horizontal",this.resetDimensions(),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,i){"hover"===e&&(this.hover=i),"direction"===e&&(this.direction=i),"keyboard"===e&&(this.keyboard="disabled"===i?"disabled":"enabled")}setExposure(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+"%")}slide(e=0){this.setExposure(e);const t=new Event("slide");this.dispatchEvent(t)}slideToPage(e){"horizontal"===this.slideDirection&&this.slideToPageX(e.x),"vertical"===this.slideDirection&&this.slideToPageY(e.y)}slideToPageX(e){const t=e-this.getBoundingClientRect().left-window.scrollX;this.exposure=t/this.imageWidth*100,this.slide(0)}slideToPageY(e){const t=e-this.getBoundingClientRect().top-window.scrollY;this.exposure=t/this.imageHeight*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}}"undefined"!=typeof window&&window.customElements.define("img-comparison-slider",d)})()})();
+(()=>{"use strict";var t={792:(t,e,i)=>{i.d(e,{Z:()=>n});var s=i(609),o=i.n(s)()((function(t){return t[1]}));o.push([t.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;--handle-position-start: 50%;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%;height:100%;width: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);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:transform}.first.focused .first-overlay-container{will-change:transform}@media not all and (min-resolution: 0.001dpcm){@supports(-webkit-appearance: none){.first.focused{will-change:auto}.first.focused .first-overlay-container{will-change:auto}}}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:0;height:100%}.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{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.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)}.vertical.first{transform:translateY(calc(var(--exposure) * -1))}.vertical.first .first-overlay-container{transform:translateY(var(--exposure))}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:0;width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',""]);const n=o},609:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=t(e);return e[2]?"@media ".concat(e[2]," {").concat(i,"}"):i})).join("")},e.i=function(t,i,s){"string"==typeof t&&(t=[[null,t,""]]);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<t.length;a++){var d=[].concat(t[a]);s&&o[d[0]]||(i&&(d[2]?d[2]="".concat(i," and ").concat(d[2]):d[2]=i),e.push(d))}},e}}},e={};function i(s){var o=e[s];if(void 0!==o)return o.exports;var n=e[s]={id:s,exports:{}};return t[s](n,n.exports,i),n.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t=i(792);const e="rendered",s=document.createElement("template");s.innerHTML='<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=["horizontal","vertical"],r=t=>({x:t.touches[0].pageX,y:t.touches[0].pageY}),a=t=>({x:t.pageX,y:t.pageY});class d extends HTMLElement{constructor(){super(),this.exposure=this.hasAttribute("value")?parseFloat(this.getAttribute("value")):50,this.slideOnHover=!1,this.slideDirection="horizontal",this.keyboard="enabled",this.isMouseDown=!1,this.isFocused=!1,this.onMouseMove=t=>{if(this.isMouseDown||this.slideOnHover){const e=a(t);this.slideToPage(e)}},this.bodyUserSelectStyle="",this.onMouseDown=t=>{if(this.slideOnHover)return;window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("mouseup",this.onWindowMouseUp),this.isMouseDown=!0,this.enableTransition();const e=a(t);this.slideToPage(e),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=t=>{this.touchStartPoint=r(t),this.isFocused&&(this.enableTransition(),this.slideToPage(this.touchStartPoint))},this.onTouchMove=t=>{const e=r(t);if(this.isTouchComparing)return this.slideToPage(e),t.preventDefault(),!1;if(!this.hasTouchMoved){const i=Math.abs(e.y-this.touchStartPoint.y),s=Math.abs(e.x-this.touchStartPoint.x);if("horizontal"===this.slideDirection&&i<s||"vertical"===this.slideDirection&&i>s)return this.isTouchComparing=!0,this.focus(),this.slideToPage(e),t.preventDefault(),!1;this.hasTouchMoved=!0}},this.onTouchEnd=()=>{this.isTouchComparing=!1,this.hasTouchMoved=!1},this.onBlur=()=>{this.stopSlideAnimation(),this.isFocused=!1,this.firstElement.classList.remove("focused")},this.onFocus=()=>{this.isFocused=!0,this.firstElement.classList.add("focused")},this.onKeyDown=t=>{if("disabled"===this.keyboard)return;if(this.isAnimating)return;this.isAnimating=!0;const e=t.key;void 0!==o[e]&&this.startSlideAnimation(o[e])},this.onKeyUp=t=>{"disabled"!==this.keyboard&&this.isAnimating&&void 0!==o[t.key]&&this.stopSlideAnimation()},this.resetDimensions=()=>{this.imageWidth=this.offsetWidth,this.imageHeight=this.offsetHeight};const e=this.attachShadow({mode:"open"}),i=document.createElement("style");i.innerHTML=t.Z,this.getAttribute("nonce")&&i.setAttribute("nonce",this.getAttribute("nonce")),e.appendChild(i),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(t){const e=parseFloat(t);e!==this.exposure&&(this.exposure=e,this.enableTransition(),this.setExposure())}get hover(){return this.slideOnHover}set hover(t){this.slideOnHover="false"!==t.toString().toLowerCase(),this.removeEventListener("mousemove",this.onMouseMove),this.slideOnHover&&this.addEventListener("mousemove",this.onMouseMove)}get direction(){return this.slideDirection}set direction(t){this.slideDirection=t.toString().toLowerCase(),this.slide(0),this.firstElement.classList.remove(...n),n.includes(this.slideDirection)&&this.firstElement.classList.add(this.slideDirection)}static get observedAttributes(){return["hover","direction"]}connectedCallback(){this.hasAttribute("tabindex")||(this.tabIndex=0),this.addEventListener("dragstart",(t=>(t.preventDefault(),!1))),new ResizeObserver(this.resetDimensions).observe(this),this.setExposure(0),this.keyboard=this.hasAttribute("keyboard")&&"disabled"===this.getAttribute("keyboard")?"disabled":"enabled",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.direction=this.hasAttribute("direction")?this.getAttribute("direction"):"horizontal",this.resetDimensions(),this.classList.contains(e)||this.classList.add(e),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(t,e,i){"hover"===t&&(this.hover=i),"direction"===t&&(this.direction=i),"keyboard"===t&&(this.keyboard="disabled"===i?"disabled":"enabled")}setExposure(t=0){var e;this.exposure=(100,(e=this.exposure+t)<0?0:e>100?100:e),this.firstElement.style.setProperty("--exposure",100-this.exposure+"%")}slide(t=0){this.setExposure(t);const e=new Event("slide");this.dispatchEvent(e)}slideToPage(t){"horizontal"===this.slideDirection&&this.slideToPageX(t.x),"vertical"===this.slideDirection&&this.slideToPageY(t.y)}slideToPageX(t){const e=t-this.getBoundingClientRect().left-window.scrollX;this.exposure=e/this.imageWidth*100,this.slide(0)}slideToPageY(t){const e=t-this.getBoundingClientRect().top-window.scrollY;this.exposure=e/this.imageHeight*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(t){let e=null;const i=s=>{null===e&&(e=s);const o=(s-e)/16.666666666666668*t;this.slide(o),this.isAnimating&&(window.requestAnimationFrame(i),e=s)};window.requestAnimationFrame(i)}stopSlideAnimation(){this.isAnimating=!1}}"undefined"!=typeof window&&window.customElements.define("img-comparison-slider",d)})()})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "img-comparison-slider",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "description": "Slider component to compare images before and after",
@@ -20,32 +20,5 @@ "homepage": "https://img-comparison-slider.sneas.io",
     "watch": "webpack --watch --env production",
-    "start": "webpack serve --env development --open",
-    "predemo": "rimraf ./demo",
-    "demo": "webpack --env demo",
-    "gh": "gh-pages -d demo",
-    "release-bindings": "./scripts/release-bindings.sh"
+    "start": "npm run watch",
+    "img-comparison-slider": "npm run watch"
   },
-  "devDependencies": {
-    "@semantic-release/exec": "^5.0.0",
-    "@semantic-release/git": "^9.0.0",
-    "copy-webpack-plugin": "^9.0.0",
-    "css-loader": "^5.2.6",
-    "file-loader": "^6.2.0",
-    "gh-pages": "^3.2.0",
-    "handlebars-loader": "^1.7.1",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.0",
-    "rimraf": "^3.0.2",
-    "sass": "^1.34.0",
-    "sass-loader": "^11.1.1",
-    "semantic-release": "^17.4.3",
-    "ts-loader": "^9.2.2",
-    "typescript": "^4.3.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
-  },
   "license": "MIT",
@@ -55,3 +28,7 @@ "repository": {
     "url": "https://github.com/sneas/img-comparison-slider.git"
+  },
+  "devDependencies": {
+    "mini-css-extract-plugin": "^2.6.1",
+    "resolve-url-loader": "^5.0.0"
   }
 }

README.md

@@ -112,11 +112,12 @@ # img-comparison-slider
 
-| 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)`   |
+| 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)` |
+| `--handle-position-start`  | Handle position on the divider axis. In case the handle must be displaced off the center | `50%`         |                                  |
+| `--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)`   |
 
@@ -123,0 +124,0 @@ ### Handle

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

Dev dependency count

2

decreased by-90.91%

Lines of code

131

increased by25.96%

Number of lines in readme file

126

increased by0.8%

Worsened metrics

Total package byte prevSize

47689

decreased by-0.56%

No dependency changes