fix(frontend): align reward modal with shared runtime
This commit is contained in:
+155
-117
@@ -1,127 +1,165 @@
|
||||
/**
|
||||
* On-site wallet tipping modal.
|
||||
* On-site wallet tipping content for the shared modal runtime.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
;(function () {
|
||||
;(function (window, document) {
|
||||
'use strict';
|
||||
|
||||
var cfg = window.aksrtData || {};
|
||||
var titleSequence = 0;
|
||||
|
||||
function initReward() {
|
||||
var activeTrigger = null;
|
||||
|
||||
function operationKey(modal) {
|
||||
if (!modal.dataset.aksrtOperationKey) {
|
||||
modal.dataset.aksrtOperationKey = window.AksrtRequest.createIdempotencyKey();
|
||||
}
|
||||
return modal.dataset.aksrtOperationKey;
|
||||
}
|
||||
|
||||
function closeAll() {
|
||||
document.querySelectorAll('.reward-modal.is-open').forEach(function (modal) {
|
||||
modal.classList.remove('is-open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
});
|
||||
document.body.style.overflow = '';
|
||||
if (activeTrigger) activeTrigger.focus();
|
||||
activeTrigger = null;
|
||||
}
|
||||
|
||||
function open(trigger) {
|
||||
var userId = trigger.getAttribute('data-user-id') || '';
|
||||
var modal = document.getElementById('reward-modal-' + userId);
|
||||
if (!modal) return;
|
||||
closeAll();
|
||||
activeTrigger = trigger;
|
||||
modal.dataset.postId = trigger.getAttribute('data-post-id') || modal.dataset.postId || '0';
|
||||
modal.classList.add('is-open');
|
||||
modal.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
var first = modal.querySelector('[data-reward-amount], [data-aksrt-reward-custom]');
|
||||
if (first) first.focus();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var opener = event.target.closest('[data-aksrt-reward-open]');
|
||||
if (opener) {
|
||||
event.preventDefault();
|
||||
open(opener);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target.closest('[data-aksrt-reward-close]')) {
|
||||
event.preventDefault();
|
||||
closeAll();
|
||||
return;
|
||||
}
|
||||
|
||||
var amountButton = event.target.closest('[data-reward-amount]');
|
||||
if (amountButton) {
|
||||
var modal = amountButton.closest('.reward-modal');
|
||||
delete modal.dataset.aksrtOperationKey;
|
||||
modal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
|
||||
button.classList.toggle('is-active', button === amountButton);
|
||||
});
|
||||
var custom = modal.querySelector('[data-aksrt-reward-custom]');
|
||||
if (custom) custom.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var submit = event.target.closest('[data-aksrt-reward-submit]');
|
||||
if (!submit || submit.disabled) return;
|
||||
var tipModal = submit.closest('.reward-modal');
|
||||
var message = tipModal.querySelector('[data-aksrt-reward-message]');
|
||||
var customInput = tipModal.querySelector('[data-aksrt-reward-custom]');
|
||||
var selected = tipModal.querySelector('[data-reward-amount].is-active');
|
||||
var amount = customInput && customInput.value ? customInput.value : (selected ? selected.dataset.rewardAmount : '');
|
||||
if (customInput && customInput.dataset.aksrtIdempotencyBound !== '1') {
|
||||
customInput.dataset.aksrtIdempotencyBound = '1';
|
||||
customInput.addEventListener('input', function () { delete tipModal.dataset.aksrtOperationKey; });
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
submit.textContent = '赞赏中…';
|
||||
if (message) message.textContent = '';
|
||||
|
||||
var body = new URLSearchParams();
|
||||
body.set('action', 'aksrt_submit_tip');
|
||||
body.set('nonce', cfg.nonce || '');
|
||||
body.set('recipient_id', tipModal.dataset.userId || '');
|
||||
body.set('post_id', tipModal.dataset.postId || '0');
|
||||
body.set('amount', amount);
|
||||
|
||||
fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||||
'Idempotency-Key': operationKey(tipModal)
|
||||
},
|
||||
body: body.toString()
|
||||
}).then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (response) {
|
||||
var text = response && response.data && response.data.message ? response.data.message : '赞赏失败';
|
||||
if (response && response.success) {
|
||||
delete tipModal.dataset.aksrtOperationKey;
|
||||
if (message) message.textContent = text;
|
||||
setTimeout(closeAll, 900);
|
||||
} else if (message) {
|
||||
message.textContent = text;
|
||||
}
|
||||
}).catch(function () {
|
||||
if (message) message.textContent = '网络错误，请稍后重试';
|
||||
}).finally(function () {
|
||||
submit.disabled = false;
|
||||
submit.textContent = '余额赞赏';
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Escape') closeAll();
|
||||
});
|
||||
function rewardModal(target) {
|
||||
return target.closest('.aksrt-modal-runtime.aksrt-reward-modal');
|
||||
}
|
||||
|
||||
jQuery(document).off('auto_fun.aksrt-reward').on('auto_fun.aksrt-reward', initReward);
|
||||
})();
|
||||
function rewardTemplate(modal) {
|
||||
return modal ? document.getElementById(modal.dataset.templateId || '') : null;
|
||||
}
|
||||
|
||||
function operationKey(template) {
|
||||
if (!template.dataset.aksrtOperationKey) {
|
||||
template.dataset.aksrtOperationKey = window.AksrtRequest.createIdempotencyKey();
|
||||
}
|
||||
return template.dataset.aksrtOperationKey;
|
||||
}
|
||||
|
||||
function openReward(trigger) {
|
||||
var runtime = window.AksrtModalRuntime;
|
||||
if (!runtime || !window.AksrtRequest) {
|
||||
if (trigger.dataset.aksrtRewardWaiting !== '1') {
|
||||
trigger.dataset.aksrtRewardWaiting = '1';
|
||||
document.addEventListener('aksrt:modal-runtime:ready', function () {
|
||||
delete trigger.dataset.aksrtRewardWaiting;
|
||||
if (document.contains(trigger)) openReward(trigger);
|
||||
}, { once: true });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var templateId = trigger.getAttribute('data-template-id') || '';
|
||||
var template = document.getElementById(templateId);
|
||||
if (!template || !template.content) return;
|
||||
|
||||
var shell = runtime.open({
|
||||
html: template.innerHTML,
|
||||
className: 'aksrt-reward-modal modal-mini full-sm',
|
||||
mobileBottom: true,
|
||||
kind: 'generic',
|
||||
});
|
||||
shell.dataset.templateId = template.id;
|
||||
shell.dataset.userId = trigger.getAttribute('data-user-id') || template.dataset.userId || '';
|
||||
shell.dataset.postId = trigger.getAttribute('data-post-id') || template.dataset.postId || '0';
|
||||
var title = shell.querySelector('.aksrt-reward__title');
|
||||
if (title) {
|
||||
title.id = 'aksrt-reward-title-' + (++titleSequence);
|
||||
shell.setAttribute('aria-labelledby', title.id);
|
||||
}
|
||||
|
||||
var initialFocus = shell.querySelector('[data-reward-amount].is-active, [data-aksrt-reward-custom]');
|
||||
if (initialFocus) initialFocus.focus();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var opener = event.target.closest('[data-aksrt-reward-open]');
|
||||
if (opener) {
|
||||
event.preventDefault();
|
||||
openReward(opener);
|
||||
return;
|
||||
}
|
||||
|
||||
var amountButton = event.target.closest('[data-reward-amount]');
|
||||
if (amountButton) {
|
||||
var amountModal = rewardModal(amountButton);
|
||||
if (!amountModal) return;
|
||||
var amountTemplate = rewardTemplate(amountModal);
|
||||
if (amountTemplate) delete amountTemplate.dataset.aksrtOperationKey;
|
||||
amountModal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
|
||||
var isActive = button === amountButton;
|
||||
button.classList.toggle('is-active', isActive);
|
||||
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
||||
});
|
||||
var customInput = amountModal.querySelector('[data-aksrt-reward-custom]');
|
||||
if (customInput) customInput.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var submit = event.target.closest('[data-aksrt-reward-submit]');
|
||||
if (!submit || submit.disabled) return;
|
||||
|
||||
var modal = rewardModal(submit);
|
||||
var template = rewardTemplate(modal);
|
||||
var runtime = window.AksrtModalRuntime;
|
||||
if (!modal || !template || !runtime) return;
|
||||
|
||||
var message = modal.querySelector('[data-aksrt-reward-message]');
|
||||
var custom = modal.querySelector('[data-aksrt-reward-custom]');
|
||||
var selected = modal.querySelector('[data-reward-amount].is-active');
|
||||
var amount = custom && custom.value ? custom.value : (selected ? selected.dataset.rewardAmount : '');
|
||||
var key;
|
||||
try {
|
||||
key = operationKey(template);
|
||||
} catch (error) {
|
||||
if (message) message.textContent = error.message || '无法创建安全请求，请稍后重试';
|
||||
return;
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
submit.textContent = '赞赏中…';
|
||||
if (message) message.textContent = '';
|
||||
|
||||
var body = new URLSearchParams();
|
||||
body.set('action', 'aksrt_submit_tip');
|
||||
body.set('nonce', cfg.nonce || '');
|
||||
body.set('recipient_id', modal.dataset.userId || '');
|
||||
body.set('post_id', modal.dataset.postId || '0');
|
||||
body.set('amount', amount);
|
||||
var succeeded = false;
|
||||
|
||||
window.fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||||
'Idempotency-Key': key,
|
||||
},
|
||||
body: body.toString(),
|
||||
}).then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (response) {
|
||||
if (runtime.getActive() !== modal) return;
|
||||
var text = response && response.data && response.data.message ? response.data.message : '赞赏失败';
|
||||
if (response && response.success) {
|
||||
succeeded = true;
|
||||
delete template.dataset.aksrtOperationKey;
|
||||
if (message) message.textContent = text;
|
||||
window.setTimeout(function () {
|
||||
if (runtime.getActive() === modal) runtime.close('success');
|
||||
}, 900);
|
||||
} else if (message) {
|
||||
message.textContent = text;
|
||||
}
|
||||
}).catch(function () {
|
||||
if (runtime.getActive() === modal && message) message.textContent = '网络错误，请稍后重试';
|
||||
}).finally(function () {
|
||||
submit.disabled = succeeded;
|
||||
submit.textContent = '余额赞赏';
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('input', function (event) {
|
||||
if (!event.target.matches('[data-aksrt-reward-custom]')) return;
|
||||
var modal = rewardModal(event.target);
|
||||
var template = rewardTemplate(modal);
|
||||
if (template) delete template.dataset.aksrtOperationKey;
|
||||
if (!modal) return;
|
||||
|
||||
var hasCustomAmount = event.target.value !== '';
|
||||
var firstAmount = modal.querySelector('[data-reward-amount]');
|
||||
modal.querySelectorAll('[data-reward-amount]').forEach(function (button) {
|
||||
var isActive = hasCustomAmount ? false : button === firstAmount;
|
||||
button.classList.toggle('is-active', isActive);
|
||||
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
||||
});
|
||||
});
|
||||
})(window, document);
|
||||
|
||||
Reference in New Issue
Block a user