yet-another-react-lightbox 3.17.1 → 3.17.3
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 -16
- package/dist/index.js +59 -26
- package/dist/plugins/inline/index.js +2 -2
- package/dist/plugins/thumbnails/index.js +6 -8
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -7,18 +7,18 @@ declare function Lightbox({ carousel, animation, render, toolbar, controller, no
|
|
|
7
7
|
|
|
8
8
|
declare const LightboxDefaultProps: LightboxProps;
|
|
9
9
|
|
|
10
|
-
declare
|
|
11
|
-
declare
|
|
12
|
-
declare
|
|
13
|
-
declare
|
|
14
|
-
declare
|
|
15
|
-
declare
|
|
16
|
-
declare
|
|
17
|
-
declare
|
|
18
|
-
declare
|
|
10
|
+
declare function clsx(...classes: (string | boolean | undefined)[]): string;
|
|
11
|
+
declare function cssClass(name: string): string;
|
|
12
|
+
declare function cssVar(name: string): string;
|
|
13
|
+
declare function composePrefix(base: string, prefix?: string): string;
|
|
14
|
+
declare function makeComposePrefix(base: string): (prefix?: string) => string;
|
|
15
|
+
declare function label(labels: Labels | undefined, defaultLabel: string): string;
|
|
16
|
+
declare function cleanup(...cleaners: (() => void)[]): () => void;
|
|
17
|
+
declare function makeUseContext<T>(name: string, contextName: string, context: React.Context<T | null>): () => NonNullable<T>;
|
|
18
|
+
declare function hasWindow(): boolean;
|
|
19
19
|
declare function round(value: number, decimals?: number): number;
|
|
20
|
-
declare
|
|
21
|
-
declare
|
|
20
|
+
declare function isImageSlide(slide: Slide): slide is SlideImage;
|
|
21
|
+
declare function isImageFitCover(image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]): boolean;
|
|
22
22
|
declare function parseInt(value: string | number): number;
|
|
23
23
|
declare function parseLengthPercentage(input: LengthOrPercentage): {
|
|
24
24
|
pixel: number;
|
|
@@ -31,11 +31,11 @@ declare function computeSlideRect(containerRect: ContainerRect, padding: LengthO
|
|
|
31
31
|
width: number;
|
|
32
32
|
height: number;
|
|
33
33
|
};
|
|
34
|
-
declare
|
|
35
|
-
declare
|
|
36
|
-
declare
|
|
37
|
-
declare
|
|
38
|
-
declare
|
|
34
|
+
declare function devicePixelRatio(): number;
|
|
35
|
+
declare function getSlideIndex(index: number, slidesCount: number): number;
|
|
36
|
+
declare function hasSlides(slides: Slide[]): slides is [Slide, ...Slide[]];
|
|
37
|
+
declare function getSlide(slides: [Slide, ...Slide[]], index: number): SlideImage;
|
|
38
|
+
declare function getSlideIfPresent(slides: Slide[], index: number): SlideImage | undefined;
|
|
39
39
|
declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
|
|
40
40
|
declare function stopNavigationEventsPropagation(): {
|
|
41
41
|
onPointerDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
|
package/dist/index.js
CHANGED
|
@@ -4,32 +4,55 @@ import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UN
|
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FULLSIZE, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
|
|
6
6
|
|
|
7
|
-
const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
|
|
8
7
|
const cssPrefix$3 = "yarl__";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
8
|
+
function clsx(...classes) {
|
|
9
|
+
return [...classes].filter(Boolean).join(" ");
|
|
10
|
+
}
|
|
11
|
+
function cssClass(name) {
|
|
12
|
+
return `${cssPrefix$3}${name}`;
|
|
13
|
+
}
|
|
14
|
+
function cssVar(name) {
|
|
15
|
+
return `--${cssPrefix$3}${name}`;
|
|
16
|
+
}
|
|
17
|
+
function composePrefix(base, prefix) {
|
|
18
|
+
return `${base}${prefix ? `_${prefix}` : ""}`;
|
|
19
|
+
}
|
|
20
|
+
function makeComposePrefix(base) {
|
|
21
|
+
return (prefix) => composePrefix(base, prefix);
|
|
22
|
+
}
|
|
23
|
+
function label(labels, defaultLabel) {
|
|
24
|
+
var _a;
|
|
25
|
+
return (_a = labels === null || labels === void 0 ? void 0 : labels[defaultLabel]) !== null && _a !== void 0 ? _a : defaultLabel;
|
|
26
|
+
}
|
|
27
|
+
function cleanup(...cleaners) {
|
|
28
|
+
return () => {
|
|
29
|
+
cleaners.forEach((cleaner) => {
|
|
30
|
+
cleaner();
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function makeUseContext(name, contextName, context) {
|
|
35
|
+
return () => {
|
|
36
|
+
const ctx = React.useContext(context);
|
|
37
|
+
if (!ctx) {
|
|
38
|
+
throw new Error(`${name} must be used within a ${contextName}.Provider`);
|
|
39
|
+
}
|
|
40
|
+
return ctx;
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function hasWindow() {
|
|
44
|
+
return typeof window !== "undefined";
|
|
45
|
+
}
|
|
27
46
|
function round(value, decimals = 0) {
|
|
28
47
|
const factor = 10 ** decimals;
|
|
29
48
|
return Math.round((value + Number.EPSILON) * factor) / factor;
|
|
30
49
|
}
|
|
31
|
-
|
|
32
|
-
|
|
50
|
+
function isImageSlide(slide) {
|
|
51
|
+
return slide.type === undefined || slide.type === "image";
|
|
52
|
+
}
|
|
53
|
+
function isImageFitCover(image, imageFit) {
|
|
54
|
+
return image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
|
|
55
|
+
}
|
|
33
56
|
function parseInt(value) {
|
|
34
57
|
return typeof value === "string" ? Number.parseInt(value, 10) : value;
|
|
35
58
|
}
|
|
@@ -51,11 +74,21 @@ function computeSlideRect(containerRect, padding) {
|
|
|
51
74
|
height: Math.max(containerRect.height - 2 * paddingPixels, 0),
|
|
52
75
|
};
|
|
53
76
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
77
|
+
function devicePixelRatio() {
|
|
78
|
+
return (hasWindow() ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
|
|
79
|
+
}
|
|
80
|
+
function getSlideIndex(index, slidesCount) {
|
|
81
|
+
return slidesCount > 0 ? ((index % slidesCount) + slidesCount) % slidesCount : 0;
|
|
82
|
+
}
|
|
83
|
+
function hasSlides(slides) {
|
|
84
|
+
return slides.length > 0;
|
|
85
|
+
}
|
|
86
|
+
function getSlide(slides, index) {
|
|
87
|
+
return slides[getSlideIndex(index, slides.length)];
|
|
88
|
+
}
|
|
89
|
+
function getSlideIfPresent(slides, index) {
|
|
90
|
+
return hasSlides(slides) ? getSlide(slides, index) : undefined;
|
|
91
|
+
}
|
|
59
92
|
function addToolbarButton(toolbar, key, button) {
|
|
60
93
|
if (!button)
|
|
61
94
|
return toolbar;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { clsx, cssClass, createModule } from '../../index.js';
|
|
1
|
+
import { clsx, cssClass, cssVar, createModule } from '../../index.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
|
|
4
4
|
|
|
5
5
|
function InlineContainer({ inline: { className, style, ...rest } = {}, styles, children }) {
|
|
6
|
-
return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), style: { ...styles.root, ...style }, ...rest }, children));
|
|
6
|
+
return (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), style: { [cssVar("controller_overscroll_behavior")]: "contain auto", ...styles.root, ...style }, ...rest }, children));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
function Inline({ augment, replace, remove }) {
|
|
@@ -84,8 +84,8 @@ function Thumbnail({ slide, onClick, active, fadeIn, fadeOut, placeholder, onLos
|
|
|
84
84
|
function isHorizontal(position) {
|
|
85
85
|
return ["top", "bottom"].includes(position);
|
|
86
86
|
}
|
|
87
|
-
function boxSize(thumbnails, dimension
|
|
88
|
-
return dimension + 2 * (thumbnails.border + thumbnails.padding) +
|
|
87
|
+
function boxSize(thumbnails, dimension) {
|
|
88
|
+
return dimension + 2 * (thumbnails.border + thumbnails.padding) + thumbnails.gap;
|
|
89
89
|
}
|
|
90
90
|
function ThumbnailsTrack({ visible, containerRef }) {
|
|
91
91
|
const track = React.useRef(null);
|
|
@@ -104,13 +104,13 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
104
104
|
keyframes: isHorizontal(position)
|
|
105
105
|
? [
|
|
106
106
|
{
|
|
107
|
-
transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, width
|
|
107
|
+
transform: `translateX(${(isRTL ? -1 : 1) * boxSize(thumbnails, width) * offset + snapshot}px)`,
|
|
108
108
|
},
|
|
109
109
|
{ transform: "translateX(0)" },
|
|
110
110
|
]
|
|
111
111
|
: [
|
|
112
112
|
{
|
|
113
|
-
transform: `translateY(${boxSize(thumbnails, height
|
|
113
|
+
transform: `translateY(${boxSize(thumbnails, height) * offset + snapshot}px)`,
|
|
114
114
|
},
|
|
115
115
|
{ transform: "translateY(0)" },
|
|
116
116
|
],
|
|
@@ -170,11 +170,9 @@ function ThumbnailsTrack({ visible, containerRef }) {
|
|
|
170
170
|
};
|
|
171
171
|
return (React.createElement("div", { className: clsx(cssClass(cssPrefix("container")), cssClass(CLASS_FLEX_CENTER)), style: {
|
|
172
172
|
...(!visible ? { display: "none" } : null),
|
|
173
|
-
...(width !== defaultThumbnailsProps.width
|
|
174
|
-
? { [cssVar(cssThumbnailPrefix("width"))]: `${boxSize(thumbnails, width)}px` }
|
|
175
|
-
: null),
|
|
173
|
+
...(width !== defaultThumbnailsProps.width ? { [cssVar(cssThumbnailPrefix("width"))]: `${width}px` } : null),
|
|
176
174
|
...(height !== defaultThumbnailsProps.height
|
|
177
|
-
? { [cssVar(cssThumbnailPrefix("height"))]: `${
|
|
175
|
+
? { [cssVar(cssThumbnailPrefix("height"))]: `${height}px` }
|
|
178
176
|
: null),
|
|
179
177
|
...(border !== defaultThumbnailsProps.border
|
|
180
178
|
? { [cssVar(cssThumbnailPrefix("border"))]: `${border}px` }
|
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:none;overflow:hidden;overscroll-behavior:var(--
|
|
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:none;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_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_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{-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{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;-webkit-touch-callout: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%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{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{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){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{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-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;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);-webkit-tap-highlight-color:transparent}.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%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
|
package/dist/types.d.ts
CHANGED
|
@@ -225,7 +225,7 @@ interface ControllerSettings {
|
|
|
225
225
|
ref: React.ForwardedRef<ControllerRef>;
|
|
226
226
|
/** @deprecated for internal use only */
|
|
227
227
|
focus: boolean;
|
|
228
|
-
/**
|
|
228
|
+
/** @deprecated for internal use only */
|
|
229
229
|
touchAction: "none" | "pan-y";
|
|
230
230
|
/** if `true`, set ARIA attributes on the controller div */
|
|
231
231
|
aria: boolean;
|