feat(widgets): shared tab JS + main posts ajax load_mode
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:
1 parent
6a78b553d6
commit
aed056152c
5 files changed
+344
-154
No files matched your search
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user