pb-sxp-ui 1.9.1 → 1.9.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.
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
5
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
6
6
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
8
8
  const touchRef = useRef(null);
9
9
  const fTouchRef = useRef(null);
10
10
  const touchMoveRef = useRef(null);
@@ -59,7 +59,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
59
59
  }, [_popup, openState, globalConfig]);
60
60
  useEffect(() => {
61
61
  const trapFocus = (element) => {
62
- var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
62
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
63
63
  var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
64
64
  var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
65
65
  var KEYCODE_TAB = 9;
@@ -176,6 +176,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
176
176
  }
177
177
  })), child()),
178
178
  React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
179
- React.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
179
+ React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
180
180
  };
181
181
  export default memo(Modal);
@@ -1,22 +1,24 @@
1
1
  import { __awaiter } from "tslib";
2
- import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
3
- import { Autoplay, Pagination } from 'swiper/modules';
2
+ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
+ import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
4
4
  import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
5
5
  import Picture from './Picture';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import { css } from '@emotion/css';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
+ import { getScreenReader } from '../../../../core/utils/tool';
9
10
  const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
10
11
  var _a, _b;
11
- const ref = useRef();
12
+ const swiperRef = useRef();
12
13
  const { isActive } = useSwiperSlide();
13
14
  const { sxpParameter, openHashtag } = useSxpDataSource();
14
15
  const [isLoad, setIsLoad] = useState(false);
15
16
  const [imgInfo, setImgInfo] = useState();
16
17
  const initTime = new Date();
18
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
17
19
  useEffect(() => {
18
20
  if (isLoad && isActive) {
19
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
21
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
20
22
  if (openHashtag) {
21
23
  onViewImageEndEvent(rec);
22
24
  }
@@ -25,7 +27,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
25
27
  }
26
28
  }
27
29
  else {
28
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
30
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
29
31
  }
30
32
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
31
33
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -46,26 +48,50 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
46
48
  SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
47
49
  };
48
50
  }, [imgInfo]);
49
- return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
50
- clickable: true,
51
- bulletActiveClass: 'swipe-item-active-bullet',
52
- bulletElement: 'button'
53
- }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
54
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
55
- fontSize: '14px'
56
- } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
57
- '.swiper-pagination-bullet': {
58
- backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
59
- opacity: 1
60
- }
61
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
62
- '.swipe-item-active-bullet': {
63
- backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
64
- opacity: 1
51
+ const handleMouseEnter = useCallback(() => {
52
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
53
+ swiperRef.current.swiper.autoplay.stop();
54
+ }
55
+ }, []);
56
+ const handleMouseLeave = useCallback(() => {
57
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
58
+ swiperRef.current.swiper.autoplay.start();
59
+ }
60
+ }, []);
61
+ const handleSlideChange = useCallback((swiper) => {
62
+ setSwiperActiveIndex(swiper.activeIndex);
63
+ }, []);
64
+ const isAlly = useMemo(() => getScreenReader(), []);
65
+ return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
66
+ React.createElement(Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
67
+ clickable: true,
68
+ bulletActiveClass: 'swipe-item-active-bullet',
69
+ bulletElement: 'button'
70
+ } }, (isAlly
71
+ ? {
72
+ mousewheel: true,
73
+ keyboard: true,
74
+ navigation: true,
75
+ a11y: {
76
+ enabled: true
77
+ }
65
78
  }
66
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
67
- return (React.createElement(SwiperSlide, { key: index },
68
- React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
69
- })));
79
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
80
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
81
+ fontSize: '14px'
82
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
83
+ '.swiper-pagination-bullet': {
84
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
85
+ opacity: 1
86
+ }
87
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
88
+ '.swipe-item-active-bullet': {
89
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
90
+ opacity: 1
91
+ }
92
+ }))), height: height, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }), imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, srcKey) => {
93
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
94
+ React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
95
+ }))));
70
96
  };
71
97
  export default memo(PictureGroup);
@@ -24,7 +24,7 @@ import { getFeUserState, getSlideSkipState } from '../../../core/utils/localStor
24
24
  import { isEqual } from 'lodash';
25
25
  import ConsentPopup from './ConsentPopup';
26
26
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
27
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
28
28
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
29
29
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
30
30
  const { schema } = useEditor();
@@ -532,8 +532,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
532
532
  padding: 0,
533
533
  background: 'transparent'
534
534
  }, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
535
- React.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
536
- isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _t !== void 0 ? _t : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
535
+ React.createElement("img", { src: ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) || left, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
536
+ isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _s !== void 0 ? _s : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
537
537
  React.createElement(Swiper, { style: {
538
538
  marginTop: tagHeight
539
539
  }, ref: swiperRef, onSlideChange: () => {
@@ -564,7 +564,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
564
564
  renderView,
565
565
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
566
566
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
567
- React.createElement(WaterFall, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
567
+ React.createElement(WaterFall, Object.assign({}, (_v = (_u = (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.item) === null || _v === void 0 ? void 0 : _v.props)),
568
568
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig })));
569
569
  };
570
570
  export default SxpPageRender;
@@ -11,4 +11,5 @@ declare function getBrowserInfo(): string | null;
11
11
  declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
14
+ declare function getScreenReader(): boolean;
15
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
@@ -156,4 +156,15 @@ function getCookie(val) {
156
156
  });
157
157
  return value !== null && value !== void 0 ? value : '';
158
158
  }
159
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
159
+ function getScreenReader() {
160
+ let userAgent = self.navigator.userAgent;
161
+ if (!userAgent)
162
+ return false;
163
+ return (/TalkBack/i.test(userAgent) ||
164
+ /Funtouch/i.test(userAgent) ||
165
+ /VoiceOver/i.test(userAgent) ||
166
+ /NVDA/i.test(userAgent) ||
167
+ /JAWS/i.test(userAgent) ||
168
+ /ChromeVox/i.test(userAgent));
169
+ }
170
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
@@ -8,7 +8,7 @@ import { setFontForText } from '../../../../core/utils/tool';
8
8
  import styles from './index.module.less';
9
9
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
10
10
  const AniLinkPopup = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
12
12
  var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
13
13
  style === null || style === void 0 ? true : delete style.transform;
14
14
  const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
@@ -65,12 +65,12 @@ const AniLinkPopup = (_a) => {
65
65
  paddingLeft: '6px'
66
66
  } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle} ${css(aniTimStyle)}`, onClick: handleTo }),
67
67
  React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
68
- React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
- React.createElement(Img, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
68
+ React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
+ React.createElement(Img, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
70
70
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
71
- __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
71
+ __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
72
72
  } })),
73
- React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
73
+ React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
74
74
  __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
75
75
  } })))));
76
76
  };
@@ -3,13 +3,13 @@ import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import './index.less';
6
- import { Autoplay, Pagination } from 'swiper/modules';
6
+ import { A11y, Autoplay, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper/modules';
7
7
  import { Swiper, SwiperSlide } from 'swiper/react';
8
8
  import { useEventReport } from '../../../../core/hooks/useEventReport';
9
9
  import Modal from '../../../../core/components/SxpPageRender/Modal';
10
10
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
- import { setFontForText } from '../../../../core/utils/tool';
12
+ import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
13
  import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetail = (_a) => {
@@ -21,7 +21,8 @@ const CommodityDetail = (_a) => {
21
21
  const [showModal, setShowModal] = useState(false);
22
22
  const [show3DModal, setShow3DModal] = useState(false);
23
23
  const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
24
- const ref = useRef();
24
+ const swiperRef = useRef();
25
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
25
26
  const data = isPost ? rec : popupDetailData;
26
27
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
27
28
  let cta = isPost
@@ -112,9 +113,9 @@ const CommodityDetail = (_a) => {
112
113
  popupCurTimeRef.current = new Date();
113
114
  setCheckCommodityIndex(index);
114
115
  checkCommodityIndexRef.current = index;
115
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
116
- ref.current.swiper.slideTo(0);
117
- ref.current.swiper.autoplay.start();
116
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
117
+ swiperRef.current.swiper.slideTo(0);
118
+ swiperRef.current.swiper.autoplay.start();
118
119
  }
119
120
  }, []);
120
121
  const renderCommodityGroup = useCallback(() => {
@@ -132,19 +133,40 @@ const CommodityDetail = (_a) => {
132
133
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
133
134
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
134
135
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
136
+ const handleMouseEnter = useCallback(() => {
137
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
138
+ swiperRef.current.swiper.autoplay.stop();
139
+ }
140
+ }, []);
141
+ const handleMouseLeave = useCallback(() => {
142
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
143
+ swiperRef.current.swiper.autoplay.start();
144
+ }
145
+ }, []);
146
+ const handleSlideChange = useCallback((swiper) => {
147
+ setSwiperActiveIndex(swiper.activeIndex);
148
+ }, []);
149
+ const isAlly = useMemo(() => getScreenReader(), []);
135
150
  return (React.createElement(React.Fragment, null,
136
151
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
137
- React.createElement("div", { style: { position: 'relative' } },
138
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { a11y: {
139
- enabled: true
140
- }, height: height, modules: [Pagination, Autoplay], pagination: {
152
+ React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
153
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
141
154
  clickable: true,
142
155
  bulletActiveClass: 'swipe-item-active-bullet',
143
156
  clickableClass: getDotsAlign,
144
157
  bulletElement: 'button'
145
- }, loop: true, autoplay: {
158
+ } }, (isAlly
159
+ ? {
160
+ mousewheel: true,
161
+ keyboard: true,
162
+ navigation: true,
163
+ a11y: {
164
+ enabled: true
165
+ }
166
+ }
167
+ : {}), { loop: true, autoplay: {
146
168
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
147
- }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
169
+ }, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
148
170
  '.swiper-pagination-bullet': {
149
171
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
150
172
  opacity: 1
@@ -154,10 +176,10 @@ const CommodityDetail = (_a) => {
154
176
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
155
177
  opacity: 1
156
178
  }
157
- }))) },
158
- React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
179
+ }))) }),
180
+ React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
159
181
  var _a;
160
- return (React.createElement(SwiperSlide, { key: src },
182
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
161
183
  React.createElement("div", { style: {
162
184
  overflow: 'hidden',
163
185
  width,
@@ -3,13 +3,13 @@ import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import './index.less';
6
- import { Autoplay, Pagination } from 'swiper/modules';
6
+ import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
7
7
  import { Swiper, SwiperSlide } from 'swiper/react';
8
8
  import Modal from '../../../../core/components/SxpPageRender/Modal';
9
9
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
10
10
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
- import { setFontForText } from '../../../../core/utils/tool';
12
+ import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
13
  import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetailDiroNew = (_a) => {
@@ -25,7 +25,8 @@ const CommodityDetailDiroNew = (_a) => {
25
25
  const curTimeRef = useRef(null);
26
26
  const [show3DModal, setShow3DModal] = useState(false);
27
27
  const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
28
- const ref = useRef();
28
+ const swiperRef = useRef();
29
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
29
30
  const data = isPost ? rec : popupDetailData;
30
31
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
31
32
  let cta = isPost
@@ -98,9 +99,9 @@ Made in Italy` })));
98
99
  popupCurTimeRef.current = new Date();
99
100
  setCheckCommodityIndex(index);
100
101
  checkCommodityIndexRef.current = index;
101
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
102
- ref.current.swiper.slideTo(0);
103
- ref.current.swiper.autoplay.start();
102
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
103
+ swiperRef.current.swiper.slideTo(0);
104
+ swiperRef.current.swiper.autoplay.start();
104
105
  }
105
106
  }, []);
106
107
  const renderCommodityGroup = useCallback(() => {
@@ -118,17 +119,40 @@ Made in Italy` })));
118
119
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
119
120
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
120
121
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
122
+ const handleMouseEnter = useCallback(() => {
123
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
124
+ swiperRef.current.swiper.autoplay.stop();
125
+ }
126
+ }, []);
127
+ const handleMouseLeave = useCallback(() => {
128
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
129
+ swiperRef.current.swiper.autoplay.start();
130
+ }
131
+ }, []);
132
+ const handleSlideChange = useCallback((swiper) => {
133
+ setSwiperActiveIndex(swiper.activeIndex);
134
+ }, []);
135
+ const isAlly = useMemo(() => getScreenReader(), []);
121
136
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
122
137
  React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
123
- React.createElement("div", { style: { position: 'relative' } },
124
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
138
+ React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
139
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
125
140
  clickable: true,
126
141
  bulletActiveClass: 'swipe-item-active-bullet',
127
142
  clickableClass: getDotsAlign,
128
143
  bulletElement: 'button'
129
- }, loop: true, autoplay: {
144
+ } }, (isAlly
145
+ ? {
146
+ mousewheel: true,
147
+ keyboard: true,
148
+ navigation: true,
149
+ a11y: {
150
+ enabled: true
151
+ }
152
+ }
153
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
130
154
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
131
- }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
155
+ }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
132
156
  bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
133
157
  fontSize: '14px'
134
158
  } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -141,9 +165,9 @@ Made in Italy` })));
141
165
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
142
166
  opacity: 1
143
167
  }
144
- }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
168
+ }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
145
169
  var _a;
146
- return (React.createElement(SwiperSlide, { key: src },
170
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
147
171
  React.createElement("div", { style: {
148
172
  overflow: 'hidden',
149
173
  width,
@@ -7,7 +7,7 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
7
7
  const hooks_1 = require("../../../../core/hooks");
8
8
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
9
9
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
10
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
11
11
  const touchRef = (0, react_1.useRef)(null);
12
12
  const fTouchRef = (0, react_1.useRef)(null);
13
13
  const touchMoveRef = (0, react_1.useRef)(null);
@@ -62,7 +62,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
62
62
  }, [_popup, openState, globalConfig]);
63
63
  (0, react_1.useEffect)(() => {
64
64
  const trapFocus = (element) => {
65
- var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
65
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
66
66
  var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
67
67
  var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
68
68
  var KEYCODE_TAB = 9;
@@ -179,6 +179,6 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
179
179
  }
180
180
  })), child()),
181
181
  react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
182
- react_1.default.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
182
+ react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
183
183
  };
184
184
  exports.default = (0, react_1.memo)(Modal);
@@ -8,17 +8,19 @@ const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
+ const tool_1 = require("../../../../core/utils/tool");
11
12
  const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
13
  var _a, _b;
13
- const ref = (0, react_1.useRef)();
14
+ const swiperRef = (0, react_1.useRef)();
14
15
  const { isActive } = (0, react_2.useSwiperSlide)();
15
16
  const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
16
17
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
18
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
19
  const initTime = new Date();
20
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
21
  (0, react_1.useEffect)(() => {
20
22
  if (isLoad && isActive) {
21
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
23
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
22
24
  if (openHashtag) {
23
25
  onViewImageEndEvent(rec);
24
26
  }
@@ -27,7 +29,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
27
29
  }
28
30
  }
29
31
  else {
30
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
32
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
31
33
  }
32
34
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
33
35
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -48,26 +50,50 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
48
50
  event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
49
51
  };
50
52
  }, [imgInfo]);
51
- return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
52
- clickable: true,
53
- bulletActiveClass: 'swipe-item-active-bullet',
54
- bulletElement: 'button'
55
- }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
56
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
57
- fontSize: '14px'
58
- } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
59
- '.swiper-pagination-bullet': {
60
- backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
61
- opacity: 1
62
- }
63
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
64
- '.swipe-item-active-bullet': {
65
- backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
66
- opacity: 1
53
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
54
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
55
+ swiperRef.current.swiper.autoplay.stop();
56
+ }
57
+ }, []);
58
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
59
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
60
+ swiperRef.current.swiper.autoplay.start();
61
+ }
62
+ }, []);
63
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
64
+ setSwiperActiveIndex(swiper.activeIndex);
65
+ }, []);
66
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
67
+ return (react_1.default.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
68
+ react_1.default.createElement(react_2.Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
69
+ clickable: true,
70
+ bulletActiveClass: 'swipe-item-active-bullet',
71
+ bulletElement: 'button'
72
+ } }, (isAlly
73
+ ? {
74
+ mousewheel: true,
75
+ keyboard: true,
76
+ navigation: true,
77
+ a11y: {
78
+ enabled: true
79
+ }
67
80
  }
68
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
69
- return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
70
- react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
71
- })));
81
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
82
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
83
+ fontSize: '14px'
84
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
85
+ '.swiper-pagination-bullet': {
86
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
87
+ opacity: 1
88
+ }
89
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
90
+ '.swipe-item-active-bullet': {
91
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
92
+ opacity: 1
93
+ }
94
+ }))), height: height, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }), imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, srcKey) => {
95
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
96
+ react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
97
+ }))));
72
98
  };
73
99
  exports.default = (0, react_1.memo)(PictureGroup);
@@ -27,7 +27,7 @@ const localStore_1 = require("../../../core/utils/localStore");
27
27
  const lodash_1 = require("lodash");
28
28
  const ConsentPopup_1 = tslib_1.__importDefault(require("./ConsentPopup"));
29
29
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
30
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
30
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
31
31
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
32
32
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
33
33
  const { schema } = (0, hooks_1.useEditor)();
@@ -535,8 +535,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
535
535
  padding: 0,
536
536
  background: 'transparent'
537
537
  }, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
538
- react_1.default.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : left_png_1.default, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
539
- isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _t !== void 0 ? _t : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
538
+ react_1.default.createElement("img", { src: ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) || left_png_1.default, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
539
+ isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _s !== void 0 ? _s : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
540
540
  react_1.default.createElement(react_2.Swiper, { style: {
541
541
  marginTop: tagHeight
542
542
  }, ref: swiperRef, onSlideChange: () => {
@@ -567,7 +567,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
567
567
  renderView,
568
568
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
569
569
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
570
- react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
570
+ react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_v = (_u = (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.item) === null || _v === void 0 ? void 0 : _v.props)),
571
571
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig })));
572
572
  };
573
573
  exports.default = SxpPageRender;
@@ -11,4 +11,5 @@ declare function getBrowserInfo(): string | null;
11
11
  declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
14
+ declare function getScreenReader(): boolean;
15
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };