feat(widgets): shared aksrt_graphic_card + author minicard helpers
Unlock term cover cards and user-list minicards with zibll-parity graphic (style-1..4, lazy, mask, height_scale) and author-minicard (follow + identity chips + bio) helpers.
This commit is contained in:
@@ -48,6 +48,7 @@ require_once AKSRT_DIR . '/inc/helpers/aksrt-header-userbox.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-header-menu-buttons.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-runtime-win.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-identity.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-graphic-card.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-user-card.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/aksrt-rewards.php';
|
||||
require_once AKSRT_DIR . '/inc/helpers/menu-decoration.php';
|
||||
|
||||
@@ -0,0 +1,276 @@
|
||||
<?php
|
||||
/**
|
||||
* Shared graphic / cover card (zibll zib_graphic_card parity).
|
||||
*
|
||||
* Used by term cards, cover cards, term aggregation thumbs, etc.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
if (!function_exists('aksrt_graphic_card')) :
|
||||
/**
|
||||
* Render a graphic cover card.
|
||||
*
|
||||
* @param array<string,mixed> $args {
|
||||
* @type string $type style-1|style-2|style-3|style-4|''.
|
||||
* @type string $class Extra classes on .graphic.
|
||||
* @type string $img Image URL.
|
||||
* @type string $video Optional video URL (desktop).
|
||||
* @type string $alt Image alt.
|
||||
* @type array{url?:string,target?:string}|string $link Link.
|
||||
* @type string $text1 Primary text.
|
||||
* @type string $text2 Secondary text.
|
||||
* @type string $text3 Tertiary / badge text (HTML allowed for icon+count).
|
||||
* @type string $more Extra absolute HTML (badge etc).
|
||||
* @type bool $lazy Use aksrt-lazy data-src.
|
||||
* @type int|float $height_scale Padding-bottom % (0 = default CSS).
|
||||
* @type int|float $mask_opacity 0–100 overlay opacity.
|
||||
* @type string $hide pc|m|'' hide on device.
|
||||
* }
|
||||
* @param bool $echo Echo instead of return.
|
||||
*/
|
||||
function aksrt_graphic_card(array $args = [], bool $echo = false): string {
|
||||
$defaults = [
|
||||
'type' => '',
|
||||
'hide' => '',
|
||||
'class' => 'mb10',
|
||||
'img' => '',
|
||||
'video' => '',
|
||||
'alt' => __('图片', 'aksrt'),
|
||||
'link' => [
|
||||
'url' => '',
|
||||
'target' => '',
|
||||
],
|
||||
'text1' => '',
|
||||
'text2' => '',
|
||||
'text3' => '',
|
||||
'more' => '',
|
||||
'lazy' => true,
|
||||
'height_scale' => 0,
|
||||
'mask_opacity' => 0,
|
||||
];
|
||||
$args = wp_parse_args($args, $defaults);
|
||||
|
||||
$img_url = trim((string) $args['img']);
|
||||
$video_url = trim((string) $args['video']);
|
||||
if ($img_url === '' && $video_url === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Device visibility.
|
||||
$hide = sanitize_key((string) $args['hide']);
|
||||
if ($hide === 'pc' || $hide === 'm') {
|
||||
$is_mobile = function_exists('wp_is_mobile') ? wp_is_mobile() : false;
|
||||
if ((!$is_mobile && $hide === 'pc') || ($is_mobile && $hide === 'm')) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
$type = sanitize_key((string) $args['type']);
|
||||
if ($type !== '' && !in_array($type, ['style-1', 'style-2', 'style-3', 'style-4'], true)) {
|
||||
// Accept bare "1"–"4".
|
||||
if (preg_match('/^[1-4]$/', $type)) {
|
||||
$type = 'style-' . $type;
|
||||
} else {
|
||||
$type = '';
|
||||
}
|
||||
}
|
||||
|
||||
$link = $args['link'];
|
||||
if (is_string($link)) {
|
||||
$link = ['url' => $link, 'target' => ''];
|
||||
}
|
||||
if (!is_array($link)) {
|
||||
$link = ['url' => '', 'target' => ''];
|
||||
}
|
||||
$link_url = esc_url(trim((string) ($link['url'] ?? '')));
|
||||
$link_target = sanitize_text_field((string) ($link['target'] ?? ''));
|
||||
|
||||
$lazy = !empty($args['lazy']);
|
||||
$placeholder = get_template_directory_uri() . '/assets/img/placeholder.svg';
|
||||
$media = '';
|
||||
if ($video_url !== '' && !(function_exists('wp_is_mobile') && wp_is_mobile())) {
|
||||
$poster = $img_url !== '' ? ' poster="' . esc_url($img_url) . '"' : '';
|
||||
if ($lazy) {
|
||||
$media = '<video autoplay loop muted playsinline class="fit-cover aksrt-lazy lazyload" data-src="' . esc_url($video_url) . '" src=""' . $poster . '></video>';
|
||||
} else {
|
||||
$media = '<video autoplay loop muted playsinline class="fit-cover" src="' . esc_url($video_url) . '"' . $poster . '></video>';
|
||||
}
|
||||
} elseif ($img_url !== '') {
|
||||
$alt = (string) ($args['alt'] !== '' ? $args['alt'] : __('图片', 'aksrt'));
|
||||
if ($lazy) {
|
||||
$media = '<img class="fit-cover aksrt-lazy lazyload" data-src="' . esc_url($img_url) . '" src="' . esc_url($placeholder) . '" alt="' . esc_attr($alt) . '" loading="lazy" />';
|
||||
} else {
|
||||
$media = '<img class="fit-cover" src="' . esc_url($img_url) . '" alt="' . esc_attr($alt) . '" loading="lazy" />';
|
||||
}
|
||||
}
|
||||
if ($media === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
$mask_opacity = max(0, min(100, (int) $args['mask_opacity']));
|
||||
$mask = $mask_opacity > 0
|
||||
? '<div class="absolute graphic-mask" style="opacity:' . esc_attr((string) ($mask_opacity / 100)) . '"></div>'
|
||||
: '';
|
||||
|
||||
// text1/2/3 may contain small trusted HTML (icons); sanitize lightly.
|
||||
$text1 = (string) $args['text1'];
|
||||
$text2 = (string) $args['text2'];
|
||||
$text3 = (string) $args['text3'];
|
||||
$allow = [
|
||||
'i' => ['class' => true, 'aria-hidden' => true],
|
||||
'span' => ['class' => true, 'title' => true],
|
||||
'item' => ['class' => true, 'data-toggle' => true, 'title' => true],
|
||||
'b' => [],
|
||||
'strong'=> [],
|
||||
'em' => [],
|
||||
'badge' => ['class' => true],
|
||||
];
|
||||
$text1_safe = $text1 !== '' ? wp_kses($text1, $allow) : '';
|
||||
$text2_safe = $text2 !== '' ? wp_kses($text2, $allow) : '';
|
||||
$text3_safe = $text3 !== '' ? wp_kses($text3, $allow) : '';
|
||||
$more = (string) $args['more'];
|
||||
$more_safe = $more !== '' ? wp_kses($more, array_merge($allow, [
|
||||
'div' => ['class' => true, 'style' => true],
|
||||
'badge' => ['class' => true],
|
||||
])) : '';
|
||||
|
||||
$text = '';
|
||||
if ($type === 'style-2') {
|
||||
$text = '<div class="abs-center conter-conter graphic-text">';
|
||||
$text .= $text1_safe !== '' ? '<div class="title-h-center"><b>' . $text1_safe . '</b></div>' : '';
|
||||
$text .= $text2_safe !== '' ? '<div class="em09 opacity8">' . $text2_safe . '</div>' : '';
|
||||
$text .= '</div>';
|
||||
if ($text3_safe !== '') {
|
||||
$text .= '<div class="abs-center right-top"><badge class="b-black opacity8">' . $text3_safe . '</badge></div>';
|
||||
}
|
||||
} elseif ($type === 'style-3') {
|
||||
$text = $text1_safe !== '' ? '<div class="abs-center left-bottom graphic-text text-ellipsis">' . $text1_safe . '</div>' : '';
|
||||
$text .= '<div class="abs-center left-bottom graphic-text">';
|
||||
$text .= $text2_safe !== '' ? '<div class="em09 opacity8">' . $text2_safe . '</div>' : '';
|
||||
$text .= $text3_safe !== '' ? '<div class="px12 opacity8 mt6">' . $text3_safe . '</div>' : '';
|
||||
$text .= '</div>';
|
||||
} elseif ($type === 'style-4') {
|
||||
if ($text3_safe !== '') {
|
||||
$text = '<div class="abs-center right-top"><badge class="b-black opacity8 mr6 mt6">' . $text3_safe . '</badge></div>';
|
||||
}
|
||||
} else {
|
||||
// style-1 / default.
|
||||
$inner = $text1_safe !== '' ? '<div class="title-h-left"><b>' . $text1_safe . '</b></div>' : '';
|
||||
$inner .= $text3_safe !== '' ? '<div class="em09 opacity8">' . $text3_safe . '</div>' : '';
|
||||
$inner .= $text2_safe !== '' ? '<div class="em09">' . $text2_safe . '</div>' : '';
|
||||
$text = $inner !== '' ? '<div class="abs-center left-bottom graphic-text">' . $inner . '</div>' : '';
|
||||
}
|
||||
$text .= $more_safe;
|
||||
|
||||
$class = trim('graphic hover-zoom-img ' . (string) $args['class'] . ' ' . $type);
|
||||
$height_scale = max(0, (int) $args['height_scale']);
|
||||
$scale_attr = $height_scale > 0
|
||||
? ' style="padding-bottom:' . esc_attr((string) $height_scale) . '%!important;"'
|
||||
: '';
|
||||
|
||||
$html = '';
|
||||
if ($link_url !== '') {
|
||||
$tgt = $link_target !== '' ? ' target="' . esc_attr($link_target) . '" rel="noopener noreferrer"' : '';
|
||||
$html .= '<a href="' . esc_url($link_url) . '"' . $tgt . '>';
|
||||
}
|
||||
if ($type === 'style-4') {
|
||||
$html .= '<div class="main-shadow radius8 main-bg mb10">';
|
||||
}
|
||||
$html .= '<div class="' . esc_attr($class) . '"' . $scale_attr . '>';
|
||||
$html .= $media;
|
||||
$html .= $mask;
|
||||
$html .= $text;
|
||||
if ($type === 'style-4') {
|
||||
$html .= '</div>'; // close .graphic early for style-4 body.
|
||||
$html .= '<div class="padding-10">';
|
||||
$html .= $text1_safe !== '' ? '<div class="text-ellipsis">' . $text1_safe . '</div>' : '';
|
||||
$html .= $text2_safe !== '' ? '<div class="muted-2-color em09 text-ellipsis mt6">' . $text2_safe . '</div>' : '';
|
||||
$html .= '</div></div>'; // padding + main-shadow
|
||||
} else {
|
||||
$html .= '</div>';
|
||||
}
|
||||
if ($link_url !== '') {
|
||||
$html .= '</a>';
|
||||
}
|
||||
|
||||
if ($echo) {
|
||||
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
return '';
|
||||
}
|
||||
return $html;
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('aksrt_author_minicard')) :
|
||||
/**
|
||||
* Author mini card for user lists (zibll zib_author_card).
|
||||
*
|
||||
* @param int $user_id
|
||||
* @param string $class
|
||||
* @param bool $blur_bg
|
||||
*/
|
||||
function aksrt_author_minicard(int $user_id, string $class = '', bool $blur_bg = false): string {
|
||||
if ($user_id <= 0) {
|
||||
return '';
|
||||
}
|
||||
$user = get_userdata($user_id);
|
||||
if (!$user) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$avatar_url = function_exists('aksrt_get_avatar_url')
|
||||
? aksrt_get_avatar_url($user_id, ['size' => 96])
|
||||
: get_avatar_url($user_id, ['size' => 96]);
|
||||
$home = function_exists('aksrt_get_user_home_url')
|
||||
? aksrt_get_user_home_url($user_id)
|
||||
: get_author_posts_url($user_id);
|
||||
|
||||
$avatar_box = '<div class="avatar-img"><a href="' . esc_url($home) . '"><img class="avatar" src="' . esc_url($avatar_url) . '" alt="" loading="lazy" width="42" height="42" /></a></div>';
|
||||
|
||||
$name = function_exists('aksrt_get_user_name')
|
||||
? aksrt_get_user_name([
|
||||
'id' => $user_id,
|
||||
'class' => 'flex ac flex1',
|
||||
'follow' => false,
|
||||
'medal' => true,
|
||||
'auth' => true,
|
||||
'level' => true,
|
||||
])
|
||||
: '<a href="' . esc_url($home) . '">' . esc_html($user->display_name) . '</a>';
|
||||
|
||||
// Follow control (separate from name, zibll places both in dt).
|
||||
$follow = '';
|
||||
$current = get_current_user_id();
|
||||
if ($current !== $user_id) {
|
||||
if (is_user_logged_in()) {
|
||||
$follow = '<button type="button" class="focus-color px12 ml10 follow flex0 but" data-aksrt-follow="' . (int) $user_id . '"><i class="fa fa-heart em09" aria-hidden="true"></i> ' . esc_html__('关注', 'aksrt') . '</button>';
|
||||
} else {
|
||||
$login = function_exists('aksrt_get_login_url') ? aksrt_get_login_url() : wp_login_url();
|
||||
$follow = '<a class="focus-color px12 ml10 follow flex0 but" href="' . esc_url($login) . '"><i class="fa fa-heart em09" aria-hidden="true"></i> ' . esc_html__('关注', 'aksrt') . '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
$desc = trim((string) get_user_meta($user_id, 'description', true));
|
||||
if ($desc === '') {
|
||||
$desc = __('这家伙很懒,什么都没有写…', 'aksrt');
|
||||
}
|
||||
|
||||
$blur = '';
|
||||
if ($blur_bg) {
|
||||
$blur = '<div class="abs-blur-bg blur"><img src="' . esc_url($avatar_url) . '" alt="" loading="lazy" /></div>';
|
||||
}
|
||||
|
||||
return '<div class="author-minicard radius8 relative-h ' . esc_attr($class) . '">'
|
||||
. $blur
|
||||
. '<ul class="list-inline relative">'
|
||||
. '<li>' . $avatar_box . '</li>'
|
||||
. '<li><dl>'
|
||||
. '<dt class="flex ac">' . $name . $follow . '</dt>'
|
||||
. '<dd class="mt6 em09 muted-color text-ellipsis">' . esc_html($desc) . '</dd>'
|
||||
. '</dl></li>'
|
||||
. '</ul></div>';
|
||||
}
|
||||
endif;
|
||||
Reference in New Issue
Block a user