react-compare-slider - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/react-compare-slider.cjs.development.js

@@ -7,2 +7,3 @@ 'use strict';
 var React__default = _interopDefault(React);
+var resizeObserver = require('resize-observer');
 
@@ -43,9 +44,2 @@ function _extends() {
 /**
- * Whether the client supports CSS `clip-path`
- */
-
-var CLIENT_SUPPORTS_CSS_CLIP_PATH = typeof CSS !== 'undefined' && CSS.supports &&
-/*#__PURE__*/
-CSS.supports('clip-path', 'inset(0 0 0 0)');
-/**
  * CSS style util for child to fit container
@@ -81,3 +75,3 @@ */
     height: '100%',
-    transform: portrait ? "translateY(" + position + "%)" : "translateX(" + position + "%)",
+    transform: portrait ? "translateY(" + position + "px)" : "translateX(" + position + "px)",
     // Only want inner handle to be selectable
@@ -95,3 +89,3 @@ pointerEvents: 'none'
     style: style,
-    "data-rcs-main-handle-container": true
+    "data-rcs": "main-handle-container"
   }, React__default.createElement("div", {
@@ -119,3 +113,3 @@ style: innerStyle
     style: style,
-    "data-rcs-main-handle-inner": true
+    "data-rcs": "main-handle-inner"
   }));
@@ -128,6 +122,5 @@ };
 var ReactCompareSliderItem = function ReactCompareSliderItem(_ref4) {
-  var positionPx = _ref4.positionPx,
-      portrait = _ref4.portrait,
+  var portrait = _ref4.portrait,
       position = _ref4.position,
-      props = _objectWithoutPropertiesLoose(_ref4, ["positionPx", "portrait", "position"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["portrait", "position"]);
 
@@ -140,15 +133,12 @@ var style = {
     height: '100%',
-    clipPath: portrait ? "inset(" + position + "% 0 0 0" : "inset(0 0 0 " + position + "%",
+    clip: portrait ? "rect(auto,auto," + position + "px,auto)" : "rect(auto," + position + "px,auto,auto)",
+    willChange: 'clip',
     userSelect: 'none',
+    KhtmlUserSelect: 'none',
     MozUserSelect: 'none',
     WebkitUserSelect: 'none'
-  }; // Use `clip` if `clip-path` is not supported
-
-  if (!CLIENT_SUPPORTS_CSS_CLIP_PATH) {
-    style.clip = portrait ? "rect(auto,auto," + positionPx + "px,auto)" : "rect(auto," + positionPx + "px,auto,auto)";
-  }
-
+  };
   return React__default.createElement("div", Object.assign({}, props, {
     style: style,
-    "data-rcs-main-item": true
+    "data-rcs": "clip-item"
   }));
@@ -175,66 +165,106 @@ };
       isDragging = _useState[0],
-      setIsDragging = _useState[1];
+      setIsDragging = _useState[1]; // const [containerDimensions, setContainerDimensions] = useState({
+  //   width: 0,
+  //   height: 0,
+  // });
 
+
   var _useState2 = React.useState({
-    position: position,
-    positionPx: 0
+    pc: position,
+    px: 0
   }),
-      positions = _useState2[0],
-      setPositions = _useState2[1]; // Set position for legacy browsers
+      internalPosition = _useState2[0],
+      setInternalPosition = _useState2[1];
+  /**
+   * Update internal position state from `x` and `y` coordinate *or* a
+   * `percentage` value
+   */
 
 
-  React.useEffect(function () {
-    if (!CLIENT_SUPPORTS_CSS_CLIP_PATH) {
-      setPositions(function (positions) {
-        var _containerRef$current = containerRef.current.getBoundingClientRect(),
-            width = _containerRef$current.width,
-            height = _containerRef$current.height;
+  var updateInternalPosition = React.useCallback(function (_ref6) {
+    var percentage = _ref6.percentage,
+        pointerX = _ref6.pointerX,
+        pointerY = _ref6.pointerY;
 
-        return _extends({}, positions, {
-          positionPx: portrait ? height * position / 100 : width * position / 100
-        });
-      });
-    } // @NOTE Disabling exhaustive-deps, only want this to run on mount,
-    //       subsequent position changes are handled in hook below
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+        top = _containerRef$current.top,
+        left = _containerRef$current.left,
+        width = _containerRef$current.width,
+        height = _containerRef$current.height;
 
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-  // Update internal position if position prop changes
+    var x = 0;
+    var y = 0; // Use pointer positions if defined
 
+    if (pointerX && pointerY) {
+      x = pointerX - left - window.scrollX;
+      y = pointerY - top - window.scrollY; // Use percentage if defined
+    } else if (percentage) {
+      x = width / 100 * percentage;
+      y = height / 100 * percentage;
+    }
+
+    var px = portrait ? y : x;
+    var pc = portrait ? y / height * 100 : x / width * 100;
+    setInternalPosition({
+      pc: pc,
+      px: px
+    });
+
+    if (onChange) {
+      onChange(pc);
+    }
+  }, [onChange, portrait]); // Update internal position if position prop changes
+
   React.useEffect(function () {
-    setPositions(function (positions) {
-      return _extends({}, positions, {
-        position: position
+    updateInternalPosition({
+      percentage: position
+    });
+  }, [position, updateInternalPosition]);
+  /**
+   * Handle element resize event
+   */
+
+  var handleResize = React.useCallback(function () {
+    var _containerRef$current2 = containerRef.current.getBoundingClientRect(),
+        width = _containerRef$current2.width,
+        height = _containerRef$current2.height;
+
+    setInternalPosition(function (state) {
+      return _extends({}, state, {
+        px: portrait ? height / 100 * state.pc : width / 100 * state.pc
       });
     });
-  }, [position]); // Bind and handle events
+  }, [portrait]); // Update internal position on resize
 
   React.useEffect(function () {
-    var containerRefCurrent = containerRef.current;
+    var ro = new resizeObserver.ResizeObserver(function () {
+      handleResize();
+    }); // Bind observer
 
-    var updatePosition = function updatePosition(x, y) {
-      var _containerRefCurrent$ = containerRefCurrent.getBoundingClientRect(),
-          width = _containerRefCurrent$.width,
-          height = _containerRefCurrent$.height;
-
-      var position = portrait ? y / height * 100 : x / width * 100;
-      setPositions(function (positions) {
-        return _extends({}, positions, {
-          positionPx: portrait ? y : x,
-          position: position
-        });
-      });
-      if (onChange) onChange(position);
+    var el = containerRef.current;
+    ro.observe(el);
+    return function () {
+      return ro.unobserve(el);
     };
+  }, [handleResize]); // Bind and handle events
 
+  React.useEffect(function () {
+    var containerRefCurrent = containerRef.current;
+
     var handleMouseDown = function handleMouseDown(ev) {
+      ev.preventDefault();
       if (!isDragging) setIsDragging(true);
-      updatePosition(ev.pageX, ev.pageY);
+      updateInternalPosition({
+        pointerX: ev.pageX,
+        pointerY: ev.pageY
+      });
     };
 
     var handleMouseMove = function handleMouseMove(ev) {
-      ev.preventDefault();
-
       if (isDragging) {
         requestAnimationFrame(function () {
-          updatePosition(ev.pageX, ev.pageY);
+          updateInternalPosition({
+            pointerX: ev.pageX,
+            pointerY: ev.pageY
+          });
         });
@@ -245,12 +275,17 @@ }
     var handleTouchStart = function handleTouchStart(ev) {
+      ev.preventDefault();
       if (!isDragging) setIsDragging(true);
-      updatePosition(ev.touches[0].pageX, ev.touches[0].pageY);
+      updateInternalPosition({
+        pointerX: ev.touches[0].pageX,
+        pointerY: ev.touches[0].pageY
+      });
     };
 
     var handleTouchMove = function handleTouchMove(ev) {
-      ev.preventDefault();
-
       if (isDragging) {
         requestAnimationFrame(function () {
-          updatePosition(ev.touches[0].pageX, ev.touches[0].pageY);
+          updateInternalPosition({
+            pointerX: ev.touches[0].pageX,
+            pointerY: ev.touches[0].pageY
+          });
         });
@@ -267,3 +302,3 @@ }
       capture: false,
-      passive: true
+      passive: false
     });
@@ -276,3 +311,3 @@ containerRefCurrent.addEventListener('mouseleave', handleFinish, {
       capture: false,
-      passive: false
+      passive: true
     });
@@ -286,3 +321,3 @@ containerRefCurrent.addEventListener('mouseup', handleFinish, {
       capture: false,
-      passive: true
+      passive: false
     });
@@ -294,3 +329,3 @@ containerRefCurrent.addEventListener('touchend', handleFinish, {
     containerRefCurrent.addEventListener('touchmove', handleTouchMove, {
-      capture: true,
+      capture: false,
       passive: true
@@ -314,3 +349,3 @@ });
     };
-  }, [isDragging, onChange, portrait]); // Use custom handle if requested
+  }, [isDragging, portrait, updateInternalPosition]); // Use custom handle if requested
 
@@ -321,2 +356,5 @@ var Handle = handle || React__default.createElement(ReactCompareSliderHandle, {
   var style = {
+    // @NOTE using `flex` to ensure Firefox will calculate the correct width
+    //       of bounding box, it will return `0` otherwise
+    flex: 1,
     position: 'relative',
@@ -326,2 +364,3 @@ overflow: 'hidden',
     userSelect: 'none',
+    KhtmlUserSelect: 'none',
     MozUserSelect: 'none',
@@ -333,9 +372,8 @@ WebkitUserSelect: 'none'
     style: style,
-    "data-rcs-main-container": true
-  }), itemOne, React__default.createElement(ReactCompareSliderItem, {
-    positionPx: positions.positionPx,
-    position: positions.position,
+    "data-rcs": "root"
+  }), itemTwo, React__default.createElement(ReactCompareSliderItem, {
+    position: internalPosition.px,
     portrait: portrait
-  }, itemTwo), React__default.createElement(ReactCompareSliderHandleContainer, {
-    position: positions.position,
+  }, itemOne), React__default.createElement(ReactCompareSliderHandleContainer, {
+    position: internalPosition.px,
     portrait: portrait
@@ -382,10 +420,9 @@ }, Handle));
     style: containerStyle,
-    "data-rcs-image-container": true
+    "data-rcs": "image-root"
   }, React__default.createElement("img", Object.assign({}, props, {
     style: innerStyle,
-    "data-rcs-image-inner": true
+    "data-rcs": "image-inner"
   })));
 };
 
-exports.CLIENT_SUPPORTS_CSS_CLIP_PATH = CLIENT_SUPPORTS_CSS_CLIP_PATH;
 exports.CLIENT_SUPPORTS_CSS_OBJECT_FIT = CLIENT_SUPPORTS_CSS_OBJECT_FIT;
@@ -392,0 +429,0 @@ exports.ReactCompareSlider = ReactCompareSlider;

dist/react-compare-slider.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)t.indexOf(n=r[i])>=0||(o[n]=e[n]);return o}var r="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("clip-path","inset(0 0 0 0)"),a=function(e){var t=void 0===e?{}:e,n=t.objectFit;return i({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n},o(t,["objectFit"]))},s=function(e){var t=e.position,i=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:i?"translateY("+t+"%)":"translateX("+t+"%)",pointerEvents:"none"},"data-rcs-main-handle-container":!0},n.createElement("div",{style:{position:"absolute",width:i?"100%":void 0,height:i?void 0:"100%",transform:i?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},c=function(e){var t=e.portrait,i=o(e,["portrait"]);return n.createElement("div",Object.assign({},i,{style:{height:t?3:"100%",width:t?"100%":3,backgroundColor:"#ffffff",boxShadow:"0 0 .2rem #000000",cursor:t?"ns-resize":"ew-resize"},"data-rcs-main-handle-inner":!0}))},u=function(e){var t=e.positionPx,i=e.portrait,a=e.position,s=o(e,["positionPx","portrait","position"]),c={position:"absolute",top:0,left:0,width:"100%",height:"100%",clipPath:i?"inset("+a+"% 0 0 0":"inset(0 0 0 "+a+"%",userSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"};return r||(c.clip=i?"rect(auto,auto,"+t+"px,auto)":"rect(auto,"+t+"px,auto,auto)"),n.createElement("div",Object.assign({},s,{style:c,"data-rcs-main-item":!0}))},p="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("object-fit","cover");exports.CLIENT_SUPPORTS_CSS_CLIP_PATH=r,exports.CLIENT_SUPPORTS_CSS_OBJECT_FIT=p,exports.ReactCompareSlider=function(e){var a=e.handle,p=e.itemOne,l=e.itemTwo,d=e.onChange,v=e.portrait,m=e.position,f=void 0===m?50:m,h=o(e,["handle","itemOne","itemTwo","onChange","portrait","position"]),g=t.useRef(document.createElement("div")),E=t.useState(!1),S=E[0],b=E[1],C=t.useState({position:f,positionPx:0}),y=C[0],L=C[1];t.useEffect(function(){r||L(function(e){var t=g.current.getBoundingClientRect();return i({},e,{positionPx:v?t.height*f/100:t.width*f/100})})},[]),t.useEffect(function(){L(function(e){return i({},e,{position:f})})},[f]),t.useEffect(function(){var e=g.current,t=function(t,n){var o=e.getBoundingClientRect(),r=v?n/o.height*100:t/o.width*100;L(function(e){return i({},e,{positionPx:v?n:t,position:r})}),d&&d(r)},n=function(e){S||b(!0),t(e.pageX,e.pageY)},o=function(e){e.preventDefault(),S&&requestAnimationFrame(function(){t(e.pageX,e.pageY)})},r=function(e){S||b(!0),t(e.touches[0].pageX,e.touches[0].pageY)},a=function(e){e.preventDefault(),S&&requestAnimationFrame(function(){t(e.touches[0].pageX,e.touches[0].pageY)})},s=function(){S&&b(!1)};return e.addEventListener("mousedown",n,{capture:!1,passive:!0}),e.addEventListener("mouseleave",s,{capture:!1,passive:!0}),e.addEventListener("mousemove",o,{capture:!1,passive:!1}),e.addEventListener("mouseup",s,{capture:!1,passive:!0}),e.addEventListener("touchstart",r,{capture:!1,passive:!0}),e.addEventListener("touchend",s,{capture:!1,passive:!0}),e.addEventListener("touchmove",a,{capture:!0,passive:!0}),e.addEventListener("touchcancel",s,{capture:!1,passive:!0}),function(){e.removeEventListener("mousedown",n),e.removeEventListener("mouseleave",s),e.removeEventListener("mousemove",o),e.removeEventListener("mouseup",s),e.removeEventListener("touchstart",r),e.removeEventListener("touchend",s),e.removeEventListener("touchmove",a),e.removeEventListener("touchcancel",s)}},[S,d,v]);var w=a||n.createElement(c,{portrait:v});return n.createElement("div",Object.assign({},h,{ref:g,style:{position:"relative",overflow:"hidden",cursor:S?v?"ns-resize":"ew-resize":void 0,userSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs-main-container":!0}),p,n.createElement(u,{positionPx:y.positionPx,position:y.position,portrait:v},l),n.createElement(s,{position:y.position,portrait:v},w))},exports.ReactCompareSliderHandle=c,exports.ReactCompareSliderImage=function(e){var t=e.className,r=e.fallbackEnable,s=void 0===r||r,c=e.style,u=o(e,["className","fallbackEnable","style"]),l=a(i({},c)),d={width:l.width,height:l.height};return!p&&s&&(d.backgroundImage=l.backgroundImage||"url("+u.src+")",d.backgroundSize=l.backgroundSize||"cover",d.backgroundPosition=l.backgroundPosition||"center",l.opacity=0),n.createElement("div",{className:t,style:d,"data-rcs-image-container":!0},n.createElement("img",Object.assign({},u,{style:l,"data-rcs-image-inner":!0})))},exports.styleFitContainer=a;
+"use strict";var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=function(e){var t=void 0===e?{}:e,n=t.objectFit;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n},i(t,["objectFit"]))},s=function(e){var t=e.position,r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:r?"translateY("+t+"px)":"translateX("+t+"px)",pointerEvents:"none"},"data-rcs":"main-handle-container"},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},c=function(e){var t=e.portrait,r=i(e,["portrait"]);return n.createElement("div",Object.assign({},r,{style:{height:t?3:"100%",width:t?"100%":3,backgroundColor:"#ffffff",boxShadow:"0 0 .2rem #000000",cursor:t?"ns-resize":"ew-resize"},"data-rcs":"main-handle-inner"}))},u=function(e){var t=e.portrait,r=e.position,o=i(e,["portrait","position"]);return n.createElement("div",Object.assign({},o,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",clip:t?"rect(auto,auto,"+r+"px,auto)":"rect(auto,"+r+"px,auto,auto)",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item"}))},p="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("object-fit","cover");exports.CLIENT_SUPPORTS_CSS_OBJECT_FIT=p,exports.ReactCompareSlider=function(e){var a=e.handle,p=e.itemOne,l=e.itemTwo,v=e.onChange,d=e.portrait,m=e.position,f=void 0===m?50:m,h=i(e,["handle","itemOne","itemTwo","onChange","portrait","position"]),g=t.useRef(document.createElement("div")),b=t.useState(!1),E=b[0],S=b[1],w=t.useState({pc:f,px:0}),x=w[0],y=w[1],C=t.useCallback(function(e){var t=e.percentage,n=e.pointerX,r=e.pointerY,o=g.current.getBoundingClientRect(),i=o.width,a=o.height,s=0,c=0;n&&r?(s=n-o.left-window.scrollX,c=r-o.top-window.scrollY):t&&(s=i/100*t,c=a/100*t);var u=d?c/a*100:s/i*100;y({pc:u,px:d?c:s}),v&&v(u)},[v,d]);t.useEffect(function(){C({percentage:f})},[f,C]);var L=t.useCallback(function(){var e=g.current.getBoundingClientRect(),t=e.width,n=e.height;y(function(e){return o({},e,{px:d?n/100*e.pc:t/100*e.pc})})},[d]);t.useEffect(function(){var e=new r.ResizeObserver(function(){L()}),t=g.current;return e.observe(t),function(){return e.unobserve(t)}},[L]),t.useEffect(function(){var e=g.current,t=function(e){e.preventDefault(),E||S(!0),C({pointerX:e.pageX,pointerY:e.pageY})},n=function(e){E&&requestAnimationFrame(function(){C({pointerX:e.pageX,pointerY:e.pageY})})},r=function(e){e.preventDefault(),E||S(!0),C({pointerX:e.touches[0].pageX,pointerY:e.touches[0].pageY})},o=function(e){E&&requestAnimationFrame(function(){C({pointerX:e.touches[0].pageX,pointerY:e.touches[0].pageY})})},i=function(){E&&S(!1)};return e.addEventListener("mousedown",t,{capture:!1,passive:!1}),e.addEventListener("mouseleave",i,{capture:!1,passive:!0}),e.addEventListener("mousemove",n,{capture:!1,passive:!0}),e.addEventListener("mouseup",i,{capture:!1,passive:!0}),e.addEventListener("touchstart",r,{capture:!1,passive:!1}),e.addEventListener("touchend",i,{capture:!1,passive:!0}),e.addEventListener("touchmove",o,{capture:!1,passive:!0}),e.addEventListener("touchcancel",i,{capture:!1,passive:!0}),function(){e.removeEventListener("mousedown",t),e.removeEventListener("mouseleave",i),e.removeEventListener("mousemove",n),e.removeEventListener("mouseup",i),e.removeEventListener("touchstart",r),e.removeEventListener("touchend",i),e.removeEventListener("touchmove",o),e.removeEventListener("touchcancel",i)}},[E,d,C]);var k=a||n.createElement(c,{portrait:d});return n.createElement("div",Object.assign({},h,{ref:g,style:{flex:1,position:"relative",overflow:"hidden",cursor:E?d?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"root"}),l,n.createElement(u,{position:x.px,portrait:d},p),n.createElement(s,{position:x.px,portrait:d},k))},exports.ReactCompareSliderHandle=c,exports.ReactCompareSliderImage=function(e){var t=e.className,r=e.fallbackEnable,s=void 0===r||r,c=e.style,u=i(e,["className","fallbackEnable","style"]),l=a(o({},c)),v={width:l.width,height:l.height};return!p&&s&&(v.backgroundImage=l.backgroundImage||"url("+u.src+")",v.backgroundSize=l.backgroundSize||"cover",v.backgroundPosition=l.backgroundPosition||"center",l.opacity=0),n.createElement("div",{className:t,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},u,{style:l,"data-rcs":"image-inner"})))},exports.styleFitContainer=a;
 //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

dist/react-compare-slider.d.ts

 import React from 'react';
 /**
- * Whether the client supports CSS `clip-path`
- */
-export declare const CLIENT_SUPPORTS_CSS_CLIP_PATH: boolean;
-/**
  * CSS style util for child to fit container
@@ -8,0 +4,0 @@ */

dist/react-compare-slider.esm.js

@@ -1,2 +0,3 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { ResizeObserver } from 'resize-observer';
 
@@ -37,9 +38,2 @@ function _extends() {
 /**
- * Whether the client supports CSS `clip-path`
- */
-
-var CLIENT_SUPPORTS_CSS_CLIP_PATH = typeof CSS !== 'undefined' && CSS.supports &&
-/*#__PURE__*/
-CSS.supports('clip-path', 'inset(0 0 0 0)');
-/**
  * CSS style util for child to fit container
@@ -75,3 +69,3 @@ */
     height: '100%',
-    transform: portrait ? "translateY(" + position + "%)" : "translateX(" + position + "%)",
+    transform: portrait ? "translateY(" + position + "px)" : "translateX(" + position + "px)",
     // Only want inner handle to be selectable
@@ -89,3 +83,3 @@ pointerEvents: 'none'
     style: style,
-    "data-rcs-main-handle-container": true
+    "data-rcs": "main-handle-container"
   }, React.createElement("div", {
@@ -113,3 +107,3 @@ style: innerStyle
     style: style,
-    "data-rcs-main-handle-inner": true
+    "data-rcs": "main-handle-inner"
   }));
@@ -122,6 +116,5 @@ };
 var ReactCompareSliderItem = function ReactCompareSliderItem(_ref4) {
-  var positionPx = _ref4.positionPx,
-      portrait = _ref4.portrait,
+  var portrait = _ref4.portrait,
       position = _ref4.position,
-      props = _objectWithoutPropertiesLoose(_ref4, ["positionPx", "portrait", "position"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["portrait", "position"]);
 
@@ -134,15 +127,12 @@ var style = {
     height: '100%',
-    clipPath: portrait ? "inset(" + position + "% 0 0 0" : "inset(0 0 0 " + position + "%",
+    clip: portrait ? "rect(auto,auto," + position + "px,auto)" : "rect(auto," + position + "px,auto,auto)",
+    willChange: 'clip',
     userSelect: 'none',
+    KhtmlUserSelect: 'none',
     MozUserSelect: 'none',
     WebkitUserSelect: 'none'
-  }; // Use `clip` if `clip-path` is not supported
-
-  if (!CLIENT_SUPPORTS_CSS_CLIP_PATH) {
-    style.clip = portrait ? "rect(auto,auto," + positionPx + "px,auto)" : "rect(auto," + positionPx + "px,auto,auto)";
-  }
-
+  };
   return React.createElement("div", Object.assign({}, props, {
     style: style,
-    "data-rcs-main-item": true
+    "data-rcs": "clip-item"
   }));
@@ -169,66 +159,106 @@ };
       isDragging = _useState[0],
-      setIsDragging = _useState[1];
+      setIsDragging = _useState[1]; // const [containerDimensions, setContainerDimensions] = useState({
+  //   width: 0,
+  //   height: 0,
+  // });
 
+
   var _useState2 = useState({
-    position: position,
-    positionPx: 0
+    pc: position,
+    px: 0
   }),
-      positions = _useState2[0],
-      setPositions = _useState2[1]; // Set position for legacy browsers
+      internalPosition = _useState2[0],
+      setInternalPosition = _useState2[1];
+  /**
+   * Update internal position state from `x` and `y` coordinate *or* a
+   * `percentage` value
+   */
 
 
-  useEffect(function () {
-    if (!CLIENT_SUPPORTS_CSS_CLIP_PATH) {
-      setPositions(function (positions) {
-        var _containerRef$current = containerRef.current.getBoundingClientRect(),
-            width = _containerRef$current.width,
-            height = _containerRef$current.height;
+  var updateInternalPosition = useCallback(function (_ref6) {
+    var percentage = _ref6.percentage,
+        pointerX = _ref6.pointerX,
+        pointerY = _ref6.pointerY;
 
-        return _extends({}, positions, {
-          positionPx: portrait ? height * position / 100 : width * position / 100
-        });
-      });
-    } // @NOTE Disabling exhaustive-deps, only want this to run on mount,
-    //       subsequent position changes are handled in hook below
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+        top = _containerRef$current.top,
+        left = _containerRef$current.left,
+        width = _containerRef$current.width,
+        height = _containerRef$current.height;
 
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-  // Update internal position if position prop changes
+    var x = 0;
+    var y = 0; // Use pointer positions if defined
 
+    if (pointerX && pointerY) {
+      x = pointerX - left - window.scrollX;
+      y = pointerY - top - window.scrollY; // Use percentage if defined
+    } else if (percentage) {
+      x = width / 100 * percentage;
+      y = height / 100 * percentage;
+    }
+
+    var px = portrait ? y : x;
+    var pc = portrait ? y / height * 100 : x / width * 100;
+    setInternalPosition({
+      pc: pc,
+      px: px
+    });
+
+    if (onChange) {
+      onChange(pc);
+    }
+  }, [onChange, portrait]); // Update internal position if position prop changes
+
   useEffect(function () {
-    setPositions(function (positions) {
-      return _extends({}, positions, {
-        position: position
+    updateInternalPosition({
+      percentage: position
+    });
+  }, [position, updateInternalPosition]);
+  /**
+   * Handle element resize event
+   */
+
+  var handleResize = useCallback(function () {
+    var _containerRef$current2 = containerRef.current.getBoundingClientRect(),
+        width = _containerRef$current2.width,
+        height = _containerRef$current2.height;
+
+    setInternalPosition(function (state) {
+      return _extends({}, state, {
+        px: portrait ? height / 100 * state.pc : width / 100 * state.pc
       });
     });
-  }, [position]); // Bind and handle events
+  }, [portrait]); // Update internal position on resize
 
   useEffect(function () {
-    var containerRefCurrent = containerRef.current;
+    var ro = new ResizeObserver(function () {
+      handleResize();
+    }); // Bind observer
 
-    var updatePosition = function updatePosition(x, y) {
-      var _containerRefCurrent$ = containerRefCurrent.getBoundingClientRect(),
-          width = _containerRefCurrent$.width,
-          height = _containerRefCurrent$.height;
-
-      var position = portrait ? y / height * 100 : x / width * 100;
-      setPositions(function (positions) {
-        return _extends({}, positions, {
-          positionPx: portrait ? y : x,
-          position: position
-        });
-      });
-      if (onChange) onChange(position);
+    var el = containerRef.current;
+    ro.observe(el);
+    return function () {
+      return ro.unobserve(el);
     };
+  }, [handleResize]); // Bind and handle events
 
+  useEffect(function () {
+    var containerRefCurrent = containerRef.current;
+
     var handleMouseDown = function handleMouseDown(ev) {
+      ev.preventDefault();
       if (!isDragging) setIsDragging(true);
-      updatePosition(ev.pageX, ev.pageY);
+      updateInternalPosition({
+        pointerX: ev.pageX,
+        pointerY: ev.pageY
+      });
     };
 
     var handleMouseMove = function handleMouseMove(ev) {
-      ev.preventDefault();
-
       if (isDragging) {
         requestAnimationFrame(function () {
-          updatePosition(ev.pageX, ev.pageY);
+          updateInternalPosition({
+            pointerX: ev.pageX,
+            pointerY: ev.pageY
+          });
         });
@@ -239,12 +269,17 @@ }
     var handleTouchStart = function handleTouchStart(ev) {
+      ev.preventDefault();
       if (!isDragging) setIsDragging(true);
-      updatePosition(ev.touches[0].pageX, ev.touches[0].pageY);
+      updateInternalPosition({
+        pointerX: ev.touches[0].pageX,
+        pointerY: ev.touches[0].pageY
+      });
     };
 
     var handleTouchMove = function handleTouchMove(ev) {
-      ev.preventDefault();
-
       if (isDragging) {
         requestAnimationFrame(function () {
-          updatePosition(ev.touches[0].pageX, ev.touches[0].pageY);
+          updateInternalPosition({
+            pointerX: ev.touches[0].pageX,
+            pointerY: ev.touches[0].pageY
+          });
         });
@@ -261,3 +296,3 @@ }
       capture: false,
-      passive: true
+      passive: false
     });
@@ -270,3 +305,3 @@ containerRefCurrent.addEventListener('mouseleave', handleFinish, {
       capture: false,
-      passive: false
+      passive: true
     });
@@ -280,3 +315,3 @@ containerRefCurrent.addEventListener('mouseup', handleFinish, {
       capture: false,
-      passive: true
+      passive: false
     });
@@ -288,3 +323,3 @@ containerRefCurrent.addEventListener('touchend', handleFinish, {
     containerRefCurrent.addEventListener('touchmove', handleTouchMove, {
-      capture: true,
+      capture: false,
       passive: true
@@ -308,3 +343,3 @@ });
     };
-  }, [isDragging, onChange, portrait]); // Use custom handle if requested
+  }, [isDragging, portrait, updateInternalPosition]); // Use custom handle if requested
 
@@ -315,2 +350,5 @@ var Handle = handle || React.createElement(ReactCompareSliderHandle, {
   var style = {
+    // @NOTE using `flex` to ensure Firefox will calculate the correct width
+    //       of bounding box, it will return `0` otherwise
+    flex: 1,
     position: 'relative',
@@ -320,2 +358,3 @@ overflow: 'hidden',
     userSelect: 'none',
+    KhtmlUserSelect: 'none',
     MozUserSelect: 'none',
@@ -327,9 +366,8 @@ WebkitUserSelect: 'none'
     style: style,
-    "data-rcs-main-container": true
-  }), itemOne, React.createElement(ReactCompareSliderItem, {
-    positionPx: positions.positionPx,
-    position: positions.position,
+    "data-rcs": "root"
+  }), itemTwo, React.createElement(ReactCompareSliderItem, {
+    position: internalPosition.px,
     portrait: portrait
-  }, itemTwo), React.createElement(ReactCompareSliderHandleContainer, {
-    position: positions.position,
+  }, itemOne), React.createElement(ReactCompareSliderHandleContainer, {
+    position: internalPosition.px,
     portrait: portrait
@@ -376,10 +414,10 @@ }, Handle));
     style: containerStyle,
-    "data-rcs-image-container": true
+    "data-rcs": "image-root"
   }, React.createElement("img", Object.assign({}, props, {
     style: innerStyle,
-    "data-rcs-image-inner": true
+    "data-rcs": "image-inner"
   })));
 };
 
-export { CLIENT_SUPPORTS_CSS_CLIP_PATH, CLIENT_SUPPORTS_CSS_OBJECT_FIT, ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer };
+export { CLIENT_SUPPORTS_CSS_OBJECT_FIT, ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer };
 //# sourceMappingURL=react-compare-slider.esm.js.map

package.json

 {
   "name": "react-compare-slider",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -57,23 +57,26 @@ "repository": {
   "devDependencies": {
-    "@testing-library/react": "^9.2.0",
+    "@testing-library/react": "^9.3.0",
     "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.3",
+    "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
-    "@typescript-eslint/eslint-plugin": "^2.3.1",
-    "@typescript-eslint/parser": "^2.3.1",
-    "eslint": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^2.3.2",
+    "@typescript-eslint/parser": "^2.3.2",
+    "eslint": "^6.5.1",
     "eslint-plugin-jest": "^22.17.0",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.1.1",
-    "husky": "^3.0.7",
-    "lint-staged": "^9.4.0",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.1.2",
+    "husky": "^3.0.8",
+    "lint-staged": "^9.4.1",
     "np": "^5.1.0",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "tsdx": "^0.9.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "tsdx": "^0.9.3",
     "tslib": "^1.10.0",
     "typescript": "^3.6.3"
+  },
+  "dependencies": {
+    "resize-observer": "^1.0.0"
   }
 }

README.md

@@ -0,1 +1,2 @@
+![License](https://img.shields.io/npm/l/react-compare-slider) ![npm](https://img.shields.io/npm/v/react-compare-slider) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-compare-slider)
 [![Build Status](https://github.com/nerdyman/react-compare-slider/workflows/node-ci/badge.svg)](https://github.com/nerdyman/react-compare-slider/workflows/node-ci)
@@ -15,3 +16,3 @@
 - Works in IE11+
-- Teeny-tiny, no dependencies
+- Teeny-tiny, only one ponyfill dependency
 - Type safe
@@ -21,2 +22,4 @@
 
+- CodeSandbox
+  - [Fluid, Landscape, Portrait with custom handle](<https://9si6l.codesandbox.io/>) 
 - [Storybook](<https://festive-darwin-fab443.netlify.com/>)
@@ -23,0 +26,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

Improved metrics

Total package byte prevSize

97122

increased by6.29%

Lines of code

798

increased by9.62%

Number of lines in readme file

126

increased by2.44%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedresize-observer@^1.0.0

• + Addedresize-observer@1.0.4(transitive)