diff --git a/examples/iris-chat/index.html b/examples/iris-chat/index.html index 09a2eac8..bfd32b85 100644 --- a/examples/iris-chat/index.html +++ b/examples/iris-chat/index.html @@ -11,13 +11,10 @@
- +
-
- +
+ New chat
@@ -25,10 +22,9 @@
Select or create chat to start messaging
-
typing-indicator
-
- + +
@@ -56,93 +52,62 @@ }) } }); - var key; + var key, myIdenticon; keyPromise.then(k => { key = k; gun.user().auth(key); - $(".user-name").text(key.pub); + myIdenticon = $(new irisLib.Attribute({type:'keyID', value: key.pub}).identicon({width:40})); + $(".user-info").append(myIdenticon); irisLib.Chat.getChats(gun, key, chatReceived); + irisLib.Chat.setOnline(gun, true); }); function chatReceived(pub) { if (!pub || Object.prototype.hasOwnProperty.call(chats, pub)) { return; } - console.log(pub); - var el = $('
' + pub.slice(0, 8) + '...
'); + var el = $('
'); + chats[pub] = new irisLib.Chat({gun, key, participants: pub, onMessage: (msg, info) => { + chats[pub].messages = chats[pub].messages || []; + msg.selfAuthored = info.selfAuthored; + chats[pub].messages[msg.time] = msg; + msg.time = new Date(msg.time); + if (!chats[pub].latest || msg.time > chats[pub].latest.time) { + chats[pub].latest = msg; + var text = msg.text.length > 30 ? msg.text.slice(0,30) + '...' : msg.text; + el.find('.latest').text(text); + } + }}); + chats[pub].identicon = $(new irisLib.Attribute({type: 'keyID', value: pub}).identicon({width:40})); + el.prepend(chats[pub].identicon); el.click(() => { - $(".online-user-list").text(pub); + $(".message-form form").submit(event => { + event.preventDefault(); + chats[pub].send($('#new-msg').val()); + console.log($('#new-msg').val()); + $('#new-msg').val(''); + }); + $(".online-user-list").empty(); + $(".online-user-list").append(chats[pub].identicon.clone()); $(".message-list").empty(); var msgs = Object.values(chats[pub].messages); msgs.forEach(msg => { var name = msg.selfAuthored ? 'you: ' : 'them: '; var el = $( '
' + msg.text + '
' + - msg.time + '
' + formatDate(msg.time) + '
' ); el.toggleClass('our', msg.selfAuthored ? true : false); - $(".message-list").append(el); + $(".message-list").append(el); // TODO: jquery insertAfter element with smaller timestamp }); }); $(".chat-list").append(el); - chats[pub] = new irisLib.Chat({gun, key, participants: pub, onMessage: (msg, info) => { - chats[pub].messages = chats[pub].messages || []; - msg.selfAuthored = info.selfAuthored; - chats[pub].messages[msg.time] = msg; - console.log(msg); - }}); } - $(".chat__submit").on('click', submit); - $(".chat_form").on('keydown', enter); - function enter(e) { - if (e.which !== 13) { return } - submit(e); + function formatDate(date) { + var s = date.toISOString().split('T'); + return s[0] + ' ' + s[1].slice(0,5); } - function submit(e) { - e.preventDefault(); - - var msg = { when: Gun.time.is() }; - - msg.who = $('.chat__name-input').val(); - if (!msg.who) { - msg.who = 'user' + Gun.text.random(3); - $('.chat__name-input').val(msg.who); - } - - msg.what = $('.chat__message-input').val(); - if (!msg.what) { return } - - chat.set(msg); - $('.chat__message-input').val('').focus(); - } - - chat.map().val(function (msg, id) { - if (!msg) { return } - var messageList = $('.chat__message-list'); - var last = sort(msg.when, messageList.children('li').last()); - - var li = $("#msg-" + id)[0]; // grab if exists - if (!li) { - li = $('.model li').clone(true) // else create it - .attr('id', 'msg-' + id) - .insertAfter(last); - } - - // bind the message data into the UI - li = $(li); - li.find('.chat__name').text(msg.who); - li.find('.chat__message-text').text(msg.what); - li.find('.sort').text(msg.when); - - var time = new Date(msg.when); - li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString()); - - $('html, body').stop(true, true) - .animate({ scrollTop: messageList.height() }); - }); - - function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) } diff --git a/examples/iris-chat/style.css b/examples/iris-chat/style.css index b7aadf8d..bc885c6f 100644 --- a/examples/iris-chat/style.css +++ b/examples/iris-chat/style.css @@ -1,3 +1,5 @@ +* { box-sizing: border-box; } + body { font-size: 15px; color: #262626; @@ -6,6 +8,31 @@ body { margin: 0; } +input, button { + padding: 15px; + border-radius: 50px; + outline: none; + border: 0; + font-size: 15px; +} + +input { + margin-right: 7px; +} + +button { + background: #ddd; +} + +button:hover { + background: #ccc; + cursor: pointer; +} + +.iris-identicon { + margin-right: 15px !important; +} + .chat { display: flex; flex-direction: row; @@ -24,7 +51,7 @@ body { .main { display: flex; flex-direction: column; - flex: 10 0 10em; + flex: 4 0 10em; } /*----- Main------- */ @@ -32,31 +59,30 @@ body { .online-user-list { flex:1; background-color: #efefef; - max-height:50px; - padding: 10px; + max-height:60px; + padding: 10px 15px; font-size: 12px; } .message-list { flex:1; overflow-y: scroll; - padding: 10px; + padding: 10px 15px; background-color: #e5ddd5; } .msg { background-color: #ffffff; - margin: 0 40px 10px 0; - padding: 10px; + margin: 0 90px 15px 0; + padding: 8px 10px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - border-radius: 10px; + border-radius: 15px; } .msg.our { - text-align: right; background-color: #d7f7c5; - border-radius: 10px 0px 10px 10px; - margin: 0 0px 10px 40px; + border-radius: 15px 0px 15px 15px; + margin: 0 0px 15px 90px; } .msg .time { @@ -65,38 +91,35 @@ body { color: rgba(0, 0, 0, 0.45); } -.typing-indicator { - flex:1; - max-height:30px; - background-color: #ccc; - padding: 10px; -} - .message-form { flex:1; flex-direction: row; max-height:70px; background-color: #efefef; - padding: 10px; + padding: 10px 15px; +} + +.message-form form { + display: flex; } .message-form input { - flex: 5; + flex: 1; width: auto; } .message-form button { - flex: 1; + flex: none; } /*----- Sidebar------- */ .user-info { flex:1; - max-height:50px; + max-height:60px; overflow-y: hidden; - overflow-x: wrap; - padding: 10px; + overflow-x: hidden; + padding: 10px 15px; background-color: #efefef; } @@ -110,12 +133,25 @@ body { } .chat-item { - padding: 20px 10px; + padding: 10px 15px; overflow-x: hidden; border-bottom: 1px solid #efefef; cursor: pointer; } +.chat-item .latest { + font-size: 12px; + color: rgba(0, 0, 0, 0.45); +} + .chat-item:hover { background: #f3f3f3; } + +.chat-item.new { + background-color: #9ee8ff; +} + +.chat-item.new:hover { + background-color: #99e1f7; +}