rtc

commit

460199e9da003a14c6515c6eaa015f75ed926abb

parent

55d7ac380468e430f887481bfb9f051430699780

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2020-03-23 07:43

refactor: mv reusable code into separate files

Diffstat

5 files changed, 44 insertions, 109 deletions

diff --git a/chat/style.css b/chat/chat.css

@@ -1,39 +1,5 @@
    1    -1 * {
    2    -1 	box-sizing: border-box;
    3    -1 }
    4    -1 
    5     1 body {
    6     2 	max-width: 30em;
    7    -1 	margin: 0 auto;
    8    -1 	padding: 1em;
    9    -1 }
   10    -1 
   11    -1 input,
   12    -1 button {
   13    -1 	border: 1px solid #aaa;
   14    -1 	padding: 0.3em 0.75em;
   15    -1 	font-family: inherit;
   16    -1 	font-size: inherit;
   17    -1 	line-height: 1.8;
   18    -1 	border-radius: 0.3em;
   19    -1 	min-width: 0;
   20    -1 }
   21    -1 
   22    -1 button {
   23    -1 	display: inline-block;
   24    -1 	text-align: center;
   25    -1 	border-color: #26c;
   26    -1 	background: #26c;
   27    -1 	color: #fff;
   28    -1 }
   29    -1 button:hover,
   30    -1 button:focus {
   31    -1 	border-color: #25a;
   32    -1 	background: #25a;
   33    -1 }
   34    -1 button:active {
   35    -1 	border-color: blue;
   36    -1 	background: blue;
   37     3 }
   38     4 
   39     5 .chat {

diff --git a/chat/chat.js b/chat/chat.js

@@ -1,63 +1,29 @@
    1     1 (function() {
    2     2 	// TODO: nicks
    3     3 
   -1     4 	var url = 'https://patchbay.pub/pubsub/' + location.hash.substr(1);
   -1     5 
    4     6 	var history = document.querySelector('.history');
    5     7 	var form = document.querySelector('.form');
    6     8 	var input = document.querySelector('.form input');
    7     9 
    8    -1 	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    9    -1 
   10    -1 	var randomString = function(length) {
   11    -1 		var result = [];
   12    -1 		for (var i = 0; i < length; i++) {
   13    -1 			var k = Math.floor(Math.random() * chars.length);
   14    -1 			result.push(chars[k]);
   15    -1 		}
   16    -1 		return result.join('');
   17    -1 	};
   18    -1 
   19    10 	form.addEventListener('submit', function(event) {
   20    11 		event.preventDefault();
   21    12 		if (!input.value) {
   22    13 			return;
   23    14 		}
   24    -1 		var url = 'https://patchbay.pub/pubsub/' + location.hash.substr(1);
   25    -1 		fetch(url, {
   26    -1 			method: 'POST',
   27    -1 			mode: 'cors',
   28    -1 			body: input.value,
   29    -1 		}).then(function() {
   -1    15 		patch.post(url, input.value).then(function() {
   30    16 			input.value = '';
   31    17 		});
   32    18 	});
   33    19 
   34    -1 	var renderMessage = function(msg) {
   -1    20 	patch.listen(url, function(data) {
   35    21 		var li = document.createElement('li');
   36    -1 		li.textContent = msg;
   37    -1 		return li;
   38    -1 	};
   39    -1 
   40    -1 	var onServerEvent = function(event) {
   41    -1 		var li = renderMessage(event.data);
   -1    22 		li.textContent = data;
   42    23 		var scrolledToBottom = history.scrollTop + history.offsetHeight === history.scrollHeight;
   43    24 		history.append(li);
   44    25 		if (scrolledToBottom) {
   45    26 			history.scrollTop = history.scrollHeight;
   46    27 		}
   47    -1 	};
   48    -1 
   49    -1 	// FIXME: prefer server send events
   50    -1 	var poll = function() {
   51    -1 		var url = 'https://patchbay.pub/pubsub/' + location.hash.substr(1);
   52    -1 		fetch(url)
   53    -1 			.then(r => r.text())
   54    -1 			.then(data => onServerEvent({'data': data}))
   55    -1 			.then(poll);
   56    -1 	};
   57    -1 
   58    -1 	if (!location.hash) {
   59    -1 		location.hash = randomString(10);
   60    -1 	}
   61    -1 
   62    -1 	poll();
   -1    28 	});
   63    29 })();

diff --git a/chat/index.html b/chat/index.html

@@ -4,7 +4,8 @@
    4     4 	<meta charset="utf-8" />
    5     5 	<title>duct chat</title>
    6     6 	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://patchbay.pub">
    7    -1 	<link rel="stylesheet" href="style.css">
   -1     7 	<link rel="stylesheet" href="../common.css">
   -1     8 	<link rel="stylesheet" href="chat.css">
    8     9 </head>
    9    10 <body>
   10    11 	<div class="chat">
@@ -15,6 +16,7 @@
   15    16 			<button>Send</button>
   16    17 		</form>
   17    18 	</div>
   -1    19 	<script src="../patch.js"></script>
   18    20 	<script src="chat.js"></script>
   19    21 </body>
   20    22 </html>

diff --git a/chat/style.css b/common.css

@@ -3,7 +3,6 @@
    3     3 }
    4     4 
    5     5 body {
    6    -1 	max-width: 30em;
    7     6 	margin: 0 auto;
    8     7 	padding: 1em;
    9     8 }
@@ -35,36 +34,3 @@ button:active {
   35    34 	border-color: blue;
   36    35 	background: blue;
   37    36 }
   38    -1 
   39    -1 .chat {
   40    -1 	display: grid;
   41    -1 	grid-template-rows: 1fr min-content;
   42    -1 	grid-gap: 1em;
   43    -1 	min-height: calc(100vh - 2em);
   44    -1 }
   45    -1 
   46    -1 .history {
   47    -1 	flex-grow: 1;
   48    -1 	width: 100%;
   49    -1 	overflow: auto;
   50    -1 	margin: 0;
   51    -1 	padding: 0;
   52    -1 }
   53    -1 
   54    -1 .history li {
   55    -1 	display: block;
   56    -1 	margin: 1em 0;
   57    -1 }
   58    -1 
   59    -1 .form {
   60    -1 	display: grid;
   61    -1 	grid-template-columns: 1fr min-content;
   62    -1 	grid-gap: 1em;
   63    -1 }
   64    -1 
   65    -1 @media (min-width: 30em) {
   66    -1 	.chat {
   67    -1 		padding: 1em;
   68    -1 		border: 1px solid #aaa;
   69    -1 	}
   70    -1 }

diff --git a/patch.js b/patch.js

@@ -0,0 +1,35 @@
   -1     1 (function() {
   -1     2 	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   -1     3 
   -1     4 	var randomString = function(length) {
   -1     5 		var result = [];
   -1     6 		for (var i = 0; i < length; i++) {
   -1     7 			var k = Math.floor(Math.random() * chars.length);
   -1     8 			result.push(chars[k]);
   -1     9 		}
   -1    10 		return result.join('');
   -1    11 	};
   -1    12 
   -1    13 	if (!location.hash) {
   -1    14 		location.hash = randomString(10);
   -1    15 	}
   -1    16 
   -1    17 	var post = function(url, data) {
   -1    18 		return fetch(url, {method: 'POST', body: JSON.stringify(data)});
   -1    19 	};
   -1    20 
   -1    21 	// FIXME: prefer server send events
   -1    22 	// FIXME: avoid gaps to avoid dropping messages
   -1    23 	var listen = function(url, fn) {
   -1    24 		return fetch(url)
   -1    25 			.then(r => r.text())
   -1    26 			.then(data => fn(JSON.parse(data)))
   -1    27 			.then(x => listen(url, fn));
   -1    28 	};
   -1    29 
   -1    30 	window.patch = {
   -1    31 		'post': post,
   -1    32 		'listen': listen,
   -1    33 		'randomString': randomString,
   -1    34 	};
   -1    35 })();