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:
@@ -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; }
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user