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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
-
-
+
+
+
+
-
-
-
-
-
-
+
-
-
-
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
|
(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'),
if(!blob) return;
if(!blob){
form.file.value = '';
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);
}
const btn = D.button("Cancel");
D.append(dd, D.br(), btn);
btn.addEventListener('click', ()=>updateDropZoneContent(), false);
};
////////////////////////////////////////////////////////////
// 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)
);
|
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
-
+
-
-
-
-
+
+
+
|
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(
form.file.parentNode.insertBefore(help, form.file);
help,BlobXferState.dropDetails
);
"Drag/drop a file into this spot, or paste an image "+
"from the clipboard if supported by your environment."
"Select a file to upload, 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');
|