Avatar upload in the profile app
This commit is contained in:
yflory
parent
6c94605b9b
commit
19ff8a345d
4 changed files with 196 additions and 38 deletions
|
|
@ -12,12 +12,13 @@ define([
|
|||
'/common/common-metadata.js',
|
||||
'/common/common-codemirror.js',
|
||||
'/common/common-file.js',
|
||||
'/file/file-crypto.js',
|
||||
|
||||
'/common/clipboard.js',
|
||||
'/common/pinpad.js',
|
||||
'/customize/application_config.js'
|
||||
], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Title, Metadata,
|
||||
CodeMirror, Files, Clipboard, Pinpad, AppConfig) {
|
||||
CodeMirror, Files, FileCrypto, Clipboard, Pinpad, AppConfig) {
|
||||
|
||||
/* This file exposes functionality which is specific to Cryptpad, but not to
|
||||
any particular pad type. This includes functions for committing metadata
|
||||
|
|
@ -974,9 +975,14 @@ define([
|
|||
var ev = {
|
||||
target: data.target
|
||||
};
|
||||
if (data.filter && !data.filter(file)) {
|
||||
common.log('TODO: invalid avatar (type or size)');
|
||||
return;
|
||||
}
|
||||
data.FM.handleFile(file, ev);
|
||||
if (callback) { callback(); }
|
||||
});
|
||||
if (data.accept) { $input.attr('accept', data.accept); }
|
||||
button.click(function () { $input.click(); });
|
||||
break;
|
||||
case 'template':
|
||||
|
|
@ -1129,6 +1135,70 @@ define([
|
|||
return button;
|
||||
};
|
||||
|
||||
common.avatarAllowedTypes = [
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/gif',
|
||||
];
|
||||
common.displayAvatar = function ($container, href) {
|
||||
var MutationObserver = window.MutationObserver;
|
||||
$container.html('');
|
||||
if (href) {
|
||||
var parsed = common.parsePadUrl(href);
|
||||
var secret = common.getSecrets('file', parsed.hash);
|
||||
if (secret.keys && secret.channel) {
|
||||
var cryptKey = secret.keys && secret.keys.fileKeyStr;
|
||||
var hexFileName = common.base64ToHex(secret.channel);
|
||||
var src = common.getBlobPathFromHex(hexFileName);
|
||||
common.getFileSize(href, function (e, data) {
|
||||
if (e) { return void console.error(e); }
|
||||
if (typeof data !== "number") { return; }
|
||||
if (common.bytesToMegabytes(data) > 0.5) { return; }
|
||||
var $img = $('<media-tag>').appendTo($container);
|
||||
$img.attr('src', src);
|
||||
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
|
||||
require(['/common/media-tag.js'], function (MediaTag) {
|
||||
MediaTag.CryptoFilter.setAllowedMediaTypes(common.avatarAllowedTypes);
|
||||
MediaTag($img[0]);
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.type === 'childList' && mutation.addedNodes.length) {
|
||||
console.log(mutation);
|
||||
if (mutation.addedNodes.length > 1 ||
|
||||
mutation.addedNodes[0].nodeName !== 'IMG') {
|
||||
$img.remove();
|
||||
return;
|
||||
//TODO display default avatar
|
||||
}
|
||||
var $image = $img.find('img');
|
||||
var onLoad = function () {
|
||||
var w = $image.width();
|
||||
var h = $image.height();
|
||||
if (w>h) {
|
||||
$image.css('max-height', '100%');
|
||||
$img.css('flex-direction', 'row');
|
||||
return;
|
||||
}
|
||||
$image.css('max-width', '100%');
|
||||
$img.css('flex-direction', 'column');
|
||||
};
|
||||
if ($image[0].complete) { onLoad(); }
|
||||
$image.on('load', onLoad);
|
||||
}
|
||||
});
|
||||
});
|
||||
observer.observe($img[0], {
|
||||
attributes: false,
|
||||
childList: true,
|
||||
characterData: false
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Create a button with a dropdown menu
|
||||
// input is a config object with parameters:
|
||||
// - container (optional): the dropdown container (span)
|
||||
|
|
|
|||
|
|
@ -156,7 +156,6 @@ define([
|
|||
MediaTag(el);
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
console.log(mutation);
|
||||
if (mutation.type === 'childList') {
|
||||
var list_values = [].slice.call(el.children);
|
||||
mediaMap[el.getAttribute('src')] = list_values;
|
||||
|
|
|
|||
|
|
@ -196,51 +196,105 @@ define([
|
|||
cb();
|
||||
};
|
||||
var rt = APP.lm.realtime;
|
||||
var placeholder = "URL"; //TODO
|
||||
var placeholder = "URL"; //XXX
|
||||
createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
|
||||
};
|
||||
|
||||
var addAvatar = function ($container) {
|
||||
var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
|
||||
var $span = $('<span>').appendTo($block);
|
||||
if (APP.lm.proxy.avatar) {
|
||||
//var file = APP.lm.proxy.avatar;
|
||||
var $img = $('<media-tag>').appendTo($span);
|
||||
$img.attr('src', '/blob/45/45170bcd64aae1726b0b0e06c4360181a08bad9596640863');
|
||||
$img.attr('data-crypto-key', 'cryptpad:5vs/ciPzSAyHeP6XRwxpFZt/cjkRC+EE2CRw+/xfcVI=');
|
||||
require(['/common/media-tag.js'], function (MediaTag) {
|
||||
var allowedMediaTypes = [
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/gif',
|
||||
];
|
||||
MediaTag.CryptoFilter.setAllowedMediaTypes(allowedMediaTypes);
|
||||
MediaTag($img[0]);
|
||||
});
|
||||
}
|
||||
if (APP.readOnly) { return; }
|
||||
var allowedMediaTypes = Cryptpad.avatarAllowedTypes;
|
||||
var displayAvatar = function () {
|
||||
$span.html('');
|
||||
if (!APP.lm.proxy.avatar) {
|
||||
$('<img>', {
|
||||
src: '/customize/images/avatar.png',
|
||||
title: 'Avatar', // XXX
|
||||
alt: 'Avatar'
|
||||
}).appendTo($span);
|
||||
return;
|
||||
}
|
||||
Cryptpad.displayAvatar($span, APP.lm.proxy.avatar);
|
||||
|
||||
//var $button = $('<button>', {'class': 'btn btn-success'}).text('TODO: change avatar');
|
||||
//$block.append($button);
|
||||
if (APP.readOnly) { return; }
|
||||
|
||||
var $delButton = $('<button>', {'class': 'delete btn btn-danger fa fa-times'}); //XXX
|
||||
$span.append($delButton);
|
||||
$delButton.click(function () {
|
||||
console.log('clicked');
|
||||
var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
|
||||
Cryptpad.unpinPads([oldChanId], function (e) {
|
||||
if (e) { Cryptpad.log(e); }
|
||||
console.log('unpinned');
|
||||
delete APP.lm.proxy.avatar;
|
||||
delete Cryptpad.getProxy().profile.avatar;
|
||||
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
|
||||
console.log('synced1');
|
||||
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
|
||||
Cryptpad.whenRealtimeSyncs(driveRt, function () {
|
||||
console.log('synced2');
|
||||
displayAvatar();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
displayAvatar();
|
||||
if (APP.readOnly) { return; }
|
||||
|
||||
var fmConfig = {
|
||||
noHandlers: true,
|
||||
noStore: true,
|
||||
body: $('body'),
|
||||
onUploaded: function (ev, data) {
|
||||
console.log(data);
|
||||
var chanId = Cryptpad.hrefToHexChannelId(data.url);
|
||||
var profile = Cryptpad.getProxy().profile;
|
||||
var old = profile.avatar;
|
||||
var todo = function () {
|
||||
Cryptpad.pinPads([chanId], function (e) {
|
||||
if (e) { return void Cryptpad.log(e); }
|
||||
APP.lm.proxy.avatar = data.url;
|
||||
Cryptpad.getProxy().profile.avatar = data.url;
|
||||
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
|
||||
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
|
||||
Cryptpad.whenRealtimeSyncs(driveRt, function () {
|
||||
displayAvatar();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
if (old) {
|
||||
var oldChanId = Cryptpad.hrefToHexChannelId(old);
|
||||
Cryptpad.unpinPads([oldChanId], function (e) {
|
||||
if (e) { Cryptpad.log(e); }
|
||||
todo();
|
||||
});
|
||||
return;
|
||||
}
|
||||
todo();
|
||||
}
|
||||
};
|
||||
APP.FM = Cryptpad.createFileManager(fmConfig);
|
||||
var data = {FM: APP.FM};
|
||||
$block.append(Cryptpad.createButton('upload', false, data));
|
||||
var data = {
|
||||
FM: APP.FM,
|
||||
filter: function (file) {
|
||||
var sizeMB = Cryptpad.bytesToMegabytes(file.size);
|
||||
var type = file.type;
|
||||
return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
|
||||
},
|
||||
accept: ".gif,.jpg,.jpeg,.png"
|
||||
};
|
||||
var $upButton = Cryptpad.createButton('upload', false, data);
|
||||
$upButton.text(" Upload a new avatar");
|
||||
$upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
|
||||
$block.append($upButton);
|
||||
};
|
||||
|
||||
var addDescription = function ($container) {
|
||||
var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
|
||||
|
||||
if (APP.readOnly) {
|
||||
if (!APP.lm.proxy.description.trim()) { return void $block.hide(); }
|
||||
var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
|
||||
var val = Marked(APP.lm.proxy.description);
|
||||
$div.html(val);
|
||||
|
|
@ -274,13 +328,10 @@ define([
|
|||
|
||||
var addPublicKey = function ($container) {
|
||||
var $block = $('<div>', {id: PUBKEY_ID});
|
||||
var pubKey = Cryptpad.getProxy().edPublic;
|
||||
$block.text(pubKey);
|
||||
$container.append($block);
|
||||
};
|
||||
|
||||
var onReady = function () {
|
||||
// TODO: on reconnect, this is called multiple times...
|
||||
APP.$container.find('#'+CREATE_ID).remove();
|
||||
|
||||
if (!APP.initialized) {
|
||||
|
|
@ -332,13 +383,32 @@ define([
|
|||
var secret = Cryptpad.getSecrets();
|
||||
obj.profile = {};
|
||||
var channel = Cryptpad.createChannelId();
|
||||
obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
|
||||
obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
|
||||
obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
|
||||
andThen(obj.profile.edit);
|
||||
Cryptpad.pinPads([channel], function (e) {
|
||||
if (e) {
|
||||
if (e === 'E_OVER_LIMIT') {
|
||||
Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
|
||||
}
|
||||
return void Cryptpad.log('Error while creating your profile: ' + e); // XXX
|
||||
}
|
||||
obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
|
||||
obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
|
||||
obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
|
||||
andThen(obj.profile.edit);
|
||||
});
|
||||
};
|
||||
|
||||
// TODO: if not logged in, display a register button here?
|
||||
if (!Cryptpad.isLoggedIn()) { // XXX
|
||||
var $p = $('<p>').text('TODO: You have to register to create a profile');
|
||||
var $a = $('<a>', {
|
||||
href: '/register/'
|
||||
});
|
||||
$('<button>', {
|
||||
'class': 'btn btn-success',
|
||||
}).text(Messages.login_register).appendTo($a);
|
||||
$p.append($('<br>')).append($a);
|
||||
APP.$container.append($p);
|
||||
return;
|
||||
}
|
||||
var $create = $('<div>', {id: CREATE_ID});
|
||||
var $button = $('<button>', {'class': 'btn btn-success'});
|
||||
$button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX
|
||||
|
|
|
|||
|
|
@ -23,25 +23,43 @@
|
|||
width: 300px;
|
||||
//height: 350px;
|
||||
margin: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
&> span {
|
||||
display: inline-block;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.delete {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
opacity: 0.7;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
media-tag {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
vertical-align: top;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
button {
|
||||
|
|
@ -83,6 +101,7 @@
|
|||
position: relative;
|
||||
font-size: 16px;
|
||||
border: 1px solid #DDD;
|
||||
margin-bottom: 20px;
|
||||
.rendered {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue