web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add avatars in the user list

Browse Source
This commit is contained in:
yflory
2017-06-30 16:57:23 +02:00
parent b6944e6638
commit b153dda6ff
8 changed files with 175 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
www/common/common-userlist.js
View File

@@ -49,8 +49,10 @@ define(function () {
exp.myUserName = myUserNameTemp;
myData = {};
myData[exp.myNetfluxId] = {
name: exp.myUserName,
uid: Cryptpad.getUid(),
name: exp.myUserName,
uid: Cryptpad.getUid(),
avatar: Cryptpad.getAvatarUrl(),
profile: Cryptpad.getProfileUrl()
};
addToUserData(myData);
Cryptpad.setAttribute('username', exp.myUserName, function (err) {
@@ -78,6 +80,8 @@ define(function () {
myData[exp.myNetfluxId] = {
name: "",
uid: Cryptpad.getUid(),
avatar: Cryptpad.getAvatarUrl(),
profile: Cryptpad.getProfileUrl()
};
addToUserData(myData);
onLocal();

119
www/common/cryptpad-common.js
View File

@@ -146,6 +146,16 @@ define([
}
return;
};
common.getProfileUrl = function () {
if (store && store.getProfile()) {
return store.getProfile().view;
}
};
common.getAvatarUrl = function () {
if (store && store.getProfile()) {
return store.getProfile().avatar;
}
};
var feedback = common.feedback = function (action, force) {
if (force !== true) {
@@ -1168,61 +1178,70 @@ define([
'image/jpg',
'image/gif',
];
common.displayAvatar = function ($container, href) {
common.displayAvatar = function ($container, href, name, cb) {
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);
var displayDefault = function () {
var text = name.trim().length ? name.trim().slice(0,1) : '?';
var $avatar = $('<span>', {'class': 'default'}).text(text);
$container.append($avatar);
if (cb) { cb(); }
};
if (!href) { return void displayDefault(); }
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) {
displayDefault();
return void console.error(e);
}
if (typeof data !== "number") { return void displayDefault(); }
if (common.bytesToMegabytes(data) > 0.5) { return void displayDefault(); }
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 void displayDefault();
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
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');
if (cb) { cb($img); }
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'column');
if (cb) { cb($img); }
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
});
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
});
});
}
});
}
};

4
www/common/fsStore.js
View File

@@ -211,6 +211,10 @@ define([
if (typeof(n) !== "string") { return; }
Cryptpad.changeDisplayName(n);
});
proxy.on('change', ['profile'], function () {
// Trigger userlist update when the avatar has changed
Cryptpad.changeDisplayName(proxy[Cryptpad.displayNameKey]);
});
proxy.on('change', [tokenKey], function () {
console.log('wut');
var localToken = tryParsing(localStorage.getItem(tokenKey));

24
www/common/toolbar2.js
View File

@@ -149,6 +149,7 @@ define([
return $.inArray(i, b) > -1;
});
};
var avatars = {};
var updateUserList = function (toolbar, config) {
// Make sure the elements are displayed
var $userButtons = toolbar.userlist;
@@ -189,7 +190,24 @@ define([
// Editors
editUsersNames.forEach(function (data) {
var name = data.name || Messages.anonymous;
var $span = $('<span>', {'title': name}).text(name);
var $span = $('<span>', {'title': name});
if (data.profile) {
$span.addClass('clickable');
$span.click(function () {
window.open('/profile/#' + data.profile);
});
}
if (data.avatar && avatars[data.avatar]) {
$span.append(avatars[data.avatar]);
$span.append(name);
} else {
Cryptpad.displayAvatar($span, data.avatar, name, function ($img) {
if (data.avatar && $img) {
avatars[data.avatar] = $img[0].outerHTML;
}
$span.append(name);
});
}
$span.data('uid', data.uid);
$editUsersList.append($span);
});
@@ -197,9 +215,9 @@ define([
// Viewers
if (numberOfViewUsers > 0) {
var viewText = '<span class="viewer">';
var viewText = '<div class="viewer">';
var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
viewText += numberOfViewUsers + ' ' + viewerText + '</div>';
$editUsers.append(viewText);
}