webXMPP

Check-in [2bf42aace6]
Login

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

Overview
Comment:Conver to on-screen incoming img display
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | master | trunk
Files: files | file ages | folders
SHA3-256:2bf42aace68ffb10a43f8aad59675689d505aad187f7bcbe7991d14ab32d7485
User & Date: web 2019-12-07 23:07:59
Context
2019-12-08
04:37
Make images scroll. Factor img creation, add code for image URL's from XMPP MMS delivery. Leaf 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
23:07
Tidy up "extras" report check-in: 719d4d912c user: web tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/main.css.

1
2
3










button, input, select {
 font-size: 14px;
}













>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
button, input, select {
 font-size: 14px;
}
#ourTexts {
 width: 100%;
}
#ourImg {
 width: 100%;
 height: auto;
 position: fixed;
 left: 0;
 top: 0;
}

Changes to html/xmpp.html.

2
3
4
5
6
7
8


9
10
11
12
13
14
15
16
 <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="ourTexts" style="width: 100%;">
  </div>
  <form>
   <select id="ourDests">
    <option value="--" selected>--</option>
   </select>
   <input type="text" id="ourSend" name="message">
   <input type="submit" onclick="return doSend();"







>
>
|







2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <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">
   <input type="submit" onclick="return doSend();"

Changes to html/xmpp_fcm.html.

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
 <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="ourTexts" style="width: 100%;">
  </div>
  <form>
   <select id="ourDests">
    <option value="--" selected>--</option>
   </select>
   <input type="text" id="ourSend" name="message">
   <input type="submit" onclick="return doSend();"
    name = "send" value="Send">
   <button type="button" onclick="return doPoll();">Poll</button>
  </form>

 <script src="/js/ui.js"></script>

 <script src="https://www.gstatic.com/firebasejs/3.7.8/firebase.js"></script>
 <script src="/js/fcm.js"></script>


 </body>
</html>








>
>
|












<



>


<
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

 <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">
   <input type="submit" onclick="return doSend();"
    name = "send" value="Send">
   <button type="button" onclick="return doPoll();">Poll</button>
  </form>

 <script src="/js/ui.js"></script>

 <script src="https://www.gstatic.com/firebasejs/3.7.8/firebase.js"></script>
 <script src="/js/fcm.js"></script>

 <img style="opacity: 0;" id="fakeimg">
 </body>
</html>

Changes to js/ui.js.

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
	// 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) {
	    // Make it an href, try to open in new window/tab
	    const a = document.createElement('a');
	    a.textContent = m.mtype;

	    a.href = "/media/" + m.fname;
	    a.target = "_blank";



	    d.appendChild(a);
	}

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

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







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







|
|
|
>
|
<
>
>
>
|









>
>
>
>
>
>







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
256
257
	// 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();
    var mn = d.getMinutes();
    if (hr < 10) {