feat(widgets): feature intro shared JS + plate info count-mates

Move FeatureIntro tab/media script into widget-set.js; align plate
info stats with zibll count-mates layout and residual CSS.
This commit is contained in:
2026-07-21 12:59:05 +08:00
parent e4662cd4d9
commit 152772ea60
4 changed files with 60 additions and 25 deletions
+16
View File
@@ -2517,3 +2517,19 @@ a.main-color > .icon-cover-card:hover,
.aksrt-product-tab__skeleton .placeholder.s1 { width: 48%; }
.aksrt-main-posts[data-load-mode="ajax"].is-ajax-loading { opacity: .85; }
.widget-search-box.is-affix { position: sticky; top: 72px; }
/* batch40-42 residual */
.aksrt-plate-info .count-mates {
gap: 8px; margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--color-line, rgba(0,0,0,.06));
}
.aksrt-plate-info .count-mates item,
.aksrt-plate-info .count-mates .mate-views,
.aksrt-plate-info .count-mates .mate-reply,
.aksrt-plate-info .count-mates .mate-follow {
flex: 1 1 0; min-width: 0; text-align: center;
}
.aksrt-plate-info .count-mates .em14 { font-weight: 700; line-height: 1.2; }
.aksrt-fi[data-aksrt-feature-intro] .aksrt-fi__panel { display: none; }
.aksrt-fi[data-aksrt-feature-intro] .aksrt-fi__panel.is-active { display: block; }
+36
View File
@@ -344,6 +344,41 @@
});
}
// Feature intro media tabs.
function initFeatureIntro() {
document.querySelectorAll('[data-aksrt-feature-intro]').forEach(function (root) {
if (root.dataset.aksrtFiBound === '1') return;
root.dataset.aksrtFiBound = '1';
var tabs = [].slice.call(root.querySelectorAll('.aksrt-fi__tab'));
var panels = [].slice.call(root.querySelectorAll('.aksrt-fi__panel'));
if (!tabs.length || !panels.length) return;
function go(i) {
tabs.forEach(function (t, idx) {
t.classList.toggle('is-active', idx === i);
});
panels.forEach(function (p, idx) {
p.classList.toggle('is-active', idx === i);
var v = p.querySelector('video');
if (!v) return;
if (idx === i) {
if (!v.getAttribute('src') && v.getAttribute('data-src')) {
v.setAttribute('src', v.getAttribute('data-src'));
}
if (v.play) v.play().catch(function () {});
} else if (v.pause) {
v.pause();
}
});
}
tabs.forEach(function (t) {
t.addEventListener('click', function () {
go(parseInt(t.getAttribute('data-index') || '0', 10));
});
});
});
}
function initFloatingQRCodes() {
var wrap = document.querySelector('.float-right');
if (!wrap) return;
@@ -388,6 +423,7 @@
initForumTabTopics();
initProductTabs();
initMainPostsLazy();
initFeatureIntro();
initFloatingQRCodes();
}
+2 -18
View File
@@ -44,7 +44,7 @@ class WidgetFeatureIntro extends \WP_Widget {
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$uid = 'aksrt-fi-' . esc_attr($this->id);
echo '<div class="aksrt-fi media-' . esc_attr($media_pos) . '" id="' . $uid . '">';
echo '<div class="aksrt-fi media-' . esc_attr($media_pos) . '" id="' . $uid . '" data-aksrt-feature-intro="1">';
echo '<div class="aksrt-fi__text">';
if ($heading !== '') {
echo '<h2 class="aksrt-fi__title">' . esc_html($heading) . '</h2>';
@@ -105,23 +105,7 @@ class WidgetFeatureIntro extends \WP_Widget {
}
echo '</div></div>';
if (count($slides) > 1) {
?>
<script>
(function(){
var root=document.getElementById(<?php echo wp_json_encode($uid); ?>);
if(!root||root._aksrtFi)return; root._aksrtFi=1;
var tabs=[].slice.call(root.querySelectorAll('.aksrt-fi__tab'));
var panels=[].slice.call(root.querySelectorAll('.aksrt-fi__panel'));
function go(i){
tabs.forEach(function(t,idx){t.classList.toggle('is-active',idx===i);});
panels.forEach(function(p,idx){p.classList.toggle('is-active',idx===i);var v=p.querySelector('video');if(v){if(idx===i){if(!v.getAttribute('src')&&v.getAttribute('data-src')){v.setAttribute('src',v.getAttribute('data-src'));}v.play&&v.play().catch(function(){})}else{v.pause&&v.pause()}}});
}
tabs.forEach(function(t){ t.addEventListener('click', function(){ go(parseInt(t.getAttribute('data-index')||'0',10)); }); });
})();
</script>
<?php
}
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
+6 -7
View File
@@ -67,13 +67,12 @@ class WidgetForumPlateInfo extends \WP_Widget {
echo '<div class="aksrt-plate-info__desc">' . esc_html($desc) . '</div>';
}
if ($show_stats) {
echo '<div class="aksrt-plate-info__stats count-mates flex jsb">';
echo '<span title="' . esc_attr__('帖子', 'aksrt') . '"><i class="fas fa-file-alt" aria-hidden="true"></i> ' . esc_html((string) $posts) . '</span>';
echo '<span title="' . esc_attr__('回复', 'aksrt') . '"><i class="fas fa-comment" aria-hidden="true"></i> ' . esc_html((string) $reply) . '</span>';
if ($views > 0) {
echo '<span title="' . esc_attr__('浏览', 'aksrt') . '"><i class="fas fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views) . '</span>';
}
echo '<span title="' . esc_attr__('关注', 'aksrt') . '"><i class="fas fa-heart" aria-hidden="true"></i> ' . esc_html((string) $follow) . '</span>';
// zibll count-mates: label above big number.
echo '<div class="aksrt-plate-info__stats count-mates text-center flex jsb">';
echo '<item class="mate-views"><div class="em09 opacity5 mb6">' . esc_html__('帖子', 'aksrt') . '</div><div class="em14">' . esc_html((string) $posts) . '</div></item>';
echo '<item class="mate-reply"><div class="em09 opacity5 mb6">' . esc_html__('回复', 'aksrt') . '</div><div class="em14">' . esc_html((string) $reply) . '</div></item>';
echo '<item class="mate-views"><div class="em09 opacity5 mb6">' . esc_html__('阅读', 'aksrt') . '</div><div class="em14">' . esc_html((string) $views) . '</div></item>';
echo '<item class="mate-follow"><div class="em09 opacity5 mb6">' . esc_html__('关注', 'aksrt') . '</div><div class="em14">' . esc_html((string) $follow) . '</div></item>';
echo '</div>';
}