kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(widgets): shared tab JS + main posts ajax load_mode

Browse Source 
Move category/forum/product tab lazy load into widget-set.js with
skeletons; MainPosts gains load_mode=ajax first-paint placeholders.
This commit is contained in:
kate522 committed 2026-07-21 12:42:58 +08:00
1 parent 6a78b553d6
commit aed056152c
5 files changed
+344 -154
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/AKSRT/Widgets/CategoryTabsWidget.php
+6 -55
View File
@@ -38,7 +38,7 @@ class CategoryTabsWidget extends \WP_Widget {
$tabs = $this->resolve_tabs($instance);
echo $args['before_widget'];
echo '<section class="aksrt-home-widget aksrt-home-widget--tabs widget-tab-posts" data-aksrt-home-cat-tabs data-aksrt-tabs="1">';
echo '<section class="aksrt-home-widget aksrt-home-widget--tabs widget-tab-posts" data-aksrt-home-cat-tabs data-aksrt-tabs="1" data-rest="' . esc_url(rest_url('aksrt/v1/widgets/category-tabs')) . '" data-count="' . esc_attr((string) $count) . '" data-layout="' . esc_attr($layout) . '" data-columns="' . esc_attr((string) $columns) . '" data-context="' . esc_attr($context) . '" data-show-more="' . (!empty($show_more) ? '1' : '0') . '">';
if (empty($tabs)) {
echo function_exists('aksrt_get_widget_null') ? aksrt_get_widget_null(__('暂无可用分类', 'aksrt')) : '<p class="widget-empty">' . esc_html__('暂无可用分类', 'aksrt') . '</p>';
@@ -95,65 +95,16 @@ class CategoryTabsWidget extends \WP_Widget {
</div>
<?php endif;
else : ?>
<div class="post_ajax_loader" data-aksrt-ajax-loader></div>
<div class="post_ajax_loader" data-aksrt-ajax-loader>
<?php for ($si = 0; $si < $count; $si++) : ?>
<div class="posts-mini placeholder-row"><div class="placeholder radius thumb-placeholder"></div><div class="flex1"><div class="placeholder k1"></div><div class="placeholder s1 mt6"></div></div></div>
<?php endfor; ?>
</div>
<?php endif; ?>
</div>
<?php
}
$rest = rest_url('aksrt/v1/widgets/category-tabs');
?>
<script>
(function(){
var section=document.currentScript?document.currentScript.parentElement:null;
if(!section||section._aksrtCatTabs)return; section._aksrtCatTabs=1;
var rest=<?php echo wp_json_encode($rest); ?>;
var count=<?php echo (int) $count; ?>;
var layout=<?php echo wp_json_encode($layout); ?>;
var columns=<?php echo (int) $columns; ?>;
var context=<?php echo wp_json_encode($context); ?>;
var showMore=<?php echo $show_more ? 'true' : 'false'; ?>;
var tabs=[].slice.call(section.querySelectorAll('.widget-tab-posts__tab'));
var panels=[].slice.call(section.querySelectorAll('.widget-tab-posts__panel'));
function load(panel){
if(!panel||panel.getAttribute('data-loaded')==='1')return;
var cat=panel.getAttribute('data-cat')||'0';
var more=panel.getAttribute('data-more')||'';
var qs=new URLSearchParams({cat:cat,count:String(count),layout:layout,columns:String(columns),context:context});
var url=rest+(rest.indexOf('?')>-1?'&':'?')+qs.toString();
panel.classList.add('is-ajax-loading');
var headers={Accept:'application/json'};
if(window.aksrtData&&aksrtData.restNonce)headers['X-WP-Nonce']=aksrtData.restNonce;
fetch(url,{credentials:'same-origin',headers:headers}).then(function(r){return r.json()}).then(function(j){
var d=(j&&j.data)||j||{};
var html=d.html||'';
if(showMore&&more){
html+='<div class="aksrt-home-widget__footer"><a class="aksrt-home-widget__more" href="'+more+'">查看更多</a></div>';
}
panel.innerHTML=html||'<div class="ajax-item widget-empty muted-2-color">暂无文章</div>';
panel.setAttribute('data-loaded','1');
panel.classList.remove('is-ajax-loading');
}).catch(function(){panel.classList.remove('is-ajax-loading');});
}
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
var target=tab.getAttribute('data-tab');
tabs.forEach(function(item){
var active=item===tab;
item.classList.toggle('active',active);
item.setAttribute('aria-selected',active?'true':'false');
});
panels.forEach(function(panel){
var active=panel.getAttribute('data-tab-panel')===target;
panel.classList.toggle('active',active);
if(active){panel.removeAttribute('hidden');load(panel);} else {panel.setAttribute('hidden','');}
});
});
});
})();
</script>
<?php
echo '</section>';
echo $args['after_widget'];
}
src/AKSRT/Widgets/WidgetForumTabTopics.php
+1 -45
View File
@@ -50,7 +50,7 @@ class WidgetForumTabTopics extends \WP_Widget {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo '<div class="aksrt-ftab widget-tab-posts" id="' . $uid . '" data-aksrt-tabs="1" data-rest="' . esc_url($rest) . '" data-count="' . esc_attr((string) $count) . '" data-style="' . esc_attr($style) . '" data-plate="' . esc_attr((string) $plate) . '">';
echo '<div class="aksrt-ftab widget-tab-posts" id="' . $uid . '" data-aksrt-tabs="1" data-aksrt-ftab="1" data-rest="' . esc_url($rest) . '" data-count="' . esc_attr((string) $count) . '" data-style="' . esc_attr($style) . '" data-plate="' . esc_attr((string) $plate) . '">';
echo '<ul class="aksrt-ftab__nav widget-tab-posts__nav" role="tablist">';
foreach ($tabs as $i => $tab) {
$cls = $i === 0 ? ' is-active' : '';
@@ -78,50 +78,6 @@ class WidgetForumTabTopics extends \WP_Widget {
echo '</div>';
}
echo '</div>';
?>
<script>
(function(){
var root=document.getElementById(<?php echo wp_json_encode($uid); ?>);
if(!root||root._aksrtFtab)return; root._aksrtFtab=1;
var rest=root.getAttribute('data-rest')||'';
var count=root.getAttribute('data-count')||'6';
var style=root.getAttribute('data-style')||'mini';
var plate=root.getAttribute('data-plate')||'0';
var btns=[].slice.call(root.querySelectorAll('.aksrt-ftab__btn'));
var panels=[].slice.call(root.querySelectorAll('.aksrt-ftab__panel'));
function load(panel, orderby){
if(!panel||panel.getAttribute('data-loaded')==='1'||!rest)return;
var qs=new URLSearchParams({page:'1',count:count,orderby:orderby||'date',style:style,plate:plate,period:'all',paginate:'none'});
var url=rest+(rest.indexOf('?')>-1?'&':'?')+qs.toString();
panel.classList.add('is-ajax-loading');
fetch(url,{credentials:'same-origin',headers:{Accept:'application/json','X-WP-Nonce':(window.aksrtData&&aksrtData.restNonce)||''}})
.then(function(r){return r.json()}).then(function(j){
var d=(j&&j.data)||j||{};
var html=d.html||'';
panel.innerHTML=html||'<div class="ajax-item aksrt-ftab__empty muted-2-color">暂无内容</div>';
panel.setAttribute('data-loaded','1');
panel.classList.remove('is-ajax-loading');
}).catch(function(){panel.classList.remove('is-ajax-loading');});
}
function go(i){
btns.forEach(function(b,idx){
var on=idx===i;
b.classList.toggle('is-active',on);
b.setAttribute('aria-selected',on?'true':'false');
});
panels.forEach(function(p,idx){
var on=idx===i;
p.classList.toggle('is-active',on);
if(on){p.removeAttribute('hidden');}else{p.setAttribute('hidden','');}
});
var btn=btns[i], panel=panels[i];
if(btn&&panel) load(panel, btn.getAttribute('data-orderby')||'date');
}
btns.forEach(function(b){ b.addEventListener('click', function(){ go(parseInt(b.getAttribute('data-index')||'0',10)); }); });
})();
</script>
<?php
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
src/AKSRT/Widgets/WidgetMainPosts.php
+56 -11
View File
@@ -255,6 +255,7 @@ class WidgetMainPosts extends \WP_Widget {
'show_meta' => !isset($instance['show_meta']) || !empty($instance['show_meta']) ? 1 : 0,
'show_number' => !empty($instance['show_number']) ? 1 : 0,
'paginate' => $paginate,
'load_mode' => sanitize_key((string) ($new_instance['load_mode'] ?? 'detail')) === 'ajax' ? 'ajax' : 'detail',
], static function ($v) {
return $v !== '' && $v !== null;
});
@@ -288,28 +289,63 @@ class WidgetMainPosts extends \WP_Widget {
$style = 'list';
}
$paginate = sanitize_key((string) ($instance['paginate'] ?? 'none'));
if (!in_array($paginate, ['none', 'ajax', 'number'], true)) {
$paginate = 'none';
}
$load_mode = sanitize_key((string) ($instance['load_mode'] ?? 'detail'));
if (!in_array($load_mode, ['detail', 'ajax'], true)) {
$load_mode = 'detail';
}
$instance['style'] = $style;
$instance['paginate'] = $paginate;
$payload = self::query_payload($instance, 1);
if ($payload['html'] === '' && empty($payload['total'])) {
return;
}
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base);
if ($title !== '') {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
$count = max(1, min(30, (int) ($instance['count'] ?? 6)));
$rest = rest_url('aksrt/v1/widgets/posts');
$qs = http_build_query(array_filter([
'page' => 1,
'count' => $count,
'orderby' => sanitize_key((string) ($instance['orderby'] ?? 'date')),
'cat' => (int) ($instance['cat'] ?? 0),
'limit_day' => (int) ($instance['limit_day'] ?? 0),
'topics' => (string) ($instance['topics'] ?? ''),
'pay_type' => sanitize_key((string) ($instance['pay_type'] ?? '')),
'style' => $style,
'show_thumb' => !isset($instance['show_thumb']) || !empty($instance['show_thumb']) ? 1 : 0,
'show_meta' => !isset($instance['show_meta']) || !empty($instance['show_meta']) ? 1 : 0,
'show_number' => !empty($instance['show_number']) ? 1 : 0,
'paginate' => $paginate,
'load_mode' => sanitize_key((string) ($new_instance['load_mode'] ?? 'detail')) === 'ajax' ? 'ajax' : 'detail',
], static function ($v) {
return $v !== '' && $v !== null;
}));
$wrap_cls = 'aksrt-main-posts style-' . $style . ' ajaxpager';
if ($style === 'mini') {
$wrap_cls .= ' zib-widget posts-mini-lists';
}
echo '<div class="' . esc_attr($wrap_cls) . '" data-aksrt-ajaxpager data-aksrt-ajax-url="' . esc_url($rest) . '">';
echo $payload['html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $payload['paginate_html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div class="' . esc_attr($wrap_cls) . '" data-aksrt-ajaxpager data-aksrt-ajax-url="' . esc_url($rest) . '" data-load-mode="' . esc_attr($load_mode) . '" data-query="' . esc_attr($qs) . '"' . ($load_mode === 'ajax' ? ' data-loaded="0"' : ' data-loaded="1"') . '>';
if ($load_mode === 'ajax') {
// Skeleton first paint (zibll load_mode=ajax).
echo '<div class="aksrt-main-posts__skeleton">';
for ($si = 0; $si < $count; $si++) {
if ($style === 'card') {
echo '<div class="placeholder-row card"><div class="placeholder thumb"></div><div class="placeholder k1"></div></div>';
} else {
echo '<div class="posts-mini placeholder-row"><div class="placeholder radius thumb-placeholder"></div><div class="flex1"><div class="placeholder t1 k1"></div><div class="placeholder s1"></div></div></div>';
}
}
echo '</div>';
} else {
$payload = self::query_payload($instance, 1);
echo $payload['html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $payload['paginate_html']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader data-aksrt-ajax-loader-hide hidden></div>';
echo '</div>';
@@ -345,8 +381,8 @@ class WidgetMainPosts extends \WP_Widget {
<option value="views" <?php selected(($instance['orderby'] ?? ''), 'views'); ?>><?php esc_html_e('浏览', 'aksrt'); ?></option>
<option value="comments" <?php selected(($instance['orderby'] ?? ''), 'comments'); ?>><?php esc_html_e('评论', 'aksrt'); ?></option>
<option value="likes" <?php selected(($instance['orderby'] ?? ''), 'likes'); ?>><?php esc_html_e('点赞', 'aksrt'); ?></option>
<option value=\"favorites\" <?php selected(($instance['orderby'] ?? ''), 'favorites'); ?>><?php esc_html_e('收藏', 'aksrt'); ?></option>
<option value=\"downloads\" <?php selected(($instance['orderby'] ?? ''), 'downloads'); ?>><?php esc_html_e('下载', 'aksrt'); ?></option>
<option value="favorites" <?php selected(($instance['orderby'] ?? ''), 'favorites'); ?>><?php esc_html_e('收藏', 'aksrt'); ?></option>
<option value="downloads" <?php selected(($instance['orderby'] ?? ''), 'downloads'); ?>><?php esc_html_e('下载', 'aksrt'); ?></option>
<option value="rand" <?php selected(($instance['orderby'] ?? ''), 'rand'); ?>><?php esc_html_e('随机', 'aksrt'); ?></option>
</select>
</label>
@@ -361,7 +397,15 @@ class WidgetMainPosts extends \WP_Widget {
<input class="tiny-text" type="number" min="0" name="<?php echo esc_attr($this->get_field_name('limit_day')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['limit_day'] ?? 0))); ?>">
</label>
</p>
<p>
<p>
<label><?php esc_html_e('模块加载', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('load_mode')); ?>">
<option value="detail" <?php selected(($instance['load_mode'] ?? 'detail'), 'detail'); ?>><?php esc_html_e('直接加载', 'aksrt'); ?></option>
<option value="ajax" <?php selected(($instance['load_mode'] ?? ''), 'ajax'); ?>><?php esc_html_e('AJAX 懒加载', 'aksrt'); ?></option>
</select>
</label>
</p>
<p>
<label><?php esc_html_e('分页', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('paginate')); ?>">
<option value="none" <?php selected(($instance['paginate'] ?? 'none'), 'none'); ?>><?php esc_html_e('无', 'aksrt'); ?></option>
@@ -419,6 +463,7 @@ class WidgetMainPosts extends \WP_Widget {
'topics' => sanitize_text_field((string) ($new_instance['topics'] ?? '')),
'pay_type' => sanitize_key((string) ($new_instance['pay_type'] ?? '')),
'paginate' => $paginate,
'load_mode' => sanitize_key((string) ($new_instance['load_mode'] ?? 'detail')) === 'ajax' ? 'ajax' : 'detail',
'show_thumb' => !empty($new_instance['show_thumb']) ? 1 : 0,
'show_meta' => !empty($new_instance['show_meta']) ? 1 : 0,
'show_number' => !empty($new_instance['show_number']) ? 1 : 0,
src/AKSRT/Widgets/WidgetProductTab.php
+6 -35
View File
@@ -105,47 +105,18 @@ class WidgetProductTab extends \WP_Widget {
echo '</div>';
} else {
echo '<div class="ajaxpager aksrt-product-widget__grid product-lists-row aksrt-product-widget--' . esc_attr($style) . ' is-lazy" data-aksrt-ajaxpager>';
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader></div>';
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader>';
echo '<div class="aksrt-product-tab__skeleton">';
for ($si = 0; $si < min(4, $per_page); $si++) {
echo '<div class="placeholder-row product-card-placeholder"><div class="placeholder thumb"></div><div class="placeholder k1"></div><div class="placeholder s1"></div></div>';
}
echo '</div></div>';
echo '<div class="ajax-pag hide"><div class="next-page ajax-next"><a href="#"></a></div></div>';
echo '</div>';
}
echo '</div>';
}
// Lightweight tab switch + lazy REST load (no inline product HTML duplication).
echo '<script>(function(){';
echo 'var root=document.currentScript&&document.currentScript.parentElement;if(!root)return;';
echo 'var rest=root.getAttribute("data-rest")||"";';
echo 'var per=root.getAttribute("data-per-page")||"8";';
echo 'var style=root.getAttribute("data-style")||"default";';
echo 'var paginate=root.getAttribute("data-paginate")||"ajax";';
echo 'function loadPanel(panel,btn){if(!panel||panel.getAttribute("data-loaded")==="1")return;';
echo 'var grid=panel.querySelector("[data-aksrt-ajaxpager]");if(!grid||!rest)return;';
echo 'var qs=new URLSearchParams({page:"1",per_page:per,style:style,paginate:paginate,';
echo 'orderby:btn.getAttribute("data-orderby")||"date",order:"DESC",';
echo 'cat_ids:btn.getAttribute("data-cat-ids")||"",tag_ids:btn.getAttribute("data-tag-ids")||"",';
echo 'discount_ids:btn.getAttribute("data-discount-ids")||""});';
echo 'var url=rest+(rest.indexOf("?")>-1?"&":"?")+qs.toString();';
echo 'grid.classList.add("is-ajax-loading");';
echo 'fetch(url,{credentials:"same-origin",headers:{Accept:"application/json","X-WP-Nonce":(window.aksrtData&&aksrtData.restNonce)||""}})';
echo '.then(function(r){return r.json()}).then(function(j){';
echo 'var d=(j&&j.data&&(j.data.data||j.data))||j||{};';
echo 'var html=d.html||""; var pag=d.paginate_html||d.paginateHtml||"";';
echo 'var loader=grid.querySelector("[data-aksrt-ajax-loader]");';
echo 'grid.innerHTML=""; if(html)grid.insertAdjacentHTML("beforeend",html); if(pag)grid.insertAdjacentHTML("beforeend",pag);';
echo 'if(loader)grid.appendChild(loader); panel.setAttribute("data-loaded","1"); grid.classList.remove("is-ajax-loading");';
echo '}).catch(function(){grid.classList.remove("is-ajax-loading");});}';
echo 'root.querySelectorAll(".aksrt-product-tab__header").forEach(function(btn){';
echo 'btn.addEventListener("click",function(){';
echo 'root.querySelectorAll(".aksrt-product-tab__header").forEach(function(b){b.classList.remove("is-active")});';
echo 'root.querySelectorAll(".aksrt-product-tab__panel").forEach(function(p){p.style.display="none"});';
echo 'btn.classList.add("is-active");';
echo 'var idx=btn.getAttribute("data-tab-index");';
echo 'var panel=root.querySelector(\'.aksrt-product-tab__panel[data-tab-index="\'+idx+\'"]\');';
echo 'if(panel){panel.style.display="";loadPanel(panel,btn);}';
echo '});});';
echo '})();</script>';
echo '</div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}