mirror of
https://github.com/amark/gun.git
synced 2025-11-26 15:35:59 +00:00
.
This commit is contained in:
Martti Malmi
parent
a50fc1e4f0
commit
1531c54137
@ -20,12 +20,16 @@
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div class="online-user-list"></div>
|
||||
<div class="message-list">Select or create chat to start messaging</div>
|
||||
<div class="online-user-list">New chat</div>
|
||||
<div class="message-list" id="message-list" style="display: none"></div>
|
||||
<div class="message-list" id="new-chat">
|
||||
<p><input id="paste-chat-link" type="text" placeholder="Paste someone's chat link"></p>
|
||||
<p><button class="copy-chat-link">Copy your chat link</button></p>
|
||||
</div>
|
||||
<div class="message-form">
|
||||
<form autocomplete="off">
|
||||
<input id="new-msg" type="text" placeholder="Type a message">
|
||||
<button>send</button>
|
||||
<button>Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@ -40,8 +44,9 @@
|
||||
var gun = Gun([location.origin + '/gun', 'https://gun-us.herokuapp.com/gun']);
|
||||
var chat = gun.get('converse/' + location.hash.slice(1));
|
||||
var chats = {};
|
||||
var activeChat;
|
||||
|
||||
var keyPromise = new Promise(resolve => {
|
||||
var getKey = new Promise(resolve => {
|
||||
var pair = localStorage.getItem('chatKeyPair');
|
||||
if (pair) {
|
||||
resolve(JSON.parse(pair));
|
||||
@ -53,20 +58,90 @@
|
||||
}
|
||||
});
|
||||
var key, myIdenticon;
|
||||
keyPromise.then(k => {
|
||||
getKey.then(k => {
|
||||
key = k;
|
||||
gun.user().auth(key);
|
||||
myIdenticon = $(new irisLib.Attribute({type:'keyID', value: key.pub}).identicon({width:40}));
|
||||
$(".user-info").append(myIdenticon);
|
||||
irisLib.Chat.getChats(gun, key, chatReceived);
|
||||
irisLib.Chat.getChats(gun, key, addChat);
|
||||
irisLib.Chat.setOnline(gun, true);
|
||||
var chatWith = getUrlParameter('chatWith');
|
||||
if (chatWith) {
|
||||
addChat(chatWith);
|
||||
showChat(pub);
|
||||
}
|
||||
});
|
||||
|
||||
function chatReceived(pub) {
|
||||
$('#paste-chat-link').on('keyup paste', event => {
|
||||
var val = $(event.target).val();
|
||||
if (val.length < 30 || val.indexOf('chatWith') === -1) {
|
||||
return;
|
||||
}
|
||||
var s = val.split('?');
|
||||
if (s.length !== 2) { return; }
|
||||
$(event.target).val('');
|
||||
var pub = getUrlParameter('chatWith', s[1]);
|
||||
addChat(pub);
|
||||
showChat(pub);
|
||||
});
|
||||
|
||||
$('.chat-item.new').click(() => {
|
||||
$('#message-list').hide();
|
||||
$('#new-chat').show();
|
||||
$(".online-user-list").empty();
|
||||
$(".online-user-list").text('New chat');
|
||||
});
|
||||
|
||||
$('.copy-chat-link').click(event => {
|
||||
copyToClipboard('https://chat.iris.to/?chatWith=' + key.pub);
|
||||
var t = $(event.target);
|
||||
var originalText = t.text();
|
||||
var originalWidth = t.width();
|
||||
t.width(originalWidth);
|
||||
t.text('Copied');
|
||||
setTimeout(() => {
|
||||
t.text(originalText);
|
||||
t.css('width', '');
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
function showChat(pub) {
|
||||
if (!pub || !Object.prototype.hasOwnProperty.call(chats, pub)) {
|
||||
return;
|
||||
}
|
||||
activeChat = pub;
|
||||
$(".chat-item").toggleClass('active', false);
|
||||
$('.chat-item[data-pub="' + pub +'"]').toggleClass('active', true);
|
||||
$("#message-list").empty();
|
||||
$("#message-list").show();
|
||||
$("#new-chat").hide();
|
||||
$(".message-form form").off('submit');
|
||||
$(".message-form form").on('submit', event => {
|
||||
event.preventDefault();
|
||||
chats[pub].send($('#new-msg').val());
|
||||
$('#new-msg').val('');
|
||||
});
|
||||
$(".online-user-list").empty();
|
||||
$(".online-user-list").append(chats[pub].identicon.clone());
|
||||
var msgs = Object.values(chats[pub].messages);
|
||||
msgs.forEach(addMessage);
|
||||
}
|
||||
|
||||
function addMessage(msg) {
|
||||
var msgEl = $(
|
||||
'<div class="msg"><div class="text">' + msg.text + '</div><div class="time">' +
|
||||
formatDate(msg.time) + '</div></div>'
|
||||
);
|
||||
msgEl.toggleClass('our', msg.selfAuthored ? true : false);
|
||||
$("#message-list").append(msgEl); // TODO: jquery insertAfter element with smaller timestamp
|
||||
}
|
||||
|
||||
function addChat(pub) {
|
||||
if (!pub || Object.prototype.hasOwnProperty.call(chats, pub)) {
|
||||
return;
|
||||
}
|
||||
var el = $('<div class="chat-item"><span class="latest"></span></div>');
|
||||
el.attr('data-pub', pub);
|
||||
chats[pub] = new irisLib.Chat({gun, key, participants: pub, onMessage: (msg, info) => {
|
||||
chats[pub].messages = chats[pub].messages || [];
|
||||
msg.selfAuthored = info.selfAuthored;
|
||||
@ -77,37 +152,60 @@
|
||||
var text = msg.text.length > 30 ? msg.text.slice(0,30) + '...' : msg.text;
|
||||
el.find('.latest').text(text);
|
||||
}
|
||||
if (activeChat === pub) {
|
||||
addMessage(msg);
|
||||
}
|
||||
}});
|
||||
chats[pub].identicon = $(new irisLib.Attribute({type: 'keyID', value: pub}).identicon({width:40}));
|
||||
el.prepend(chats[pub].identicon);
|
||||
el.click(() => {
|
||||
$(".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 = $(
|
||||
'<div class="msg"><div class="text">' + msg.text + '</div><div class="time">' +
|
||||
formatDate(msg.time) + '</div></div>'
|
||||
);
|
||||
el.toggleClass('our', msg.selfAuthored ? true : false);
|
||||
$(".message-list").append(el); // TODO: jquery insertAfter element with smaller timestamp
|
||||
});
|
||||
});
|
||||
el.click(() => showChat(pub));
|
||||
$(".chat-list").append(el);
|
||||
}
|
||||
|
||||
/* Helpers */
|
||||
|
||||
function formatDate(date) {
|
||||
var s = date.toISOString().split('T');
|
||||
return s[0] + ' ' + s[1].slice(0,5);
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
if (window.clipboardData && window.clipboardData.setData) {
|
||||
// Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
|
||||
return clipboardData.setData("Text", text);
|
||||
}
|
||||
else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
|
||||
var textarea = document.createElement("textarea");
|
||||
textarea.textContent = text;
|
||||
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
try {
|
||||
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
|
||||
}
|
||||
catch (ex) {
|
||||
console.warn("Copy to clipboard failed.", ex);
|
||||
return false;
|
||||
}
|
||||
finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getUrlParameter(sParam, sParams) {
|
||||
var sPageURL = sParams || window.location.search.substring(1),
|
||||
sURLVariables = sPageURL.split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
if (sParameterName[0] === sParam) {
|
||||
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -10,10 +10,10 @@ body {
|
||||
|
||||
input, button {
|
||||
padding: 15px;
|
||||
border-radius: 50px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -24,7 +24,7 @@ button {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button:hover, button:active, button:focus {
|
||||
background: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -61,7 +61,6 @@ button:hover {
|
||||
background-color: #efefef;
|
||||
max-height:60px;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
@ -76,7 +75,7 @@ button:hover {
|
||||
margin: 0 90px 15px 0;
|
||||
padding: 8px 10px;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 15px;
|
||||
border-radius: 0px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.msg.our {
|
||||
@ -144,14 +143,23 @@ button:hover {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.chat-item.active {
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.chat-item.new {
|
||||
background-color: #9ee8ff;
|
||||
padding: 22px 15px;
|
||||
}
|
||||
|
||||
.chat-item.new:hover {
|
||||
background-color: #99e1f7;
|
||||
}
|
||||
|
||||
#new-chat input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user