feat(user-center): redesign sidebar and wallet tips

assets/js/reward.js

@@ -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 {