dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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-feedback.js',
'/common/hyperscript.js',
'/common/media-tag.js',
'/common/clipboard.js',
'/customize/messages.js',
'/customize/application_config.js',
@ -18,19 +17,10 @@ define([
'/common/visible.js',
'css!/customize/fonts/cptools/style.css',
'/bower_components/croppie/croppie.min.js',
'css!/bower_components/croppie/croppie.css',
], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, Clipboard,
Messages, AppConfig, Pages, NThen, InviteInner, Visible) {
var UIElements = {};
// Configure MediaTags to use our local viewer
if (MediaTag) {
MediaTag.setDefaultConfig('pdf', {
viewer: '/common/pdfjs/web/viewer.html'
});
}
UIElements.prettySize = function (bytes) {
var kB = Util.bytesToKilobytes(bytes);
if (kB < 1024) { return kB + Messages.KB; }
@ -110,7 +100,7 @@ define([
var data = users[key];
var name = data.displayName || data.name || Messages.anonymous;
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;
if (config.remove) {
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
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
@ -2640,7 +2431,7 @@ define([
$displayName.text(newName || Messages.anonymous);
if (accountName && oldUrl !== url) {
$avatar.html('');
UIElements.displayAvatar(Common, $avatar, url,
Common.displayAvatar($avatar, url,
newName || Messages.anonymous, function ($img) {
oldUrl = url;
$userAdmin.find('> button').removeClass('cp-avatar');
@ -2879,6 +2670,7 @@ define([
});
};
// XXX add txid
UIElements.initFilePicker = function (common, cfg) {
var onSelect = cfg.onSelect || $.noop;
var sframeChan = common.getSframeChannel();
@ -3028,7 +2820,7 @@ define([
var teams = Object.keys(privateData.teams).map(function (id) {
var data = privateData.teams[id];
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', {
'data-id': id,
title: data.name,
@ -3725,6 +3517,9 @@ define([
return m;
};
UIElements.getMediaTagPreview = function () {
};
UIElements.displayFriendRequestModal = function (common, data) {
var msg = data.content.msg;
var userData = msg.content.user;

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

@ -445,6 +445,27 @@
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) {
module.exports = Util;
} 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'),
Messages.contacts_unmute || 'unmute'
]);
UIElements.displayAvatar(common, $(avatar), data.avatar, data.name);
common.displayAvatar($(avatar), data.avatar, data.name);
$(button).click(function () {
unmuteUser(curve, button);
execCommand('UNMUTE_USER', curve, function (e, data) {

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

@ -4,11 +4,12 @@ define([
'/common/themes.js',
'/customize/messages.js',
'/common/common-ui-elements.js',
'/common/inner/common-mediatag.js',
'/common/common-hash.js',
'/common/common-util.js',
'/common/text-cursor.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 cursorToPos = function(cursor, oldText) {
@ -454,12 +455,7 @@ define([
})[0];
};
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 MT.getCursorAvatar(cursor);
};
var marks = {};
exp.removeCursors = function () {

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

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

15
www/common/toolbar3.js
View File

@ -7,10 +7,11 @@ define([
'/common/common-hash.js',
'/common/common-util.js',
'/common/common-feedback.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js',
'/common/messenger-ui.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) {
var Common;
@ -345,17 +346,9 @@ MessengerUI, Messages) {
window.open(origin+'/profile/#' + data.profile);
});
}
if (data.avatar && UIElements.getAvatar(data.avatar)) {
$span.append(UIElements.getAvatar(data.avatar));
Common.displayAvatar($span, data.avatar, name, function () {
$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.data('uid', data.uid);
$editUsersList.append($span);
});

10
www/kanban/inner.js
View File

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

6
www/pad/cursor.js
View File

@ -41,12 +41,6 @@ define([
var cursors = {};
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;
};

4
www/profile/inner.js
View File

@ -10,6 +10,7 @@ define([
'/common/common-ui-elements.js',
'/common/common-realtime.js',
'/common/clipboard.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js',
'/customize/messages.js',
'/customize/application_config.js',
@ -36,6 +37,7 @@ define([
UIElements,
Realtime,
Clipboard,
MT,
h,
Messages,
AppConfig,
@ -351,7 +353,7 @@ define([
displayAvatar();
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 todo = function () {
APP.module.execCommand("SET", {

6
www/teams/inner.js
View File

@ -12,6 +12,7 @@ define([
'/common/sframe-common.js',
'/common/proxy-manager.js',
'/common/userObject.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js',
'/customize/application_config.js',
'/common/messenger-ui.js',
@ -35,6 +36,7 @@ define([
SFCommon,
ProxyManager,
UserObject,
MT,
h,
AppConfig,
MessengerUI,
@ -966,7 +968,7 @@ define([
// Upload
var avatar = h('div.cp-team-avatar.cp-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); }
APP.module.execCommand('GET_TEAM_METADATA', {
teamId: APP.team
@ -1051,7 +1053,7 @@ define([
var displayUser = function (common, data) {
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', [
avatar,
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') {
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
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) {
var img = new Image();
img.onload = function () { addImageToCanvas(img); };