1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
(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'),
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);
|
<
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
(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'),
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);
if(!blob) return;
D.append(dd, "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);
|
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
//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);
|
>
>
>
>
>
>
>
>
>
>
>
>
|
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
//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);
}
};
if(true){/* Add help button for drag/drop/paste zone */
const help = D.div();
BlobXferState.dropDetails.parentNode.insertBefore(
help,BlobXferState.dropDetails
);
F.helpButtonlets.create(
help,
"Drag/drop a file into this spot, or paste an image "+
"from the clipboard if supported by your environment."
);
}
/* 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);
|