feat(user-center): redesign sidebar and wallet tips
This commit is contained in:
kate522 committed
1 parent
82e71d1bf9
commit
a7f3caec59
24 files changed
+895
-528
No files matched your search
+82
-23
@@ -1,55 +1,114 @@
|
||||
/**
|
||||
* Reward (打赏) — per-user QR modal openers.
|
||||
* On-site wallet tipping modal.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
;(function () {
|
||||
'use strict';
|
||||
|
||||
var cfg = window.aksrtData || {};
|
||||
|
||||
function initReward() {
|
||||
var activeTrigger = null;
|
||||
|
||||
function closeAll() {
|
||||
document.querySelectorAll('.reward-modal.is-open').forEach(function (m) {
|
||||
m.classList.remove('is-open');
|
||||
m.setAttribute('aria-hidden', 'true');
|
||||
document.querySelectorAll('.reward-modal.is-open').forEach(function (modal) {
|
||||
modal.classList.remove('is-open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
});
|
||||
document.body.style.overflow = '';
|
||||
if (activeTrigger) activeTrigger.focus();
|
||||
activeTrigger = null;
|
||||
}
|
||||
|
||||
function openForUser(userId) {
|
||||
var id = String(userId || '');
|
||||
var modal = id
|
||||
? document.getElementById('reward-modal-' + id)
|
||||
: document.querySelector('.reward-modal');
|
||||
function open(trigger) {
|
||||
var userId = trigger.getAttribute('data-user-id') || '';
|
||||
var modal = document.getElementById('reward-modal-' + userId);
|
||||
if (!modal) return;
|
||||
closeAll();
|
||||
activeTrigger = trigger;
|
||||
modal.dataset.postId = trigger.getAttribute('data-post-id') || modal.dataset.postId || '0';
|
||||
modal.classList.add('is-open');
|
||||
modal.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
var first = modal.querySelector('[data-reward-amount], [data-aksrt-reward-custom]');
|
||||
if (first) first.focus();
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-aksrt-reward-open]').forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
openForUser(el.getAttribute('data-user-id') || '');
|
||||
});
|
||||
});
|
||||
document.addEventListener('click', function (event) {
|
||||
var opener = event.target.closest('[data-aksrt-reward-open]');
|
||||
if (opener) {
|
||||
event.preventDefault();
|
||||
open(opener);
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-aksrt-reward-close]').forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (event.target.closest('[data-aksrt-reward-close]')) {
|
||||
event.preventDefault();
|
||||
closeAll();
|
||||
return;
|
||||
}
|
||||
|
||||
var amountButton = event.target.closest('[data-reward-amount]');
|
||||
if (amountButton) {
|
||||
var modal = amountButton.closest('.reward-modal');
|
||||
modal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
|
||||
button.classList.toggle('is-active', button === amountButton);
|
||||
});
|
||||
var custom = modal.querySelector('[data-aksrt-reward-custom]');
|
||||
if (custom) custom.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var submit = event.target.closest('[data-aksrt-reward-submit]');
|
||||
if (!submit || submit.disabled) return;
|
||||
var tipModal = submit.closest('.reward-modal');
|
||||
var message = tipModal.querySelector('[data-aksrt-reward-message]');
|
||||
var customInput = tipModal.querySelector('[data-aksrt-reward-custom]');
|
||||
var selected = tipModal.querySelector('[data-reward-amount].is-active');
|
||||
var amount = customInput && customInput.value ? customInput.value : (selected ? selected.dataset.rewardAmount : '');
|
||||
|
||||
submit.disabled = true;
|
||||
submit.textContent = '赞赏中…';
|
||||
if (message) message.textContent = '';
|
||||
|
||||
var body = new URLSearchParams();
|
||||
body.set('action', 'aksrt_submit_tip');
|
||||
body.set('nonce', cfg.nonce || '');
|
||||
body.set('recipient_id', tipModal.dataset.userId || '');
|
||||
body.set('post_id', tipModal.dataset.postId || '0');
|
||||
body.set('amount', amount);
|
||||
|
||||
fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
|
||||
body: body.toString()
|
||||
}).then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (response) {
|
||||
var text = response && response.data && response.data.message ? response.data.message : '赞赏失败';
|
||||
if (response && response.success) {
|
||||
if (message) message.textContent = text;
|
||||
setTimeout(closeAll, 900);
|
||||
} else if (message) {
|
||||
message.textContent = text;
|
||||
}
|
||||
}).catch(function () {
|
||||
if (message) message.textContent = '网络错误，请稍后重试';
|
||||
}).finally(function () {
|
||||
submit.disabled = false;
|
||||
submit.textContent = '余额赞赏';
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') closeAll();
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Escape') closeAll();
|
||||
});
|
||||
}
|
||||
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
|
||||
window.AksrtFrontend.register('aksrt-reward', function () {
|
||||
initReward();
|
||||
});
|
||||
window.AksrtFrontend.register('aksrt-reward', initReward);
|
||||
} else if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initReward);
|
||||
} else {
|
||||
|
||||
@@ -121,80 +121,6 @@
|
||||
|
||||
/* ==================== 个人信息保存 ==================== */
|
||||
|
||||
/* ==================== 打赏收款码上传 ==================== */
|
||||
function initRewardQrUpload() {
|
||||
var form = document.getElementById('profile-form');
|
||||
if (!form) return;
|
||||
var nonceInput = form.querySelector('input[name="_profile_nonce"]');
|
||||
var nonce = nonceInput ? nonceInput.value : '';
|
||||
|
||||
function setPreview(kind, url) {
|
||||
var box = form.querySelector('[data-reward-preview="' + kind + '"]');
|
||||
if (!box) return;
|
||||
if (url) {
|
||||
box.innerHTML = '<img src="' + url + '" alt="" />';
|
||||
} else {
|
||||
box.innerHTML = '<span class="muted-2-color em09">未上传</span>';
|
||||
}
|
||||
}
|
||||
|
||||
form.querySelectorAll('[data-reward-upload]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var kind = btn.getAttribute('data-reward-upload');
|
||||
var fileInput = form.querySelector('input[data-reward-kind="' + kind + '"]');
|
||||
if (fileInput) fileInput.click();
|
||||
});
|
||||
});
|
||||
|
||||
form.querySelectorAll('[data-reward-clear]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var kind = btn.getAttribute('data-reward-clear');
|
||||
var hidden = form.querySelector('#rewards-' + kind);
|
||||
var fileInput = form.querySelector('input[data-reward-kind="' + kind + '"]');
|
||||
if (hidden) hidden.value = '';
|
||||
if (fileInput) fileInput.value = '';
|
||||
setPreview(kind, '');
|
||||
});
|
||||
});
|
||||
|
||||
form.querySelectorAll('input[data-reward-kind]').forEach(function (input) {
|
||||
input.addEventListener('change', function () {
|
||||
var kind = input.getAttribute('data-reward-kind');
|
||||
var file = input.files && input.files[0];
|
||||
if (!file || !kind) return;
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
showToast('图片不能超过 2MB');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
var body = new FormData();
|
||||
body.append('action', 'aksrt_upload_reward_qr');
|
||||
body.append('_profile_nonce', nonce);
|
||||
body.append('kind', kind);
|
||||
body.append('file', file);
|
||||
showToast(i18n.saving || '上传中…');
|
||||
fetch(ajaxUrl, { method: 'POST', body: body, credentials: 'same-origin' })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (res) {
|
||||
if (res && res.success && res.data) {
|
||||
var hidden = form.querySelector('#rewards-' + kind);
|
||||
if (hidden) hidden.value = String(res.data.id || '');
|
||||
setPreview(kind, res.data.url || '');
|
||||
showToast(res.data.message || '上传成功');
|
||||
} else {
|
||||
showToast((res && res.data && res.data.message) || '上传失败');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
showToast(i18n.networkError || '网络错误');
|
||||
})
|
||||
.finally(function () {
|
||||
input.value = '';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function initProfileForm() {
|
||||
var form = document.getElementById('profile-form');
|
||||
@@ -752,7 +678,6 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initDashboardNavigation();
|
||||
initProfileForm();
|
||||
initRewardQrUpload();
|
||||
initUnfavorite();
|
||||
initNotifications();
|
||||
initSettings();
|
||||
@@ -760,7 +685,6 @@
|
||||
} else {
|
||||
initDashboardNavigation();
|
||||
initProfileForm();
|
||||
initRewardQrUpload();
|
||||
initUnfavorite();
|
||||
initNotifications();
|
||||
initSettings();
|
||||
|
||||
Reference in new issue
Block a user