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'];
}