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.
- package/dist/index.cjs +819 -60
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +6 -0
- package/dist/index.js +819 -60
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +819 -60
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/Modal/index.js +3 -3
- package/es/core/components/SxpPageRender/PictureGroup/index.js +51 -25
- package/es/core/components/SxpPageRender/index.js +4 -4
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +12 -1
- package/es/materials/sxp/cta/AniLinkPopup/index.js +5 -5
- package/es/materials/sxp/popup/CommodityDetail/index.js +37 -15
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +36 -12
- package/lib/core/components/SxpPageRender/Modal/index.js +3 -3
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +49 -23
- package/lib/core/components/SxpPageRender/index.js +4 -4
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +13 -1
- package/lib/materials/sxp/cta/AniLinkPopup/index.js +5 -5
- package/lib/materials/sxp/popup/CommodityDetail/index.js +35 -13
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +34 -10
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
@@ -313,6 +313,17 @@
|
|
313
313
|
});
|
314
314
|
return value !== null && value !== void 0 ? value : '';
|
315
315
|
}
|
316
|
+
function getScreenReader() {
|
317
|
+
let userAgent = self.navigator.userAgent;
|
318
|
+
if (!userAgent)
|
319
|
+
return false;
|
320
|
+
return (/TalkBack/i.test(userAgent) ||
|
321
|
+
/Funtouch/i.test(userAgent) ||
|
322
|
+
/VoiceOver/i.test(userAgent) ||
|
323
|
+
/NVDA/i.test(userAgent) ||
|
324
|
+
/JAWS/i.test(userAgent) ||
|
325
|
+
/ChromeVox/i.test(userAgent));
|
326
|
+
}
|
316
327
|
|
317
328
|
function unzip(b64Data) {
|
318
329
|
const strData = atob(b64Data);
|
@@ -2594,6 +2605,119 @@
|
|
2594
2605
|
return (Array.isArray(el) ? el : [el]).filter(e => !!e);
|
2595
2606
|
}
|
2596
2607
|
|
2608
|
+
/* eslint-disable consistent-return */
|
2609
|
+
function Keyboard(_ref) {
|
2610
|
+
let {
|
2611
|
+
swiper,
|
2612
|
+
extendParams,
|
2613
|
+
on,
|
2614
|
+
emit
|
2615
|
+
} = _ref;
|
2616
|
+
const document = getDocument();
|
2617
|
+
const window = getWindow();
|
2618
|
+
swiper.keyboard = {
|
2619
|
+
enabled: false
|
2620
|
+
};
|
2621
|
+
extendParams({
|
2622
|
+
keyboard: {
|
2623
|
+
enabled: false,
|
2624
|
+
onlyInViewport: true,
|
2625
|
+
pageUpDown: true
|
2626
|
+
}
|
2627
|
+
});
|
2628
|
+
function handle(event) {
|
2629
|
+
if (!swiper.enabled) return;
|
2630
|
+
const {
|
2631
|
+
rtlTranslate: rtl
|
2632
|
+
} = swiper;
|
2633
|
+
let e = event;
|
2634
|
+
if (e.originalEvent) e = e.originalEvent; // jquery fix
|
2635
|
+
const kc = e.keyCode || e.charCode;
|
2636
|
+
const pageUpDown = swiper.params.keyboard.pageUpDown;
|
2637
|
+
const isPageUp = pageUpDown && kc === 33;
|
2638
|
+
const isPageDown = pageUpDown && kc === 34;
|
2639
|
+
const isArrowLeft = kc === 37;
|
2640
|
+
const isArrowRight = kc === 39;
|
2641
|
+
const isArrowUp = kc === 38;
|
2642
|
+
const isArrowDown = kc === 40;
|
2643
|
+
// Directions locks
|
2644
|
+
if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
|
2645
|
+
return false;
|
2646
|
+
}
|
2647
|
+
if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
|
2648
|
+
return false;
|
2649
|
+
}
|
2650
|
+
if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
|
2651
|
+
return undefined;
|
2652
|
+
}
|
2653
|
+
if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
|
2654
|
+
return undefined;
|
2655
|
+
}
|
2656
|
+
if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
|
2657
|
+
let inView = false;
|
2658
|
+
// Check that swiper should be inside of visible area of window
|
2659
|
+
if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
|
2660
|
+
return undefined;
|
2661
|
+
}
|
2662
|
+
const el = swiper.el;
|
2663
|
+
const swiperWidth = el.clientWidth;
|
2664
|
+
const swiperHeight = el.clientHeight;
|
2665
|
+
const windowWidth = window.innerWidth;
|
2666
|
+
const windowHeight = window.innerHeight;
|
2667
|
+
const swiperOffset = elementOffset(el);
|
2668
|
+
if (rtl) swiperOffset.left -= el.scrollLeft;
|
2669
|
+
const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
|
2670
|
+
for (let i = 0; i < swiperCoord.length; i += 1) {
|
2671
|
+
const point = swiperCoord[i];
|
2672
|
+
if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
|
2673
|
+
if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
|
2674
|
+
inView = true;
|
2675
|
+
}
|
2676
|
+
}
|
2677
|
+
if (!inView) return undefined;
|
2678
|
+
}
|
2679
|
+
if (swiper.isHorizontal()) {
|
2680
|
+
if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
|
2681
|
+
if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
2682
|
+
}
|
2683
|
+
if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
|
2684
|
+
if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
|
2685
|
+
} else {
|
2686
|
+
if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
|
2687
|
+
if (e.preventDefault) e.preventDefault();else e.returnValue = false;
|
2688
|
+
}
|
2689
|
+
if (isPageDown || isArrowDown) swiper.slideNext();
|
2690
|
+
if (isPageUp || isArrowUp) swiper.slidePrev();
|
2691
|
+
}
|
2692
|
+
emit('keyPress', kc);
|
2693
|
+
return undefined;
|
2694
|
+
}
|
2695
|
+
function enable() {
|
2696
|
+
if (swiper.keyboard.enabled) return;
|
2697
|
+
document.addEventListener('keydown', handle);
|
2698
|
+
swiper.keyboard.enabled = true;
|
2699
|
+
}
|
2700
|
+
function disable() {
|
2701
|
+
if (!swiper.keyboard.enabled) return;
|
2702
|
+
document.removeEventListener('keydown', handle);
|
2703
|
+
swiper.keyboard.enabled = false;
|
2704
|
+
}
|
2705
|
+
on('init', () => {
|
2706
|
+
if (swiper.params.keyboard.enabled) {
|
2707
|
+
enable();
|
2708
|
+
}
|
2709
|
+
});
|
2710
|
+
on('destroy', () => {
|
2711
|
+
if (swiper.keyboard.enabled) {
|
2712
|
+
disable();
|
2713
|
+
}
|
2714
|
+
});
|
2715
|
+
Object.assign(swiper.keyboard, {
|
2716
|
+
enable,
|
2717
|
+
disable
|
2718
|
+
});
|
2719
|
+
}
|
2720
|
+
|
2597
2721
|
/* eslint-disable consistent-return */
|
2598
2722
|
function Mousewheel(_ref) {
|
2599
2723
|
let {
|
@@ -3001,6 +3125,202 @@
|
|
3001
3125
|
return params;
|
3002
3126
|
}
|
3003
3127
|
|
3128
|
+
function Navigation(_ref) {
|
3129
|
+
let {
|
3130
|
+
swiper,
|
3131
|
+
extendParams,
|
3132
|
+
on,
|
3133
|
+
emit
|
3134
|
+
} = _ref;
|
3135
|
+
extendParams({
|
3136
|
+
navigation: {
|
3137
|
+
nextEl: null,
|
3138
|
+
prevEl: null,
|
3139
|
+
hideOnClick: false,
|
3140
|
+
disabledClass: 'swiper-button-disabled',
|
3141
|
+
hiddenClass: 'swiper-button-hidden',
|
3142
|
+
lockClass: 'swiper-button-lock',
|
3143
|
+
navigationDisabledClass: 'swiper-navigation-disabled'
|
3144
|
+
}
|
3145
|
+
});
|
3146
|
+
swiper.navigation = {
|
3147
|
+
nextEl: null,
|
3148
|
+
prevEl: null
|
3149
|
+
};
|
3150
|
+
function getEl(el) {
|
3151
|
+
let res;
|
3152
|
+
if (el && typeof el === 'string' && swiper.isElement) {
|
3153
|
+
res = swiper.el.querySelector(el);
|
3154
|
+
if (res) return res;
|
3155
|
+
}
|
3156
|
+
if (el) {
|
3157
|
+
if (typeof el === 'string') res = [...document.querySelectorAll(el)];
|
3158
|
+
if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
|
3159
|
+
res = swiper.el.querySelector(el);
|
3160
|
+
} else if (res && res.length === 1) {
|
3161
|
+
res = res[0];
|
3162
|
+
}
|
3163
|
+
}
|
3164
|
+
if (el && !res) return el;
|
3165
|
+
// if (Array.isArray(res) && res.length === 1) res = res[0];
|
3166
|
+
return res;
|
3167
|
+
}
|
3168
|
+
function toggleEl(el, disabled) {
|
3169
|
+
const params = swiper.params.navigation;
|
3170
|
+
el = makeElementsArray(el);
|
3171
|
+
el.forEach(subEl => {
|
3172
|
+
if (subEl) {
|
3173
|
+
subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
|
3174
|
+
if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
|
3175
|
+
if (swiper.params.watchOverflow && swiper.enabled) {
|
3176
|
+
subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
|
3177
|
+
}
|
3178
|
+
}
|
3179
|
+
});
|
3180
|
+
}
|
3181
|
+
function update() {
|
3182
|
+
// Update Navigation Buttons
|
3183
|
+
const {
|
3184
|
+
nextEl,
|
3185
|
+
prevEl
|
3186
|
+
} = swiper.navigation;
|
3187
|
+
if (swiper.params.loop) {
|
3188
|
+
toggleEl(prevEl, false);
|
3189
|
+
toggleEl(nextEl, false);
|
3190
|
+
return;
|
3191
|
+
}
|
3192
|
+
toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
|
3193
|
+
toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
|
3194
|
+
}
|
3195
|
+
function onPrevClick(e) {
|
3196
|
+
e.preventDefault();
|
3197
|
+
if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
|
3198
|
+
swiper.slidePrev();
|
3199
|
+
emit('navigationPrev');
|
3200
|
+
}
|
3201
|
+
function onNextClick(e) {
|
3202
|
+
e.preventDefault();
|
3203
|
+
if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
|
3204
|
+
swiper.slideNext();
|
3205
|
+
emit('navigationNext');
|
3206
|
+
}
|
3207
|
+
function init() {
|
3208
|
+
const params = swiper.params.navigation;
|
3209
|
+
swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
|
3210
|
+
nextEl: 'swiper-button-next',
|
3211
|
+
prevEl: 'swiper-button-prev'
|
3212
|
+
});
|
3213
|
+
if (!(params.nextEl || params.prevEl)) return;
|
3214
|
+
let nextEl = getEl(params.nextEl);
|
3215
|
+
let prevEl = getEl(params.prevEl);
|
3216
|
+
Object.assign(swiper.navigation, {
|
3217
|
+
nextEl,
|
3218
|
+
prevEl
|
3219
|
+
});
|
3220
|
+
nextEl = makeElementsArray(nextEl);
|
3221
|
+
prevEl = makeElementsArray(prevEl);
|
3222
|
+
const initButton = (el, dir) => {
|
3223
|
+
if (el) {
|
3224
|
+
el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
|
3225
|
+
}
|
3226
|
+
if (!swiper.enabled && el) {
|
3227
|
+
el.classList.add(...params.lockClass.split(' '));
|
3228
|
+
}
|
3229
|
+
};
|
3230
|
+
nextEl.forEach(el => initButton(el, 'next'));
|
3231
|
+
prevEl.forEach(el => initButton(el, 'prev'));
|
3232
|
+
}
|
3233
|
+
function destroy() {
|
3234
|
+
let {
|
3235
|
+
nextEl,
|
3236
|
+
prevEl
|
3237
|
+
} = swiper.navigation;
|
3238
|
+
nextEl = makeElementsArray(nextEl);
|
3239
|
+
prevEl = makeElementsArray(prevEl);
|
3240
|
+
const destroyButton = (el, dir) => {
|
3241
|
+
el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
|
3242
|
+
el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
|
3243
|
+
};
|
3244
|
+
nextEl.forEach(el => destroyButton(el, 'next'));
|
3245
|
+
prevEl.forEach(el => destroyButton(el, 'prev'));
|
3246
|
+
}
|
3247
|
+
on('init', () => {
|
3248
|
+
if (swiper.params.navigation.enabled === false) {
|
3249
|
+
// eslint-disable-next-line
|
3250
|
+
disable();
|
3251
|
+
} else {
|
3252
|
+
init();
|
3253
|
+
update();
|
3254
|
+
}
|
3255
|
+
});
|
3256
|
+
on('toEdge fromEdge lock unlock', () => {
|
3257
|
+
update();
|
3258
|
+
});
|
3259
|
+
on('destroy', () => {
|
3260
|
+
destroy();
|
3261
|
+
});
|
3262
|
+
on('enable disable', () => {
|
3263
|
+
let {
|
3264
|
+
nextEl,
|
3265
|
+
prevEl
|
3266
|
+
} = swiper.navigation;
|
3267
|
+
nextEl = makeElementsArray(nextEl);
|
3268
|
+
prevEl = makeElementsArray(prevEl);
|
3269
|
+
if (swiper.enabled) {
|
3270
|
+
update();
|
3271
|
+
return;
|
3272
|
+
}
|
3273
|
+
[...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
|
3274
|
+
});
|
3275
|
+
on('click', (_s, e) => {
|
3276
|
+
let {
|
3277
|
+
nextEl,
|
3278
|
+
prevEl
|
3279
|
+
} = swiper.navigation;
|
3280
|
+
nextEl = makeElementsArray(nextEl);
|
3281
|
+
prevEl = makeElementsArray(prevEl);
|
3282
|
+
const targetEl = e.target;
|
3283
|
+
let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
|
3284
|
+
if (swiper.isElement && !targetIsButton) {
|
3285
|
+
const path = e.path || e.composedPath && e.composedPath();
|
3286
|
+
if (path) {
|
3287
|
+
targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
|
3288
|
+
}
|
3289
|
+
}
|
3290
|
+
if (swiper.params.navigation.hideOnClick && !targetIsButton) {
|
3291
|
+
if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
|
3292
|
+
let isHidden;
|
3293
|
+
if (nextEl.length) {
|
3294
|
+
isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
|
3295
|
+
} else if (prevEl.length) {
|
3296
|
+
isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
|
3297
|
+
}
|
3298
|
+
if (isHidden === true) {
|
3299
|
+
emit('navigationShow');
|
3300
|
+
} else {
|
3301
|
+
emit('navigationHide');
|
3302
|
+
}
|
3303
|
+
[...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
|
3304
|
+
}
|
3305
|
+
});
|
3306
|
+
const enable = () => {
|
3307
|
+
swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
|
3308
|
+
init();
|
3309
|
+
update();
|
3310
|
+
};
|
3311
|
+
const disable = () => {
|
3312
|
+
swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
|
3313
|
+
destroy();
|
3314
|
+
};
|
3315
|
+
Object.assign(swiper.navigation, {
|
3316
|
+
enable,
|
3317
|
+
disable,
|
3318
|
+
update,
|
3319
|
+
init,
|
3320
|
+
destroy
|
3321
|
+
});
|
3322
|
+
}
|
3323
|
+
|
3004
3324
|
function classesToSelector(classes) {
|
3005
3325
|
if (classes === void 0) {
|
3006
3326
|
classes = '';
|
@@ -3807,6 +4127,374 @@
|
|
3807
4127
|
});
|
3808
4128
|
}
|
3809
4129
|
|
4130
|
+
function A11y(_ref) {
|
4131
|
+
let {
|
4132
|
+
swiper,
|
4133
|
+
extendParams,
|
4134
|
+
on
|
4135
|
+
} = _ref;
|
4136
|
+
extendParams({
|
4137
|
+
a11y: {
|
4138
|
+
enabled: true,
|
4139
|
+
notificationClass: 'swiper-notification',
|
4140
|
+
prevSlideMessage: 'Previous slide',
|
4141
|
+
nextSlideMessage: 'Next slide',
|
4142
|
+
firstSlideMessage: 'This is the first slide',
|
4143
|
+
lastSlideMessage: 'This is the last slide',
|
4144
|
+
paginationBulletMessage: 'Go to slide {{index}}',
|
4145
|
+
slideLabelMessage: '{{index}} / {{slidesLength}}',
|
4146
|
+
containerMessage: null,
|
4147
|
+
containerRoleDescriptionMessage: null,
|
4148
|
+
itemRoleDescriptionMessage: null,
|
4149
|
+
slideRole: 'group',
|
4150
|
+
id: null
|
4151
|
+
}
|
4152
|
+
});
|
4153
|
+
swiper.a11y = {
|
4154
|
+
clicked: false
|
4155
|
+
};
|
4156
|
+
let liveRegion = null;
|
4157
|
+
let preventFocusHandler;
|
4158
|
+
let focusTargetSlideEl;
|
4159
|
+
let visibilityChangedTimestamp = new Date().getTime();
|
4160
|
+
function notify(message) {
|
4161
|
+
const notification = liveRegion;
|
4162
|
+
if (notification.length === 0) return;
|
4163
|
+
notification.innerHTML = '';
|
4164
|
+
notification.innerHTML = message;
|
4165
|
+
}
|
4166
|
+
function getRandomNumber(size) {
|
4167
|
+
if (size === void 0) {
|
4168
|
+
size = 16;
|
4169
|
+
}
|
4170
|
+
const randomChar = () => Math.round(16 * Math.random()).toString(16);
|
4171
|
+
return 'x'.repeat(size).replace(/x/g, randomChar);
|
4172
|
+
}
|
4173
|
+
function makeElFocusable(el) {
|
4174
|
+
el = makeElementsArray(el);
|
4175
|
+
el.forEach(subEl => {
|
4176
|
+
subEl.setAttribute('tabIndex', '0');
|
4177
|
+
});
|
4178
|
+
}
|
4179
|
+
function makeElNotFocusable(el) {
|
4180
|
+
el = makeElementsArray(el);
|
4181
|
+
el.forEach(subEl => {
|
4182
|
+
subEl.setAttribute('tabIndex', '-1');
|
4183
|
+
});
|
4184
|
+
}
|
4185
|
+
function addElRole(el, role) {
|
4186
|
+
el = makeElementsArray(el);
|
4187
|
+
el.forEach(subEl => {
|
4188
|
+
subEl.setAttribute('role', role);
|
4189
|
+
});
|
4190
|
+
}
|
4191
|
+
function addElRoleDescription(el, description) {
|
4192
|
+
el = makeElementsArray(el);
|
4193
|
+
el.forEach(subEl => {
|
4194
|
+
subEl.setAttribute('aria-roledescription', description);
|
4195
|
+
});
|
4196
|
+
}
|
4197
|
+
function addElControls(el, controls) {
|
4198
|
+
el = makeElementsArray(el);
|
4199
|
+
el.forEach(subEl => {
|
4200
|
+
subEl.setAttribute('aria-controls', controls);
|
4201
|
+
});
|
4202
|
+
}
|
4203
|
+
function addElLabel(el, label) {
|
4204
|
+
el = makeElementsArray(el);
|
4205
|
+
el.forEach(subEl => {
|
4206
|
+
subEl.setAttribute('aria-label', label);
|
4207
|
+
});
|
4208
|
+
}
|
4209
|
+
function addElId(el, id) {
|
4210
|
+
el = makeElementsArray(el);
|
4211
|
+
el.forEach(subEl => {
|
4212
|
+
subEl.setAttribute('id', id);
|
4213
|
+
});
|
4214
|
+
}
|
4215
|
+
function addElLive(el, live) {
|
4216
|
+
el = makeElementsArray(el);
|
4217
|
+
el.forEach(subEl => {
|
4218
|
+
subEl.setAttribute('aria-live', live);
|
4219
|
+
});
|
4220
|
+
}
|
4221
|
+
function disableEl(el) {
|
4222
|
+
el = makeElementsArray(el);
|
4223
|
+
el.forEach(subEl => {
|
4224
|
+
subEl.setAttribute('aria-disabled', true);
|
4225
|
+
});
|
4226
|
+
}
|
4227
|
+
function enableEl(el) {
|
4228
|
+
el = makeElementsArray(el);
|
4229
|
+
el.forEach(subEl => {
|
4230
|
+
subEl.setAttribute('aria-disabled', false);
|
4231
|
+
});
|
4232
|
+
}
|
4233
|
+
function onEnterOrSpaceKey(e) {
|
4234
|
+
if (e.keyCode !== 13 && e.keyCode !== 32) return;
|
4235
|
+
const params = swiper.params.a11y;
|
4236
|
+
const targetEl = e.target;
|
4237
|
+
if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
|
4238
|
+
if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
|
4239
|
+
}
|
4240
|
+
if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
|
4241
|
+
const prevEls = makeElementsArray(swiper.navigation.prevEl);
|
4242
|
+
const nextEls = makeElementsArray(swiper.navigation.nextEl);
|
4243
|
+
if (nextEls.includes(targetEl)) {
|
4244
|
+
if (!(swiper.isEnd && !swiper.params.loop)) {
|
4245
|
+
swiper.slideNext();
|
4246
|
+
}
|
4247
|
+
if (swiper.isEnd) {
|
4248
|
+
notify(params.lastSlideMessage);
|
4249
|
+
} else {
|
4250
|
+
notify(params.nextSlideMessage);
|
4251
|
+
}
|
4252
|
+
}
|
4253
|
+
if (prevEls.includes(targetEl)) {
|
4254
|
+
if (!(swiper.isBeginning && !swiper.params.loop)) {
|
4255
|
+
swiper.slidePrev();
|
4256
|
+
}
|
4257
|
+
if (swiper.isBeginning) {
|
4258
|
+
notify(params.firstSlideMessage);
|
4259
|
+
} else {
|
4260
|
+
notify(params.prevSlideMessage);
|
4261
|
+
}
|
4262
|
+
}
|
4263
|
+
}
|
4264
|
+
if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
|
4265
|
+
targetEl.click();
|
4266
|
+
}
|
4267
|
+
}
|
4268
|
+
function updateNavigation() {
|
4269
|
+
if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
|
4270
|
+
const {
|
4271
|
+
nextEl,
|
4272
|
+
prevEl
|
4273
|
+
} = swiper.navigation;
|
4274
|
+
if (prevEl) {
|
4275
|
+
if (swiper.isBeginning) {
|
4276
|
+
disableEl(prevEl);
|
4277
|
+
makeElNotFocusable(prevEl);
|
4278
|
+
} else {
|
4279
|
+
enableEl(prevEl);
|
4280
|
+
makeElFocusable(prevEl);
|
4281
|
+
}
|
4282
|
+
}
|
4283
|
+
if (nextEl) {
|
4284
|
+
if (swiper.isEnd) {
|
4285
|
+
disableEl(nextEl);
|
4286
|
+
makeElNotFocusable(nextEl);
|
4287
|
+
} else {
|
4288
|
+
enableEl(nextEl);
|
4289
|
+
makeElFocusable(nextEl);
|
4290
|
+
}
|
4291
|
+
}
|
4292
|
+
}
|
4293
|
+
function hasPagination() {
|
4294
|
+
return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
|
4295
|
+
}
|
4296
|
+
function hasClickablePagination() {
|
4297
|
+
return hasPagination() && swiper.params.pagination.clickable;
|
4298
|
+
}
|
4299
|
+
function updatePagination() {
|
4300
|
+
const params = swiper.params.a11y;
|
4301
|
+
if (!hasPagination()) return;
|
4302
|
+
swiper.pagination.bullets.forEach(bulletEl => {
|
4303
|
+
if (swiper.params.pagination.clickable) {
|
4304
|
+
makeElFocusable(bulletEl);
|
4305
|
+
if (!swiper.params.pagination.renderBullet) {
|
4306
|
+
addElRole(bulletEl, 'button');
|
4307
|
+
addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
|
4308
|
+
}
|
4309
|
+
}
|
4310
|
+
if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
|
4311
|
+
bulletEl.setAttribute('aria-current', 'true');
|
4312
|
+
} else {
|
4313
|
+
bulletEl.removeAttribute('aria-current');
|
4314
|
+
}
|
4315
|
+
});
|
4316
|
+
}
|
4317
|
+
const initNavEl = (el, wrapperId, message) => {
|
4318
|
+
makeElFocusable(el);
|
4319
|
+
if (el.tagName !== 'BUTTON') {
|
4320
|
+
addElRole(el, 'button');
|
4321
|
+
el.addEventListener('keydown', onEnterOrSpaceKey);
|
4322
|
+
}
|
4323
|
+
addElLabel(el, message);
|
4324
|
+
addElControls(el, wrapperId);
|
4325
|
+
};
|
4326
|
+
const handlePointerDown = e => {
|
4327
|
+
if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
|
4328
|
+
preventFocusHandler = true;
|
4329
|
+
}
|
4330
|
+
swiper.a11y.clicked = true;
|
4331
|
+
};
|
4332
|
+
const handlePointerUp = () => {
|
4333
|
+
preventFocusHandler = false;
|
4334
|
+
requestAnimationFrame(() => {
|
4335
|
+
requestAnimationFrame(() => {
|
4336
|
+
if (!swiper.destroyed) {
|
4337
|
+
swiper.a11y.clicked = false;
|
4338
|
+
}
|
4339
|
+
});
|
4340
|
+
});
|
4341
|
+
};
|
4342
|
+
const onVisibilityChange = e => {
|
4343
|
+
visibilityChangedTimestamp = new Date().getTime();
|
4344
|
+
};
|
4345
|
+
const handleFocus = e => {
|
4346
|
+
if (swiper.a11y.clicked) return;
|
4347
|
+
if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
|
4348
|
+
const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
|
4349
|
+
if (!slideEl || !swiper.slides.includes(slideEl)) return;
|
4350
|
+
focusTargetSlideEl = slideEl;
|
4351
|
+
const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
|
4352
|
+
const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
|
4353
|
+
if (isActive || isVisible) return;
|
4354
|
+
if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
|
4355
|
+
if (swiper.isHorizontal()) {
|
4356
|
+
swiper.el.scrollLeft = 0;
|
4357
|
+
} else {
|
4358
|
+
swiper.el.scrollTop = 0;
|
4359
|
+
}
|
4360
|
+
requestAnimationFrame(() => {
|
4361
|
+
if (preventFocusHandler) return;
|
4362
|
+
if (swiper.params.loop) {
|
4363
|
+
swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
|
4364
|
+
} else {
|
4365
|
+
swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
|
4366
|
+
}
|
4367
|
+
preventFocusHandler = false;
|
4368
|
+
});
|
4369
|
+
};
|
4370
|
+
const initSlides = () => {
|
4371
|
+
const params = swiper.params.a11y;
|
4372
|
+
if (params.itemRoleDescriptionMessage) {
|
4373
|
+
addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);
|
4374
|
+
}
|
4375
|
+
if (params.slideRole) {
|
4376
|
+
addElRole(swiper.slides, params.slideRole);
|
4377
|
+
}
|
4378
|
+
const slidesLength = swiper.slides.length;
|
4379
|
+
if (params.slideLabelMessage) {
|
4380
|
+
swiper.slides.forEach((slideEl, index) => {
|
4381
|
+
const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;
|
4382
|
+
const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
|
4383
|
+
addElLabel(slideEl, ariaLabelMessage);
|
4384
|
+
});
|
4385
|
+
}
|
4386
|
+
};
|
4387
|
+
const init = () => {
|
4388
|
+
const params = swiper.params.a11y;
|
4389
|
+
swiper.el.append(liveRegion);
|
4390
|
+
|
4391
|
+
// Container
|
4392
|
+
const containerEl = swiper.el;
|
4393
|
+
if (params.containerRoleDescriptionMessage) {
|
4394
|
+
addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);
|
4395
|
+
}
|
4396
|
+
if (params.containerMessage) {
|
4397
|
+
addElLabel(containerEl, params.containerMessage);
|
4398
|
+
}
|
4399
|
+
|
4400
|
+
// Wrapper
|
4401
|
+
const wrapperEl = swiper.wrapperEl;
|
4402
|
+
const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;
|
4403
|
+
const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
|
4404
|
+
addElId(wrapperEl, wrapperId);
|
4405
|
+
addElLive(wrapperEl, live);
|
4406
|
+
|
4407
|
+
// Slide
|
4408
|
+
initSlides();
|
4409
|
+
|
4410
|
+
// Navigation
|
4411
|
+
let {
|
4412
|
+
nextEl,
|
4413
|
+
prevEl
|
4414
|
+
} = swiper.navigation ? swiper.navigation : {};
|
4415
|
+
nextEl = makeElementsArray(nextEl);
|
4416
|
+
prevEl = makeElementsArray(prevEl);
|
4417
|
+
if (nextEl) {
|
4418
|
+
nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
|
4419
|
+
}
|
4420
|
+
if (prevEl) {
|
4421
|
+
prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
|
4422
|
+
}
|
4423
|
+
|
4424
|
+
// Pagination
|
4425
|
+
if (hasClickablePagination()) {
|
4426
|
+
const paginationEl = makeElementsArray(swiper.pagination.el);
|
4427
|
+
paginationEl.forEach(el => {
|
4428
|
+
el.addEventListener('keydown', onEnterOrSpaceKey);
|
4429
|
+
});
|
4430
|
+
}
|
4431
|
+
|
4432
|
+
// Tab focus
|
4433
|
+
const document = getDocument();
|
4434
|
+
document.addEventListener('visibilitychange', onVisibilityChange);
|
4435
|
+
swiper.el.addEventListener('focus', handleFocus, true);
|
4436
|
+
swiper.el.addEventListener('focus', handleFocus, true);
|
4437
|
+
swiper.el.addEventListener('pointerdown', handlePointerDown, true);
|
4438
|
+
swiper.el.addEventListener('pointerup', handlePointerUp, true);
|
4439
|
+
};
|
4440
|
+
function destroy() {
|
4441
|
+
if (liveRegion) liveRegion.remove();
|
4442
|
+
let {
|
4443
|
+
nextEl,
|
4444
|
+
prevEl
|
4445
|
+
} = swiper.navigation ? swiper.navigation : {};
|
4446
|
+
nextEl = makeElementsArray(nextEl);
|
4447
|
+
prevEl = makeElementsArray(prevEl);
|
4448
|
+
if (nextEl) {
|
4449
|
+
nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
|
4450
|
+
}
|
4451
|
+
if (prevEl) {
|
4452
|
+
prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
|
4453
|
+
}
|
4454
|
+
|
4455
|
+
// Pagination
|
4456
|
+
if (hasClickablePagination()) {
|
4457
|
+
const paginationEl = makeElementsArray(swiper.pagination.el);
|
4458
|
+
paginationEl.forEach(el => {
|
4459
|
+
el.removeEventListener('keydown', onEnterOrSpaceKey);
|
4460
|
+
});
|
4461
|
+
}
|
4462
|
+
const document = getDocument();
|
4463
|
+
document.removeEventListener('visibilitychange', onVisibilityChange);
|
4464
|
+
// Tab focus
|
4465
|
+
if (swiper.el && typeof swiper.el !== 'string') {
|
4466
|
+
swiper.el.removeEventListener('focus', handleFocus, true);
|
4467
|
+
swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
|
4468
|
+
swiper.el.removeEventListener('pointerup', handlePointerUp, true);
|
4469
|
+
}
|
4470
|
+
}
|
4471
|
+
on('beforeInit', () => {
|
4472
|
+
liveRegion = createElement('span', swiper.params.a11y.notificationClass);
|
4473
|
+
liveRegion.setAttribute('aria-live', 'assertive');
|
4474
|
+
liveRegion.setAttribute('aria-atomic', 'true');
|
4475
|
+
});
|
4476
|
+
on('afterInit', () => {
|
4477
|
+
if (!swiper.params.a11y.enabled) return;
|
4478
|
+
init();
|
4479
|
+
});
|
4480
|
+
on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
|
4481
|
+
if (!swiper.params.a11y.enabled) return;
|
4482
|
+
initSlides();
|
4483
|
+
});
|
4484
|
+
on('fromEdge toEdge afterInit lock unlock', () => {
|
4485
|
+
if (!swiper.params.a11y.enabled) return;
|
4486
|
+
updateNavigation();
|
4487
|
+
});
|
4488
|
+
on('paginationUpdate', () => {
|
4489
|
+
if (!swiper.params.a11y.enabled) return;
|
4490
|
+
updatePagination();
|
4491
|
+
});
|
4492
|
+
on('destroy', () => {
|
4493
|
+
if (!swiper.params.a11y.enabled) return;
|
4494
|
+
destroy();
|
4495
|
+
});
|
4496
|
+
}
|
4497
|
+
|
3810
4498
|
/* eslint no-underscore-dangle: "off" */
|
3811
4499
|
/* eslint no-use-before-define: "off" */
|
3812
4500
|
function Autoplay(_ref) {
|
@@ -8990,13 +9678,13 @@
|
|
8990
9678
|
* @Author: binruan@chatlabs.com
|
8991
9679
|
* @Date: 2023-11-02 18:34:34
|
8992
9680
|
* @LastEditors: binruan@chatlabs.com
|
8993
|
-
* @LastEditTime: 2024-11-
|
9681
|
+
* @LastEditTime: 2024-11-20 18:37:10
|
8994
9682
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
|
8995
9683
|
*
|
8996
9684
|
*/
|
8997
9685
|
const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
8998
9686
|
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
|
8999
|
-
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
|
9687
|
+
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;
|
9000
9688
|
const touchRef = React.useRef(null);
|
9001
9689
|
const fTouchRef = React.useRef(null);
|
9002
9690
|
const touchMoveRef = React.useRef(null);
|
@@ -9051,7 +9739,7 @@
|
|
9051
9739
|
}, [_popup, openState, globalConfig]);
|
9052
9740
|
React.useEffect(() => {
|
9053
9741
|
const trapFocus = (element) => {
|
9054
|
-
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])');
|
9742
|
+
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])');
|
9055
9743
|
var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
|
9056
9744
|
var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
|
9057
9745
|
var KEYCODE_TAB = 9;
|
@@ -9174,7 +9862,7 @@
|
|
9174
9862
|
}
|
9175
9863
|
})), child()),
|
9176
9864
|
React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
|
9177
|
-
React.createElement("img", { src: (
|
9865
|
+
React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
|
9178
9866
|
};
|
9179
9867
|
var Modal$1 = React.memo(Modal);
|
9180
9868
|
|
@@ -9441,7 +10129,8 @@
|
|
9441
10129
|
const [showModal, setShowModal] = React.useState(false);
|
9442
10130
|
const [show3DModal, setShow3DModal] = React.useState(false);
|
9443
10131
|
const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
|
9444
|
-
const
|
10132
|
+
const swiperRef = React.useRef();
|
10133
|
+
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
9445
10134
|
const data = isPost ? rec : popupDetailData;
|
9446
10135
|
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];
|
9447
10136
|
let cta = isPost
|
@@ -9532,9 +10221,9 @@
|
|
9532
10221
|
popupCurTimeRef.current = new Date();
|
9533
10222
|
setCheckCommodityIndex(index);
|
9534
10223
|
checkCommodityIndexRef.current = index;
|
9535
|
-
if (
|
9536
|
-
|
9537
|
-
|
10224
|
+
if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
|
10225
|
+
swiperRef.current.swiper.slideTo(0);
|
10226
|
+
swiperRef.current.swiper.autoplay.start();
|
9538
10227
|
}
|
9539
10228
|
}, []);
|
9540
10229
|
const renderCommodityGroup = React.useCallback(() => {
|
@@ -9552,19 +10241,40 @@
|
|
9552
10241
|
return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
|
9553
10242
|
}, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
|
9554
10243
|
const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
|
10244
|
+
const handleMouseEnter = React.useCallback(() => {
|
10245
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
10246
|
+
swiperRef.current.swiper.autoplay.stop();
|
10247
|
+
}
|
10248
|
+
}, []);
|
10249
|
+
const handleMouseLeave = React.useCallback(() => {
|
10250
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
10251
|
+
swiperRef.current.swiper.autoplay.start();
|
10252
|
+
}
|
10253
|
+
}, []);
|
10254
|
+
const handleSlideChange = React.useCallback((swiper) => {
|
10255
|
+
setSwiperActiveIndex(swiper.activeIndex);
|
10256
|
+
}, []);
|
10257
|
+
const isAlly = React.useMemo(() => getScreenReader(), []);
|
9555
10258
|
return (React.createElement(React.Fragment, null,
|
9556
10259
|
React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
|
9557
|
-
React.createElement("div", { style: { position: 'relative' } },
|
9558
|
-
product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, {
|
9559
|
-
enabled: true
|
9560
|
-
}, height: height, modules: [Pagination, Autoplay], pagination: {
|
10260
|
+
React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
10261
|
+
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: {
|
9561
10262
|
clickable: true,
|
9562
10263
|
bulletActiveClass: 'swipe-item-active-bullet',
|
9563
10264
|
clickableClass: getDotsAlign,
|
9564
10265
|
bulletElement: 'button'
|
9565
|
-
}
|
10266
|
+
} }, (isAlly
|
10267
|
+
? {
|
10268
|
+
mousewheel: true,
|
10269
|
+
keyboard: true,
|
10270
|
+
navigation: true,
|
10271
|
+
a11y: {
|
10272
|
+
enabled: true
|
10273
|
+
}
|
10274
|
+
}
|
10275
|
+
: {}), { loop: true, autoplay: {
|
9566
10276
|
delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
|
9567
|
-
}, ref:
|
10277
|
+
}, ref: swiperRef, onSlideChange: handleSlideChange, className: css.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) && {
|
9568
10278
|
'.swiper-pagination-bullet': {
|
9569
10279
|
backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
|
9570
10280
|
opacity: 1
|
@@ -9574,10 +10284,10 @@
|
|
9574
10284
|
backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
|
9575
10285
|
opacity: 1
|
9576
10286
|
}
|
9577
|
-
}))) },
|
9578
|
-
React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
|
10287
|
+
}))) }),
|
10288
|
+
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) => {
|
9579
10289
|
var _a;
|
9580
|
-
return (React.createElement(SwiperSlide, { key:
|
10290
|
+
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
9581
10291
|
React.createElement("div", { style: {
|
9582
10292
|
overflow: 'hidden',
|
9583
10293
|
width,
|
@@ -10330,7 +11040,8 @@
|
|
10330
11040
|
const curTimeRef = React.useRef(null);
|
10331
11041
|
const [show3DModal, setShow3DModal] = React.useState(false);
|
10332
11042
|
const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
|
10333
|
-
const
|
11043
|
+
const swiperRef = React.useRef();
|
11044
|
+
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
10334
11045
|
const data = isPost ? rec : popupDetailData;
|
10335
11046
|
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];
|
10336
11047
|
let cta = isPost
|
@@ -10450,9 +11161,9 @@ Made in Italy` })));
|
|
10450
11161
|
popupCurTimeRef.current = new Date();
|
10451
11162
|
setCheckCommodityIndex(index);
|
10452
11163
|
checkCommodityIndexRef.current = index;
|
10453
|
-
if (
|
10454
|
-
|
10455
|
-
|
11164
|
+
if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
|
11165
|
+
swiperRef.current.swiper.slideTo(0);
|
11166
|
+
swiperRef.current.swiper.autoplay.start();
|
10456
11167
|
}
|
10457
11168
|
}, []);
|
10458
11169
|
const renderCommodityGroup = React.useCallback(() => {
|
@@ -10470,17 +11181,40 @@ Made in Italy` })));
|
|
10470
11181
|
return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
|
10471
11182
|
}, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
|
10472
11183
|
const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
|
11184
|
+
const handleMouseEnter = React.useCallback(() => {
|
11185
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
11186
|
+
swiperRef.current.swiper.autoplay.stop();
|
11187
|
+
}
|
11188
|
+
}, []);
|
11189
|
+
const handleMouseLeave = React.useCallback(() => {
|
11190
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
11191
|
+
swiperRef.current.swiper.autoplay.start();
|
11192
|
+
}
|
11193
|
+
}, []);
|
11194
|
+
const handleSlideChange = React.useCallback((swiper) => {
|
11195
|
+
setSwiperActiveIndex(swiper.activeIndex);
|
11196
|
+
}, []);
|
11197
|
+
const isAlly = React.useMemo(() => getScreenReader(), []);
|
10473
11198
|
return (React.createElement("div", { className: 'pb-commondityDiroNew' },
|
10474
11199
|
React.createElement("div", Object.assign({ className: css.css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
|
10475
|
-
React.createElement("div", { style: { position: 'relative' } },
|
10476
|
-
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: {
|
11200
|
+
React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
11201
|
+
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: {
|
10477
11202
|
clickable: true,
|
10478
11203
|
bulletActiveClass: 'swipe-item-active-bullet',
|
10479
11204
|
clickableClass: getDotsAlign,
|
10480
11205
|
bulletElement: 'button'
|
10481
|
-
}
|
11206
|
+
} }, (isAlly
|
11207
|
+
? {
|
11208
|
+
mousewheel: true,
|
11209
|
+
keyboard: true,
|
11210
|
+
navigation: true,
|
11211
|
+
a11y: {
|
11212
|
+
enabled: true
|
11213
|
+
}
|
11214
|
+
}
|
11215
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
|
10482
11216
|
delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
|
10483
|
-
},
|
11217
|
+
}, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
10484
11218
|
bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
|
10485
11219
|
fontSize: '14px'
|
10486
11220
|
} }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
|
@@ -10493,9 +11227,9 @@ Made in Italy` })));
|
|
10493
11227
|
backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
|
10494
11228
|
opacity: 1
|
10495
11229
|
}
|
10496
|
-
}))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
|
11230
|
+
}))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
|
10497
11231
|
var _a;
|
10498
|
-
return (React.createElement(SwiperSlide, { key:
|
11232
|
+
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
10499
11233
|
React.createElement("div", { style: {
|
10500
11234
|
overflow: 'hidden',
|
10501
11235
|
width,
|
@@ -15401,7 +16135,7 @@ Made in Italy` })));
|
|
15401
16135
|
|
15402
16136
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
15403
16137
|
const AniLinkPopup$1 = (_a) => {
|
15404
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
16138
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
15405
16139
|
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"]);
|
15406
16140
|
style === null || style === void 0 ? true : delete style.transform;
|
15407
16141
|
const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
|
@@ -15458,12 +16192,12 @@ Made in Italy` })));
|
|
15458
16192
|
paddingLeft: '6px'
|
15459
16193
|
} }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.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.css(aniTimStyle)}`, onClick: handleTo }),
|
15460
16194
|
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 } },
|
15461
|
-
React.createElement("img", { src: (
|
15462
|
-
React.createElement(Img$1, { src: src, rec: recData, item: (
|
16195
|
+
React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
|
16196
|
+
React.createElement(Img$1, { 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 }),
|
15463
16197
|
(!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: {
|
15464
|
-
__html: setFontForText((
|
16198
|
+
__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)
|
15465
16199
|
} })),
|
15466
|
-
React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((
|
16200
|
+
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: {
|
15467
16201
|
__html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
15468
16202
|
} })))));
|
15469
16203
|
};
|
@@ -16475,15 +17209,16 @@ Made in Italy` })));
|
|
16475
17209
|
|
16476
17210
|
const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
16477
17211
|
var _a, _b;
|
16478
|
-
const
|
17212
|
+
const swiperRef = React.useRef();
|
16479
17213
|
const { isActive } = useSwiperSlide();
|
16480
17214
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
16481
17215
|
const [isLoad, setIsLoad] = React.useState(false);
|
16482
17216
|
const [imgInfo, setImgInfo] = React.useState();
|
16483
17217
|
const initTime = new Date();
|
17218
|
+
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
16484
17219
|
React.useEffect(() => {
|
16485
17220
|
if (isLoad && isActive) {
|
16486
|
-
(
|
17221
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
16487
17222
|
if (openHashtag) {
|
16488
17223
|
onViewImageEndEvent(rec);
|
16489
17224
|
}
|
@@ -16492,7 +17227,7 @@ Made in Italy` })));
|
|
16492
17227
|
}
|
16493
17228
|
}
|
16494
17229
|
else {
|
16495
|
-
(
|
17230
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
|
16496
17231
|
}
|
16497
17232
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
16498
17233
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -16516,27 +17251,51 @@ Made in Italy` })));
|
|
16516
17251
|
SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
|
16517
17252
|
};
|
16518
17253
|
}, [imgInfo]);
|
16519
|
-
|
16520
|
-
|
16521
|
-
|
16522
|
-
|
16523
|
-
|
16524
|
-
|
16525
|
-
|
16526
|
-
|
16527
|
-
|
16528
|
-
|
16529
|
-
|
16530
|
-
|
16531
|
-
|
16532
|
-
|
16533
|
-
|
16534
|
-
|
17254
|
+
const handleMouseEnter = React.useCallback(() => {
|
17255
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
17256
|
+
swiperRef.current.swiper.autoplay.stop();
|
17257
|
+
}
|
17258
|
+
}, []);
|
17259
|
+
const handleMouseLeave = React.useCallback(() => {
|
17260
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
17261
|
+
swiperRef.current.swiper.autoplay.start();
|
17262
|
+
}
|
17263
|
+
}, []);
|
17264
|
+
const handleSlideChange = React.useCallback((swiper) => {
|
17265
|
+
setSwiperActiveIndex(swiper.activeIndex);
|
17266
|
+
}, []);
|
17267
|
+
const isAlly = React.useMemo(() => getScreenReader(), []);
|
17268
|
+
return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
17269
|
+
React.createElement(Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
|
17270
|
+
clickable: true,
|
17271
|
+
bulletActiveClass: 'swipe-item-active-bullet',
|
17272
|
+
bulletElement: 'button'
|
17273
|
+
} }, (isAlly
|
17274
|
+
? {
|
17275
|
+
mousewheel: true,
|
17276
|
+
keyboard: true,
|
17277
|
+
navigation: true,
|
17278
|
+
a11y: {
|
17279
|
+
enabled: true
|
17280
|
+
}
|
16535
17281
|
}
|
16536
|
-
|
16537
|
-
|
16538
|
-
|
16539
|
-
|
17282
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
17283
|
+
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
17284
|
+
fontSize: '14px'
|
17285
|
+
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
17286
|
+
'.swiper-pagination-bullet': {
|
17287
|
+
backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
|
17288
|
+
opacity: 1
|
17289
|
+
}
|
17290
|
+
})), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
|
17291
|
+
'.swipe-item-active-bullet': {
|
17292
|
+
backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
|
17293
|
+
opacity: 1
|
17294
|
+
}
|
17295
|
+
}))), 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) => {
|
17296
|
+
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
17297
|
+
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
17298
|
+
}))));
|
16540
17299
|
};
|
16541
17300
|
var PictureGroup$3 = React.memo(PictureGroup$2);
|
16542
17301
|
|
@@ -16802,7 +17561,7 @@ Made in Italy` })));
|
|
16802
17561
|
* @Author: binruan@chatlabs.com
|
16803
17562
|
* @Date: 2024-03-20 10:27:31
|
16804
17563
|
* @LastEditors: binruan@chatlabs.com
|
16805
|
-
* @LastEditTime: 2024-11-
|
17564
|
+
* @LastEditTime: 2024-11-21 11:01:19
|
16806
17565
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
16807
17566
|
*
|
16808
17567
|
*/
|
@@ -16815,7 +17574,7 @@ Made in Italy` })));
|
|
16815
17574
|
*
|
16816
17575
|
*/
|
16817
17576
|
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
|
16818
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
17577
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
16819
17578
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
16820
17579
|
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
|
16821
17580
|
const { schema } = useEditor();
|
@@ -17329,8 +18088,8 @@ Made in Italy` })));
|
|
17329
18088
|
padding: 0,
|
17330
18089
|
background: 'transparent'
|
17331
18090
|
}, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
|
17332
|
-
React.createElement("img", { src: (
|
17333
|
-
isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((
|
18091
|
+
React.createElement("img", { src: ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) || img, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
|
18092
|
+
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,
|
17334
18093
|
React.createElement(Swiper, { style: {
|
17335
18094
|
marginTop: tagHeight
|
17336
18095
|
}, ref: swiperRef, onSlideChange: () => {
|
@@ -17362,7 +18121,7 @@ Made in Italy` })));
|
|
17362
18121
|
renderView,
|
17363
18122
|
renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
|
17364
18123
|
renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
|
17365
|
-
React.createElement(WaterFall$1, Object.assign({}, (
|
18124
|
+
React.createElement(WaterFall$1, 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)),
|
17366
18125
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig })));
|
17367
18126
|
};
|
17368
18127
|
|