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

/**
 * AKSRT Public User Home runtime
 *
 * Handles public user-home dashboard tabs and cover uploads.
 * Loaded on /user/{nicename}/ (author archives 301-redirect here).
 *
 * @package AKSRT
 */

/* global aksrtAuthorPage */

(function () {
  'use strict';

  function notify(message, type) {
    if (!message) return;
    if (typeof window.AksrtToast === 'function') {
      window.AksrtToast(message, type || 'info');
      return;
    }
    if (typeof window.showToast === 'function') {
      window.showToast(message, type || 'info');
      return;
    }
    if (typeof window.aksrtToast === 'function') {
      window.aksrtToast(message, type || 'info');
      return;
    }
    window.alert(message);
  }

  function updateTabUrl(root, name, defaultTab) {
    if (!window.history || typeof window.history.replaceState !== 'function') return;
    var url = new URL(window.location.href);
    if (!name || name === defaultTab) {
      url.searchParams.delete('tab');
    } else {
      url.searchParams.set('tab', name);
    }
    window.history.replaceState({}, '', url.toString());
  }

  function initPublicDashboards() {
    document.querySelectorAll('.dashboard--public').forEach(function (root) {
      if (root.dataset.aksrtAuthorBound === '1') return;
      root.dataset.aksrtAuthorBound = '1';

      var tabs = Array.prototype.slice.call(root.querySelectorAll('.dashboard-tabs [data-tab]'));
      if (!tabs.length) return;

      var defaultTab = root.dataset.defaultTab || tabs[0].getAttribute('data-tab') || 'posts';
      var panels = {};

      tabs.forEach(function (tab) {
        var name = tab.getAttribute('data-tab');
        var panel = root.querySelector('#panel-' + name);
        if (name && panel) {
          panels[name] = {
            tab: tab,
            panel: panel
          };
        }
      });

      function switchTo(name, syncUrl) {
        if (!panels[name]) {
          name = defaultTab;
        }

        Object.keys(panels).forEach(function (key) {
          var active = key === name;
          panels[key].tab.classList.toggle('is-active', active);
          panels[key].tab.setAttribute('aria-selected', active ? 'true' : 'false');
          panels[key].panel.classList.toggle('is-active', active);
          if (active) {
            panels[key].panel.removeAttribute('hidden');
          } else {
            panels[key].panel.setAttribute('hidden', '');
          }
        });

        if (syncUrl) {
          updateTabUrl(root, name, defaultTab);
        }
      }

      function resolveInitialTab() {
        var url = new URL(window.location.href);
        return url.searchParams.get('tab') || defaultTab;
      }

      tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
          switchTo(tab.getAttribute('data-tab'), true);
        });
      });

      switchTo(resolveInitialTab(), false);
    });
  }

  function initCoverUpload() {
    var cfg = window.aksrtAuthorPage || {};
    var upload = cfg.coverUpload || null;
    if (!upload || !upload.enabled || !upload.restUrl) return;

    var btn = document.getElementById(upload.buttonId || 'aksrt-upload-bg-btn');
    var input = document.getElementById(upload.inputId || 'aksrt-bg-file-input');
    if (!btn || !input || btn.dataset.aksrtCoverBound === '1') return;

    btn.dataset.aksrtCoverBound = '1';

    var label = btn.querySelector('span');
    var idleText = upload.idleText || (label ? label.textContent : '');
    var loadingText = upload.loadingText || idleText;

    function setBusy(busy) {
      btn.disabled = !!busy;
      if (label) {
        label.textContent = busy ? loadingText : idleText;
      }
    }

    function resetImage(previousUrl) {
      var image = document.getElementById(upload.imageId || 'aksrt-cover-img');
      if (!image) return;
      if (previousUrl) {
        image.src = previousUrl;
        return;
      }
      if (upload.fallbackImage) {
        image.src = upload.fallbackImage;
      }
    }

    function applyImage(nextUrl) {
      var image = document.getElementById(upload.imageId || 'aksrt-cover-img');
      if (image && nextUrl) {
        image.src = nextUrl;
      }
    }

    btn.addEventListener('click', function () {
      input.click();
    });

    input.addEventListener('change', function () {
      var file = input.files && input.files[0];
      if (!file) return;

      if (upload.maxSize && file.size > upload.maxSize) {
        notify(upload.tooLargeText || '图片大小不能超过 2MB', 'warning');
        input.value = '';
        return;
      }

      setBusy(true);

      var formData = new FormData();
      formData.append(upload.fieldName || 'background', file);

      fetch(upload.restUrl, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'X-WP-Nonce': upload.restNonce || ''
        },
        body: formData
      })
        .then(function (response) {
          return response.json().catch(function () {
            return null;
          }).then(function (payload) {
            if (!response.ok) {
              throw payload || { message: upload.errorText || '上传失败' };
            }
            return payload;
          });
        })
        .then(function (payload) {
          if (payload && payload.success && payload.url) {
            applyImage(payload.url);
            notify(upload.successText || '背景图已更新', 'success');
            return;
          }
          throw payload || { message: upload.errorText || '上传失败' };
        })
        .catch(function (error) {
          var previousUrl = error && error.data && error.data.previous_url !== undefined
            ? error.data.previous_url
            : '';
          resetImage(previousUrl);
          notify((error && error.message) || upload.networkErrorText || '网络错误，请重试', 'error');
        })
        .finally(function () {
          setBusy(false);
          input.value = '';
        });
    });
  }

  function initAvatarUpload() {
    var upload = (window.aksrtUserCenter || {}).avatarUpload;
    if (!upload || !upload.enabled || !upload.restUrl) return;

    var button = document.getElementById(upload.buttonId || 'aksrt-upload-avatar-btn');
    var input = document.getElementById(upload.inputId || 'aksrt-avatar-file-input');
    var image = document.getElementById(upload.imageId || 'aksrt-user-avatar-image');
    var removeButton = document.getElementById(upload.removeButtonId || 'aksrt-remove-avatar-btn');
    if (!button || !input || button.dataset.aksrtAvatarBound === '1') return;
    button.dataset.aksrtAvatarBound = '1';

    var label = button.querySelector('span');
    var idleText = upload.idleText || (label ? label.textContent : '更换头像');

    function setBusy(busy) {
      button.disabled = !!busy;
      if (label) label.textContent = busy ? (upload.loadingText || '上传中…') : idleText;
    }

    button.addEventListener('click', function () { input.click(); });
    input.addEventListener('change', function () {
      var file = input.files && input.files[0];
      if (!file) return;
      if (upload.maxSize && file.size > upload.maxSize) {
        notify(upload.tooLargeText || '图片大小不能超过 2MB', 'warning');
        input.value = '';
        return;
      }

      var body = new FormData();
      body.append(upload.fieldName || 'avatar', file);
      setBusy(true);
      fetch(upload.restUrl, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'X-WP-Nonce': upload.restNonce || '' },
        body: body
      })
        .then(function (response) {
          return response.json().then(function (payload) {
            if (!response.ok || !payload || !payload.success) throw payload || {};
            return payload;
          });
        })
        .then(function (payload) {
          var url = payload.url || (payload.data && payload.data.url) || '';
          if (!url) throw payload;
          if (image) image.src = url;
          if (removeButton) removeButton.hidden = false;
          notify(payload.message || upload.successText || '头像已更新', 'success');
        })
        .catch(function (error) {
          notify((error && error.message) || upload.errorText || '上传失败', 'error');
        })
        .finally(function () {
          setBusy(false);
          input.value = '';
        });
    });

    if (removeButton) {
      var removeLabel = removeButton.querySelector('span');
      var removeIdleText = upload.removeText || (removeLabel ? removeLabel.textContent : '恢复默认头像');
      removeButton.addEventListener('click', function () {
        if (!window.confirm(upload.confirmRemoveText || '确定恢复为默认头像？')) return;
        removeButton.disabled = true;
        if (removeLabel) removeLabel.textContent = upload.removingText || '恢复中…';

        fetch(upload.restUrl, {
          method: 'DELETE',
          credentials: 'same-origin',
          headers: { 'X-WP-Nonce': upload.restNonce || '' }
        })
          .then(function (response) {
            return response.json().then(function (payload) {
              if (!response.ok || !payload || !payload.success) throw payload || {};
              return payload;
            });
          })
          .then(function (payload) {
            if (image && payload.url) image.src = payload.url;
            removeButton.hidden = true;
            notify(payload.message || upload.removeSuccessText || '已恢复默认头像', 'success');
          })
          .catch(function (error) {
            notify((error && error.message) || upload.errorText || '头像操作失败', 'error');
          })
          .finally(function () {
            removeButton.disabled = false;
            if (removeLabel) removeLabel.textContent = removeIdleText;
          });
      });
    }
  }

  function init() {
    initPublicDashboards();
    initCoverUpload();
    initAvatarUpload();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();