1
2
3
4
5
6
7
8
9
10
11
12
|
1
2
3
4
5
6
7
8
9
10
11
12
|
-
-
+
+
|
(function(){
const form = document.querySelector('#chat-form');
let mxMsg = 0;
// let _me = "%string($me)";
let me = window.fossil.user.name;
|
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
|
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
|
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');
};
/* Timestampt popup widget */
const tsPopup = 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");
}
}
});
const hidePopup = ()=>tsPopup.hide();
tsPopup.e.addEventListener('click', hidePopup, false);
document.body.addEventListener('click', hidePopup, true);
document.body.addEventListener('keydown', function(ev){
if(tsPopup.isShown() && 27===ev.which) tsPopup.hide();
}, true);
/* Event handler for clicking .message-user elements to show their
timestamps. */
const handleLegendClicked = function(ev){
const rect = ev.target.getBoundingClientRect();
tsPopup._timestamp = ev.target.dataset.timestamp;
let x = rect.left, y = rect.top - 10;
tsPopup.show(ev.target)/*so we can get its computed size*/;
// Shift to the left for right-aligned messages
if('right'===ev.target.getAttribute('align')){
const pRect = tsPopup.e.getBoundingClientRect();
x -= pRect.width/3*2;
}
tsPopup.show(x, y);
};
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" ){
eWho.setAttribute('title',localTimeString(d)
+' client-local\n'
+d.toISOString()
.replace('T',' ')
.replace(/\.\d+/,'')
.replace('Z', ' GMT')
);
|