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

/**
 * Frontend reporting for articles, comments and users.
 * @package Jio
 */
(function () {
  'use strict';

  var config = window.jioData || {};
  var API_ROOT = String(config.apiUrl || '/index.php?rest_route=/jio/v1').replace(/\/$/, '');
  var NONCE = config.restNonce || '';
  var MAX_IMAGES = 3;
  var sequence = 0;
  var TARGETS = {
    user: { title: '举报用户', label: '用户' },
    post: { title: '举报文章', label: '文章' },
    comment: { title: '举报评论', label: '评论' },
  };

  function escapeHtml(value) {
    return String(value == null ? '' : value)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  function getReportCategories() {
    return (Array.isArray(config.reportCategories) ? config.reportCategories : [])
      .filter(function (cat) { return cat && cat.name && cat.name !== '其他原因'; });
  }

  function buildReportModalHtml(data, categories) {
    var target = TARGETS[data.target_type];
    var report = config.report || {};
    var id = 'jio-report-' + (++sequence);
    var name = data.target_name || target.label + ' #' + data.target_id;
    var html = '<form id="' + id + '" class="jio-report-form" novalidate>';
    html += '<div class="jio-report-body mini-scrollbar">';
    html += '<div class="jio-report-target"><span class="jio-report-target__label">关联对象：</span>';
    html += '<strong class="jio-report-target__name" title="' + escapeHtml(name) + '">' + escapeHtml(name) + '</strong></div>';
    html += '<fieldset class="jio-report-reasons" aria-describedby="' + id + '-reason-error">';
    html += '<legend>举报原因<span class="jio-report-hint">必选一项</span></legend>';
    html += '<div class="jio-report-reasons__options">';
    categories.forEach(function (cat, index) {
      html += '<label class="jio-report-reason"><input type="radio" name="report_reason" required value="' + index + '">';
      html += '<span>' + escapeHtml(cat.name) + '</span></label>';
    });
    html += '<label class="jio-report-reason"><input type="radio" name="report_reason" required value="other"><span>其他原因</span></label>';
    html += '</div><div class="jio-report-other" hidden>';
    html += '<label class="jio-report-label" for="' + id + '-other">请说明举报原因</label>';
    html += '<textarea id="' + id + '-other" name="reason_other" rows="2" maxlength="200" placeholder="请简要说明你认为存在的问题" aria-describedby="' + id + '-reason-error"></textarea>';
    html += '</div><p class="jio-report-error" id="' + id + '-reason-error" data-jio-report-reason-error role="alert" hidden></p></fieldset>';
    html += '<div class="jio-report-field"><div class="jio-report-label-row">';
    html += '<label class="jio-report-label" for="' + id + '-desc">补充说明<span class="jio-report-hint">选填</span></label>';
    html += '<span class="jio-report-count" data-jio-report-count aria-hidden="true">0 / 2000</span></div>';
    html += '<textarea id="' + id + '-desc" name="report_desc" rows="3" maxlength="2000" placeholder="例如：问题出现在什么位置，具体有哪些违规内容"></textarea></div>';
    if (report.imgEnabled) {
      html += '<section class="jio-report-field" aria-label="图片举证">';
      html += '<div class="jio-report-label-row"><span class="jio-report-label">图片举证<span class="jio-report-hint">选填</span></span>';
      html += '<span class="jio-report-count" data-jio-report-image-count aria-live="polite">0 / ' + MAX_IMAGES + '</span></div>';
      html += '<div class="jio-report-images"><div class="jio-report-images__list" data-jio-report-images></div>';
      html += '<button type="button" class="jio-report-add" data-jio-report-add><i class="fas fa-plus" aria-hidden="true"></i><span>添加图片</span></button></div>';
      html += '<p class="jio-report-hint">支持 JPG、PNG、GIF，最多 ' + MAX_IMAGES + ' 张</p>';
      html += '<input type="file" accept="image/gif,image/jpeg,image/png" multiple data-jio-report-file hidden></section>';
    }
    // The settings reader sanitizes this administrator-authored notice with wp_kses_post.
    if (report.desc) html += '<div class="jio-report-notice">' + report.desc + '</div>';
    html += '</div><footer class="jio-report-footer">';
    html += '<p class="jio-report-error" data-jio-report-error role="alert" hidden></p>';
    html += '<p class="jio-report-status" data-jio-report-status role="status"></p>';
    html += '<div class="jio-report-actions"><button type="button" class="jio-report-cancel" data-jio-modal-close>取消</button>';
    html += '<button type="submit" class="jio-report-submit" data-jio-report-submit>提交举报</button></div>';
    html += '</footer></form>';
    return html;
  }

  function showError(element, message) {
    element.textContent = message;
    element.hidden = !message;
  }

  function bindReportModal(shell, data, categories) {
    var form = shell.querySelector('.jio-report-form');
    var submit = form.querySelector('[data-jio-report-submit]');
    var reasonError = form.querySelector('[data-jio-report-reason-error]');
    var error = form.querySelector('[data-jio-report-error]');
    var status = form.querySelector('[data-jio-report-status]');
    var otherBox = form.querySelector('.jio-report-other');
    var otherInput = form.querySelector('[name="reason_other"]');
    var descInput = form.querySelector('[name="report_desc"]');
    var fileInput = form.querySelector('[data-jio-report-file]');
    var images = [];
    var submitAttempts = 0;
    var submitting = false;
    var closed = false;

    function isActive() {
      return !closed && window.JioModalRuntime.getActive() === shell;
    }

    function syncState() {
      var uploading = images.some(function (image) { return image.status === 'uploading'; });
      submit.disabled = submitting || uploading;
      submit.textContent = uploading ? '图片上传中…' : '提交举报';
      form.setAttribute('aria-busy', String(submitting || uploading));
      status.textContent = uploading ? '图片正在上传，完成后即可提交' : '';
      var add = form.querySelector('[data-jio-report-add]');
      if (add) {
        add.disabled = submitting || images.length >= MAX_IMAGES;
        form.querySelector('[data-jio-report-image-count]').textContent = images.length + ' / ' + MAX_IMAGES;
      }
    }

    function deletePending(image) {
      if (!image.attachmentId) return;
      window.fetch(API_ROOT + '/upload/pending/' + encodeURIComponent(image.attachmentId), {
        method: 'DELETE', headers: { 'X-WP-Nonce': NONCE },
      }).catch(function () {});
    }

    function renderImage(image) {
      var html = image.url ? '<img src="' + escapeHtml(image.url) + '" alt="举证图片">' : '';
      html += '<div class="jio-report-image__state">';
      if (image.status === 'uploading') html += '<span role="status">上传中…</span>';
      if (image.status === 'error') {
        html += '<span>上传失败</span><button type="button" data-jio-report-retry>重试</button>';
      }
      html += '</div><button type="button" class="jio-report-image__remove" data-jio-report-remove aria-label="删除举证图片"' + (submitting ? ' disabled' : '') + '>&times;</button>';
      image.node.innerHTML = html;
      image.node.setAttribute('data-upload-state', image.status);
    }

    function uploadImage(image) {
      image.status = 'uploading';
      renderImage(image);
      syncState();
      var body = new FormData();
      body.append('image', image.file);
      window.fetch(API_ROOT + '/report/upload-image', {
        method: 'POST', headers: { 'X-WP-Nonce': NONCE }, body: body,
      }).then(function (response) { return response.json(); }).then(function (result) {
        if (!result || !result.success || !result.data || !result.data.url) {
          throw new Error((result && result.message) || '图片上传失败，请重试');
        }
        image.attachmentId = result.data.id;
        if (closed || images.indexOf(image) === -1) {
          deletePending(image);
          return;
        }
        image.url = result.data.url;
        image.status = 'ready';
        renderImage(image);
      }).catch(function (failure) {
        if (closed || images.indexOf(image) === -1) return;
        image.status = 'error';
        renderImage(image);
        showError(error, failure.message || '图片上传失败，请重试');
      }).then(function () {
        if (!closed) syncState();
      });
    }

    form.addEventListener('change', function (event) {
      if (event.target.name === 'report_reason') {
        var other = event.target.value === 'other';
        otherBox.hidden = !other;
        otherInput.disabled = !other;
        otherInput.required = other;
        otherInput.removeAttribute('aria-invalid');
        showError(reasonError, '');
        if (other) otherInput.focus();
      }
      if (event.target !== fileInput || submitting) return;
      var files = Array.prototype.slice.call(fileInput.files || []);
      showError(error, '');
      files.forEach(function (file) {
        if (images.length >= MAX_IMAGES) {
          showError(error, '最多上传 ' + MAX_IMAGES + ' 张图片，请先删除不需要的图片');
          return;
        }
        if (!/^image\/(jpeg|png|gif)$/.test(file.type)) {
          showError(error, '请选择 JPG、PNG 或 GIF 图片');
          return;
        }
        var image = { file: file, status: 'uploading', url: '', attachmentId: 0, node: document.createElement('div') };
        image.node.className = 'jio-report-image';
        images.push(image);
        form.querySelector('[data-jio-report-images]').appendChild(image.node);
        uploadImage(image);
      });
      fileInput.value = '';
    });

    form.addEventListener('input', function (event) {
      if (event.target === descInput) form.querySelector('[data-jio-report-count]').textContent = descInput.value.length + ' / 2000';
      if (event.target === otherInput) {
        otherInput.removeAttribute('aria-invalid');
        showError(reasonError, '');
      }
    });

    form.addEventListener('click', function (event) {
      var add = event.target.closest('[data-jio-report-add]');
      if (add && !add.disabled && !submitting) fileInput.click();
      var imageNode = event.target.closest('.jio-report-image');
      if (!imageNode || submitting) return;
      var image = images.find(function (entry) { return entry.node === imageNode; });
      if (!image) return;
      if (event.target.closest('[data-jio-report-remove]')) {
        images.splice(images.indexOf(image), 1);
        image.node.remove();
        deletePending(image);
        showError(error, '');
        syncState();
      } else if (event.target.closest('[data-jio-report-retry]') && image.status === 'error') {
        showError(error, '');
        uploadImage(image);
      }
    });

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      if (submitting || closed) return;
      showError(error, '');
      var selected = form.querySelector('[name="report_reason"]:checked');
      if (!selected) {
        showError(reasonError, '请选择一项举报原因');
        form.querySelector('[name="report_reason"]').focus();
        return;
      }
      var other = selected.value === 'other';
      var category = other ? '其他原因' : String(categories[Number(selected.value)].name);
      var explanation = other ? otherInput.value.trim() : '';
      if (other && !explanation) {
        showError(reasonError, '请填写举报原因');
        otherInput.setAttribute('aria-invalid', 'true');
        otherInput.focus();
        return;
      }
      if (images.some(function (image) { return image.status !== 'ready'; })) {
        showError(error, '请等待图片上传完成，或重试、删除上传失败的图片');
        return;
      }
      var content = [];
      if (explanation) content.push(explanation);
      var description = descInput.value.trim();
      if (description) content.push(description);
      if (images.length) content.push('图片举证：\n' + images.map(function (image) { return image.url; }).join('\n'));
      var reason = content.join('\n\n');
      submitting = true;
      syncState();
      var toastId = form.id + '-submit-' + (++submitAttempts);
      notyf('正在提交举报…', 'load', '', toastId);
      form.querySelectorAll('input, textarea, [data-jio-report-remove], [data-jio-report-retry]').forEach(function (element) { element.disabled = true; });
      window.fetch(API_ROOT + '/report/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': NONCE },
        body: JSON.stringify({ target_type: data.target_type, target_id: data.target_id, category: category, reason: reason }),
      }).then(function (response) { return response.json(); }).then(function (result) {
        if (!result || !result.success) throw new Error((result && result.message) || '举报提交失败，请重试');
        // Submitted evidence belongs to the report even if its dialog has already closed.
        images = [];
        form.setAttribute('aria-busy', 'false');
        submit.textContent = '举报已提交';
        status.textContent = result.message || '举报已提交，我们会尽快处理';
        form.querySelector('[data-jio-modal-close]').textContent = '关闭';
        if (isActive()) window.JioModalRuntime.close('submit');
        notyf(result.message || '举报已提交，我们会尽快处理', 'success', 5, toastId);
      }).catch(function (failure) {
        notyf(failure.message || '网络错误，请重试', 'danger', 5, toastId);
        submitting = false;
        if (closed) {
          images.forEach(deletePending);
          return;
        }
        form.querySelectorAll('input, textarea, [data-jio-report-remove], [data-jio-report-retry]').forEach(function (element) { element.disabled = false; });
        otherInput.disabled = otherBox.hidden;
        syncState();
      });
    });

    function onClose(event) {
      if (!event.detail || event.detail.shell !== shell) return;
      closed = true;
      document.removeEventListener('jio:modal:close', onClose);
      // While submitting, the response decides whether pending evidence is still needed.
      if (!submitting) images.forEach(deletePending);
    }
    document.addEventListener('jio:modal:close', onClose);
    otherInput.disabled = true;
    syncState();
  }

  function openReportModal(data, opener) {
    var runtime = window.JioModalRuntime;
    if (!runtime || typeof runtime.open !== 'function') {
      notyf('举报组件加载失败，请刷新页面后重试', 'danger');
      return;
    }
    var categories = getReportCategories();
    var shell = runtime.open({
      html: buildReportModalHtml(data, categories), title: TARGETS[data.target_type].title,
      className: 'jio-report-modal', kind: 'report', mobileBottom: true, focusReturn: opener,
    });
    bindReportModal(shell, data, categories);
  }

  function initReportButtons() {
    if (document.documentElement.dataset.jioReportInitialized === '1') return;
    document.documentElement.dataset.jioReportInitialized = '1';
    document.addEventListener('click', function (event) {
      var button = event.target.closest('[data-jio-report]');
      if (!button) return;
      event.preventDefault();
      var data;
      try { data = JSON.parse(button.getAttribute('data-jio-report')); } catch (error) { return; }
      if (data && TARGETS[data.target_type] && Number(data.target_id) > 0) openReportModal(data, button);
    });
  }

  jQuery(document).off('auto_fun.jio-report').on('auto_fun.jio-report', initReportButtons);
})();