Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-06-05 21:56:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #467 from TheHollidayInn/chat-example-update

Browse Source 
Updated readability of chat example and minor html updates
This commit is contained in:
Mark Nadal 2017-12-09 19:05:59 -08:00 committed by GitHub
commit f61a6ee4df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 147 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
examples/chat/index.html
View File

@ -3,9 +3,6 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="converse" class="hue2 page">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
#converse {
@ -47,58 +44,128 @@
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text)
}
#title {
margin-bottom: 0.5em;
}
.send {
style: margin: 0 0 0.4em 0.4em;
padding: 0.2em 0.5em;
}
#name-input {
margin-top: 0.5em;
margin-right: 0.5em;
}
#message-input {
margin-top: 0.5em;
}
</style>
</head>
<body>
<div id="converse" class="hue2 page">
<div class="pad">
<div class="poiret large rubric whitet" style="margin-bottom: 0.5em;">Have a Conversation...</div>
<div id='title' class="poiret large rubric whitet">Have a Conversation...</div>
<div>
<ul>
<li class="none"></li>
</ul>
<form class="white huet2 box">
<div>
<div class="send hue2 right whitet box act" style="margin: 0 0 0.4em 0.4em; padding: 0.2em 0.5em;">send</div>
<b class="jot left who" contenteditable="true" data-text="Name" style="margin-top: 0.5em; margin-right: 0.5em;"></b>
<p class="jot left what" contenteditable="true" data-text="Write a message..." style="margin-top: 0.5em;"></p>
<div class="send hue2 right whitet box act">send</div>
<b id="name-input" class="jot left who" contenteditable="true" data-text="Name"></b>
<p id="message-input" class="jot left what" contenteditable="true" data-text="Write a message..."></p>
</div>
</form>
<div class="model">
<li class="white huet2 box"><b class="who"></b><p class="what"></p><span class="sort none">0</span><div class="when"></div></li>
<li class="white huet2 box">
<b class="who"></b>
<p class="what"></p>
<span class="sort none">0</span>
<div class="when"></div>
</li>
</div>
</div>
</div>
</div>
<script src="/jquery.js"></script>
<script src="/gun.js"></script>
<script>
var gun = Gun(location.origin + '/gun');
var chat = gun.get('converse');
chat.map().val(function(msg, field){
var ul = $('ul'), last = sort(field, ul.children('li').last()), li;
li = $($("#msg-" + field)[0] || $('.model li').clone(true).attr('id', 'msg-'+field).insertAfter(last));
chat.map()
.val(mapChatToUI);
$("form .send").on('click', submit);
$("form .what").on('keydown', handleEnterPressed);
function mapChatToUI (msg, field) {
var ul = $('ul'),
last = sort(field, ul.children('li').last());
// Grab message to update or model
var msgField = $("#msg-" + field)[0];
if (!msgField) {
msgField = $('.model li')
.clone(true)
.attr('id', 'msg-' + field)
.insertAfter(last);
}
// Merge message data to UI model
var li = $(msgField);
li.find('.who').text(msg.who);
li.find('.what').text(msg.what);
li.find('.sort').text(field);
var time = new Date(msg.when);
li.find('.when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
$('body').stop(true, true).animate({scrollTop: ul.height()});
});
$("form .send").on('click', submit);
$("form .what").on('keydown', function(e){
if(e.which == 13){ submit(e) }
$('body').stop(true, true)
.animate({
scrollTop: ul.height(),
});
}
function submit (e) {
e.preventDefault();
var msg = {when: Gun.time.is()};
var msg = {
when: Gun.time.is(),
};
msg.who = $('form .who').text();
if(!msg.who){ $('form .who').text(msg.who = 'user'+Gun.text.random(3)) }
if (!msg.who) {
msg.who = 'user' + Gun.text.random(3);
$('form .who').text(msg.who);
}
msg.what = $('form .what').text();
if(!msg.what){ return }
if (!msg.what) {
return;
}
chat.get(msg.when + 'r' + Gun.text.random(3)).put(msg);
$('form .what').text('');
}
function sort(g, e){
return (parseFloat(g) >= parseFloat($(e).find('.sort').text() || -Infinity))? e : sort(g, e.prev());
function handleEnterPressed (e) {
if (e.which == 13) {
submit(e);
}
}
function sort(fieldId, element) {
var numericId = parseFloat(fieldId);
var idFromText = $(element).find('.sort').text() || -Infinity;
var currentId = numericId >= parseFloat(idFromText);
return currentId ? element : sort(fieldId, element.prev());
}
</script>
</div>
</body>
</html>