@mirrormedia/lilith-draft-renderer
Version:
## Introduction
253 lines (225 loc) • 8.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SlideshowBlock = SlideshowBlock;
exports.SlideshowBlockV2 = SlideshowBlockV2;
var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _slideshowLightbox = _interopRequireDefault(require("../components/slideshow-lightbox"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const defaultImage = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/722f90c535fa64c27555ec6ee5f22393.png";
const arrowDown = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/dd45f0788d9c70cabe72430bf08e7413.png";
const SlideShowDesktopSize = 960;
const SpacingBetweenSlideImages = 12;
const SlideShowBlockWrapper = _styledComponents.default.div`
width: calc(100% + 40px);
transform: translateX(-20px);
position: relative;
${({
theme
}) => theme.margin.default};
${({
theme
}) => theme.breakpoint.xl} {
width: ${SlideShowDesktopSize}px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: translateX(-180px);
gap: ${SpacingBetweenSlideImages}px;
max-height: ${props => props.expandSlideShow ? 'none' : '960px'};
overflow: ${props => props.expandSlideShow ? 'visible' : 'hidden'};
margin-bottom: ${props => props.expandSlideShow ? '32px' : '16px'};
}
.slideshow-image {
max-height: ${props => props.shouldLimitFigureHeight ? 'calc(960px - 324px)' : 'none'};
}
`;
const SlideShowImage = _styledComponents.default.figure`
width: 100%;
aspect-ratio: 1/1;
& + .slideshow-image {
margin-top: ${SpacingBetweenSlideImages}px;
}
${({
theme
}) => theme.breakpoint.xl} {
flex: 1 0 calc((100% - ${SpacingBetweenSlideImages * 2}px) / 3);
min-width: ${SlideShowDesktopSize / 3 - 8}px;
&:hover {
cursor: pointer;
filter: brightness(15%);
transition: 0.3s;
}
& + .slideshow-image {
margin-top: unset;
}
}
`;
const FigCaption = _styledComponents.default.figcaption`
font-weight: 400;
line-height: 23px;
color: #000928;
opacity: 0.5;
${({
theme
}) => theme.fontSize.xs};
padding: 8px 20px 20px 20px;
${({
theme
}) => theme.breakpoint.md} {
${({
theme
}) => theme.fontSize.sm};
}
${({
theme
}) => theme.breakpoint.xl} {
display: none;
}
`;
const GradientMask = _styledComponents.default.div`
display: none;
${({
theme
}) => theme.breakpoint.xl} {
cursor: pointer;
display: block;
position: absolute;
width: 100%;
height: ${SlideShowDesktopSize}px;
bottom: 0;
left: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 648px,
rgba(255, 255, 255, 1) 960px
);
}
`;
const ExpandText = _styledComponents.default.div`
display: none;
${({
theme
}) => theme.breakpoint.xl} {
display: block;
font-style: normal;
font-weight: 700;
${({
theme
}) => theme.fontSize.md};
line-height: 18px;
letter-spacing: 0.03em;
color: #000928;
text-align: center;
cursor: pointer;
position: relative;
margin-bottom: 48px;
transition: all 0.2s ease;
&:hover::after,
&:active::after {
bottom: -30px;
transition: all 0.2s;
}
&::after {
content: '';
position: absolute;
bottom: -26px;
left: 50%;
transform: translate(-50%, 0%);
width: 14px;
height: 13px;
background-image: url(${arrowDown});
background-repeat: no-repeat;
background-position: center center;
background-size: 14px;
}
}
`; // support old version of slideshow without delay propertiy
const Figure = _styledComponents.default.figure`
position: relative;
margin-block: unset;
margin-inline: unset;
margin: 0 10px;
`;
const Image = _styledComponents.default.img`
width: 100%;
`;
function SlideshowBlock(entity) {
var _images$, _images$$resized, _images$2;
const images = entity.getData();
return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
src: images === null || images === void 0 ? void 0 : (_images$ = images[0]) === null || _images$ === void 0 ? void 0 : (_images$$resized = _images$.resized) === null || _images$$resized === void 0 ? void 0 : _images$$resized.original,
alt: images === null || images === void 0 ? void 0 : (_images$2 = images[0]) === null || _images$2 === void 0 ? void 0 : _images$2.name,
onError: e => {
var _images$3, _images$3$imageFile;
return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$3 = images[0]) === null || _images$3 === void 0 ? void 0 : (_images$3$imageFile = _images$3.imageFile) === null || _images$3$imageFile === void 0 ? void 0 : _images$3$imageFile.url;
}
}));
} // 202206 latest version of slideshow, support delay property
function SlideshowBlockV2(entity) {
const {
images
} = entity.getData();
const [expandSlideShow, setExpandSlideShow] = (0, _react.useState)(false);
const [showLightBox, setShowLightBox] = (0, _react.useState)(false);
const [focusImageIndex, setFocusImageIndex] = (0, _react.useState)(0);
const imagesRefs = (0, _react.useRef)(Array(images.length).fill(null));
(0, _react.useEffect)(() => {
const focusedImageRef = imagesRefs === null || imagesRefs === void 0 ? void 0 : imagesRefs.current[focusImageIndex];
if (focusedImageRef) {
focusedImageRef === null || focusedImageRef === void 0 ? void 0 : focusedImageRef.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}, [focusImageIndex]);
const shouldMaskSlideShow = Boolean(images.length > 9 && !expandSlideShow);
const shouldLimitFigureHeight = Boolean(images.length > 1);
const slideShowImages = images.map((image, index) => {
const {
id,
resized,
desc,
name
} = image;
return /*#__PURE__*/_react.default.createElement(SlideShowImage, {
className: "slideshow-image",
key: id,
onClick: () => {
setShowLightBox(!showLightBox);
setFocusImageIndex(index);
}
}, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
images: resized,
defaultImage: defaultImage,
alt: name,
rwd: {
mobile: '100vw',
tablet: '608px',
desktop: '960px',
default: '100%'
},
priority: true
}), desc && /*#__PURE__*/_react.default.createElement(FigCaption, null, desc));
});
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SlideShowBlockWrapper, {
onClick: () => setExpandSlideShow(!expandSlideShow),
expandSlideShow: expandSlideShow,
shouldLimitFigureHeight: shouldLimitFigureHeight
}, slideShowImages, shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(GradientMask, null)), shouldMaskSlideShow && /*#__PURE__*/_react.default.createElement(ExpandText, {
className: "slideshow-expand-text",
onClick: () => setExpandSlideShow(!expandSlideShow)
}, "\u5C55\u958B\u6240\u6709\u5716\u7247"), showLightBox && /*#__PURE__*/_react.default.createElement(_slideshowLightbox.default, {
focusImageIndex: focusImageIndex,
images: images,
setShowLightBox: setShowLightBox,
setFocusImageIndex: setFocusImageIndex,
imagesRefs: imagesRefs
}));
}