work on contacts2 until feature parity is reached
ansuz
7 years ago
parent
002eed0d6f
commit
89a13d4b21
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="cp pad">
|
||||||
|
<head>
|
||||||
|
<title>CryptPad</title>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
#pad-iframe {
|
||||||
|
position:fixed;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
bottom:0px;
|
||||||
|
right:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
border:none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script async data-bootload="/contacts/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
|
||||||
|
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
||||||
|
</head>
|
||||||
|
<body class="loading-hidden">
|
||||||
|
<div id="toolbar" class="toolbar-container"></div>
|
||||||
|
<div id="app">
|
||||||
|
<div id="friendList"></div>
|
||||||
|
<div id="messaging"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
|
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||||
|
'less!/contacts/main.less',
|
||||||
|
'less!/customize/src/less/toolbar.less',
|
||||||
|
], function ($) {
|
||||||
|
$('.loading-hidden').removeClass('loading-hidden');
|
||||||
|
// dirty hack to get rid the flash of the lock background
|
||||||
|
setTimeout(function () {
|
||||||
|
$('#app').addClass('ready');
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'/bower_components/chainpad-crypto/crypto.js',
|
||||||
|
'/common/toolbar2.js',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
|
||||||
|
'/common/common-messenger.js',
|
||||||
|
'/contacts2/messenger-ui.js',
|
||||||
|
|
||||||
|
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
|
'less!/customize/src/less/cryptpad.less',
|
||||||
|
], function ($, Crypto, Toolbar, Cryptpad, Messenger, UI) {
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
|
||||||
|
var APP = window.APP = {
|
||||||
|
Cryptpad: Cryptpad
|
||||||
|
};
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
var andThen = function () {
|
||||||
|
Cryptpad.addLoadingScreen();
|
||||||
|
|
||||||
|
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||||
|
var $iframe = $('#pad-iframe').contents();
|
||||||
|
//var $appContainer = $iframe.find('#app');
|
||||||
|
var $list = $iframe.find('#friendList');
|
||||||
|
var $messages = $iframe.find('#messaging');
|
||||||
|
var $bar = $iframe.find('.toolbar-container');
|
||||||
|
|
||||||
|
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
||||||
|
|
||||||
|
|
||||||
|
var configTb = {
|
||||||
|
displayed: displayed,
|
||||||
|
ifrw: ifrw,
|
||||||
|
common: Cryptpad,
|
||||||
|
$container: $bar,
|
||||||
|
network: Cryptpad.getNetwork(),
|
||||||
|
pageTitle: Messages.contacts_title,
|
||||||
|
};
|
||||||
|
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
||||||
|
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
||||||
|
|
||||||
|
Cryptpad.getProxy().on('disconnect', function () {
|
||||||
|
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
||||||
|
Cryptpad.enableMessaging(false);
|
||||||
|
});
|
||||||
|
Cryptpad.getProxy().on('reconnect', function (uid) {
|
||||||
|
console.error('reconnecting: ', uid);
|
||||||
|
Cryptpad.findOKButton().click();
|
||||||
|
|
||||||
|
//APP.messenger.cleanFriendChannels();
|
||||||
|
//APP.messenger.openFriendChannels();
|
||||||
|
//APP.messenger.setEditable(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
var $infoBlock = $('<div>', {'class': 'info'}).appendTo($messages);
|
||||||
|
$('<h2>').text(Messages.contacts_info1).appendTo($infoBlock);
|
||||||
|
var $ul = $('<ul>').appendTo($infoBlock);
|
||||||
|
$('<li>').text(Messages.contacts_info2).appendTo($ul);
|
||||||
|
$('<li>').text(Messages.contacts_info3).appendTo($ul);
|
||||||
|
//$('<li>').text(Messages.contacts_info4).appendTo($ul);
|
||||||
|
|
||||||
|
|
||||||
|
//var ui = APP.ui = Cryptpad.initMessagingUI(Cryptpad, $list, $messages);
|
||||||
|
//APP.messenger = Cryptpad.initMessaging(Cryptpad, ui);
|
||||||
|
|
||||||
|
var messenger = window.messenger = Messenger.messenger(Cryptpad);
|
||||||
|
UI.create(messenger, $list, $messages);
|
||||||
|
|
||||||
|
Cryptpad.removeLoadingScreen();
|
||||||
|
};
|
||||||
|
|
||||||
|
Cryptpad.ready(function () {
|
||||||
|
andThen();
|
||||||
|
Cryptpad.reportAppUsage();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,324 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/common/hyperscript.js',
|
||||||
|
'/bower_components/marked/marked.min.js',
|
||||||
|
], function ($, Cryptpad, h, Marked) {
|
||||||
|
// TODO use our fancy markdown and support media-tags
|
||||||
|
Marked.setOptions({ sanitize: true, });
|
||||||
|
|
||||||
|
var UI = {};
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
|
||||||
|
var stub = function (label) {
|
||||||
|
console.error('stub: ' + label);
|
||||||
|
};
|
||||||
|
|
||||||
|
var dataQuery = function (curvePublic) {
|
||||||
|
return '[data-key="' + curvePublic + '"]';
|
||||||
|
};
|
||||||
|
|
||||||
|
UI.create = function (messenger, $userlist, $messages) {
|
||||||
|
var state = {
|
||||||
|
active: '',
|
||||||
|
};
|
||||||
|
var avatars = state.avatars = {};
|
||||||
|
var setActive = function (curvePublic) {
|
||||||
|
state.active = curvePublic;
|
||||||
|
};
|
||||||
|
var isActive = function (curvePublic) {
|
||||||
|
return curvePublic === state.active;
|
||||||
|
};
|
||||||
|
|
||||||
|
var find = {};
|
||||||
|
find.inList = function (curvePublic) {
|
||||||
|
return $userlist.find(dataQuery(curvePublic));
|
||||||
|
};
|
||||||
|
|
||||||
|
var notify = function (curvePublic) {
|
||||||
|
find.inList(curvePublic).addClass('notify');
|
||||||
|
};
|
||||||
|
var unnotify = function (curvePublic) {
|
||||||
|
find.inList(curvePublic).removeClass('notify');
|
||||||
|
};
|
||||||
|
|
||||||
|
var markup = {};
|
||||||
|
markup.message = function (msg, name) {
|
||||||
|
return h('div.message', {
|
||||||
|
title: msg.time? new Date(msg.time).toLocaleString(): '?',
|
||||||
|
}, [
|
||||||
|
name? h('div.sender', name): undefined,
|
||||||
|
h('div.content', msg.text),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
markup.chatbox = function (curvePublic, data) {
|
||||||
|
var moreHistory = h('span.more-history', ['get more history']); // TODO translate
|
||||||
|
var displayName = data.displayName;
|
||||||
|
|
||||||
|
$(moreHistory).click(function () {
|
||||||
|
stub('get older history');
|
||||||
|
console.log('getting history');
|
||||||
|
});
|
||||||
|
|
||||||
|
var removeHistory = h('span.remove-history.fa.fa-eraser', {
|
||||||
|
title: Messages.contacts_removeHistoryTitle
|
||||||
|
});
|
||||||
|
|
||||||
|
$(removeHistory).click(function () {
|
||||||
|
Cryptpad.confirm(Messages.contacts_confirmRemoveHistory, function (yes) {
|
||||||
|
if (!yes) { return; }
|
||||||
|
Cryptpad.clearOwnedChannel(data.channel, function (e) {
|
||||||
|
if (e) {
|
||||||
|
console.error(e);
|
||||||
|
Cryptpad.alert(Messages.contacts_removeHistoryServerError);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var avatar = h('div.avatar');
|
||||||
|
var header = h('div.header', [
|
||||||
|
avatar,
|
||||||
|
moreHistory,
|
||||||
|
removeHistory,
|
||||||
|
]);
|
||||||
|
var messages = h('div.messages');
|
||||||
|
var input = h('textarea', {
|
||||||
|
placeholder: Messages.contacts_typeHere
|
||||||
|
});
|
||||||
|
var sendButton = h('button.btn.btn-primary.fa.fa-paper-plane', {
|
||||||
|
title: Messages.contacts_send,
|
||||||
|
});
|
||||||
|
|
||||||
|
var rightCol = h('span.right-col', [
|
||||||
|
h('span.name', displayName),
|
||||||
|
]);
|
||||||
|
|
||||||
|
var $avatar = $(avatar);
|
||||||
|
if (data.avatar && avatars[data.avatar]) {
|
||||||
|
$avatar.append(avatars[data.avatar]).append(rightCol);
|
||||||
|
} else {
|
||||||
|
Cryptpad.displayAvatar($avatar, data.avatar, data.displayName, function ($img) {
|
||||||
|
if (data.avatar && $img) {
|
||||||
|
avatars[data.avatar] = $img[0].outerHTML;
|
||||||
|
}
|
||||||
|
$avatar.append(rightCol);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var sending = false;
|
||||||
|
var send = function (content) {
|
||||||
|
if (sending) { return false; }
|
||||||
|
sending = true;
|
||||||
|
messenger.sendMessage(curvePublic, content, function (e) {
|
||||||
|
if (e) {
|
||||||
|
// failed to send
|
||||||
|
return void console.error('failed to send');
|
||||||
|
}
|
||||||
|
input.value = '';
|
||||||
|
sending = false;
|
||||||
|
console.log('sent successfully');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var onKeyDown = function (e) {
|
||||||
|
// ignore anything that isn't 'enter'
|
||||||
|
if (e.keyCode !== 13) { return; }
|
||||||
|
// send unless they're holding a ctrl-key or shift
|
||||||
|
if (!e.ctrlKey && !e.shiftKey) {
|
||||||
|
send(this.value);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// insert a newline if they're holding either
|
||||||
|
var val = this.value;
|
||||||
|
var start = this.selectionState;
|
||||||
|
var end = this.selectionEnd;
|
||||||
|
|
||||||
|
if (![start,end].some(function (x) {
|
||||||
|
return typeof(x) !== 'number';
|
||||||
|
})) {
|
||||||
|
this.value = val.slice(0, start) + '\n' + val.slice(end);
|
||||||
|
this.selectionStart = this.selectionEnd = start + 1;
|
||||||
|
} else if (document.selection && document.selection.createRange) {
|
||||||
|
this.focus();
|
||||||
|
var range = document.selection.createRange();
|
||||||
|
range.text = '\r\n';
|
||||||
|
range.collapse(false);
|
||||||
|
range.select();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
$(input).on('keydown', onKeyDown);
|
||||||
|
$(sendButton).click(function () { send(input.value); });
|
||||||
|
|
||||||
|
return h('div.chat', {
|
||||||
|
'data-key': curvePublic,
|
||||||
|
}, [
|
||||||
|
header,
|
||||||
|
messages,
|
||||||
|
h('div.input', [
|
||||||
|
input,
|
||||||
|
sendButton,
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
var hideInfo = function () {
|
||||||
|
$messages.find('.info').hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
var getChat = function (curvePublic) {
|
||||||
|
return $messages.find(dataQuery(curvePublic));
|
||||||
|
};
|
||||||
|
|
||||||
|
var updateStatus = function (curvePublic) {
|
||||||
|
var $status = find.inList(curvePublic).find('.status');
|
||||||
|
messenger.getStatus(curvePublic, function (e, online) {
|
||||||
|
if (e) { return void console.error(e); }
|
||||||
|
if (online) {
|
||||||
|
return void $status
|
||||||
|
.removeClass('offline').addClass('online');
|
||||||
|
}
|
||||||
|
$status.removeClass('online').addClass('offline');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var display = function (curvePublic) {
|
||||||
|
setActive(curvePublic);
|
||||||
|
unnotify(curvePublic);
|
||||||
|
var $chat = getChat(curvePublic);
|
||||||
|
hideInfo();
|
||||||
|
$messages.find('div.chat[data-key]').hide();
|
||||||
|
if ($chat.length) {
|
||||||
|
return void $chat.show();
|
||||||
|
}
|
||||||
|
messenger.getFriendInfo(curvePublic, function (e, info) {
|
||||||
|
if (e) { return void console.error(e); } // FIXME
|
||||||
|
$messages.append(markup.chatbox(curvePublic, info));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var removeFriend = function (curvePublic) {
|
||||||
|
messenger.removeFriend(curvePublic, function (e, removed) {
|
||||||
|
if (e) { return void console.error(e); }
|
||||||
|
console.log(removed);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var friendExistsInUserList = function (curvePublic) {
|
||||||
|
return !!$userlist.find(dataQuery(curvePublic)).length;
|
||||||
|
};
|
||||||
|
|
||||||
|
markup.friend = function (data) {
|
||||||
|
var curvePublic = data.curvePublic;
|
||||||
|
var friend = h('div.friend.avatar', {
|
||||||
|
'data-key': curvePublic,
|
||||||
|
});
|
||||||
|
|
||||||
|
var remove = h('span.remove.fa.fa-user-times', {
|
||||||
|
title: Messages.contacts_remove
|
||||||
|
});
|
||||||
|
var status = h('span.status');
|
||||||
|
var rightCol = h('span.right-col', [
|
||||||
|
h('span.name', [data.displayName]),
|
||||||
|
remove,
|
||||||
|
]);
|
||||||
|
|
||||||
|
var $friend = $(friend)
|
||||||
|
.click(function () {
|
||||||
|
display(curvePublic);
|
||||||
|
})
|
||||||
|
.dblclick(function () {
|
||||||
|
if (data.profile) { window.open('/profile/#' + data.profile); }
|
||||||
|
});
|
||||||
|
|
||||||
|
$(remove).click(function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
Cryptpad.confirm(Messages._getKey('contacts_confirmRemove', [
|
||||||
|
Cryptpad.fixHTML(data.displayName)
|
||||||
|
]), function (yes) {
|
||||||
|
if (!yes) { return; }
|
||||||
|
stub('remove friend: ' + curvePublic);
|
||||||
|
removeFriend(curvePublic);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (data.avatar && avatars[data.avatar]) {
|
||||||
|
$friend.append(avatars[data.avatar]);
|
||||||
|
$friend.append(rightCol);
|
||||||
|
} else {
|
||||||
|
Cryptpad.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
|
||||||
|
if (data.avatar && $img) {
|
||||||
|
avatars[data.avatar] = $img[0].outerHTML;
|
||||||
|
}
|
||||||
|
$friend.append(rightCol);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$friend.append(status);
|
||||||
|
return $friend;
|
||||||
|
};
|
||||||
|
|
||||||
|
var displayNames = {};
|
||||||
|
|
||||||
|
messenger.on('message', function (message) {
|
||||||
|
console.log(JSON.stringify(message));
|
||||||
|
Cryptpad.notify();
|
||||||
|
var curvePublic = message.curve;
|
||||||
|
|
||||||
|
if (!isActive(curvePublic)) { notify(curvePublic); }
|
||||||
|
|
||||||
|
var name = displayNames[curvePublic];
|
||||||
|
var chat = getChat(curvePublic, name);
|
||||||
|
var el_message = markup.message(message, name);
|
||||||
|
|
||||||
|
var $chat = $(chat);
|
||||||
|
console.log(chat, $chat, el_message.outerHTML);
|
||||||
|
$chat.find('.messages').append(el_message);
|
||||||
|
|
||||||
|
// TODO notify if a message is newer than `lastKnownHash`
|
||||||
|
});
|
||||||
|
|
||||||
|
messenger.on('join', function (curvePublic, channel) {
|
||||||
|
console.log('join', curvePublic, channel);
|
||||||
|
updateStatus(curvePublic);
|
||||||
|
});
|
||||||
|
messenger.on('leave', function (curvePublic, channel) {
|
||||||
|
console.log('leave', curvePublic, channel);
|
||||||
|
updateStatus(curvePublic);
|
||||||
|
});
|
||||||
|
|
||||||
|
// change in your friend list
|
||||||
|
messenger.on('update', function (info, curvePublic) {
|
||||||
|
curvePublic = curvePublic;
|
||||||
|
});
|
||||||
|
|
||||||
|
Cryptpad.onDisplayNameChanged(function () {
|
||||||
|
messenger.checkNewFriends();
|
||||||
|
messenger.updateMyData();
|
||||||
|
});
|
||||||
|
|
||||||
|
messenger.getFriendList(function (e, keys) {
|
||||||
|
keys.forEach(function (k) {
|
||||||
|
messenger.openFriendChannel(k, function (e) {
|
||||||
|
if (e) { return void console.error(e); }
|
||||||
|
// don't add friends that are already in your userlist
|
||||||
|
if (friendExistsInUserList(k)) { return; }
|
||||||
|
|
||||||
|
messenger.getFriendInfo(k, function (e, info) {
|
||||||
|
if (e) { return console.error(e); }
|
||||||
|
var curvePublic = info.curvePublic;
|
||||||
|
var name = displayNames[curvePublic] = info.displayName;
|
||||||
|
var friend = markup.friend(info, name);
|
||||||
|
$userlist.append(friend);
|
||||||
|
updateStatus(curvePublic);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return UI;
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue