Clicking 加载更多 showed no skeleton at all, and the placeholder shape did not match the reference theme's post cards. - Class-name mismatch: pagination.js queried .post-ajax-loader while every PHP producer emits .post_ajax_loader, so showSkeleton() never found a target and the loader stayed hidden. Accept both spellings. - Inline display:none on the loader (pagination, comments, widget tab panes) outranked .is-loading, so even the correct selector could not reveal it. Drop the inline style; the reference uses a bare <div class="post_ajax_loader"> and toggles visibility from JS. - loadNextPage() set indicator.style.display = "flex", which forced the .posts-item.card skeleton blocks (inline-block layout) into a single row instead of stacking vertically — the visible symptom. Remove those inline writes and drive .is-loading from CSS for every surface. - Scope the hide/show rules on the class itself rather than requiring an .ajaxpager ancestor: homepage tab panes, archive streams and comment lists sit at three different depths. - Rebuild aksrt_render_placeholder() on zib_get_post_placeholder's structure — list = t1/k1/k2 + two s1, card = t1 item-heading/k2 + two s1, thumb wrapped in post-graphic + radius8 item-thumbnail, all carrying ajax-item so the loader is not mistaken for a real card. - Add mini/mini_thumb modes so ContentRenderer::placeholder() stops hand-rolling the same markup; normalize its 'lists' arg to 'list'. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
218 lines
11 KiB
PHP
218 lines
11 KiB
PHP
<?php
|
|
|
|
namespace AKSRT\WidgetSystem\Renderers;
|
|
|
|
use AKSRT\WidgetSystem\PostRenderer;
|
|
use AKSRT\WidgetSystem\RendererHelpers;
|
|
|
|
defined('ABSPATH') || exit;
|
|
|
|
/** Render article discovery and paid-content widgets (reference parity). */
|
|
final class ContentRenderer {
|
|
public static function render(string $slug, array $instance, array $context = []): string {
|
|
switch ($slug) {
|
|
case 'term_cards': return self::term_cards($instance);
|
|
case 'term_aggregation': return self::term_aggregation($instance);
|
|
case 'post_pay': return self::post_pay($instance);
|
|
case 'tab_posts': return self::tab_posts($instance, $context);
|
|
case 'posts': return self::posts($instance, $context, 'posts');
|
|
case 'hot_posts': return function_exists('aksrt_widget_hot_posts') ? aksrt_widget_hot_posts($instance) : '';
|
|
case 'oneline_posts': return self::posts($instance, $context, 'oneline_posts');
|
|
}
|
|
return '';
|
|
}
|
|
|
|
private static function posts(array $instance, array $context, string $slug): string {
|
|
$widget_id = (string) ($context['widget_id'] ?? '');
|
|
$style = in_array(($instance['style'] ?? 'list'), ['list', 'card', 'mini'], true) ? (string) $instance['style'] : 'list';
|
|
if ($slug === 'oneline_posts') {
|
|
// Reference parity: the swiper row is fully rendered server-side.
|
|
$query = \AKSRT\WidgetSystem\PostQuery::build(array_merge($instance, ['paginate' => '']), 1, []);
|
|
return \AKSRT\WidgetSystem\PostRenderer::items($query, $instance, 'oneline_posts');
|
|
}
|
|
$inner = self::ajaxpager($instance, $slug, $widget_id, 1, '');
|
|
$html = '<div class="widget-main-post mb20 style-' . esc_attr($style) . '">';
|
|
$html .= $style === 'mini' ? '<div class="zib-widget posts-mini-lists">' : '';
|
|
$html .= $inner;
|
|
$html .= $style === 'mini' ? '</div>' : '';
|
|
return $html . '</div>';
|
|
}
|
|
|
|
/** The .widget-ajaxpager container contract shared by posts and tab panes. */
|
|
private static function ajaxpager(array $instance, string $slug, string $widget_id, int $page, string $segment): string {
|
|
$attrs = ' data-widget-items data-widget="' . esc_attr($slug) . '" data-instance="' . esc_attr($widget_id) . '" data-page="' . (int) $page . '"';
|
|
if ($segment !== '') {
|
|
$attrs .= ' data-segment="' . esc_attr($segment) . '"';
|
|
}
|
|
if (($instance['load_mode'] ?? '') === 'ajax') {
|
|
// The runtime (lazysizes + lazyload-action) reveals this container
|
|
// and clicks the single .ias-btn trigger; frontend.js then loads
|
|
// the first page through the REST client.
|
|
$trigger = '<span class="hide aksrt-ias-trigger"><a class="ias-btn" no-scroll="true" href="javascript:void(0)" data-widget-ias="1" data-next-page="1" aria-hidden="true" tabindex="-1"></a></span>';
|
|
return '<div class="widget-ajaxpager lazyload" lazyload-action="ias"' . $attrs . ' aria-live="polite" aria-busy="true">' . $trigger . '<div class="post_ajax_loader" role="status" aria-label="' . esc_attr__('正在加载', 'aksrt') . '">' . self::placeholder($instance) . '</div></div>';
|
|
}
|
|
$payload = PostRenderer::payload($instance, $slug, $page, $segment);
|
|
return '<div class="widget-ajaxpager"' . $attrs . ' aria-live="polite" aria-busy="false">' . $payload['html'] . $payload['paginate_html'] . '</div>';
|
|
}
|
|
|
|
private static function placeholder(array $instance): string {
|
|
$style = (string) ($instance['style'] ?? 'list');
|
|
$count = max(1, (int) ($instance['count'] ?? 6));
|
|
if ($style === 'mini') {
|
|
$mini_opt = (array) ($instance['mini_opt'] ?? []);
|
|
return aksrt_render_placeholder(
|
|
in_array('show_thumb', $mini_opt, true) ? 'mini_thumb' : 'mini',
|
|
$count
|
|
);
|
|
}
|
|
return aksrt_render_placeholder($style === 'card' ? 'card' : 'list', $count);
|
|
}
|
|
|
|
private static function tab_posts(array $instance, array $context): string {
|
|
$style = in_array(($instance['style'] ?? 'mini'), ['list', 'card', 'mini'], true) ? (string) $instance['style'] : 'mini';
|
|
$tabs = array_values((array) ($instance['tabs'] ?? []));
|
|
if (!$tabs) {
|
|
return '';
|
|
}
|
|
$widget_id = (string) ($context['widget_id'] ?? 'preview');
|
|
$buttons = '';
|
|
$panels = '';
|
|
$key = sanitize_html_class($widget_id) ?: 'preview';
|
|
$panel_id = 'aksrt-tab-panel-' . $key;
|
|
$visible_index = 0;
|
|
foreach ($tabs as $index => $tab) {
|
|
if (!is_array($tab) || trim((string) ($tab['title'] ?? '')) === '') continue;
|
|
$tab_id = 'aksrt-tab-' . $key . '-' . $visible_index;
|
|
$selected = $visible_index === 0;
|
|
$buttons .= '<li class="' . ($selected ? 'active' : '') . '"><a' . ($selected ? '' : ' data-ajax') . ' data-toggle="tab" href="#' . esc_attr($panel_id . '-' . $visible_index) . '" role="tab" id="' . esc_attr($tab_id) . '" aria-controls="' . esc_attr($panel_id . '-' . $visible_index) . '" aria-selected="' . ($selected ? 'true' : 'false') . '" data-segment="' . (int) $index . '">' . wp_kses_post((string) $tab['title']) . '</a></li>';
|
|
if ($selected) {
|
|
$body = self::ajaxpager($instance, 'tab_posts', $widget_id, 1, (string) $index);
|
|
} else {
|
|
// Inactive panes load lazily through the REST client on switch.
|
|
$body = '<div class="widget-ajaxpager" data-widget-items data-widget="tab_posts" data-instance="' . esc_attr($widget_id) . '" data-page="1" data-segment="' . (int) $index . '" aria-live="polite" aria-busy="false"></div>';
|
|
}
|
|
// 显隐交给 .is-loading,内联 display:none 会让 REST 客户端无法展开骨架。
|
|
$body .= '<div class="post_ajax_loader">' . self::placeholder($instance) . '</div>';
|
|
$panels .= '<div class="tab-pane fade' . ($selected ? ' active in' : '') . '" id="' . esc_attr($panel_id . '-' . $visible_index) . '" role="tabpanel" aria-labelledby="' . esc_attr($tab_id) . '">' . $body . '</div>';
|
|
$visible_index++;
|
|
}
|
|
if ($buttons === '') return '';
|
|
return '<div class="widget-tab-post style-' . esc_attr($style) . ($style === 'mini' ? ' posts-mini-lists zib-widget' : ' index-tab relative-h') . '" data-widget="tab_posts" data-instance="' . esc_attr($widget_id) . '"><div class="relative' . ($style === 'card' ? ' mb20' : '') . '"><ul class="list-inline scroll-x no-scrollbar' . ($style === 'mini' ? ' tab-nav-theme' : '') . '" role="tablist">' . $buttons . '</ul></div><div class="tab-content">' . $panels . '</div></div>';
|
|
}
|
|
|
|
private static function term_cards(array $instance): string {
|
|
$term_ids = array_values(array_filter(array_map('absint', (array) ($instance['term_id'] ?? []))));
|
|
if (!$term_ids) {
|
|
return '';
|
|
}
|
|
$terms = get_terms(['taxonomy' => 'category', 'include' => $term_ids, 'orderby' => 'include']);
|
|
if (is_wp_error($terms) || !$terms) {
|
|
return '';
|
|
}
|
|
$pc_row = max(1, (int) ($instance['pc_row'] ?? 2));
|
|
$m_row = max(1, (int) ($instance['m_row'] ?? 2));
|
|
$row_class = 'col-sm-' . (int) (12 / $pc_row);
|
|
$row_class .= $m_row > 1 ? ' col-xs-' . (int) (12 / $m_row) : '';
|
|
$is_row = count($terms) > 1;
|
|
$target_blank = !empty($instance['target_blank']) ? '_blank' : '';
|
|
$animation = (string) ($instance['obs_animation'] ?? '');
|
|
$html = '';
|
|
foreach ($terms as $term) {
|
|
$count = (int) $term->count;
|
|
$name = aksrt_widget_str_cut((string) $term->name, 16);
|
|
$description = aksrt_widget_str_cut((string) $term->description, 24);
|
|
$href = get_term_link($term);
|
|
if (is_wp_error($href)) {
|
|
continue;
|
|
}
|
|
$icon = '<i class="fa fas fa-folder-open mr6" aria-hidden="true"></i>';
|
|
$card = [
|
|
'type' => (string) ($instance['type'] ?? 'style-1'),
|
|
'class' => 'mb10',
|
|
'img' => aksrt_widget_term_cover_url((int) $term->term_id),
|
|
'alt' => $name . '-' . $description,
|
|
'link' => ['url' => esc_url((string) $href), 'target' => $target_blank],
|
|
'text1' => $name,
|
|
'text2' => $description,
|
|
'text3' => $icon . $count . __('篇文章', 'aksrt'),
|
|
'height_scale' => (int) ($instance['height_scale'] ?? 60),
|
|
'mask_opacity' => (int) ($instance['mask_opacity'] ?? 10),
|
|
];
|
|
$type = (string) $card['type'];
|
|
if ($type === 'style-2' || $type === 'style-4') {
|
|
$card['text3'] = '<item data-toggle="tooltip" title="' . esc_attr(sprintf(__('共%d篇文章', 'aksrt'), $count)) . '">' . $icon . $count . '</item>';
|
|
} elseif ($type === 'style-3') {
|
|
$card['text1'] = $icon . $name;
|
|
$card['text3'] = '<i class="fa mr6 fa-file-alt" aria-hidden="true"></i>' . $count . __('篇文章', 'aksrt');
|
|
}
|
|
|
|
$attr = '';
|
|
$col_class = '';
|
|
if ($animation !== '') {
|
|
$col_class .= ' obs-animate ani-' . sanitize_html_class($animation);
|
|
$attr .= ' data-animation="' . esc_attr($animation) . '"';
|
|
if (!empty($instance['animation_repeat'])) {
|
|
$attr .= ' data-animation-repeat="true"';
|
|
}
|
|
}
|
|
if ($is_row) {
|
|
$col_class .= ' ' . $row_class;
|
|
}
|
|
$html .= '<div class="' . esc_attr(trim($col_class)) . '"' . $attr . '>' . aksrt_graphic_card($card) . '</div>';
|
|
}
|
|
return '<div class="' . ($is_row ? 'mb10' : 'mb20') . '">' . ($is_row ? '<div class="row gutters-5">' : '') . $html . ($is_row ? '</div>' : '') . '</div>';
|
|
}
|
|
|
|
private static function term_aggregation(array $instance): string {
|
|
$term_ids = array_values(array_filter(array_map('absint', (array) ($instance['term_id'] ?? []))));
|
|
if (!$term_ids) {
|
|
return '';
|
|
}
|
|
$pc_row = max(1, min(2, (int) ($instance['pc_row'] ?? 2)));
|
|
$row_class = 'col-sm-' . (int) (12 / $pc_row) . ' col-xs-12';
|
|
$is_row = count($term_ids) > 1;
|
|
$animation = (string) ($instance['obs_animation'] ?? '');
|
|
$html = '';
|
|
foreach ($term_ids as $key => $term_id) {
|
|
$attr = '';
|
|
$col_class = '';
|
|
if ($animation !== '') {
|
|
$col_class .= ' obs-animate ani-' . sanitize_html_class($animation);
|
|
$attr .= ' data-animation="' . esc_attr($animation) . '"';
|
|
$attr .= ' style=" --delay: ' . esc_attr((string) ($key * 0.15)) . 's; "';
|
|
if (!empty($instance['animation_repeat'])) {
|
|
$attr .= ' data-animation-repeat="true"';
|
|
}
|
|
}
|
|
if ($is_row) {
|
|
$col_class .= ' ' . $row_class;
|
|
}
|
|
$html .= '<div class="' . esc_attr(trim($col_class)) . '"' . $attr . '>';
|
|
$html .= aksrt_widget_term_aggregation([
|
|
'term_id' => (int) $term_id,
|
|
'target_blank' => !empty($instance['target_blank']),
|
|
'orderby' => (string) ($instance['orderby'] ?? 'modified'),
|
|
'order' => (($instance['order'] ?? 'desc') === 'asc') ? 'ASC' : 'DESC',
|
|
'count' => (int) ($instance['count'] ?? 4),
|
|
]);
|
|
$html .= '</div>';
|
|
}
|
|
return '<div class="clearfix mb6">' . ($is_row ? '<div class="row gutters-5">' : '') . $html . ($is_row ? '</div>' : '') . '</div>';
|
|
}
|
|
|
|
private static function post_pay(array $instance): string {
|
|
$post = get_post();
|
|
if (!$post instanceof \WP_Post || !function_exists('aksrt_get_pay_meta')) {
|
|
return '';
|
|
}
|
|
$meta = aksrt_get_pay_meta($post);
|
|
if (($meta['pay_type'] ?? 'no') === 'no') {
|
|
return '';
|
|
}
|
|
return aksrt_get_paywall_html($post, [
|
|
'layout' => 'widget',
|
|
'theme' => (string) $instance['theme'],
|
|
]);
|
|
}
|
|
}
|