Add follow CTA to after-box author card, wrap bar label in span, and harden follow.js label updates when span is missing.
121 lines
3.9 KiB
JavaScript
121 lines
3.9 KiB
JavaScript
/**
|
|
* AKSRT Follow — 前台关注交互
|
|
*
|
|
* 监听 [data-aksrt-follow] 按钮点击,切换关注状态。
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
var API_ROOT = (window.aksrtData && window.aksrtData.apiUrl) || '/wp-json/aksrt/v1';
|
|
var NONCE = (window.aksrtData && window.aksrtData.restNonce) || '';
|
|
|
|
function initFollowButtons() {
|
|
document.addEventListener('click', function (e) {
|
|
var btn = e.target.closest('[data-aksrt-follow]');
|
|
if (!btn) return;
|
|
e.preventDefault();
|
|
|
|
var targetUserId = parseInt(btn.getAttribute('data-aksrt-follow'));
|
|
if (!targetUserId) return;
|
|
|
|
btn.disabled = true;
|
|
|
|
fetch(API_ROOT + '/follow/toggle', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-WP-Nonce': NONCE,
|
|
},
|
|
body: JSON.stringify({ target_user_id: targetUserId }),
|
|
})
|
|
.then(function (res) { return res.json(); })
|
|
.then(function (result) {
|
|
if (result.success && result.data) {
|
|
var isFollowing = result.data.is_following;
|
|
updateFollowButton(btn, isFollowing, result.data.follower_count);
|
|
} else {
|
|
showToast(result.message || '操作失败', 'error');
|
|
}
|
|
})
|
|
.catch(function () {
|
|
showToast('网络错误,请重试', 'error');
|
|
})
|
|
.finally(function () {
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
|
|
// Check initial follow status for all follow buttons
|
|
document.querySelectorAll('[data-aksrt-follow]').forEach(function (btn) {
|
|
var targetUserId = parseInt(btn.getAttribute('data-aksrt-follow'));
|
|
if (!targetUserId) return;
|
|
|
|
fetch(API_ROOT + '/follow/status?target_user_id=' + targetUserId, {
|
|
headers: { 'X-WP-Nonce': NONCE },
|
|
})
|
|
.then(function (res) { return res.json(); })
|
|
.then(function (result) {
|
|
if (result.success && result.data) {
|
|
updateFollowButton(btn, result.data.is_following, result.data.follower_count);
|
|
}
|
|
})
|
|
.catch(function () { /* silent */ });
|
|
});
|
|
}
|
|
|
|
function updateFollowButton(btn, isFollowing, count) {
|
|
var icon = btn.querySelector('i');
|
|
var text = btn.querySelector('span');
|
|
function setLabel(label) {
|
|
if (text) {
|
|
text.textContent = label;
|
|
return;
|
|
}
|
|
// Fallback when markup has bare text nodes next to the icon.
|
|
var nodes = Array.prototype.slice.call(btn.childNodes);
|
|
var textNode = nodes.filter(function (n) { return n.nodeType === 3 && n.textContent.trim() !== ''; })[0];
|
|
if (textNode) {
|
|
textNode.textContent = ' ' + label + ' ';
|
|
}
|
|
}
|
|
|
|
if (isFollowing) {
|
|
btn.classList.add('is-following');
|
|
if (icon) icon.className = 'fas fa-heart';
|
|
setLabel('已关注');
|
|
btn.title = '点击取消关注';
|
|
} else {
|
|
btn.classList.remove('is-following');
|
|
if (icon) icon.className = 'far fa-heart';
|
|
setLabel('关注');
|
|
btn.title = '关注该用户';
|
|
}
|
|
|
|
// Update follower count display if exists
|
|
var countEl = document.querySelector('.aksrt-user-home__stat-value[data-followers]');
|
|
if (countEl && count !== undefined) {
|
|
countEl.textContent = count;
|
|
}
|
|
}
|
|
|
|
function showToast(msg, type) {
|
|
var toast = document.createElement('div');
|
|
toast.textContent = msg;
|
|
toast.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:6px;color:#fff;font-size:14px;z-index:10000;transition:opacity 0.3s;';
|
|
toast.style.background = type === 'error' ? '#e74c3c' : '#27ae60';
|
|
document.body.appendChild(toast);
|
|
setTimeout(function () {
|
|
toast.style.opacity = '0';
|
|
setTimeout(function () { toast.remove(); }, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initFollowButtons);
|
|
} else {
|
|
initFollowButtons();
|
|
}
|
|
})();
|