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

Move the mediatag and avatar code outsite of common-ui-elements

Browse Source
This commit is contained in:
yflory 2020-03-30 12:09:12 +02:00
parent 7047abe407
commit 75e5d3cc42
11 changed files with 55 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
www/common/common-ui-elements.js
View File

@ -8,7 +8,6 @@ define([
'/common/common-constants.js', '/common/common-constants.js',
'/common/common-feedback.js', '/common/common-feedback.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/media-tag.js',
'/common/clipboard.js', '/common/clipboard.js',
'/customize/messages.js', '/customize/messages.js',
'/customize/application_config.js', '/customize/application_config.js',
@ -18,19 +17,10 @@ define([
'/common/visible.js', '/common/visible.js',
'css!/customize/fonts/cptools/style.css', 'css!/customize/fonts/cptools/style.css',
'/bower_components/croppie/croppie.min.js', ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, Clipboard,
'css!/bower_components/croppie/croppie.css',
], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
Messages, AppConfig, Pages, NThen, InviteInner, Visible) { Messages, AppConfig, Pages, NThen, InviteInner, Visible) {
var UIElements = {}; var UIElements = {};
// Configure MediaTags to use our local viewer
if (MediaTag) {
MediaTag.setDefaultConfig('pdf', {
viewer: '/common/pdfjs/web/viewer.html'
});
}
UIElements.prettySize = function (bytes) { UIElements.prettySize = function (bytes) {
var kB = Util.bytesToKilobytes(bytes); var kB = Util.bytesToKilobytes(bytes);
if (kB < 1024) { return kB + Messages.KB; } if (kB < 1024) { return kB + Messages.KB; }
@ -110,7 +100,7 @@ define([
var data = users[key]; var data = users[key];
var name = data.displayName || data.name || Messages.anonymous; var name = data.displayName || data.name || Messages.anonymous;
var avatar = h('span.cp-usergrid-avatar.cp-avatar'); var avatar = h('span.cp-usergrid-avatar.cp-avatar');
UIElements.displayAvatar(common, $(avatar), data.avatar, name); common.displayAvatar($(avatar), data.avatar, name);
var removeBtn, el; var removeBtn, el;
if (config.remove) { if (config.remove) {
removeBtn = h('span.fa.fa-times'); removeBtn = h('span.fa.fa-times');
@ -1930,205 +1920,6 @@ define([
}; };
}; };
// Avatars
UIElements.displayMediatagImage = function (Common, $tag, cb) {
if (!$tag.length || !$tag.is('media-tag')) { return void cb('NOT_MEDIATAG'); }
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
if (mutation.addedNodes.length > 1 ||
mutation.addedNodes[0].nodeName !== 'IMG') {
return void cb('NOT_IMAGE');
}
var $image = $tag.find('img');
var onLoad = function () {
var img = new Image();
img.onload = function () {
var _cb = cb;
cb = $.noop;
_cb(null, $image, img);
};
img.src = $image.attr('src');
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
});
observer.observe($tag[0], {
attributes: false,
childList: true,
characterData: false
});
MediaTag($tag[0]).on('error', function (data) {
console.error(data);
});
};
var emoji_patt = /([\uD800-\uDBFF][\uDC00-\uDFFF])/;
var isEmoji = function (str) {
return emoji_patt.test(str);
};
var emojiStringToArray = function (str) {
var split = str.split(emoji_patt);
var arr = [];
for (var i=0; i<split.length; i++) {
var char = split[i];
if (char !== "") {
arr.push(char);
}
}
return arr;
};
var getFirstEmojiOrCharacter = UIElements.getFirstCharacter = function (str) {
if (!str || !str.trim()) { return '?'; }
var emojis = emojiStringToArray(str);
return isEmoji(emojis[0])? emojis[0]: str[0];
};
var avatars = {};
UIElements.setAvatar = function (hash, data) {
avatars[hash] = data;
};
UIElements.getAvatar = function (hash) {
return avatars[hash];
};
UIElements.displayAvatar = function (common, $container, href, name, cb) {
var displayDefault = function () {
var text = (href && typeof(href) === "string") ? href : getFirstEmojiOrCharacter(name);
var $avatar = $('<span>', {'class': 'cp-avatar-default'}).text(text);
$container.append($avatar);
if (cb) { cb(); }
};
if (!window.Symbol) { return void displayDefault(); } // IE doesn't have Symbol
if (!href || href.length === 1) { return void displayDefault(); }
var centerImage = function ($img, $image, img) {
var w = img.width;
var h = img.height;
if (w>h) {
$image.css('max-height', '100%');
$img.css('flex-direction', 'column');
if (cb) { cb($img); }
return;
}
$image.css('max-width', '100%');
$img.css('flex-direction', 'row');
if (cb) { cb($img); }
};
var parsed = Hash.parsePadUrl(href);
if (parsed.type !== "file" || parsed.hashData.type !== "file") {
var $img = $('<media-tag>').appendTo($container);
var img = new Image();
$(img).attr('src', href);
img.onload = function () {
centerImage($img, $(img), img);
$(img).appendTo($img);
};
return;
}
// No password for avatars
var privateData = common.getMetadataMgr().getPrivateData();
var origin = privateData.fileHost || privateData.origin;
var secret = Hash.getSecrets('file', parsed.hash);
if (secret.keys && secret.channel) {
var hexFileName = secret.channel;
var cryptKey = Hash.encodeBase64(secret.keys && secret.keys.cryptKey);
var src = origin + Hash.getBlobPathFromHex(hexFileName);
common.getFileSize(hexFileName, function (e, data) {
if (e || !data) { return void displayDefault(); }
if (typeof data !== "number") { return void displayDefault(); }
if (Util.bytesToMegabytes(data) > 0.5) { return void displayDefault(); }
var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
UIElements.displayMediatagImage(common, $img, function (err, $image, img) {
if (err) { return void console.error(err); }
centerImage($img, $image, img);
});
});
}
};
var transformAvatar = function (file, cb) {
if (file.type === 'image/gif') { return void cb(file); }
var $croppie = $('<div>', {
'class': 'cp-app-profile-resizer'
});
if (typeof ($croppie.croppie) !== "function") {
console.warn('fuck');
return void cb(file);
}
var todo = function () {
UI.confirm($croppie[0], function (yes) {
if (!yes) { return; }
$croppie.croppie('result', {
type: 'blob',
size: {width: 300, height: 300}
}).then(function(blob) {
blob.lastModifiedDate = new Date();
blob.name = 'avatar';
cb(blob);
});
});
};
var reader = new FileReader();
reader.onload = function(e) {
$croppie.croppie({
url: e.target.result,
viewport: { width: 100, height: 100 },
boundary: { width: 400, height: 300 },
});
todo();
};
reader.readAsDataURL(file);
};
UIElements.addAvatar = function (common, cb) {
var AVATAR_SIZE_LIMIT = 0.5;
var allowedMediaTypes = [
'image/png',
'image/jpeg',
'image/jpg',
'image/gif',
];
var fmConfig = {
noHandlers: true,
noStore: true,
body: $('body'),
onUploaded: cb
};
var FM = common.createFileManager(fmConfig);
var accepted = ".gif,.jpg,.jpeg,.png";
var data = {
FM: FM,
filter: function (file) {
var sizeMB = Util.bytesToMegabytes(file.size);
var type = file.type;
// We can't resize .gif so we have to display an error if it is too big
if (sizeMB > AVATAR_SIZE_LIMIT && type === 'image/gif') {
UI.log(Messages._getKey('profile_uploadSizeError', [
Messages._getKey('formattedMB', [AVATAR_SIZE_LIMIT])
]));
return false;
}
// Display an error if the image type is not allowed
if (allowedMediaTypes.indexOf(type) === -1) {
UI.log(Messages._getKey('profile_uploadTypeError', [
accepted.split(',').join(', ')
]));
return false;
}
return true;
},
transformer: transformAvatar,
accept: accepted
};
return data;
};
/* Create a usage bar which keeps track of how much storage space is used /* Create a usage bar which keeps track of how much storage space is used
by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls, by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
so we throttle its usage. Clients will not update more than once per so we throttle its usage. Clients will not update more than once per
@ -2640,7 +2431,7 @@ define([
$displayName.text(newName || Messages.anonymous); $displayName.text(newName || Messages.anonymous);
if (accountName && oldUrl !== url) { if (accountName && oldUrl !== url) {
$avatar.html(''); $avatar.html('');
UIElements.displayAvatar(Common, $avatar, url, Common.displayAvatar($avatar, url,
newName || Messages.anonymous, function ($img) { newName || Messages.anonymous, function ($img) {
oldUrl = url; oldUrl = url;
$userAdmin.find('> button').removeClass('cp-avatar'); $userAdmin.find('> button').removeClass('cp-avatar');
@ -2879,6 +2670,7 @@ define([
}); });
}; };
// XXX add txid
UIElements.initFilePicker = function (common, cfg) { UIElements.initFilePicker = function (common, cfg) {
var onSelect = cfg.onSelect || $.noop; var onSelect = cfg.onSelect || $.noop;
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
@ -3028,7 +2820,7 @@ define([
var teams = Object.keys(privateData.teams).map(function (id) { var teams = Object.keys(privateData.teams).map(function (id) {
var data = privateData.teams[id]; var data = privateData.teams[id];
var avatar = h('span.cp-creation-team-avatar.cp-avatar'); var avatar = h('span.cp-creation-team-avatar.cp-avatar');
UIElements.displayAvatar(common, $(avatar), data.avatar, data.name); common.displayAvatar($(avatar), data.avatar, data.name);
return h('div.cp-creation-team', { return h('div.cp-creation-team', {
'data-id': id, 'data-id': id,
title: data.name, title: data.name,
@ -3725,6 +3517,9 @@ define([
return m; return m;
}; };
UIElements.getMediaTagPreview = function () {
};
UIElements.displayFriendRequestModal = function (common, data) { UIElements.displayFriendRequestModal = function (common, data) {
var msg = data.content.msg; var msg = data.content.msg;
var userData = msg.content.user; var userData = msg.content.user;

21
www/common/common-util.js
View File

@ -445,6 +445,27 @@
return false; return false;
}; };
var emoji_patt = /([\uD800-\uDBFF][\uDC00-\uDFFF])/;
var isEmoji = function (str) {
return emoji_patt.test(str);
};
var emojiStringToArray = function (str) {
var split = str.split(emoji_patt);
var arr = [];
for (var i=0; i<split.length; i++) {
var char = split[i];
if (char !== "") {
arr.push(char);
}
}
return arr;
};
Util.getFirstCharacter = function (str) {
if (!str || !str.trim()) { return '?'; }
var emojis = emojiStringToArray(str);
return isEmoji(emojis[0])? emojis[0]: str[0];
};
if (typeof(module) !== 'undefined' && module.exports) { if (typeof(module) !== 'undefined' && module.exports) {
module.exports = Util; module.exports = Util;
} else if ((typeof(define) !== 'undefined' && define !== null) && (define.amd !== null)) { } else if ((typeof(define) !== 'undefined' && define !== null) && (define.amd !== null)) {

2
www/common/messenger-ui.js
View File

@ -879,7 +879,7 @@ define([
h('i.fa.fa-bell'), h('i.fa.fa-bell'),
Messages.contacts_unmute || 'unmute' Messages.contacts_unmute || 'unmute'
]); ]);
UIElements.displayAvatar(common, $(avatar), data.avatar, data.name); common.displayAvatar($(avatar), data.avatar, data.name);
$(button).click(function () { $(button).click(function () {
unmuteUser(curve, button); unmuteUser(curve, button);
execCommand('UNMUTE_USER', curve, function (e, data) { execCommand('UNMUTE_USER', curve, function (e, data) {

10
www/common/sframe-common-codemirror.js
View File

@ -4,11 +4,12 @@ define([
'/common/themes.js', '/common/themes.js',
'/customize/messages.js', '/customize/messages.js',
'/common/common-ui-elements.js', '/common/common-ui-elements.js',
'/common/inner/common-mediatag.js',
'/common/common-hash.js', '/common/common-hash.js',
'/common/common-util.js', '/common/common-util.js',
'/common/text-cursor.js', '/common/text-cursor.js',
'/bower_components/chainpad/chainpad.dist.js', '/bower_components/chainpad/chainpad.dist.js',
], function ($, Modes, Themes, Messages, UIElements, Hash, Util, TextCursor, ChainPad) { ], function ($, Modes, Themes, Messages, UIElements, MT, Hash, Util, TextCursor, ChainPad) {
var module = {}; var module = {};
var cursorToPos = function(cursor, oldText) { var cursorToPos = function(cursor, oldText) {
@ -454,12 +455,7 @@ define([
})[0]; })[0];
}; };
var makeTippy = function (cursor) { var makeTippy = function (cursor) {
var html = '<span class="cp-cursor-avatar">'; return MT.getCursorAvatar(cursor);
if (cursor.avatar && UIElements.getAvatar(cursor.avatar)) {
html += UIElements.getAvatar(cursor.avatar);
}
html += cursor.name + '</span>';
return html;
}; };
var marks = {}; var marks = {};
exp.removeCursors = function () { exp.removeCursors = function () {

7
www/common/sframe-common.js
View File

@ -11,6 +11,7 @@ define([
'/common/sframe-common-codemirror.js', '/common/sframe-common-codemirror.js',
'/common/sframe-common-cursor.js', '/common/sframe-common-cursor.js',
'/common/sframe-common-mailbox.js', '/common/sframe-common-mailbox.js',
'/common/inner/common-mediatag.js',
'/common/metadata-manager.js', '/common/metadata-manager.js',
'/customize/application_config.js', '/customize/application_config.js',
@ -35,6 +36,7 @@ define([
CodeMirror, CodeMirror,
Cursor, Cursor,
Mailbox, Mailbox,
MT,
MetadataMgr, MetadataMgr,
AppConfig, AppConfig,
CommonRealtime, CommonRealtime,
@ -90,8 +92,8 @@ define([
funcs.initFilePicker = callWithCommon(UIElements.initFilePicker); funcs.initFilePicker = callWithCommon(UIElements.initFilePicker);
funcs.openFilePicker = callWithCommon(UIElements.openFilePicker); funcs.openFilePicker = callWithCommon(UIElements.openFilePicker);
funcs.openTemplatePicker = callWithCommon(UIElements.openTemplatePicker); funcs.openTemplatePicker = callWithCommon(UIElements.openTemplatePicker);
funcs.displayMediatagImage = callWithCommon(UIElements.displayMediatagImage); funcs.displayMediatagImage = callWithCommon(MT.displayMediatagImage);
funcs.displayAvatar = callWithCommon(UIElements.displayAvatar); funcs.displayAvatar = callWithCommon(MT.displayAvatar);
funcs.createButton = callWithCommon(UIElements.createButton); funcs.createButton = callWithCommon(UIElements.createButton);
funcs.createUsageBar = callWithCommon(UIElements.createUsageBar); funcs.createUsageBar = callWithCommon(UIElements.createUsageBar);
funcs.updateTags = callWithCommon(UIElements.updateTags); funcs.updateTags = callWithCommon(UIElements.updateTags);
@ -103,6 +105,7 @@ define([
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal); funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
funcs.onServerError = callWithCommon(UIElements.onServerError); funcs.onServerError = callWithCommon(UIElements.onServerError);
funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu); funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu);
funcs.getMediaTagPreview = callWithCommon(UIElements.getMediaTagPreview);
// Thumb // Thumb
funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail); funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);

13
www/common/toolbar3.js
View File

@ -7,10 +7,11 @@ define([
'/common/common-hash.js', '/common/common-hash.js',
'/common/common-util.js', '/common/common-util.js',
'/common/common-feedback.js', '/common/common-feedback.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/messenger-ui.js', '/common/messenger-ui.js',
'/customize/messages.js', '/customize/messages.js',
], function ($, Config, ApiConfig, UIElements, UI, Hash, Util, Feedback, h, ], function ($, Config, ApiConfig, UIElements, UI, Hash, Util, Feedback, MT, h,
MessengerUI, Messages) { MessengerUI, Messages) {
var Common; var Common;
@ -345,17 +346,9 @@ MessengerUI, Messages) {
window.open(origin+'/profile/#' + data.profile); window.open(origin+'/profile/#' + data.profile);
}); });
} }
if (data.avatar && UIElements.getAvatar(data.avatar)) { Common.displayAvatar($span, data.avatar, name, function () {
$span.append(UIElements.getAvatar(data.avatar));
$span.append($rightCol);
} else {
Common.displayAvatar($span, data.avatar, name, function ($img) {
if (data.avatar && $img && $img.length) {
UIElements.setAvatar(data.avatar, $img[0].outerHTML);
}
$span.append($rightCol); $span.append($rightCol);
}); });
}
$span.data('uid', data.uid); $span.data('uid', data.uid);
$editUsersList.append($span); $editUsersList.append($span);
}); });

10
www/kanban/inner.js
View File

@ -9,6 +9,7 @@ define([
'/common/common-hash.js', '/common/common-hash.js',
'/common/common-interface.js', '/common/common-interface.js',
'/common/common-ui-elements.js', '/common/common-ui-elements.js',
'/common/inner/common-mediatag.js',
'/common/modes.js', '/common/modes.js',
'/customize/messages.js', '/customize/messages.js',
'/common/hyperscript.js', '/common/hyperscript.js',
@ -40,6 +41,7 @@ define([
Hash, Hash,
UI, UI,
UIElements, UIElements,
MT,
Modes, Modes,
Messages, Messages,
h, h,
@ -90,13 +92,9 @@ define([
var getAvatar = function (cursor, noClear) { var getAvatar = function (cursor, noClear) {
// Tippy // Tippy
var html = '<span class="cp-cursor-avatar">'; var html = MT.getCursorAvatar(cursor);
if (cursor.avatar && UIElements.getAvatar(cursor.avatar)) {
html += UIElements.getAvatar(cursor.avatar);
}
html += cursor.name + '</span>';
var l = UIElements.getFirstCharacter(cursor.name || Messages.anonymous); var l = Util.getFirstCharacter(cursor.name || Messages.anonymous);
var text = ''; var text = '';
if (cursor.color) { if (cursor.color) {

6
www/pad/cursor.js
View File

@ -41,12 +41,6 @@ define([
var cursors = {}; var cursors = {};
var makeTippy = function (cursor) { var makeTippy = function (cursor) {
/*var html = '<span class="cp-cursor-avatar">';
if (cursor.avatar && UIElements.getAvatar(cursor.avatar)) {
html += UIElements.getAvatar(cursor.avatar);
}
html += cursor.name + '</span>';
return html;*/
return cursor.name; return cursor.name;
}; };

4
www/profile/inner.js
View File

@ -10,6 +10,7 @@ define([
'/common/common-ui-elements.js', '/common/common-ui-elements.js',
'/common/common-realtime.js', '/common/common-realtime.js',
'/common/clipboard.js', '/common/clipboard.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/customize/messages.js', '/customize/messages.js',
'/customize/application_config.js', '/customize/application_config.js',
@ -36,6 +37,7 @@ define([
UIElements, UIElements,
Realtime, Realtime,
Clipboard, Clipboard,
MT,
h, h,
Messages, Messages,
AppConfig, AppConfig,
@ -351,7 +353,7 @@ define([
displayAvatar(); displayAvatar();
if (APP.readOnly) { return; } if (APP.readOnly) { return; }
var data = UIElements.addAvatar(common, function (ev, data) { var data = MT.addAvatar(common, function (ev, data) {
var old = common.getMetadataMgr().getUserData().avatar; var old = common.getMetadataMgr().getUserData().avatar;
var todo = function () { var todo = function () {
APP.module.execCommand("SET", { APP.module.execCommand("SET", {

6
www/teams/inner.js
View File

@ -12,6 +12,7 @@ define([
'/common/sframe-common.js', '/common/sframe-common.js',
'/common/proxy-manager.js', '/common/proxy-manager.js',
'/common/userObject.js', '/common/userObject.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/customize/application_config.js', '/customize/application_config.js',
'/common/messenger-ui.js', '/common/messenger-ui.js',
@ -35,6 +36,7 @@ define([
SFCommon, SFCommon,
ProxyManager, ProxyManager,
UserObject, UserObject,
MT,
h, h,
AppConfig, AppConfig,
MessengerUI, MessengerUI,
@ -966,7 +968,7 @@ define([
// Upload // Upload
var avatar = h('div.cp-team-avatar.cp-avatar'); var avatar = h('div.cp-team-avatar.cp-avatar');
var $avatar = $(avatar); var $avatar = $(avatar);
var data = UIElements.addAvatar(common, function (ev, data) { var data = MT.addAvatar(common, function (ev, data) {
if (!data.url) { return void UI.warn(Messages.error); } if (!data.url) { return void UI.warn(Messages.error); }
APP.module.execCommand('GET_TEAM_METADATA', { APP.module.execCommand('GET_TEAM_METADATA', {
teamId: APP.team teamId: APP.team
@ -1051,7 +1053,7 @@ define([
var displayUser = function (common, data) { var displayUser = function (common, data) {
var avatar = h('span.cp-teams-invite-from-avatar.cp-avatar'); var avatar = h('span.cp-teams-invite-from-avatar.cp-avatar');
UIElements.displayAvatar(common, $(avatar), data.avatar, data.displayName); common.displayAvatar($(avatar), data.avatar, data.displayName);
return h('div.cp-teams-invite-from-author', [ return h('div.cp-teams-invite-from-author', [
avatar, avatar,
h('span.cp-teams-invite-from-name', data.displayName) h('span.cp-teams-invite-from-name', data.displayName)

2
www/whiteboard/inner.js
View File

@ -404,6 +404,8 @@ define([
if (data.type === 'file') { if (data.type === 'file') {
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'; var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
framework._.sfCommon.displayMediatagImage($(mt), function (err, $image) { framework._.sfCommon.displayMediatagImage($(mt), function (err, $image) {
// Convert src from blob URL to base64 data URL
// XXX base64 is heavy...
Util.blobURLToImage($image.attr('src'), function (imgSrc) { Util.blobURLToImage($image.attr('src'), function (imgSrc) {
var img = new Image(); var img = new Image();
img.onload = function () { addImageToCanvas(img); }; img.onload = function () { addImageToCanvas(img); };