jiapu/public/js/profile-common.js

(function (window, $) {
  'use strict';

  if (!$) return;

  var layuiReady = false;
  var layerApi = null;

  function openLegacyLogout() {
    var $modal = $('#logoutModal');

    if (!$modal.length) return;
    $modal.addClass('show').attr('aria-hidden', 'false');
    $('body').addClass('logout-modal-open');
  }

  function closeLegacyLogout() {
    var $modal = $('#logoutModal');

    $modal.removeClass('show').attr('aria-hidden', 'true');
    $('body').removeClass('logout-modal-open');
  }

  function openConfirm(options) {
    var settings = $.extend({
      title: '确认操作',
      content: '确定继续吗？',
      confirmText: '确定',
      cancelText: '取消',
      onConfirm: $.noop
    }, options || {});

    if (layerApi) {
      layerApi.confirm(settings.content, {
        title: settings.title,
        btn: [settings.confirmText, settings.cancelText],
        skin: 'profile-layer-confirm'
      }, function (index) {
        settings.onConfirm();
        layerApi.close(index);
      });
      return;
    }

    if (window.confirm(settings.content)) settings.onConfirm();
  }

  function initLayui() {
    if (!window.layui || layuiReady) return;

    layuiReady = true;
    window.layui.use(['layer', 'form'], function () {
      layerApi = window.layui.layer;
      if (window.layui.form) window.layui.form.render();
    });
  }

  function performLogout(targetUrl) {
    var api = window.GenealogyApi && window.GenealogyApi.defaultClient;
    var redirect = function () {
      window.location.href = targetUrl || 'index.html';
    };

    if (!api || !api.logout) {
      redirect();
      return;
    }

    api.logout().catch(function () {}).then(redirect);
  }

  function bindLogout() {
    $(document).on('click', '[data-logout-open]', function (event) {
      var targetUrl = $(this).attr('data-logout-url') || 'index.html';

      event.preventDefault();
      if (!layerApi) {
        openLegacyLogout();
        return;
      }

      openConfirm({
        title: '退出登录',
        content: '确认退出当前账号吗？退出后需要重新登录才能继续管理家谱。',
        confirmText: '确认退出',
        onConfirm: function () {
          performLogout(targetUrl);
        }
      });
    });

    $(document).on('click', '[data-logout-confirm]', function (event) {
      event.preventDefault();
      closeLegacyLogout();
      performLogout($(this).attr('href') || 'index.html');
    });

    $(document).on('click', '[data-logout-close]', function () {
      closeLegacyLogout();
    });

    $(document).on('keydown', function (event) {
      if (event.key === 'Escape') closeLegacyLogout();
    });
  }

  function bindConfirmActions() {
    $(document).on('click', '[data-layer-confirm]', function (event) {
      var $item = $(this);
      var href = $item.attr('href');

      event.preventDefault();
      openConfirm({
        title: $item.attr('data-confirm-title') || '确认操作',
        content: $item.attr('data-layer-confirm') || '确定继续吗？',
        confirmText: $item.attr('data-confirm-text') || '确定',
        onConfirm: function () {
          if (href && href !== '#') window.location.href = href;
        }
      });
    });
  }

  function updateDisplay($trigger, value) {
    var target = $trigger.attr('data-update-target');
    var $target = target ? $(target) : $trigger.closest('p').find('b').first();
    var $title;

    if (!value) return;
    if ($target.length) {
      $target.text(value);
      return;
    }

    $title = $trigger.closest('.module-row').find('h3').first();
    if ($title.length) {
      $title.text($title.text().replace(/([：:]).*$/, '$1' + value));
    }
  }

  function bindPromptActions() {
    $(document).on('click', '[data-layer-prompt]', function (event) {
      var $item = $(this);
      var title = $item.attr('data-prompt-title') || $item.text() || '填写内容';
      var placeholder = $item.attr('data-layer-prompt') || '';
      var formType = $item.attr('data-prompt-type') === 'textarea' ? 2 : 0;

      event.preventDefault();
      if (!layerApi) {
        var fallbackValue = window.prompt(placeholder || title, '');
        if (fallbackValue) updateDisplay($item, fallbackValue);
        return;
      }

      layerApi.prompt({
        title: title,
        value: $item.attr('data-prompt-value') || '',
        formType: formType,
        maxlength: Number($item.attr('data-prompt-maxlength')) || 200
      }, function (value, index) {
        updateDisplay($item, value);
        layerApi.close(index);
        layerApi.msg('已更新');
      });
    });
  }

  function bindSelectActions() {
    $(document).on('click', '[data-layer-select]', function (event) {
      var $item = $(this);
      var values = ($item.attr('data-layer-select') || '').split('|').filter(Boolean);
      var title = $item.attr('data-select-title') || '请选择';
      var html = '<div class="profile-popup-select">';

      event.preventDefault();
      if (!values.length) return;

      $.each(values, function (_, value) {
        html += '<button type="button" data-popup-value="' + value + '">' + value + '</button>';
      });
      html += '</div>';

      if (!layerApi) {
        updateDisplay($item, values[0]);
        return;
      }

      layerApi.open({
        title: title,
        content: html,
        area: ['360px', 'auto'],
        skin: 'profile-layer-confirm',
        success: function (layero, index) {
          layero.find('[data-popup-value]').on('click', function () {
            updateDisplay($item, $(this).attr('data-popup-value'));
            layerApi.close(index);
            layerApi.msg('已选择');
          });
        }
      });
    });
  }

  function bindMessageActions() {
    $(document).on('click', '[data-layer-msg]', function (event) {
      event.preventDefault();
      if (layerApi) layerApi.msg($(this).attr('data-layer-msg'));
    });
  }

  function bindSelectableCards() {
    $(document).on('click', '[data-select-card]', function () {
      var $card = $(this);
      var group = $card.attr('data-select-card');

      if (group) $('[data-select-card="' + group + '"]').removeClass('is-selected');
      $card.addClass('is-selected');
    });
  }

  $(function () {
    initLayui();
    bindLogout();
    bindConfirmActions();
    bindPromptActions();
    bindSelectActions();
    bindMessageActions();
    bindSelectableCards();
  });

  window.ProfileUI = {
    confirm: openConfirm,
    closeLogout: closeLegacyLogout,
    initLayui: initLayui
  };
})(window, window.jQuery || (window.layui && window.layui.$));