286 lines
8.2 KiB
JavaScript
286 lines
8.2 KiB
JavaScript
(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 getGenealogyId(search) {
|
||
var source = search === undefined ? (window.location && window.location.search) : search;
|
||
var params = new URLSearchParams(String(source || '').replace(/^\?/, ''));
|
||
|
||
return params.get('genealogyId') || '';
|
||
}
|
||
|
||
function withGenealogyId(href, genealogyId) {
|
||
var value = String(href || '');
|
||
var hashIndex;
|
||
var hash = '';
|
||
var parts;
|
||
var params;
|
||
|
||
if (!genealogyId || !value || value.charAt(0) === '#' || /^(?:https?:|mailto:|tel:)/i.test(value)) return value;
|
||
hashIndex = value.indexOf('#');
|
||
if (hashIndex >= 0) {
|
||
hash = value.slice(hashIndex);
|
||
value = value.slice(0, hashIndex);
|
||
}
|
||
parts = value.split('?');
|
||
params = new URLSearchParams(parts[1] || '');
|
||
params.set('genealogyId', genealogyId);
|
||
return parts[0] + '?' + params.toString() + hash;
|
||
}
|
||
|
||
function getGenealogyEntryUrl(href) {
|
||
var value = String(href || '');
|
||
|
||
if (!value || value.charAt(0) === '#' || /^(?:https?:|mailto:|tel:)/i.test(value)) return value;
|
||
if (value.indexOf('profile-families.html') === 0) return value;
|
||
return 'profile-families.html?next=' + encodeURIComponent(value.split('?')[0]);
|
||
}
|
||
|
||
function syncGenealogyContextLinks() {
|
||
var genealogyId = getGenealogyId();
|
||
|
||
$('[data-genealogy-context-link]').each(function () {
|
||
var $link = $(this);
|
||
|
||
$link.attr('href', genealogyId ? withGenealogyId($link.attr('href'), genealogyId) : getGenealogyEntryUrl($link.attr('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();
|
||
syncGenealogyContextLinks();
|
||
});
|
||
|
||
window.ProfileUI = {
|
||
confirm: openConfirm,
|
||
closeLogout: closeLegacyLogout,
|
||
initLayui: initLayui,
|
||
getGenealogyId: getGenealogyId,
|
||
withGenealogyId: withGenealogyId,
|
||
getGenealogyEntryUrl: getGenealogyEntryUrl,
|
||
syncGenealogyContextLinks: syncGenealogyContextLinks
|
||
};
|
||
})(window, window.jQuery || (window.layui && window.layui.$));
|