273 lines
8.3 KiB
JavaScript
273 lines
8.3 KiB
JavaScript
/**
|
|
* 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');
|
|
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;
|
|
notify(payload.message || upload.successText || '头像已更新', 'success');
|
|
})
|
|
.catch(function (error) {
|
|
notify((error && error.message) || upload.errorText || '上传失败', 'error');
|
|
})
|
|
.finally(function () {
|
|
setBusy(false);
|
|
input.value = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
initPublicDashboards();
|
|
initCoverUpload();
|
|
initAvatarUpload();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|