mirror of
https://github.com/amark/gun.git
synced 2025-07-02 10:52:33 +00:00
68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<style>
|
|
.hide { display: none; }
|
|
form .who { width: 10%; }
|
|
form .what { width: 80%; }
|
|
</style>
|
|
<ul>
|
|
<li class="hide">
|
|
<b class="who"></b>:
|
|
<span class="what"></span>
|
|
<i class="when">0</i>
|
|
<u class="sort hide">0</u>
|
|
</li>
|
|
</ul>
|
|
<form>
|
|
<input class="who" placeholder="alias">
|
|
<input class="what" placeholder="message">
|
|
<button>send</button>
|
|
</form>
|
|
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
|
<script src="../../gun.js"></script>
|
|
<script>
|
|
//Gun.log.verbose = true;
|
|
var chat = Gun(location.origin + '/gun').get('example/chat/data').not(function(){
|
|
console.log("INIT CHAT");
|
|
return this.put({1: {
|
|
who: 'sys', what: "Welcome to your chat app!", when: Gun.time.is()
|
|
}}).key('example/chat/data');
|
|
});
|
|
$('form').submit(function(e){
|
|
var msg = {};
|
|
msg.when = Gun.time.is();
|
|
msg.who = $(this).find('.who').val() || 'user' + Gun.text.random(6);
|
|
msg.what = $(this).find('.what').val() || '';
|
|
chat.path(msg.when + '_' + Gun.text.random(4)).put(msg);
|
|
$(this).find('.what').val('');
|
|
return e.preventDefault(), false;
|
|
});
|
|
|
|
var $model = $('ul li').clone().removeClass('hide');
|
|
chat.map().val(function(msg, field){
|
|
//console.log("the message:", field, msg);
|
|
if(!spam.lock && !spam.start){ spam(); }
|
|
var $last = sort(field, $('ul li').last()), $msg = $("#msg-" + field);
|
|
$msg = $msg.length? $msg : $model.clone().attr('id', 'msg-' + field).insertBefore($last);
|
|
$msg.find('.who').text(msg.who);
|
|
$msg.find('.what').text(msg.what);
|
|
$msg.find('.when').text(new Date(msg.when).toLocaleTimeString());
|
|
$msg.find('.sort').text(field);
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
function sort(when, elem){
|
|
return (when > (elem.find('.sort').text() || 0))? elem : sort(when, elem.prev());
|
|
}
|
|
function spam(){
|
|
spam.start = true;
|
|
spam.lock = false;
|
|
if(spam.count >= 20){ return }
|
|
$('.what').val(++spam.count);
|
|
$('form').trigger('submit');
|
|
setTimeout(spam, 0);
|
|
}; spam.count = 0;
|
|
spam.lock = true;
|
|
</script>
|
|
</body>
|
|
</html> |