wordpress-theme-aksrt/assets/js/reward.js

/**
 * On-site wallet tipping content for the shared modal runtime.
 *
 * @package AKSRT
 */
;(function (window, document) {
  'use strict';

  var cfg = window.aksrtData || {};
  var titleSequence = 0;

  function rewardModal(target) {
    return target.closest('.aksrt-modal-runtime.aksrt-reward-modal');
  }

  function rewardTemplate(modal) {
    return modal ? document.getElementById(modal.dataset.templateId || '') : null;
  }

  function operationKey(template) {
    if (!template.dataset.aksrtOperationKey) {
      template.dataset.aksrtOperationKey = window.AksrtRequest.createIdempotencyKey();
    }
    return template.dataset.aksrtOperationKey;
  }

  function openReward(trigger) {
    var runtime = window.AksrtModalRuntime;
    if (!runtime || !window.AksrtRequest) {
      if (trigger.dataset.aksrtRewardWaiting !== '1') {
        trigger.dataset.aksrtRewardWaiting = '1';
        document.addEventListener('aksrt:modal-runtime:ready', function () {
          delete trigger.dataset.aksrtRewardWaiting;
          if (document.contains(trigger)) openReward(trigger);
        }, { once: true });
      }
      return;
    }

    var templateId = trigger.getAttribute('data-template-id') || '';
    var template = document.getElementById(templateId);
    if (!template || !template.content) return;

    var shell = runtime.open({
      html: template.innerHTML,
      className: 'aksrt-reward-modal modal-mini full-sm',
      mobileBottom: true,
      kind: 'generic',
    });
    shell.dataset.templateId = template.id;
    shell.dataset.userId = trigger.getAttribute('data-user-id') || template.dataset.userId || '';
    shell.dataset.postId = trigger.getAttribute('data-post-id') || template.dataset.postId || '0';
    var title = shell.querySelector('.aksrt-reward__title');
    if (title) {
      title.id = 'aksrt-reward-title-' + (++titleSequence);
      shell.setAttribute('aria-labelledby', title.id);
    }

    var initialFocus = shell.querySelector('[data-reward-amount].is-active, [data-aksrt-reward-custom]');
    if (initialFocus) initialFocus.focus();
  }

  document.addEventListener('click', function (event) {
    var opener = event.target.closest('[data-aksrt-reward-open]');
    if (opener) {
      event.preventDefault();
      openReward(opener);
      return;
    }

    var amountButton = event.target.closest('[data-reward-amount]');
    if (amountButton) {
      var amountModal = rewardModal(amountButton);
      if (!amountModal) return;
      var amountTemplate = rewardTemplate(amountModal);
      if (amountTemplate) delete amountTemplate.dataset.aksrtOperationKey;
      amountModal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
        var isActive = button === amountButton;
        button.classList.toggle('is-active', isActive);
        button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
      });
      var customInput = amountModal.querySelector('[data-aksrt-reward-custom]');
      if (customInput) customInput.value = '';
      return;
    }

    var submit = event.target.closest('[data-aksrt-reward-submit]');
    if (!submit || submit.disabled) return;

    var modal = rewardModal(submit);
    var template = rewardTemplate(modal);
    var runtime = window.AksrtModalRuntime;
    if (!modal || !template || !runtime) return;

    var message = modal.querySelector('[data-aksrt-reward-message]');
    var custom = modal.querySelector('[data-aksrt-reward-custom]');
    var selected = modal.querySelector('[data-reward-amount].is-active');
    var amount = custom && custom.value ? custom.value : (selected ? selected.dataset.rewardAmount : '');
    var key;
    try {
      key = operationKey(template);
    } catch (error) {
      if (message) message.textContent = error.message || '无法创建安全请求，请稍后重试';
      return;
    }

    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', modal.dataset.userId || '');
    body.set('post_id', modal.dataset.postId || '0');
    body.set('amount', amount);
    var succeeded = false;

    window.fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'Idempotency-Key': key,
      },
      body: body.toString(),
    }).then(function (response) {
      return response.json();
    }).then(function (response) {
      if (runtime.getActive() !== modal) return;
      var text = response && response.data && response.data.message ? response.data.message : '赞赏失败';
      if (response && response.success) {
        succeeded = true;
        delete template.dataset.aksrtOperationKey;
        if (message) message.textContent = text;
        window.setTimeout(function () {
          if (runtime.getActive() === modal) runtime.close('success');
        }, 900);
      } else if (message) {
        message.textContent = text;
      }
    }).catch(function () {
      if (runtime.getActive() === modal && message) message.textContent = '网络错误，请稍后重试';
    }).finally(function () {
      submit.disabled = succeeded;
      submit.textContent = '余额赞赏';
    });
  });

  document.addEventListener('input', function (event) {
    if (!event.target.matches('[data-aksrt-reward-custom]')) return;
    var modal = rewardModal(event.target);
    var template = rewardTemplate(modal);
    if (template) delete template.dataset.aksrtOperationKey;
    if (!modal) return;

    var hasCustomAmount = event.target.value !== '';
    var firstAmount = modal.querySelector('[data-reward-amount]');
    modal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
      var isActive = hasCustomAmount ? false : button === firstAmount;
      button.classList.toggle('is-active', isActive);
      button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
    });
  });
})(window, document);