(function(){
const form = document.querySelector('#chat-form');
let mxMsg = 0;
const F = window.fossil, D = F.dom;
const _me = F.user.name;
/* State for paste and drag/drop */
const BlobXferState = {
dropZone: document.querySelector('#chat-drop-zone'),
dropDetails: document.querySelector('#chat-drop-details'),
imgTag: document.querySelector('#chat-drop-details img'),
blob: undefined
};
/** Updates the paste/drop zone with details of the pasted/dropped
data. */
const updateDropZoneContent = function(blob){
const bx = BlobXferState, dd = bx.dropDetails;
bx.blob = blob;
D.clearElement(dd);
D.append(dd, D.br(), "Name: ", blob.name,
D.br(), "Size: ",blob.size);
if(blob.type && blob.type.startsWith("image/")){
const img = D.img();
D.append(dd, D.br(), img);
const reader = new FileReader();
reader.onload = (e)=>img.setAttribute('src', e.target.result);
reader.readAsDataURL(blob);
}
};
////////////////////////////////////////////////////////////
// File drag/drop.
// Adapted from: https://stackoverflow.com/a/58677161
const dropHighlight = BlobXferState.dropZone /* target zone */;
const dropEvents = {
drop: function(ev){
ev.preventDefault();
D.removeClass(dropHighlight, 'dragover');
const file = ev.dataTransfer.files[0];
if(file) {
updateDropZoneContent(file);
}
},
dragenter: function(ev){
ev.preventDefault();
ev.dataTransfer.dropEffect = "copy";
D.addClass(dropHighlight, 'dragover');
},
dragover: function(ev){
ev.preventDefault();
},
dragend: function(ev){
ev.preventDefault();
},
dragleave: function(ev){
ev.preventDefault();
D.removeClass(dropHighlight, 'dragover');
}
};
/*
The idea here is to accept drops at multiple points or, ideally,
document.body, and apply them to P.e.taContent, but the precise
combination of event handling needed to pull this off is eluding
me.
*/
[BlobXferState.dropZone
/* ideally we'd link only to document.body, but the events seem to
get out of whack, with dropleave being triggered at unexpected
points. */
].forEach(function(e){
Object.keys(dropEvents).forEach(
(k)=>e.addEventListener(k, dropEvents[k], true)
);
});
form.addEventListener('submit',(e)=>{
e.preventDefault();
const fd = new FormData(form);
if(BlobXferState.blob/*replace file content with this*/){
fd.set("file", BlobXferState.blob);
}
if( form.msg.value.length>0 || form.file.value.length>0 || BlobXferState.blob ){
fetch("chat-send",{
method: 'POST',
body: fd
});
}
BlobXferState.blob = undefined;
D.clearElement(BlobXferState.dropDetails);
form.msg.value = "";
form.file.value = "";
form.msg.focus();
});
/* Handle image paste from clipboard. TODO: figure out how we can
paste non-image binary data as if it had been selected via the
file selection element. */
document.onpaste = function(event){
const items = event.clipboardData.items,
item = items[0];
if(!item || !item.type) return;
//console.debug("pasted item =",item);
if('file'===item.kind){
updateDropZoneContent(items[0].getAsFile());
}else if('string'===item.kind){
item.getAsString((v)=>form.msg.value = v);
}
};
/* Injects element e as a new row in the chat, at the top of the list */
const injectMessage = function f(e){
if(!f.injectPoint){
f.injectPoint = document.querySelector('#message-inject-point');
}
if(f.injectPoint.nextSibling){
f.injectPoint.parentNode.insertBefore(e, f.injectPoint.nextSibling);
}else{
f.injectPoint.parentNode.appendChild(e);
}
};
/* Returns a new TEXT node with the given text content. */
const textNode = (T)=>document.createTextNode(T);
/** Returns the local time string of Date object d, defaulting
to the current time. */
const localTimeString = function ff(d){
if(!ff.pad){
ff.pad = (x)=>(''+x).length>1 ? x : '0'+x;
}
d || (d = new Date());
return [
d.getFullYear(),'-',ff.pad(d.getMonth()+1/*sigh*/),
'-',ff.pad(d.getDate()),
' ',ff.pad(d.getHours()),':',ff.pad(d.getMinutes()),
':',ff.pad(d.getSeconds())
].join('');
};
/* Returns an almost-ISO8601 form of Date object d. */
const iso8601ish = function(d){
return d.toISOString()
.replace('T',' ').replace(/\.\d+/,'').replace('Z', ' GMT');
};
/* Event handler for clicking .message-user elements to show their
timestamps. */
const handleLegendClicked = function f(ev){
if(!f.popup){
/* Timestamp popup widget */
f.popup = new F.PopupWidget({
cssClass: ['fossil-tooltip', 'chat-timestamp'],
refresh:function(){
const D = F.dom;
D.clearElement(this.e);
const d = new Date(this._timestamp+"Z");
if(d.getMinutes().toString()!=="NaN"){
// Date works, render informative timestamps
D.append(this.e, localTimeString(d)," client-local", D.br(),
iso8601ish(d));
}else{
// Date doesn't work, so dumb it down...
D.append(this.e, this._timestamp," GMT");
}
}
});
f.popup.installClickToHide();
}
const rect = ev.target.getBoundingClientRect();
f.popup._timestamp = ev.target.dataset.timestamp;
let x = rect.left, y = rect.top - 10;
f.popup.show(ev.target)/*so we can get its computed size*/;
if('right'===ev.target.getAttribute('align')){
// Shift popup to the left for right-aligned messages to avoid
// truncation off the right edge of the page.
const pRect = f.popup.e.getBoundingClientRect();
x -= pRect.width/3*2;
}
f.popup.show(x, y);
};
/** Callback for poll() to inject new content into the page. */
function newcontent(jx){
var i;
for(i=0; i<jx.msgs.length; ++i){
let m = jx.msgs[i];
let row = document.createElement("fieldset");
if( m.msgid>mxMsg ) mxMsg = m.msgid;
row.classList.add('message-row');
injectMessage(row);
const eWho = document.createElement('legend');
eWho.dataset.timestamp = m.mtime;
eWho.addEventListener('click', handleLegendClicked, false);
eWho.setAttribute('align', (m.xfrom===_me ? 'right' : 'left'));
eWho.style.backgroundColor = m.uclr;
row.appendChild(eWho);
eWho.classList.add('message-user');
let whoName;
if( m.xfrom===_me ){
whoName = 'me';
row.classList.add('user-is-me');
}else{
whoName = m.xfrom;
}
var d = new Date(m.mtime + "Z");
if( d.getMinutes().toString()!="NaN" ){
/* Show local time when we can compute it */
eWho.append(textNode(whoName+' @ '+
d.getHours()+":"+(d.getMinutes()+100).toString().slice(1,3)
))
}else{
/* Show UTC on systems where Date() does not work */
eWho.append(textNode(whoName+' @ '+m.mtime.slice(11,16)))
}
let span = document.createElement("div");
span.classList.add('message-content');
span.style.backgroundColor = m.uclr;
row.appendChild(span);
if( m.fsize>0 ){
if( m.fmime && m.fmime.startsWith("image/") ){
let img = document.createElement("img");
img.src = "chat-download/" + m.msgid;
span.appendChild(img);
}else{
let a = document.createElement("a");
let txt = "(" + m.fname + " " + m.fsize + " bytes)";
a.href = window.fossil.rootPath+
'chat-download/' + m.msgid+'/'+encodeURIComponent(m.fname);
// ^^^ add m.fname to URL to cause downloaded file to have that name.
a.appendChild(textNode(txt));
span.appendChild(a);
}
let br = document.createElement("br");
br.style.clear = "both";
span.appendChild(br);
}
if(m.xmsg){
span.innerHTML += m.xmsg;
}
span.classList.add('chat-message');
if( m.xfrom!=_me ){
span.classList.add('chat-mx');
}else{
span.classList.add('chat-ms');
}
}
}
async function poll(){
if(poll.running) return;
poll.running = true;
fetch("chat-poll/" + mxMsg)
.then(x=>x.json())
.then(y=>newcontent(y))
.catch(e=>console.error(e))
.finally(()=>poll.running=false)
}
poll();
setInterval(poll, 1000);
})();