yet-another-react-lightbox 3.8.1 → 3.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +16 -1
- package/dist/index.js +74 -14
- package/dist/plugins/share/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -198,6 +198,21 @@ declare function ImageSlide({ slide: image, offset, render, rect, imageFit, onCl
|
|
|
198
198
|
declare function Carousel({ carousel: { finite, preload, padding, spacing } }: ComponentProps): React.JSX.Element;
|
|
199
199
|
declare const CarouselModule: Module;
|
|
200
200
|
|
|
201
|
+
declare enum SwipeState {
|
|
202
|
+
NONE = 0,
|
|
203
|
+
SWIPE = 1,
|
|
204
|
+
PULL_DOWN = 2,
|
|
205
|
+
ANIMATION = 3
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, pullDownEnabled: boolean, onPullDownStart: () => void, onPullDownProgress: (offset: number) => void, onPullDownFinish: (offset: number, duration: number) => void, onPullDownCancel: (offset: number) => void): void;
|
|
209
|
+
|
|
210
|
+
/** prevent browser back/forward navigation on touchpad left/right swipe (especially noticeable in Safari)
|
|
211
|
+
* this has to be done via non-passive native event handler */
|
|
212
|
+
declare function usePreventSwipeNavigation<T extends HTMLElement = HTMLElement>(): (node: T | null) => void;
|
|
213
|
+
|
|
214
|
+
declare function useWheelSwipe<T extends Element = Element>(swipeState: SwipeState, subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void): void;
|
|
215
|
+
|
|
201
216
|
type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {
|
|
202
217
|
focus: Callback;
|
|
203
218
|
slideRect: ContainerRect;
|
|
@@ -237,4 +252,4 @@ declare const RootModule: Module;
|
|
|
237
252
|
declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): React.JSX.Element;
|
|
238
253
|
declare const ToolbarModule: Module;
|
|
239
254
|
|
|
240
|
-
export { Augmentation, Callback, Carousel, CarouselModule, CloseIcon, Component, ComponentProps, ComputeAnimation, ContainerRect, Controller, ControllerContext, ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, Event, EventCallback, EventTypes, EventsContext, EventsContextType, EventsProvider, IconButton, IconButtonProps, ImageFit, ImageSlide, ImageSlideProps, KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsContextType, LightboxPropsProvider, LightboxState, LightboxStateAction, LightboxStateContext, LightboxStateContextType, LightboxStateProvider, LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, PointerEventType, Portal, PortalModule, PreviousIcon, Publish, ReactEventType, RegisterSensors, Render, RenderFunction, Root, RootModule, SensorCallback, Slide, SlideImage, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContext, TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, Topic, Unsubscribe, UseSensors, WheelEventType, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useRTL, useSensors, useThrottle, useTimeouts, withPlugins };
|
|
255
|
+
export { Augmentation, Callback, Carousel, CarouselModule, CloseIcon, Component, ComponentProps, ComputeAnimation, ContainerRect, Controller, ControllerContext, ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, Event, EventCallback, EventTypes, EventsContext, EventsContextType, EventsProvider, IconButton, IconButtonProps, ImageFit, ImageSlide, ImageSlideProps, KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsContextType, LightboxPropsProvider, LightboxState, LightboxStateAction, LightboxStateContext, LightboxStateContextType, LightboxStateProvider, LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, PointerEventType, Portal, PortalModule, PreviousIcon, Publish, ReactEventType, RegisterSensors, Render, RenderFunction, Root, RootModule, SensorCallback, Slide, SlideImage, Subscribe, SubscribeSensors, SupportedEventType, SwipeState, TimeoutsContext, TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, Topic, Unsubscribe, UseSensors, WheelEventType, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
package/dist/index.js
CHANGED
|
@@ -631,7 +631,8 @@ var SwipeState;
|
|
|
631
631
|
(function (SwipeState) {
|
|
632
632
|
SwipeState[SwipeState["NONE"] = 0] = "NONE";
|
|
633
633
|
SwipeState[SwipeState["SWIPE"] = 1] = "SWIPE";
|
|
634
|
-
SwipeState[SwipeState["
|
|
634
|
+
SwipeState[SwipeState["PULL_DOWN"] = 2] = "PULL_DOWN";
|
|
635
|
+
SwipeState[SwipeState["ANIMATION"] = 3] = "ANIMATION";
|
|
635
636
|
})(SwipeState || (SwipeState = {}));
|
|
636
637
|
|
|
637
638
|
function usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled) {
|
|
@@ -649,7 +650,7 @@ var Gesture;
|
|
|
649
650
|
Gesture[Gesture["PULL_DOWN"] = 2] = "PULL_DOWN";
|
|
650
651
|
})(Gesture || (Gesture = {}));
|
|
651
652
|
const SWIPE_THRESHOLD = 30;
|
|
652
|
-
function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, onPullDownStart, onPullDownProgress, onPullDownFinish, onPullDownCancel) {
|
|
653
|
+
function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, pullDownEnabled, onPullDownStart, onPullDownProgress, onPullDownFinish, onPullDownCancel) {
|
|
653
654
|
const offset = React.useRef(0);
|
|
654
655
|
const pointers = React.useRef([]);
|
|
655
656
|
const activePointer = React.useRef();
|
|
@@ -724,7 +725,7 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
|
|
|
724
725
|
startGesture(Gesture.SWIPE);
|
|
725
726
|
onSwipeStart();
|
|
726
727
|
}
|
|
727
|
-
else if (Math.abs(deltaY) > Math.abs(deltaX) &&
|
|
728
|
+
else if (pullDownEnabled && Math.abs(deltaY) > Math.abs(deltaX) && deltaY > SWIPE_THRESHOLD) {
|
|
728
729
|
startGesture(Gesture.PULL_DOWN);
|
|
729
730
|
onPullDownStart();
|
|
730
731
|
}
|
|
@@ -806,7 +807,7 @@ function useWheelSwipe(swipeState, subscribeSensors, isSwipeValid, containerWidt
|
|
|
806
807
|
if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
|
|
807
808
|
return;
|
|
808
809
|
}
|
|
809
|
-
if (
|
|
810
|
+
if (swipeState === SwipeState.NONE) {
|
|
810
811
|
if (Math.abs(event.deltaX) <= 1.2 * Math.abs(wheelResidualMomentum.current)) {
|
|
811
812
|
wheelResidualMomentum.current = event.deltaX;
|
|
812
813
|
return;
|
|
@@ -863,10 +864,13 @@ function Controller({ children, ...props }) {
|
|
|
863
864
|
const dispatch = useLightboxDispatch();
|
|
864
865
|
const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
|
|
865
866
|
const swipeOffset = React.useRef(0);
|
|
867
|
+
const pullDownOffset = React.useRef(0);
|
|
868
|
+
const pullDownOpacity = React.useRef(1);
|
|
866
869
|
const { registerSensors, subscribeSensors } = useSensors();
|
|
867
870
|
const { subscribe, publish } = useEvents();
|
|
868
871
|
const cleanupAnimationIncrement = useDelay();
|
|
869
872
|
const cleanupSwipeOffset = useDelay();
|
|
873
|
+
const cleanupPullDownOffset = useDelay();
|
|
870
874
|
const { containerRef, setContainerRef, containerRect } = useContainerRect();
|
|
871
875
|
const handleContainerRef = useForkRef(usePreventSwipeNavigation(), setContainerRef);
|
|
872
876
|
const carouselRef = React.useRef(null);
|
|
@@ -887,6 +891,56 @@ function Controller({ children, ...props }) {
|
|
|
887
891
|
swipeOffset.current = offset;
|
|
888
892
|
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
|
|
889
893
|
};
|
|
894
|
+
const pullDownEnabled = controller.closeOnPullDown;
|
|
895
|
+
const setPullDownOffset = (offset) => {
|
|
896
|
+
var _a, _b;
|
|
897
|
+
pullDownOffset.current = offset;
|
|
898
|
+
pullDownOpacity.current = (() => {
|
|
899
|
+
const threshold = 60;
|
|
900
|
+
const minOpacity = 0.5;
|
|
901
|
+
return Math.min(Math.max(round(1 - (offset / threshold) * (1 - minOpacity), 2), minOpacity), 1);
|
|
902
|
+
})();
|
|
903
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("pull_down_offset"), `${Math.round(offset)}px`);
|
|
904
|
+
(_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty(cssVar("pull_down_opacity"), `${pullDownOpacity.current}`);
|
|
905
|
+
};
|
|
906
|
+
const { prepareAnimation: preparePullDownAnimation } = useAnimation(carouselRef, (snapshot, rect, translate) => {
|
|
907
|
+
if (carouselRef.current && containerRect) {
|
|
908
|
+
return {
|
|
909
|
+
keyframes: [
|
|
910
|
+
{
|
|
911
|
+
transform: `translate(0, ${snapshot.rect.y - rect.y + translate.y}px)`,
|
|
912
|
+
opacity: snapshot.opacity,
|
|
913
|
+
},
|
|
914
|
+
{ transform: "translate(0, 0)", opacity: 1 },
|
|
915
|
+
],
|
|
916
|
+
duration: snapshot.duration,
|
|
917
|
+
easing: animation.easing.fade,
|
|
918
|
+
};
|
|
919
|
+
}
|
|
920
|
+
return undefined;
|
|
921
|
+
});
|
|
922
|
+
const pullDown = (offset, cancel) => {
|
|
923
|
+
if (pullDownEnabled) {
|
|
924
|
+
setPullDownOffset(offset);
|
|
925
|
+
let duration = 0;
|
|
926
|
+
if (carouselRef.current) {
|
|
927
|
+
duration = animation.fade * (cancel ? 2 : 1);
|
|
928
|
+
preparePullDownAnimation({
|
|
929
|
+
rect: carouselRef.current.getBoundingClientRect(),
|
|
930
|
+
opacity: pullDownOpacity.current,
|
|
931
|
+
duration,
|
|
932
|
+
});
|
|
933
|
+
}
|
|
934
|
+
cleanupPullDownOffset(() => {
|
|
935
|
+
setPullDownOffset(0);
|
|
936
|
+
setSwipeState(SwipeState.NONE);
|
|
937
|
+
}, duration);
|
|
938
|
+
setSwipeState(SwipeState.ANIMATION);
|
|
939
|
+
if (!cancel) {
|
|
940
|
+
close();
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
};
|
|
890
944
|
const { prepareAnimation, isAnimationPlaying } = useAnimation(carouselRef, (snapshot, rect, translate) => {
|
|
891
945
|
var _a;
|
|
892
946
|
if (carouselRef.current && containerRect && ((_a = state.animation) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -897,12 +951,12 @@ function Controller({ children, ...props }) {
|
|
|
897
951
|
return {
|
|
898
952
|
keyframes: [
|
|
899
953
|
{
|
|
900
|
-
transform: `
|
|
954
|
+
transform: `translate(${rtl(state.globalIndex - snapshot.index) * (containerRect.width + spacingValue) +
|
|
901
955
|
snapshot.rect.x -
|
|
902
956
|
rect.x +
|
|
903
|
-
translate.x}px)`,
|
|
957
|
+
translate.x}px, 0)`,
|
|
904
958
|
},
|
|
905
|
-
{ transform: "
|
|
959
|
+
{ transform: "translate(0, 0)" },
|
|
906
960
|
],
|
|
907
961
|
duration: state.animation.duration,
|
|
908
962
|
easing: state.animation.easing,
|
|
@@ -995,16 +1049,16 @@ function Controller({ children, ...props }) {
|
|
|
995
1049
|
(offset) => swipe({ offset, count: 0 }),
|
|
996
1050
|
];
|
|
997
1051
|
const pullDownParams = [
|
|
998
|
-
() => { },
|
|
999
|
-
() => { },
|
|
1000
1052
|
() => {
|
|
1001
|
-
if (
|
|
1002
|
-
|
|
1053
|
+
if (pullDownEnabled) {
|
|
1054
|
+
setSwipeState(SwipeState.PULL_DOWN);
|
|
1003
1055
|
}
|
|
1004
1056
|
},
|
|
1005
|
-
() =>
|
|
1057
|
+
(offset) => setPullDownOffset(offset),
|
|
1058
|
+
(offset) => pullDown(offset),
|
|
1059
|
+
(offset) => pullDown(offset, true),
|
|
1006
1060
|
];
|
|
1007
|
-
usePointerSwipe(...swipeParams, ...pullDownParams);
|
|
1061
|
+
usePointerSwipe(...swipeParams, pullDownEnabled, ...pullDownParams);
|
|
1008
1062
|
useWheelSwipe(swipeState, ...swipeParams);
|
|
1009
1063
|
const focusOnMount = useEventCallback(() => {
|
|
1010
1064
|
var _a;
|
|
@@ -1061,6 +1115,12 @@ function Controller({ children, ...props }) {
|
|
|
1061
1115
|
...(swipeState === SwipeState.SWIPE
|
|
1062
1116
|
? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset.current)}px` }
|
|
1063
1117
|
: null),
|
|
1118
|
+
...(swipeState === SwipeState.PULL_DOWN
|
|
1119
|
+
? {
|
|
1120
|
+
[cssVar("pull_down_offset")]: `${Math.round(pullDownOffset.current)}px`,
|
|
1121
|
+
[cssVar("pull_down_opacity")]: `${pullDownOpacity.current}`,
|
|
1122
|
+
}
|
|
1123
|
+
: null),
|
|
1064
1124
|
...(controller.touchAction !== "none"
|
|
1065
1125
|
? { [cssVar("controller_touch_action")]: controller.touchAction }
|
|
1066
1126
|
: null),
|
|
@@ -1365,4 +1425,4 @@ function Lightbox({ carousel, animation, render, toolbar, controller, on, plugin
|
|
|
1365
1425
|
React.createElement(EventsProvider, null, renderNode(createNode(RootModule, config), props))))));
|
|
1366
1426
|
}
|
|
1367
1427
|
|
|
1368
|
-
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerEvents, useRTL, useSensors, useThrottle, useTimeouts, withPlugins };
|
|
1428
|
+
export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Carousel, CarouselModule, CloseIcon, Controller, ControllerContext, ControllerModule, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, ErrorIcon, EventsContext, EventsProvider, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, IconButton, ImageSlide, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxPropsContext, LightboxPropsProvider, LightboxStateContext, LightboxStateProvider, LoadingIcon, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Navigation, NavigationButton, NavigationModule, NextIcon, NoScroll, NoScrollModule, Portal, PortalModule, PreviousIcon, Root, RootModule, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SwipeState, TimeoutsContext, TimeoutsProvider, Toolbar, ToolbarModule, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerEvents, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
|
|
@@ -10,7 +10,7 @@ const resolveShareProps = (share) => ({
|
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
function isShareSupported() {
|
|
13
|
-
return typeof navigator !== "undefined" && Boolean(navigator
|
|
13
|
+
return typeof navigator !== "undefined" && Boolean(navigator.canShare);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
const ShareIcon = createIcon("ShareIcon", React.createElement("path", { d: "m16 5-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z" }));
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:0;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll-behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;-webkit-transform:
|
|
1
|
+
.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:0;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll-behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_down_opacity,1);-webkit-transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_down_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-webkit-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{-webkit-touch-callout:none;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none}@media screen and (min-width:800px){.yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{-webkit-animation:yarl__delayed_fadein 1s linear;animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{-webkit-animation:yarl__stroke_opacity 1s linear infinite;animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{-webkit-animation-delay:-1.875s;animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){-webkit-animation-delay:-1.75s;animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){-webkit-animation-delay:-1.625s;animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){-webkit-animation-delay:-1.375s;animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){-webkit-animation-delay:-1.25s;animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){-webkit-animation-delay:-1.125s;animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){-webkit-animation-delay:-1s;animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{-webkit-animation:unset;animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;-webkit-filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px)}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@-webkit-keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@-webkit-keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
|