修复了一些问题
This commit is contained in:
+122
-125
@@ -1,175 +1,172 @@
|
||||
/**
|
||||
* AKSRT messages center interactions.
|
||||
* AKSRT message center DOM navigation.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var root = document.querySelector('[data-message-center]');
|
||||
if (!root) return;
|
||||
|
||||
var nonce = typeof aksrtData !== 'undefined' ? aksrtData.nonce : '';
|
||||
var ajaxUrl = typeof aksrtData !== 'undefined' ? aksrtData.ajaxUrl : '/wp-admin/admin-ajax.php';
|
||||
var pollTimer = null;
|
||||
var content = root.querySelector('[data-message-content]');
|
||||
var nav = root.querySelector('[data-message-nav]');
|
||||
var state = { view: root.dataset.view || 'unread', page: 1, detail: 0 };
|
||||
var pollInterval = 60000;
|
||||
|
||||
function post(action, data) {
|
||||
var body = new URLSearchParams({ action: action, nonce: nonce });
|
||||
if (data) {
|
||||
Object.keys(data).forEach(function (key) {
|
||||
var value = data[key];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach(function (item) {
|
||||
body.append(key + '[]', item);
|
||||
});
|
||||
return;
|
||||
}
|
||||
Object.keys(data || {}).forEach(function (key) {
|
||||
var value = data[key];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach(function (item) { body.append(key + '[]', item); });
|
||||
} else {
|
||||
body.append(key, value);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
return fetch(ajaxUrl, { method: 'POST', body: body, credentials: 'same-origin' })
|
||||
.then(function (response) { return response.json(); });
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var item = event.target.closest('.messages-nav__item[data-type]');
|
||||
if (!item) return;
|
||||
function routeFor(view) {
|
||||
var link = nav.querySelector('[data-message-view="' + view + '"]');
|
||||
return link ? link.href : window.location.href;
|
||||
}
|
||||
|
||||
function updateHeaderBadge(unread) {
|
||||
var count = Math.max(0, Number(unread) || 0);
|
||||
var headerBadge = document.querySelector('.aksrt-notification-badge');
|
||||
var avatarDot = document.querySelector('.nav-user__dot');
|
||||
if (headerBadge) {
|
||||
headerBadge.textContent = String(count);
|
||||
headerBadge.style.display = count > 0 ? '' : 'none';
|
||||
}
|
||||
if (avatarDot) avatarDot.style.display = count > 0 ? '' : 'none';
|
||||
}
|
||||
|
||||
function renderError(message) {
|
||||
content.innerHTML = '<div class="messages-empty"><span class="messages-empty__icon"><i class="fa fas fa-exclamation-circle"></i></span><p class="messages-empty__text"></p></div>';
|
||||
content.querySelector('.messages-empty__text').textContent = message || '加载失败，请稍后重试';
|
||||
}
|
||||
|
||||
function load(next, options) {
|
||||
var requested = {
|
||||
view: next.view || state.view,
|
||||
page: next.page || 1,
|
||||
detail: next.detail || 0,
|
||||
};
|
||||
var settings = options || {};
|
||||
root.classList.add('is-loading');
|
||||
content.setAttribute('aria-busy', 'true');
|
||||
|
||||
return post('aksrt_load_message_center', {
|
||||
view: requested.view,
|
||||
page: requested.page,
|
||||
notification_id: requested.detail,
|
||||
}).then(function (result) {
|
||||
if (!result.success || !result.data) {
|
||||
throw new Error(result.data && result.data.message ? result.data.message : '加载失败，请稍后重试');
|
||||
}
|
||||
state = requested;
|
||||
root.dataset.view = state.view;
|
||||
nav.innerHTML = result.data.nav;
|
||||
content.innerHTML = result.data.content;
|
||||
updateHeaderBadge(result.data.unread);
|
||||
|
||||
if (settings.history === 'push') {
|
||||
window.history.pushState(state, '', routeFor(state.view));
|
||||
} else if (settings.history === 'replace') {
|
||||
window.history.replaceState(state, '', routeFor(state.view));
|
||||
}
|
||||
content.focus({ preventScroll: true });
|
||||
}).catch(function (error) {
|
||||
renderError(error.message);
|
||||
}).finally(function () {
|
||||
root.classList.remove('is-loading');
|
||||
content.removeAttribute('aria-busy');
|
||||
});
|
||||
}
|
||||
|
||||
function reloadList() {
|
||||
return load({ view: state.view, page: state.page, detail: 0 });
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var tab = event.target.closest('[data-message-view]');
|
||||
if (!tab || !root.contains(tab) || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
||||
event.preventDefault();
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set('msg_type', item.dataset.type);
|
||||
url.searchParams.delete('msg_page');
|
||||
window.location.href = url.toString();
|
||||
load({ view: tab.dataset.messageView, page: 1, detail: 0 }, { history: 'push' });
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('.js-msg-detail');
|
||||
if (!button || !root.contains(button)) return;
|
||||
event.preventDefault();
|
||||
load({ view: button.dataset.view || state.view, page: state.page, detail: button.dataset.id });
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('[data-message-back]');
|
||||
if (!button || !root.contains(button)) return;
|
||||
load({ view: button.dataset.view || state.view, page: state.page, detail: 0 });
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('[data-message-page]');
|
||||
if (!button || !root.contains(button)) return;
|
||||
load({ view: state.view, page: button.dataset.messagePage, detail: 0 });
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('.js-msg-mark-read');
|
||||
if (!button) return;
|
||||
|
||||
var id = button.dataset.id;
|
||||
var msgItem = button.closest('.message-item');
|
||||
post('aksrt_mark_notification_read', { notification_id: id }).then(function (result) {
|
||||
if (!result.success) return;
|
||||
|
||||
if (msgItem) {
|
||||
msgItem.classList.remove('is-unread');
|
||||
}
|
||||
button.remove();
|
||||
updateBadges(result.data && result.data.unread !== undefined ? result.data.unread : countUnread());
|
||||
if (!button || !root.contains(button)) return;
|
||||
post('aksrt_mark_notification_read', { notification_id: button.dataset.id }).then(function (result) {
|
||||
if (result.success) reloadList();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('.js-msg-delete');
|
||||
if (!button) return;
|
||||
|
||||
var id = button.dataset.id;
|
||||
var msgItem = button.closest('.message-item');
|
||||
post('aksrt_delete_notification', { notification_id: id }).then(function (result) {
|
||||
if (!result.success) return;
|
||||
|
||||
if (msgItem) {
|
||||
msgItem.style.opacity = '0';
|
||||
msgItem.style.transform = 'translateX(20px)';
|
||||
msgItem.style.transition = 'all 0.2s';
|
||||
setTimeout(function () { msgItem.remove(); }, 200);
|
||||
}
|
||||
|
||||
updateBadges(result.data && result.data.unread !== undefined ? result.data.unread : countUnread());
|
||||
checkEmpty();
|
||||
if (!button || !root.contains(button)) return;
|
||||
post('aksrt_delete_notification', { notification_id: button.dataset.id }).then(function (result) {
|
||||
if (result.success) reloadList();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('.js-msg-mark-all-read');
|
||||
if (!button) return;
|
||||
|
||||
if (!button || !root.contains(button)) return;
|
||||
post('aksrt_mark_notification_read', { mark_all: '1' }).then(function (result) {
|
||||
if (!result.success) return;
|
||||
|
||||
document.querySelectorAll('.message-item.is-unread').forEach(function (item) {
|
||||
item.classList.remove('is-unread');
|
||||
});
|
||||
document.querySelectorAll('.js-msg-mark-read').forEach(function (item) {
|
||||
item.remove();
|
||||
});
|
||||
updateBadges(0);
|
||||
if (result.success) reloadList();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('.js-msg-clear-read');
|
||||
if (!button) return;
|
||||
|
||||
var readItems = document.querySelectorAll('.message-item:not(.is-unread)');
|
||||
if (!button || !root.contains(button)) return;
|
||||
var ids = [];
|
||||
readItems.forEach(function (item) {
|
||||
var id = item.dataset.notificationId;
|
||||
if (id) ids.push(id);
|
||||
root.querySelectorAll('.message-item:not(.is-unread)[data-notification-id]').forEach(function (item) {
|
||||
if (/^\d+$/.test(item.dataset.notificationId)) ids.push(item.dataset.notificationId);
|
||||
});
|
||||
if (!ids.length) return;
|
||||
|
||||
post('aksrt_delete_notifications', { notification_ids: ids }).then(function (result) {
|
||||
if (!result.success) return;
|
||||
|
||||
readItems.forEach(function (item) {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateX(20px)';
|
||||
item.style.transition = 'all 0.2s';
|
||||
setTimeout(function () { item.remove(); }, 200);
|
||||
});
|
||||
setTimeout(checkEmpty, 250);
|
||||
updateBadges(result.data && result.data.unread !== undefined ? result.data.unread : countUnread());
|
||||
if (result.success) reloadList();
|
||||
});
|
||||
});
|
||||
|
||||
function countUnread() {
|
||||
return document.querySelectorAll('.message-item.is-unread').length;
|
||||
}
|
||||
|
||||
function updateBadges(unread) {
|
||||
var nextUnread = unread === undefined ? countUnread() : unread;
|
||||
|
||||
document.querySelectorAll('.messages-nav__badge[data-type="unread"]').forEach(function (badge) {
|
||||
badge.textContent = String(nextUnread);
|
||||
badge.dataset.count = String(nextUnread);
|
||||
badge.style.display = nextUnread > 0 ? '' : 'none';
|
||||
});
|
||||
|
||||
// Numeric badge inside the user dropdown only — never target the pure avatar
|
||||
// .nav-user__dot.aksrt-notification-badge (no textContent on a dot indicator).
|
||||
var headerBadge = document.querySelector('.aksrt-notification-badge');
|
||||
if (headerBadge) {
|
||||
headerBadge.textContent = String(nextUnread);
|
||||
headerBadge.style.display = nextUnread > 0 ? '' : 'none';
|
||||
window.addEventListener('popstate', function (event) {
|
||||
var previous = event.state;
|
||||
if (previous && previous.view) {
|
||||
load(previous);
|
||||
}
|
||||
});
|
||||
|
||||
var avatarDot = document.querySelector('.nav-user__dot');
|
||||
if (avatarDot) {
|
||||
avatarDot.style.display = nextUnread > 0 ? '' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function checkEmpty() {
|
||||
var list = document.querySelector('.messages-list');
|
||||
if (list && list.children.length === 0) {
|
||||
list.outerHTML = '<div class="messages-empty"><span class="messages-empty__icon"><i class="fa fas fa-bell-slash"></i></span><p class="messages-empty__text">暂无消息</p></div>';
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
pollTimer = setInterval(function () {
|
||||
post('aksrt_check_new_notifications', {}).then(function (result) {
|
||||
if (!result.success || !result.data) return;
|
||||
if (result.data.unread !== undefined) {
|
||||
updateBadges(result.data.unread);
|
||||
return;
|
||||
}
|
||||
if (result.data.count !== undefined) {
|
||||
updateBadges(result.data.count);
|
||||
}
|
||||
}).catch(function () {});
|
||||
}, pollInterval);
|
||||
}
|
||||
|
||||
startPolling();
|
||||
window.history.replaceState(state, '', routeFor(state.view));
|
||||
window.setInterval(function () {
|
||||
post('aksrt_check_new_notifications', {}).then(function (result) {
|
||||
if (result.success && result.data) updateHeaderBadge(result.data.unread);
|
||||
}).catch(function () {});
|
||||
}, pollInterval);
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user