New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-scroll-snap-carousel
Advanced tools
react-scroll-snap-carousel - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
@@ -0,309 +1,9 @@ | ||
| import { dragToScroll, scrollTo, getActiveSnap, utils } from 'scroll-snap-carousel'; | ||
| import { useEffect } from 'react'; | ||
| var mergeStyles = function () { | ||
| var classnames = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| classnames[_i] = arguments[_i]; | ||
| } | ||
| return classnames.filter(Boolean).join(" "); | ||
| }; | ||
| var extractStyleProperty = function (property, styles) { | ||
| return styles[property] || ""; | ||
| }; | ||
| var mapStyles = function ($item) { | ||
| var styles = window.getComputedStyle($item); | ||
| return { | ||
| paddingLeft: parseInt(extractStyleProperty("paddingLeft", styles)), | ||
| paddingRight: parseInt(extractStyleProperty("paddingRight", styles)), | ||
| paddingTop: parseInt(extractStyleProperty("paddingTop", styles)), | ||
| paddingBottom: parseInt(extractStyleProperty("paddingBottom", styles)), | ||
| snapAlign: extractStyleProperty("scrollSnapAlign", styles).split(" ")[0], | ||
| scrollPaddingLeft: parseInt(extractStyleProperty("scrollPaddingLeft", styles)), | ||
| scrollPaddingRight: parseInt(extractStyleProperty("scrollPaddingRight", styles)), | ||
| scrollPaddingTop: parseInt(extractStyleProperty("scrollPaddingTop", styles)), | ||
| scrollPaddingBottom: parseInt(extractStyleProperty("scrollPaddingBottom", styles)) | ||
| }; | ||
| }; | ||
| var mapItem = function (_a) { | ||
| var element = _a.element, viewport = _a.viewport; | ||
| var _b = mapStyles(element), paddingLeft = _b.paddingLeft, paddingRight = _b.paddingRight, paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom, snapAlign = _b.snapAlign; | ||
| var left = element.offsetLeft - viewport.offsetLeft + paddingLeft; | ||
| var width = element.offsetWidth - paddingLeft - paddingRight; | ||
| var right = left + width; | ||
| var top = element.offsetTop - viewport.offsetTop + paddingTop; | ||
| var height = element.offsetHeight - paddingBottom - paddingTop; | ||
| var bottom = top + height; | ||
| return { | ||
| left: left, | ||
| width: width, | ||
| right: right, | ||
| top: top, | ||
| height: height, | ||
| bottom: bottom, | ||
| paddingLeft: paddingLeft, | ||
| paddingRight: paddingRight, | ||
| paddingTop: paddingTop, | ||
| paddingBottom: paddingBottom, | ||
| snapAlign: snapAlign | ||
| }; | ||
| }; | ||
| var isTouchDevice = function () { | ||
| return !!(typeof window !== "undefined" && | ||
| ("ontouchstart" in window || | ||
| (window.DocumentTouch && | ||
| typeof document !== "undefined" && | ||
| document instanceof window.DocumentTouch))) || | ||
| !!(typeof navigator !== "undefined" && | ||
| (navigator.maxTouchPoints || navigator.msMaxTouchPoints)); | ||
| }; | ||
| var utils = /*#__PURE__*/Object.freeze({ | ||
| __proto__: null, | ||
| mergeStyles: mergeStyles, | ||
| mapStyles: mapStyles, | ||
| mapItem: mapItem, | ||
| isTouchDevice: isTouchDevice | ||
| }); | ||
| var normalize = function (value, _a) { | ||
| var min = _a.min, max = _a.max; | ||
| return Math.min(max, Math.max(min, value)); | ||
| }; | ||
| var scrollTo = function (_a) { | ||
| var root = _a.root, index = _a.index; | ||
| var getScrollFor = function (index) { | ||
| var $viewport = root; | ||
| if (!$viewport) | ||
| return; | ||
| var elements = $viewport.children; | ||
| var element = index >= 0 && elements.length ? elements[index] : null; | ||
| if (!element) | ||
| return; | ||
| var firstElement = elements[0]; | ||
| var viewportStyles = mapStyles($viewport); | ||
| var viewport = { | ||
| left: $viewport.scrollLeft, | ||
| width: $viewport.offsetWidth, | ||
| right: $viewport.scrollLeft + $viewport.offsetWidth, | ||
| top: $viewport.scrollTop, | ||
| height: $viewport.offsetHeight, | ||
| bottom: $viewport.scrollTop + $viewport.offsetHeight, | ||
| offsetLeft: $viewport.offsetLeft, | ||
| offsetTop: $viewport.offsetTop, | ||
| paddingLeft: mapStyles(firstElement).paddingLeft, | ||
| paddingRight: mapStyles(elements[elements.length - 1]).paddingRight, | ||
| paddingTop: mapStyles(firstElement).paddingTop, | ||
| paddingBottom: mapStyles(elements[elements.length - 1]).paddingBottom, | ||
| scrollPaddingLeft: viewportStyles.scrollPaddingLeft || 0, | ||
| scrollPaddingRight: viewportStyles.scrollPaddingRight || 0, | ||
| scrollPaddingTop: viewportStyles.scrollPaddingTop || 0, | ||
| scrollPaddingBottom: viewportStyles.scrollPaddingBottom || 0, | ||
| scrollWidth: $viewport.scrollWidth, | ||
| scrollHeight: $viewport.scrollHeight | ||
| }; | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| var target = { left: 0, top: 0 }; | ||
| switch (item.snapAlign) { | ||
| case 'start': | ||
| target = { | ||
| left: item.left - | ||
| item.paddingLeft - | ||
| viewport.paddingLeft - | ||
| viewport.scrollPaddingLeft, | ||
| top: item.top - | ||
| item.paddingTop - | ||
| viewport.paddingTop - | ||
| viewport.scrollPaddingTop | ||
| }; | ||
| break; | ||
| case 'end': | ||
| target = { | ||
| left: item.left - | ||
| (viewport.width - item.width) + | ||
| viewport.paddingRight + | ||
| viewport.scrollPaddingRight, | ||
| top: item.top - | ||
| (viewport.height - item.height) + | ||
| viewport.paddingBottom + | ||
| viewport.scrollPaddingBottom | ||
| }; | ||
| break; | ||
| case 'center': | ||
| target = { | ||
| left: item.left - | ||
| (viewport.width - item.width) / 2 - | ||
| viewport.scrollPaddingLeft / 2, | ||
| top: item.top - | ||
| (viewport.height - item.height) / 2 - | ||
| viewport.scrollPaddingTop / 2 | ||
| }; | ||
| break; | ||
| } | ||
| var maxLeftScroll = viewport.scrollWidth - viewport.width; | ||
| var maxTopScroll = viewport.scrollHeight - viewport.height; | ||
| return { | ||
| left: normalize(target.left, { min: 0, max: maxLeftScroll }), | ||
| top: normalize(target.top, { min: 0, max: maxTopScroll }) | ||
| }; | ||
| }; | ||
| var goTo = function (index) { | ||
| var scrollTarget = getScrollFor(index); | ||
| if (scrollTarget) { | ||
| root.scrollTo({ | ||
| left: scrollTarget.left, | ||
| top: scrollTarget.top, | ||
| behavior: 'smooth' | ||
| }); | ||
| } | ||
| }; | ||
| return goTo(index); | ||
| }; | ||
| // as found on stackoverflow: https://stackoverflow.com/a/19277804 | ||
| var getClosest = function (l, t) { | ||
| return l.reduce(function (p, c) { return (Math.abs(c - t) < Math.abs(p - t) ? c : p); }); | ||
| }; | ||
| var getElementPositionX = function (viewport, element) { | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| return item.left - (viewport.offsetWidth / 2 - item.width / 2); | ||
| }; | ||
| var getElementPositionY = function (viewport, element) { | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| return item.top - (viewport.offsetHeight / 2 - item.height / 2); | ||
| }; | ||
| var dragThreshold = 2; // distance moved before isDragged is set to true and click on children is disabled | ||
| var dragToScroll = function (_a) { | ||
| var root = _a.root, _b = _a.disabled, disabled = _b === void 0 ? false : _b; | ||
| console.log(root); | ||
| var elementPositionsX = []; | ||
| var elementPositionsY = []; | ||
| var timeout = null; | ||
| var isDragging = false; | ||
| var setIsDragging = function (value) { return (isDragging = value); }; | ||
| var isDown = false; | ||
| var startX = 0; | ||
| var startY = 0; | ||
| var slideX = 0; | ||
| var slideY = 0; | ||
| var originalScrollSnapType = undefined; | ||
| // used to determine whether slider is scrolling. After scrolling ends, reset css classes | ||
| var handleScrolling = function () { | ||
| if (timeout) | ||
| clearTimeout(timeout); | ||
| timeout = setTimeout(function () { | ||
| if (!root) | ||
| return; | ||
| root.removeEventListener('scroll', handleScrolling); | ||
| setIsDragging(false); | ||
| // Safari resets scroll position when removing the css class, manually | ||
| // setting the scroll property afterwards seems to fix the problem | ||
| // without flashing | ||
| var currentX = root === null || root === void 0 ? void 0 : root.scrollLeft; | ||
| var currentY = root === null || root === void 0 ? void 0 : root.scrollTop; | ||
| root.classList.remove('snaplist_drag'); | ||
| root.scrollLeft = currentX; | ||
| root.scrollTop = currentY; | ||
| }, 50); | ||
| }; | ||
| var handleMouseDown = function (event) { | ||
| if (!root) | ||
| return; | ||
| event.preventDefault(); | ||
| isDown = true; | ||
| startX = event.pageX - root.offsetLeft; | ||
| slideX = root.scrollLeft; | ||
| startY = event.pageY - root.offsetTop; | ||
| slideY = root.scrollTop; | ||
| }; | ||
| var handleMouseMove = function (event) { | ||
| if (!root) | ||
| return; | ||
| if (!isDown) | ||
| return; | ||
| var distanceMoved = Math.abs(startX - (event.pageX - root.offsetLeft)); | ||
| if (distanceMoved < dragThreshold) | ||
| return; // skip further action, when not mouse movement is below threshold, thus no drag detected | ||
| if (timeout) | ||
| clearTimeout(timeout); | ||
| if (!isDragging) { | ||
| setIsDragging(true); | ||
| var snapListStyles = window.getComputedStyle(root); | ||
| if (originalScrollSnapType === undefined) { | ||
| originalScrollSnapType = snapListStyles.scrollSnapType.toString(); | ||
| } | ||
| } | ||
| root.classList.add('snaplist_drag'); | ||
| var x = event.pageX - root.offsetLeft; | ||
| var displaceX = x - startX; | ||
| root.scrollLeft = slideX - displaceX; | ||
| var y = event.pageY - root.offsetTop; | ||
| var displaceY = y - startY; | ||
| root.scrollTop = slideY - displaceY; | ||
| }; | ||
| var handleMouseUp = function () { | ||
| if (!root) | ||
| return; | ||
| isDown = false; | ||
| if (!isDragging) | ||
| return; | ||
| root.addEventListener('scroll', handleScrolling); | ||
| if (originalScrollSnapType === 'none') | ||
| return; | ||
| var dragEndPositionX = root.scrollLeft; | ||
| var dragEndPositionY = root.scrollTop; | ||
| var scrollTargetX = getClosest(elementPositionsX, dragEndPositionX); | ||
| var scrollTargetY = getClosest(elementPositionsY, dragEndPositionY); | ||
| var targetIndex = scrollTargetX > 0 | ||
| ? elementPositionsX.indexOf(scrollTargetX) | ||
| : elementPositionsY.indexOf(scrollTargetY); | ||
| scrollTo({ root: root, index: targetIndex }); | ||
| }; | ||
| var handleClick = function (event) { | ||
| // we need this to prevent click events being fired on children | ||
| if (!isDragging) | ||
| return; | ||
| event.stopPropagation(); | ||
| setIsDragging(false); | ||
| }; | ||
| var registerEventListeners = function () { | ||
| if (!root) | ||
| return; | ||
| root.addEventListener('mousedown', handleMouseDown); | ||
| root.addEventListener('click', handleClick); | ||
| window.addEventListener('mousemove', handleMouseMove); | ||
| window.addEventListener('mouseup', handleMouseUp); | ||
| }; | ||
| var removeEventListeners = function () { | ||
| if (!root) | ||
| return; | ||
| root.removeEventListener('mousedown', handleMouseDown); | ||
| root.removeEventListener('click', handleClick); | ||
| window.removeEventListener('mousemove', handleMouseMove); | ||
| window.removeEventListener('mouseup', handleMouseUp); | ||
| }; | ||
| var init = function () { | ||
| // skip on touch devices | ||
| if (!root || isTouchDevice() || disabled) | ||
| return; | ||
| var children = root.children; | ||
| elementPositionsX = Array.from(children).map(function (element) { | ||
| return getElementPositionX(root, element); | ||
| }); | ||
| elementPositionsY = Array.from(children).map(function (element) { | ||
| return getElementPositionY(root, element); | ||
| }); | ||
| registerEventListeners(); | ||
| }; | ||
| init(); | ||
| return { | ||
| isDragging: isDragging, | ||
| disable: removeEventListeners, | ||
| enable: registerEventListeners | ||
| }; | ||
| }; | ||
| var useDragToScroll = function (_a) { | ||
| var ref = _a.ref, _b = _a.disabled; | ||
| var ref = _a.ref; | ||
| useEffect(function () { | ||
| dragToScroll({ root: ref.current }); | ||
| if (ref.current) | ||
| dragToScroll({ root: ref.current }); | ||
| }, []); | ||
@@ -317,6 +17,14 @@ }; | ||
| var isTouchDevice$1 = utils.isTouchDevice; | ||
| var useActiveSnap = function (_a) { | ||
| var ref = _a.ref, onChange = _a.onChange; | ||
| useEffect(function () { | ||
| if (ref.current) | ||
| getActiveSnap({ root: ref.current, onChange: onChange }); | ||
| }, []); | ||
| }; | ||
| var isTouchDevice = utils.isTouchDevice; | ||
| // export { useVisibleElements } from './useVisibleElements'; | ||
| export { isTouchDevice$1 as isTouchDevice, useDragToScroll, useScroll }; | ||
| export { isTouchDevice, useActiveSnap, useDragToScroll, useScroll }; | ||
| //# sourceMappingURL=index.es.js.map |
@@ -5,310 +5,10 @@ 'use strict'; | ||
| var scrollSnapCarousel = require('scroll-snap-carousel'); | ||
| var react = require('react'); | ||
| var mergeStyles = function () { | ||
| var classnames = []; | ||
| for (var _i = 0; _i < arguments.length; _i++) { | ||
| classnames[_i] = arguments[_i]; | ||
| } | ||
| return classnames.filter(Boolean).join(" "); | ||
| }; | ||
| var extractStyleProperty = function (property, styles) { | ||
| return styles[property] || ""; | ||
| }; | ||
| var mapStyles = function ($item) { | ||
| var styles = window.getComputedStyle($item); | ||
| return { | ||
| paddingLeft: parseInt(extractStyleProperty("paddingLeft", styles)), | ||
| paddingRight: parseInt(extractStyleProperty("paddingRight", styles)), | ||
| paddingTop: parseInt(extractStyleProperty("paddingTop", styles)), | ||
| paddingBottom: parseInt(extractStyleProperty("paddingBottom", styles)), | ||
| snapAlign: extractStyleProperty("scrollSnapAlign", styles).split(" ")[0], | ||
| scrollPaddingLeft: parseInt(extractStyleProperty("scrollPaddingLeft", styles)), | ||
| scrollPaddingRight: parseInt(extractStyleProperty("scrollPaddingRight", styles)), | ||
| scrollPaddingTop: parseInt(extractStyleProperty("scrollPaddingTop", styles)), | ||
| scrollPaddingBottom: parseInt(extractStyleProperty("scrollPaddingBottom", styles)) | ||
| }; | ||
| }; | ||
| var mapItem = function (_a) { | ||
| var element = _a.element, viewport = _a.viewport; | ||
| var _b = mapStyles(element), paddingLeft = _b.paddingLeft, paddingRight = _b.paddingRight, paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom, snapAlign = _b.snapAlign; | ||
| var left = element.offsetLeft - viewport.offsetLeft + paddingLeft; | ||
| var width = element.offsetWidth - paddingLeft - paddingRight; | ||
| var right = left + width; | ||
| var top = element.offsetTop - viewport.offsetTop + paddingTop; | ||
| var height = element.offsetHeight - paddingBottom - paddingTop; | ||
| var bottom = top + height; | ||
| return { | ||
| left: left, | ||
| width: width, | ||
| right: right, | ||
| top: top, | ||
| height: height, | ||
| bottom: bottom, | ||
| paddingLeft: paddingLeft, | ||
| paddingRight: paddingRight, | ||
| paddingTop: paddingTop, | ||
| paddingBottom: paddingBottom, | ||
| snapAlign: snapAlign | ||
| }; | ||
| }; | ||
| var isTouchDevice = function () { | ||
| return !!(typeof window !== "undefined" && | ||
| ("ontouchstart" in window || | ||
| (window.DocumentTouch && | ||
| typeof document !== "undefined" && | ||
| document instanceof window.DocumentTouch))) || | ||
| !!(typeof navigator !== "undefined" && | ||
| (navigator.maxTouchPoints || navigator.msMaxTouchPoints)); | ||
| }; | ||
| var utils = /*#__PURE__*/Object.freeze({ | ||
| __proto__: null, | ||
| mergeStyles: mergeStyles, | ||
| mapStyles: mapStyles, | ||
| mapItem: mapItem, | ||
| isTouchDevice: isTouchDevice | ||
| }); | ||
| var normalize = function (value, _a) { | ||
| var min = _a.min, max = _a.max; | ||
| return Math.min(max, Math.max(min, value)); | ||
| }; | ||
| var scrollTo = function (_a) { | ||
| var root = _a.root, index = _a.index; | ||
| var getScrollFor = function (index) { | ||
| var $viewport = root; | ||
| if (!$viewport) | ||
| return; | ||
| var elements = $viewport.children; | ||
| var element = index >= 0 && elements.length ? elements[index] : null; | ||
| if (!element) | ||
| return; | ||
| var firstElement = elements[0]; | ||
| var viewportStyles = mapStyles($viewport); | ||
| var viewport = { | ||
| left: $viewport.scrollLeft, | ||
| width: $viewport.offsetWidth, | ||
| right: $viewport.scrollLeft + $viewport.offsetWidth, | ||
| top: $viewport.scrollTop, | ||
| height: $viewport.offsetHeight, | ||
| bottom: $viewport.scrollTop + $viewport.offsetHeight, | ||
| offsetLeft: $viewport.offsetLeft, | ||
| offsetTop: $viewport.offsetTop, | ||
| paddingLeft: mapStyles(firstElement).paddingLeft, | ||
| paddingRight: mapStyles(elements[elements.length - 1]).paddingRight, | ||
| paddingTop: mapStyles(firstElement).paddingTop, | ||
| paddingBottom: mapStyles(elements[elements.length - 1]).paddingBottom, | ||
| scrollPaddingLeft: viewportStyles.scrollPaddingLeft || 0, | ||
| scrollPaddingRight: viewportStyles.scrollPaddingRight || 0, | ||
| scrollPaddingTop: viewportStyles.scrollPaddingTop || 0, | ||
| scrollPaddingBottom: viewportStyles.scrollPaddingBottom || 0, | ||
| scrollWidth: $viewport.scrollWidth, | ||
| scrollHeight: $viewport.scrollHeight | ||
| }; | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| var target = { left: 0, top: 0 }; | ||
| switch (item.snapAlign) { | ||
| case 'start': | ||
| target = { | ||
| left: item.left - | ||
| item.paddingLeft - | ||
| viewport.paddingLeft - | ||
| viewport.scrollPaddingLeft, | ||
| top: item.top - | ||
| item.paddingTop - | ||
| viewport.paddingTop - | ||
| viewport.scrollPaddingTop | ||
| }; | ||
| break; | ||
| case 'end': | ||
| target = { | ||
| left: item.left - | ||
| (viewport.width - item.width) + | ||
| viewport.paddingRight + | ||
| viewport.scrollPaddingRight, | ||
| top: item.top - | ||
| (viewport.height - item.height) + | ||
| viewport.paddingBottom + | ||
| viewport.scrollPaddingBottom | ||
| }; | ||
| break; | ||
| case 'center': | ||
| target = { | ||
| left: item.left - | ||
| (viewport.width - item.width) / 2 - | ||
| viewport.scrollPaddingLeft / 2, | ||
| top: item.top - | ||
| (viewport.height - item.height) / 2 - | ||
| viewport.scrollPaddingTop / 2 | ||
| }; | ||
| break; | ||
| } | ||
| var maxLeftScroll = viewport.scrollWidth - viewport.width; | ||
| var maxTopScroll = viewport.scrollHeight - viewport.height; | ||
| return { | ||
| left: normalize(target.left, { min: 0, max: maxLeftScroll }), | ||
| top: normalize(target.top, { min: 0, max: maxTopScroll }) | ||
| }; | ||
| }; | ||
| var goTo = function (index) { | ||
| var scrollTarget = getScrollFor(index); | ||
| if (scrollTarget) { | ||
| root.scrollTo({ | ||
| left: scrollTarget.left, | ||
| top: scrollTarget.top, | ||
| behavior: 'smooth' | ||
| }); | ||
| } | ||
| }; | ||
| return goTo(index); | ||
| }; | ||
| // as found on stackoverflow: https://stackoverflow.com/a/19277804 | ||
| var getClosest = function (l, t) { | ||
| return l.reduce(function (p, c) { return (Math.abs(c - t) < Math.abs(p - t) ? c : p); }); | ||
| }; | ||
| var getElementPositionX = function (viewport, element) { | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| return item.left - (viewport.offsetWidth / 2 - item.width / 2); | ||
| }; | ||
| var getElementPositionY = function (viewport, element) { | ||
| var item = mapItem({ element: element, viewport: viewport }); | ||
| return item.top - (viewport.offsetHeight / 2 - item.height / 2); | ||
| }; | ||
| var dragThreshold = 2; // distance moved before isDragged is set to true and click on children is disabled | ||
| var dragToScroll = function (_a) { | ||
| var root = _a.root, _b = _a.disabled, disabled = _b === void 0 ? false : _b; | ||
| console.log(root); | ||
| var elementPositionsX = []; | ||
| var elementPositionsY = []; | ||
| var timeout = null; | ||
| var isDragging = false; | ||
| var setIsDragging = function (value) { return (isDragging = value); }; | ||
| var isDown = false; | ||
| var startX = 0; | ||
| var startY = 0; | ||
| var slideX = 0; | ||
| var slideY = 0; | ||
| var originalScrollSnapType = undefined; | ||
| // used to determine whether slider is scrolling. After scrolling ends, reset css classes | ||
| var handleScrolling = function () { | ||
| if (timeout) | ||
| clearTimeout(timeout); | ||
| timeout = setTimeout(function () { | ||
| if (!root) | ||
| return; | ||
| root.removeEventListener('scroll', handleScrolling); | ||
| setIsDragging(false); | ||
| // Safari resets scroll position when removing the css class, manually | ||
| // setting the scroll property afterwards seems to fix the problem | ||
| // without flashing | ||
| var currentX = root === null || root === void 0 ? void 0 : root.scrollLeft; | ||
| var currentY = root === null || root === void 0 ? void 0 : root.scrollTop; | ||
| root.classList.remove('snaplist_drag'); | ||
| root.scrollLeft = currentX; | ||
| root.scrollTop = currentY; | ||
| }, 50); | ||
| }; | ||
| var handleMouseDown = function (event) { | ||
| if (!root) | ||
| return; | ||
| event.preventDefault(); | ||
| isDown = true; | ||
| startX = event.pageX - root.offsetLeft; | ||
| slideX = root.scrollLeft; | ||
| startY = event.pageY - root.offsetTop; | ||
| slideY = root.scrollTop; | ||
| }; | ||
| var handleMouseMove = function (event) { | ||
| if (!root) | ||
| return; | ||
| if (!isDown) | ||
| return; | ||
| var distanceMoved = Math.abs(startX - (event.pageX - root.offsetLeft)); | ||
| if (distanceMoved < dragThreshold) | ||
| return; // skip further action, when not mouse movement is below threshold, thus no drag detected | ||
| if (timeout) | ||
| clearTimeout(timeout); | ||
| if (!isDragging) { | ||
| setIsDragging(true); | ||
| var snapListStyles = window.getComputedStyle(root); | ||
| if (originalScrollSnapType === undefined) { | ||
| originalScrollSnapType = snapListStyles.scrollSnapType.toString(); | ||
| } | ||
| } | ||
| root.classList.add('snaplist_drag'); | ||
| var x = event.pageX - root.offsetLeft; | ||
| var displaceX = x - startX; | ||
| root.scrollLeft = slideX - displaceX; | ||
| var y = event.pageY - root.offsetTop; | ||
| var displaceY = y - startY; | ||
| root.scrollTop = slideY - displaceY; | ||
| }; | ||
| var handleMouseUp = function () { | ||
| if (!root) | ||
| return; | ||
| isDown = false; | ||
| if (!isDragging) | ||
| return; | ||
| root.addEventListener('scroll', handleScrolling); | ||
| if (originalScrollSnapType === 'none') | ||
| return; | ||
| var dragEndPositionX = root.scrollLeft; | ||
| var dragEndPositionY = root.scrollTop; | ||
| var scrollTargetX = getClosest(elementPositionsX, dragEndPositionX); | ||
| var scrollTargetY = getClosest(elementPositionsY, dragEndPositionY); | ||
| var targetIndex = scrollTargetX > 0 | ||
| ? elementPositionsX.indexOf(scrollTargetX) | ||
| : elementPositionsY.indexOf(scrollTargetY); | ||
| scrollTo({ root: root, index: targetIndex }); | ||
| }; | ||
| var handleClick = function (event) { | ||
| // we need this to prevent click events being fired on children | ||
| if (!isDragging) | ||
| return; | ||
| event.stopPropagation(); | ||
| setIsDragging(false); | ||
| }; | ||
| var registerEventListeners = function () { | ||
| if (!root) | ||
| return; | ||
| root.addEventListener('mousedown', handleMouseDown); | ||
| root.addEventListener('click', handleClick); | ||
| window.addEventListener('mousemove', handleMouseMove); | ||
| window.addEventListener('mouseup', handleMouseUp); | ||
| }; | ||
| var removeEventListeners = function () { | ||
| if (!root) | ||
| return; | ||
| root.removeEventListener('mousedown', handleMouseDown); | ||
| root.removeEventListener('click', handleClick); | ||
| window.removeEventListener('mousemove', handleMouseMove); | ||
| window.removeEventListener('mouseup', handleMouseUp); | ||
| }; | ||
| var init = function () { | ||
| // skip on touch devices | ||
| if (!root || isTouchDevice() || disabled) | ||
| return; | ||
| var children = root.children; | ||
| elementPositionsX = Array.from(children).map(function (element) { | ||
| return getElementPositionX(root, element); | ||
| }); | ||
| elementPositionsY = Array.from(children).map(function (element) { | ||
| return getElementPositionY(root, element); | ||
| }); | ||
| registerEventListeners(); | ||
| }; | ||
| init(); | ||
| return { | ||
| isDragging: isDragging, | ||
| disable: removeEventListeners, | ||
| enable: registerEventListeners | ||
| }; | ||
| }; | ||
| var useDragToScroll = function (_a) { | ||
| var ref = _a.ref, _b = _a.disabled; | ||
| var ref = _a.ref; | ||
| react.useEffect(function () { | ||
| dragToScroll({ root: ref.current }); | ||
| if (ref.current) | ||
| scrollSnapCarousel.dragToScroll({ root: ref.current }); | ||
| }, []); | ||
@@ -319,11 +19,20 @@ }; | ||
| var ref = _a.ref; | ||
| return function (index) { return scrollTo({ root: ref.current, index: index }); }; | ||
| return function (index) { return scrollSnapCarousel.scrollTo({ root: ref.current, index: index }); }; | ||
| }; | ||
| var isTouchDevice$1 = utils.isTouchDevice; | ||
| var useActiveSnap = function (_a) { | ||
| var ref = _a.ref, onChange = _a.onChange; | ||
| react.useEffect(function () { | ||
| if (ref.current) | ||
| scrollSnapCarousel.getActiveSnap({ root: ref.current, onChange: onChange }); | ||
| }, []); | ||
| }; | ||
| var isTouchDevice = scrollSnapCarousel.utils.isTouchDevice; | ||
| // export { useVisibleElements } from './useVisibleElements'; | ||
| exports.isTouchDevice = isTouchDevice$1; | ||
| exports.isTouchDevice = isTouchDevice; | ||
| exports.useActiveSnap = useActiveSnap; | ||
| exports.useDragToScroll = useDragToScroll; | ||
| exports.useScroll = useScroll; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "react-scroll-snap-carousel", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "main": "dist/index.js", | ||
@@ -13,8 +13,6 @@ "module": "dist/index.es.js", | ||
| }, | ||
| "dependencies": { | ||
| "scroll-snap-carousel": "^0.0.2" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": ">=16.8.0", | ||
| "react-dom": ">=16.8.0" | ||
| "react-dom": ">=16.8.0", | ||
| "scroll-snap-carousel": "^0.0.2" | ||
| }, | ||
@@ -34,3 +32,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "189c17268de87bde83fc7bb0d465a40f0d45aea2" | ||
| "gitHead": "2b95abddd4b8ec253d80f6e7fc1d0175d3dab399" | ||
| } |
@@ -1,15 +0,15 @@ | ||
| import typescript from "@rollup/plugin-typescript"; | ||
| import commonjs from "@rollup/plugin-commonjs"; | ||
| import resolve from "@rollup/plugin-node-resolve"; | ||
| import external from "rollup-plugin-peer-deps-external"; | ||
| import typescript from '@rollup/plugin-typescript'; | ||
| import commonjs from '@rollup/plugin-commonjs'; | ||
| import resolve from '@rollup/plugin-node-resolve'; | ||
| import external from 'rollup-plugin-peer-deps-external'; | ||
| import pkg from "./package.json"; | ||
| import pkg from './package.json'; | ||
| export default { | ||
| input: "src/index.ts", | ||
| input: 'src/index.ts', | ||
| output: [ | ||
| { | ||
| file: pkg.main, | ||
| format: "cjs", | ||
| exports: "named", | ||
| format: 'cjs', | ||
| exports: 'named', | ||
| sourcemap: true, | ||
@@ -19,4 +19,4 @@ }, | ||
| file: pkg.module, | ||
| format: "es", | ||
| exports: "named", | ||
| format: 'es', | ||
| exports: 'named', | ||
| sourcemap: true, | ||
@@ -23,0 +23,0 @@ }, |
@@ -8,2 +8,3 @@ import { utils } from 'scroll-snap-carousel'; | ||
| export { useScroll } from './useScroll'; | ||
| export { useActiveSnap } from './useActiveSnap'; | ||
| // export { useVisibleElements } from './useVisibleElements'; |
@@ -6,10 +6,8 @@ import { RefObject, useEffect } from 'react'; | ||
| ref, | ||
| disabled = false, | ||
| }: { | ||
| ref: RefObject<HTMLDivElement>; | ||
| disabled?: boolean; | ||
| }) => { | ||
| useEffect(() => { | ||
| dragToScroll({ root: ref.current }); | ||
| if (ref.current) dragToScroll({ root: ref.current }); | ||
| }, []); | ||
| }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New 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
- Number of package files
- increased by20%
12
Worsened metrics
- Total package byte prevSize
- decreased by-90.99%
7903
- Lines of code
- decreased by-79.47%
139
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removedscroll-snap-carousel@^0.0.2