fix(submit): render slide cover preview as a real swiper
Replace the static first-image preview with the reference theme's .new-swiper contract (loop + autoplay + prev/next + pagination) in both the server-rendered box and the JS re-render, and run auto_fun for slide covers so new_swiper initializes them.
This commit is contained in:
1 parent
d0c6c3e431
commit
b7f5523874
3 files changed
+54
-5
No files matched your search
@@ -436,10 +436,21 @@
|
|||||||
if (t === 'image' && d.url) {
|
if (t === 'image' && d.url) {
|
||||||
html = '<img src="' + escapeHtml(d.url) + '" alt="">';
|
html = '<img src="' + escapeHtml(d.url) + '" alt="">';
|
||||||
} else if (t === 'slide' && Array.isArray(d) && d[0] && d[0].url) {
|
} else if (t === 'slide' && Array.isArray(d) && d[0] && d[0].url) {
|
||||||
|
// 与参考主题一致:幻灯片封面渲染真实 swiper,由 auto_fun 里的 new_swiper 初始化。
|
||||||
|
var slideImgs = d
|
||||||
|
.filter(function (item) { return item && item.url; })
|
||||||
|
.map(function (item) {
|
||||||
|
return '<div class="swiper-slide"><img src="' + escapeHtml(item.url) + '" alt=""></div>';
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
html =
|
html =
|
||||||
'<img src="' +
|
'<div class="new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;">' +
|
||||||
escapeHtml(d[0].url) +
|
'<div class="swiper-wrapper">' + slideImgs + '</div>' +
|
||||||
'" alt=""><span class="featured-type-badge"><i class="fa fas fa-image"></i></span>';
|
'<div class="swiper-button-prev"></div>' +
|
||||||
|
'<div class="swiper-button-next"></div>' +
|
||||||
|
'<div class="swiper-pagination"></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<span class="featured-type-badge"><i class="fa fas fa-image"></i></span>';
|
||||||
} else if (t === 'video') {
|
} else if (t === 'video') {
|
||||||
html =
|
html =
|
||||||
'<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;" video-url="' +
|
'<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;" video-url="' +
|
||||||
@@ -453,7 +464,7 @@
|
|||||||
}
|
}
|
||||||
this.destroyFeaturedPlayer(preview);
|
this.destroyFeaturedPlayer(preview);
|
||||||
preview.innerHTML = html;
|
preview.innerHTML = html;
|
||||||
if (t === 'video' && typeof window.auto_fun === 'function') {
|
if ((t === 'video' || t === 'slide') && typeof window.auto_fun === 'function') {
|
||||||
window.auto_fun();
|
window.auto_fun();
|
||||||
}
|
}
|
||||||
var clearBtn = qs('[data-featured-action="close"]');
|
var clearBtn = qs('[data-featured-action="close"]');
|
||||||
|
|||||||
@@ -27,7 +27,18 @@ $can_video = !empty($ctx['can_cover_video']);
|
|||||||
<?php if ($type === 'image' && !empty($data['url'])) : ?>
|
<?php if ($type === 'image' && !empty($data['url'])) : ?>
|
||||||
<img src="<?php echo esc_url((string) $data['url']); ?>" alt="">
|
<img src="<?php echo esc_url((string) $data['url']); ?>" alt="">
|
||||||
<?php elseif ($type === 'slide' && is_array($data) && !empty($data[0]['url'])) : ?>
|
<?php elseif ($type === 'slide' && is_array($data) && !empty($data[0]['url'])) : ?>
|
||||||
<img src="<?php echo esc_url((string) $data[0]['url']); ?>" alt="">
|
<div class="new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<?php foreach ($data as $slide) : ?>
|
||||||
|
<?php if (!empty($slide['url'])) : ?>
|
||||||
|
<div class="swiper-slide"><img src="<?php echo esc_url((string) $slide['url']); ?>" alt=""></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
<span class="featured-type-badge"><i class="fa fas fa-image"></i></span>
|
<span class="featured-type-badge"><i class="fa fas fa-image"></i></span>
|
||||||
<?php elseif ($type === 'video') : ?>
|
<?php elseif ($type === 'video') : ?>
|
||||||
<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;"
|
<div class="new-dplayer dplayer-scale-height" style="--scale-height:50%;"
|
||||||
|
|||||||
@@ -38,6 +38,33 @@ test('image picker folds multi-select into a slide cover like the reference them
|
|||||||
assert.doesNotMatch(js, /act === 'slide'/);
|
assert.doesNotMatch(js, /act === 'slide'/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('slide cover preview renders a real swiper like the reference theme', () => {
|
||||||
|
const featured = read('templates/parts/submit/featured.php');
|
||||||
|
const js = read('assets/js/front-submit.js');
|
||||||
|
|
||||||
|
const swiperContract =
|
||||||
|
/new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;"/;
|
||||||
|
assert.match(featured, swiperContract);
|
||||||
|
assert.match(js, swiperContract);
|
||||||
|
|
||||||
|
// Server-rendered slides iterate the saved attachment list.
|
||||||
|
assert.match(featured, /foreach \(\$data as \$slide\) : \?>/);
|
||||||
|
assert.match(featured, /<div class="swiper-slide"><img src="<\?php echo esc_url\(\(string\) \$slide\['url'\]\); \?>"/);
|
||||||
|
|
||||||
|
// Client-rendered slides come from the multi-select payload; the runtime
|
||||||
|
// initializer (auto_fun -> new_swiper) must run for slide covers too.
|
||||||
|
assert.match(js, /'<div class="swiper-slide"><img src="' \+ escapeHtml\(item\.url\) \+ '" alt=""><\/div>'/);
|
||||||
|
assert.match(js, /t === 'video' \|\| t === 'slide'/);
|
||||||
|
|
||||||
|
for (const control of ['swiper-wrapper', 'swiper-button-prev', 'swiper-button-next', 'swiper-pagination']) {
|
||||||
|
assert.match(featured, new RegExp(`class="${control}"`));
|
||||||
|
assert.match(js, new RegExp(`class="${control}"`));
|
||||||
|
}
|
||||||
|
|
||||||
|
// The static first-image slide preview is gone.
|
||||||
|
assert.doesNotMatch(js, /escapeHtml\(d\[0\]\.url\)/);
|
||||||
|
});
|
||||||
|
|
||||||
test('submit.css mirrors the reference visibility matrix for the buttons row', () => {
|
test('submit.css mirrors the reference visibility matrix for the buttons row', () => {
|
||||||
const css = read('assets/css/frontend/pages/submit.css');
|
const css = read('assets/css/frontend/pages/submit.css');
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user