219 lines
10 KiB
JavaScript
219 lines
10 KiB
JavaScript
// Shared controls for the customer page and service workspace.
|
|
var supportModalQueue = Promise.resolve();
|
|
var supportModalId = 0;
|
|
|
|
var SupportUI = {
|
|
confirm(message, options){
|
|
return this.openModal(message, options, false);
|
|
},
|
|
prompt(message, options){
|
|
return this.openModal(message, options, true);
|
|
},
|
|
openModal(message, options, withInput){
|
|
options = options || {};
|
|
const invoker = document.activeElement;
|
|
return new Promise(function(resolve){
|
|
supportModalQueue = supportModalQueue.then(function(){
|
|
return new Promise(function(finishQueue){
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'app-modal-overlay';
|
|
const dialog = document.createElement('section');
|
|
dialog.className = 'app-modal';
|
|
dialog.setAttribute('role', 'dialog');
|
|
dialog.setAttribute('aria-modal', 'true');
|
|
dialog.setAttribute('tabindex', '-1');
|
|
|
|
const id = ++supportModalId;
|
|
const title = document.createElement('h2');
|
|
title.className = 'app-modal-title';
|
|
title.id = 'app-modal-title-' + id;
|
|
title.textContent = options.title || (withInput ? '请输入内容' : '请确认');
|
|
dialog.setAttribute('aria-labelledby', title.id);
|
|
dialog.appendChild(title);
|
|
|
|
if(message){
|
|
const detail = document.createElement('div');
|
|
detail.className = 'app-modal-message';
|
|
detail.id = 'app-modal-message-' + id;
|
|
detail.textContent = message;
|
|
dialog.setAttribute('aria-describedby', detail.id);
|
|
dialog.appendChild(detail);
|
|
}
|
|
|
|
let input = null;
|
|
if(withInput){
|
|
input = document.createElement(options.multiline ? 'textarea' : 'input');
|
|
input.className = 'app-modal-input';
|
|
input.setAttribute('aria-label', options.inputLabel || (typeof message === 'string' ? message : title.textContent));
|
|
if(!options.multiline) input.type = 'text';
|
|
input.value = options.value || '';
|
|
if(options.placeholder) input.placeholder = options.placeholder;
|
|
dialog.appendChild(input);
|
|
}
|
|
|
|
const actions = document.createElement('div');
|
|
actions.className = 'app-modal-actions';
|
|
const cancel = document.createElement('button');
|
|
cancel.type = 'button';
|
|
cancel.textContent = options.cancelText || '取消';
|
|
const confirm = document.createElement('button');
|
|
confirm.type = 'button';
|
|
confirm.className = 'app-modal-confirm';
|
|
confirm.textContent = options.confirmText || '确定';
|
|
actions.appendChild(cancel);
|
|
actions.appendChild(confirm);
|
|
dialog.appendChild(actions);
|
|
overlay.appendChild(dialog);
|
|
|
|
let closed = false;
|
|
function close(value){
|
|
if(closed) return;
|
|
closed = true;
|
|
overlay.remove();
|
|
if(invoker && invoker.isConnected !== false && document.body.contains(invoker)){
|
|
invoker.focus({preventScroll:true});
|
|
}
|
|
resolve(value);
|
|
finishQueue();
|
|
}
|
|
function accept(){ close(withInput ? input.value : true); }
|
|
cancel.onclick = function(){ close(withInput ? null : false); };
|
|
confirm.onclick = accept;
|
|
overlay.onclick = function(event){
|
|
if(event.target === overlay) close(withInput ? null : false);
|
|
};
|
|
dialog.addEventListener('keydown', function(event){
|
|
if(event.key === 'Escape'){
|
|
event.preventDefault();
|
|
close(withInput ? null : false);
|
|
return;
|
|
}
|
|
if(event.key === 'Enter' && (!input || !options.multiline || event.ctrlKey || event.metaKey)){
|
|
event.preventDefault();
|
|
accept();
|
|
return;
|
|
}
|
|
if(event.key !== 'Tab') return;
|
|
const focusable = dialog.querySelectorAll('button, input, textarea');
|
|
if(!focusable.length){ event.preventDefault(); dialog.focus(); return; }
|
|
const first = focusable[0], last = focusable[focusable.length - 1];
|
|
if(event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))){
|
|
event.preventDefault(); last.focus();
|
|
}else if(!event.shiftKey && (document.activeElement === last || !dialog.contains(document.activeElement))){
|
|
event.preventDefault(); first.focus();
|
|
}
|
|
});
|
|
document.body.appendChild(overlay);
|
|
(input || cancel).focus({preventScroll:true});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
initAttachments(container, label){
|
|
container.addEventListener('error', function(event){
|
|
const image = event.target;
|
|
if(!image || image.tagName !== 'IMG' || !image.classList.contains('message-image') || image.dataset.unavailable) return;
|
|
image.dataset.unavailable = '1';
|
|
image.hidden = true;
|
|
const hint = document.createElement('span');
|
|
hint.className = 'attachment-unavailable';
|
|
hint.textContent = typeof label === 'function' ? label() : label;
|
|
image.after(hint);
|
|
}, true);
|
|
},
|
|
async enableNotifications(button){
|
|
if(!('Notification' in window)) return;
|
|
try{
|
|
const permission = await Notification.requestPermission();
|
|
button.setAttribute('aria-pressed', String(permission === 'granted'));
|
|
}catch(error){}
|
|
},
|
|
notify(title, body){
|
|
if(!document.hidden || !('Notification' in window) || Notification.permission !== 'granted') return;
|
|
try{
|
|
const notice = new Notification(title, {body:body});
|
|
notice.onclick = function(){ window.focus(); notice.close(); };
|
|
}catch(error){}
|
|
},
|
|
addRating(container, sid, labels){
|
|
const request = labels.fetch || fetch;
|
|
const box = document.createElement('section');
|
|
box.className = 'service-rating';
|
|
const question = document.createElement('p');
|
|
question.textContent = labels.question;
|
|
box.appendChild(question);
|
|
const choices = document.createElement('div');
|
|
choices.className = 'rating-choices';
|
|
box.appendChild(choices);
|
|
const status = document.createElement('p');
|
|
status.setAttribute('role', 'status');
|
|
box.appendChild(status);
|
|
let sending = false;
|
|
[1, 2, 3, 4, 5].forEach(function(stars){
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.textContent = '★';
|
|
button.setAttribute('aria-label', stars+' / 5');
|
|
button.onmouseenter = function(){
|
|
Array.from(choices.children).forEach(function(item, index){ item.classList.toggle('selected', index < stars); });
|
|
};
|
|
button.onclick = async function(){
|
|
if(sending) return;
|
|
sending = true;
|
|
Array.from(choices.children).forEach(function(item){ item.disabled = true; });
|
|
try{
|
|
const response = await request('/api/rate', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({sid:sid, stars:stars, comment:''})});
|
|
const data = await response.json();
|
|
if(!response.ok || !data.ok) throw new Error('Rating failed');
|
|
box.textContent = labels.thanks+' '+ '★'.repeat(stars);
|
|
}catch(error){
|
|
sending = false;
|
|
status.textContent = labels.failed;
|
|
Array.from(choices.children).forEach(function(item){ item.disabled = false; });
|
|
}
|
|
};
|
|
choices.appendChild(button);
|
|
});
|
|
container.appendChild(box);
|
|
return box;
|
|
},
|
|
initEmoji(button, panel, input, onInsert){
|
|
const emojis = ['😊', '😂', '👍', '❤️', '🙏', '😅', '😢', '🎉', '📦', '🚚'];
|
|
function close(){
|
|
panel.hidden = true;
|
|
button.setAttribute('aria-expanded', 'false');
|
|
}
|
|
button.onclick = function(){
|
|
panel.hidden = !panel.hidden;
|
|
button.setAttribute('aria-expanded', String(!panel.hidden));
|
|
};
|
|
emojis.forEach(function(emoji){
|
|
const choice = document.createElement('button');
|
|
choice.type = 'button';
|
|
choice.textContent = emoji;
|
|
choice.onclick = function(){
|
|
const start = input.selectionStart == null ? input.value.length : input.selectionStart;
|
|
const end = input.selectionEnd == null ? start : input.selectionEnd;
|
|
input.value = input.value.slice(0, start) + emoji + input.value.slice(end);
|
|
close();
|
|
input.focus({preventScroll:true});
|
|
input.setSelectionRange(start + emoji.length, start + emoji.length);
|
|
if(onInsert) onInsert();
|
|
};
|
|
panel.appendChild(choice);
|
|
});
|
|
['pointerdown','mousedown'].forEach(function(name){
|
|
document.addEventListener(name, function(event){
|
|
if(!panel.hidden && !panel.contains(event.target) && !button.contains(event.target)) close();
|
|
});
|
|
});
|
|
document.addEventListener('keydown', function(event){
|
|
if(event.key === 'Escape' && !panel.hidden){
|
|
close();
|
|
button.focus({preventScroll:true});
|
|
}
|
|
});
|
|
return {close:close};
|
|
}
|
|
};
|