nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-10-18 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

support for image posts!

Browse Source
This commit is contained in:
Martti Malmi 2020-05-15 17:17:01 +03:00
parent 68b1cc5313
commit 70c2f8d541
3 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/css/style.css
View File

@ -202,6 +202,10 @@ header #back-button {
max-width: 75%;
}
.msg-content img {
border-radius: 3px;
}
.emoji {
font-size: 1.3em;
line-height: 1em;
@ -375,6 +379,16 @@ header #back-button {
font-size: 35px !important;
}
#attachment-preview {
display: none;
text-align: center;
overflow: hidden;
}
#attachment-preview img {
max-height: 60vh;
}
#message-list {
display: flex;
max-width: 700px;

4
src/index.html
View File

@ -120,6 +120,7 @@
<!-- Chat view -->
<div class="main-view" id="message-view">
<div id="message-list"></div>
<div id="attachment-preview"></div>
</div>
<div id="not-seen-by-them" style="display: none">
<p>If the other person doesn't see your message, you can give them <b>your</b> chat link through some other channel:</p>
@ -127,8 +128,9 @@
</div>
<div class="message-form" style="display:none">
<form autocomplete="off">
<input name="attachment-input" type="file" class="hidden" id="attachment-input" accept="image/*" multiple>
<button type="button" id="attach-file">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.586 10.461l-10.05 10.075c-1.95 1.949-5.122 1.949-7.071 0s-1.95-5.122 0-7.072l10.628-10.585c1.17-1.17 3.073-1.17 4.243 0 1.169 1.17 1.17 3.072 0 4.242l-8.507 8.464c-.39.39-1.024.39-1.414 0s-.39-1.024 0-1.414l7.093-7.05-1.415-1.414-7.093 7.049c-1.172 1.172-1.171 3.073 0 4.244s3.071 1.171 4.242 0l8.507-8.464c.977-.977 1.464-2.256 1.464-3.536 0-2.769-2.246-4.999-5-4.999-1.28 0-2.559.488-3.536 1.465l-10.627 10.583c-1.366 1.368-2.05 3.159-2.05 4.951 0 3.863 3.13 7 7 7 1.792 0 3.583-.684 4.95-2.05l10.05-10.075-1.414-1.414z"/></svg>
</button>
<button type="button" id="emoji-picker">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>

41
src/js/app.js
View File

@ -327,6 +327,28 @@ if (!iris.util.isMobile) {
});
}
$('#attach-file').click(event => {
event.preventDefault();
$('#attachment-input').click();
})
$('#attachment-input').change(e => {
$('#attachment-preview').empty();
var files = $('#attachment-input')[0].files;
if (files) {
$('#attachment-preview').show();
$('#message-list').hide();
for (var i = 0;i < files.length;i++) {
getBase64(files[i]).then(base64 => {
chats[activeChat].attachments = chats[activeChat].attachments || [];
chats[activeChat].attachments.push({type: 'image', data: base64});
var preview = $('<img>').attr('src', base64);
$('#attachment-preview').append(preview);
});
}
}
});
$('#desktop-application-about').toggle(!iris.util.isMobile && !iris.util.isElectron);
$('#paste-chat-link').on('input', event => {
@ -963,9 +985,16 @@ function showChat(pub) {
event.preventDefault();
chats[pub].msgDraft = null;
var text = $('#new-msg').val();
if (!text.length) { return; }
if (!text.length && !chats[pub].attachments) { return; }
chats[pub].setTyping(false);
chats[pub].send(text);
var msg = {text};
if (chats[pub].attachments) {
msg.attachments = chats[pub].attachments;
}
chats[pub].send(msg);
chats[pub].attachments = null;
$('#attachment-preview').hide();
$('#message-list').show();
$('#new-msg').val('');
});
changeChatUnseenCount(pub, 0);
@ -1045,6 +1074,14 @@ function addMessage(msg, chatId) {
'<div class="msg-content"><div class="time">' + iris.util.formatTime(msg.time) + seenHtml + '</div></div>'
);
msgContent.prepend(textEl);
if (msg.attachments) {
msg.attachments.forEach(a => {
if (a.type.indexOf('image') === 0 && a.data) {
var img = $('<img>').attr('src', a.data);
msgContent.prepend(img);
}
})
}
if (chats[chatId].uuid && !msg.info.selfAuthored) {
var profile = chats[chatId].participantProfiles[msg.info.from];
var name = profile && profile.name;