mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
63 lines
2.4 KiB
HTML
63 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="../../gun.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
html, body { font-size: 14pt; }
|
|
.hide { display: none; }
|
|
form .who { width: 10%; }
|
|
form .what { width: 80%; }
|
|
ul { list-style: none; padding: 0; }
|
|
</style>
|
|
<ul><li class="hide">
|
|
<i class="when" style="color: #555; font-size: 12pt;">0</i>
|
|
<b class="who"></b>:
|
|
<span class="what"></span>
|
|
<u class="hide sort">0</u>
|
|
</li></ul>
|
|
<form>
|
|
<input class="who" placeholder="alias">
|
|
<input class="what" placeholder="message">
|
|
<button>send</button>
|
|
</form>
|
|
<script>
|
|
var $ = function(s, e){ return (e || document).querySelector(s) } // make native look like jQuery.
|
|
$.sort = function(when, e){ console.log('oh boy', when, e); return (when > ($('.sort', e)[$.text] || -Infinity))? e : $.sort(when, e.previousSibling) }
|
|
$.text = document.body.textContent? 'textContent' : 'innerText'; // because browsers are stupid.
|
|
($.model = $('ul li').cloneNode(true)).removeAttribute('class');
|
|
|
|
var gun = Gun(location.origin + '/gun');
|
|
var chat = gun.get('example/chat/data').not(function(key){
|
|
console.log("NOT KEY", key);
|
|
gun.put({1: {who: 'Welcome', what: "to the chat app!", when: 1}}).key(key);
|
|
});
|
|
chat.map().val(function(msg, field){
|
|
console.log("SORT?", field, msg);
|
|
var $ul = $('ul'), $last = $.sort(field, $ul.lastChild), $msg;
|
|
($msg = $("#msg-" + field) || $ul.insertBefore($.model.cloneNode(true), $last.nextSibling)).id = 'msg-' + field;
|
|
$('.who', $msg)[$.text] = msg.who;
|
|
$('.what', $msg)[$.text] = msg.what;
|
|
$('.when', $msg)[$.text] = new Date(msg.when).toLocaleTimeString().toLowerCase();
|
|
$('.sort', $msg)[$.text] = field;
|
|
if(document.body.scrollHeight - (window.scrollY + window.innerHeight) <= $ul.lastChild.scrollHeight + 50){
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
}
|
|
});
|
|
|
|
$('.who', $('form')).value = (document.cookie.match(/alias\=(.*?)(\&|$|\;)/i)||[])[1]||'';
|
|
$('.what', $('form')).focus();
|
|
$('form').onsubmit = function(e){
|
|
var msg = {};
|
|
msg.when = Gun.time.is();
|
|
document.cookie = ('alias=' + (msg.who = $('.who', this).value || 'user' + Gun.text.random(6)));
|
|
msg.what = $('.what', this).value || '';
|
|
chat.path(msg.when + '_' + Gun.text.random(4)).put(msg);
|
|
$('.what', this).value = '';
|
|
return (e && e.preventDefault()), false;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |