mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
support for image posts!
This commit is contained in:
parent
68b1cc5313
commit
70c2f8d541
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user