wordpress-theme-aksrt/src/WidgetSystem/Renderers/ContentRenderer.php

<?php

namespace Jio\WidgetSystem\Renderers;

use Jio\WidgetSystem\PostRenderer;
use Jio\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 {
		if (in_array($slug, ['tab_posts', 'posts', 'oneline_posts'], true)) {
			$instance['style'] = PostRenderer::style($instance, $slug);
		}
		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('jio_widget_hot_posts') ? jio_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 = $instance['style'];
		if ($slug === 'oneline_posts') {
			// Reference parity: the swiper row is fully rendered server-side.
			$query = \Jio\WidgetSystem\PostQuery::build(array_merge($instance, ['paginate' => '']), 1, []);
			return \Jio\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) . '"';
		}
		$lazy = ($instance['load_mode'] ?? '') === 'ajax';
		$loader = '<div class="post_ajax_loader' . ($lazy ? ' is-loading' : '') . '" role="status" aria-label="' . esc_attr__('正在加载', 'jio') . '">' . self::placeholder($instance) . '</div>';
		if ($lazy) {
			// lazySizes reveals the pager; the widget client owns its request.
			return '<div class="widget-ajaxpager lazyload" data-widget-lazy' . $attrs . ' aria-live="polite" aria-busy="true">' . $loader . '</div>';
		}
		$payload = PostRenderer::payload($instance, $slug, $page, $segment);
		// The loader must live inside the pager: the REST client in frontend.js
		// resolves it with container.querySelector('.post_ajax_loader'), so a
		// sibling node would never be found and the skeleton would stay shut.
		return '<div class="widget-ajaxpager"' . $attrs . ' data-loaded="1" aria-live="polite" aria-busy="false">' . $payload['html'] . $payload['paginate_html'] . $loader . '</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 jio_render_placeholder(
				in_array('show_thumb', $mini_opt, true) ? 'mini_thumb' : 'mini',
				$count
			);
		}
		return jio_render_placeholder($style === 'card' ? 'card' : 'list', $count);
	}

	private static function tab_posts(array $instance, array $context): string {
		$style = $instance['style'];
		$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 = 'jio-tab-panel-' . $key;
		$visible_index = 0;
		foreach ($tabs as $index => $tab) {
			if (!is_array($tab) || trim((string) ($tab['title'] ?? '')) === '') continue;
			$tab_id = 'jio-tab-' . $key . '-' . $visible_index;
			$selected = $visible_index === 0;
			$buttons .= '<li class="' . ($selected ? 'active' : '') . '"><a 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') . '" tabindex="' . ($selected ? '0' : '-1') . '" 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,
				// so the pane ships pre-filled with the skeleton. 显隐交给
				// .is-loading，内联 display:none 会让 REST 客户端无法展开骨架。
				$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 class="post_ajax_loader" role="status" aria-label="' . esc_attr__('正在加载', 'jio') . '">' . self::placeholder($instance) . '</div></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 = jio_widget_str_cut((string) $term->name, 16);
			$description = jio_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'          => jio_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 . __('篇文章', 'jio'),
				'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篇文章', 'jio'), $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 . __('篇文章', 'jio');
			}

			$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 . '>' . jio_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) {
			$card = jio_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),
			]);
			if ($card === '') {
				continue;
			}
			$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 .= $card;
			$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('jio_get_pay_meta')) {
			return '';
		}
		$meta = jio_get_pay_meta($post);
		if (($meta['pay_type'] ?? 'no') === 'no') {
			return '';
		}
		return jio_get_paywall_html($post, [
			'layout' => 'widget',
			'theme'  => (string) $instance['theme'],
		]);
	}
}