webXMPP

Check-in [93d231185f]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Make images scroll. Factor img creation, add code for image URL's from XMPP MMS delivery.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | master | trunk
Files: files | file ages | folders
SHA3-256: 93d231185fde039313741a20e861d965d3ac4a1391c95e2602aa1c0debc153f7
User & Date: web 2019-12-08 04:37:49
Context
2020-05-04
17:35
Add in any XMMP nickname, to make it easier to see who the sender is check-in: 973917fdd9 user: web tags: master, trunk
2019-12-08
04:37
Make images scroll. Factor img creation, add code for image URL's from XMPP MMS delivery. check-in: 93d231185f user: web tags: master, trunk
2019-12-07
23:07
Conver to on-screen incoming img display check-in: 2bf42aace6 user: web tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/main.css.

3
4
5
6
7
8
9




10
11
12

13
}
#ourTexts {
 width: 100%;
}
#ourImg {
 width: 100%;
 height: auto;




 position: fixed;
 left: 0;
 top: 0;

}







>
>
>
>



>

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
#ourTexts {
 width: 100%;
}
#ourImg {
 width: 100%;
 height: auto;
}
#ourImgBox {
 width: 100vw;
 height: 100vh;
 position: fixed;
 left: 0;
 top: 0;
 overflow-y: auto;
}

Changes to html/xmpp.html.

2
3
4
5
6
7
8
9
10


11
12
13
14
15
16
17
 <head>
  <title>WebXMPP Server</title>
  <meta name="viewport"'
   content="width=device-width, initial-scale=1">
  <link rel="stylesheet"' href="/css/main.css">
 </head>
 <body ononline="goOnline();" onoffline="goOffline();">
  <img id="ourImg" style="display: none; z-index: 999;"
   onclick="return undisplay_img();">


  <div id="ourTexts">
  </div>
  <form>
   <select id="ourDests">
    <option value="--" selected>--</option>
   </select>
   <input type="text" id="ourSend" name="message">







|
|
>
>







2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <head>
  <title>WebXMPP Server</title>
  <meta name="viewport"'
   content="width=device-width, initial-scale=1">
  <link rel="stylesheet"' href="/css/main.css">
 </head>
 <body ononline="goOnline();" onoffline="goOffline();">
  <div id="ourImgBox" style="display: none; z-index: 999;"
    onclick="return undisplay_img();">
   <img id="ourImg">
  </div>
  <div id="ourTexts">
  </div>
  <form>
   <select id="ourDests">
    <option value="--" selected>--</option>
   </select>
   <input type="text" id="ourSend" name="message">

Changes to js/ui.js.

81
82
83
84
85
86
87




88
89
90
91
92
93
94
...
176
177
178
179
180
181
182

















183
184
185
186
187
188
189
...
217
218
219
220
221
222
223










224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
// Unique value for us
let clientID = null;

// Have they OK'ed notifications?  There's things we
//  won't do if we can't post notifications anyway.
let notifiable = false;





// Returning online (network change, cell->wifi, etc.)
function goOnline() {
    if (curReq != null) {
	curReq.abort();
	curReq = null;
    }

................................................................................
	alert("Post failed; network error");
    }
    myReq.send(buf);

    // TBD
    return false;
}


















// Take the current messages and put their contents into
//  our display pane.
function paint() {
    // Rebuild the display
    while (ourTexts.hasChildNodes()) {
	ourTexts.removeChild(ourTexts.lastChild);
................................................................................
	// Body
	l += m.body;

	// Add text element inside its own div
	const n = document.createTextNode(l);
	const d = document.createElement("div");
	d.appendChild(n);











	// If MMS, link to content
	if (m.mtype != null) {
	    // Button, display img when clicked
	    const b = document.createElement('button');
	    b.textContent = m.mtype;
	    b.onclick = () => {
		ourImg.src = "/media/" + m.fname;
		ourImg.style.display = "inline-block";
		return false;
	    };
	    d.appendChild(b);
	}

	// Display this line
	ourTexts.appendChild(d);
    }

    // Always look at the bottom of it
    ourTexts.scrollTop = 99999;
}

// Done looking at the image we received
function undisplay_img() {
    ourImg.style.display = "none";
    return false;
}

// Return HH:MM time
function tmNow() {
    var d = new Date();
    var hr = d.getHours();







>
>
>
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>



<
<
<
<
|
<
<
<
<












|







81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
...
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
...
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257




258




259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
// Unique value for us
let clientID = null;

// Have they OK'ed notifications?  There's things we
//  won't do if we can't post notifications anyway.
let notifiable = false;

// Matching URL's in texts
const URLpat =
/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi ;

// Returning online (network change, cell->wifi, etc.)
function goOnline() {
    if (curReq != null) {
	curReq.abort();
	curReq = null;
    }

................................................................................
	alert("Post failed; network error");
    }
    myReq.send(buf);

    // TBD
    return false;
}

// Image display when button clicked
function img_btn(url) {
    // Burst on filename parts
    const parts = url.split('/');
    const fname = parts[parts.length-1];

    // Button, display img when clicked
    const b = document.createElement('button');
    b.textContent = fname;
    b.onclick = () => {
	ourImg.src = url;
	ourImgBox.style.display = "block";
	return false;
    };
    return b;
}

// Take the current messages and put their contents into
//  our display pane.
function paint() {
    // Rebuild the display
    while (ourTexts.hasChildNodes()) {
	ourTexts.removeChild(ourTexts.lastChild);
................................................................................
	// Body
	l += m.body;

	// Add text element inside its own div
	const n = document.createTextNode(l);
	const d = document.createElement("div");
	d.appendChild(n);

	// Link image to direct display
	const matches = m.body.match(URLpat);
	if (matches) {
	    for (let url of m.body.match(URLpat)) {
		if (url.endsWith(".jpg") || url.endsWith(".png")) {
		    d.appendChild(img_btn(url));
		}
	    }
	}

	// If MMS, link to content
	if (m.mtype != null) {




	    d.appendChild(img_btn("/media/" + m.fname));




	}

	// Display this line
	ourTexts.appendChild(d);
    }

    // Always look at the bottom of it
    ourTexts.scrollTop = 99999;
}

// Done looking at the image we received
function undisplay_img() {
    ourImgBox.style.display = "none";
    return false;
}

// Return HH:MM time
function tmNow() {
    var d = new Date();
    var hr = d.getHours();