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

Embed images from the drive in whiteboard

Browse Source
This commit is contained in:
yflory 2017-10-17 12:17:54 +02:00
parent 2fd120100a
commit 6920129126
6 changed files with 116 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
customize.dist/translations/messages.fr.js
View File

@ -151,7 +151,7 @@ define(function () {
out.printCSS = "Personnaliser l'apparence (CSS):"; out.printCSS = "Personnaliser l'apparence (CSS):";
out.printTransition = "Activer les animations de transition"; out.printTransition = "Activer les animations de transition";
out.filePickerButton = "Intégrer un fichier"; out.filePickerButton = "Intégrer un fichier stocké dans CryptDrive";
out.filePicker_close = "Fermer"; out.filePicker_close = "Fermer";
out.filePicker_description = "Choisissez un fichier de votre CryptDrive pour l'intégrer ou uploadez-en un nouveau"; out.filePicker_description = "Choisissez un fichier de votre CryptDrive pour l'intégrer ou uploadez-en un nouveau";
out.filePicker_filter = "Filtrez les fichiers par leur nom"; out.filePicker_filter = "Filtrez les fichiers par leur nom";
@ -285,6 +285,7 @@ define(function () {
out.canvas_saveToDrive = "Sauvegarder cette image en tant que fichier dans CryptDrive"; out.canvas_saveToDrive = "Sauvegarder cette image en tant que fichier dans CryptDrive";
out.canvas_currentBrush = "Pinceau actuel"; out.canvas_currentBrush = "Pinceau actuel";
out.canvas_chooseColor = "Choisir une couleur"; out.canvas_chooseColor = "Choisir une couleur";
out.canvas_imageEmbed = "Intégrer une image de votre ordinateur";
// Profile // Profile
out.profileButton = "Profil"; // dropdown menu out.profileButton = "Profil"; // dropdown menu

3
customize.dist/translations/messages.js
View File

@ -153,7 +153,7 @@ define(function () {
out.printCSS = "Custom style rules (CSS):"; out.printCSS = "Custom style rules (CSS):";
out.printTransition = "Enable transition animations"; out.printTransition = "Enable transition animations";
out.filePickerButton = "Embed a file"; out.filePickerButton = "Embed a file stored in CryptDrive";
out.filePicker_close = "Close"; out.filePicker_close = "Close";
out.filePicker_description = "Choose a file from your CryptDrive to embed it or upload a new one"; out.filePicker_description = "Choose a file from your CryptDrive to embed it or upload a new one";
out.filePicker_filter = "Filter files by name"; out.filePicker_filter = "Filter files by name";
@ -288,6 +288,7 @@ define(function () {
out.canvas_saveToDrive = "Save this image as a file in your CryptDrive"; out.canvas_saveToDrive = "Save this image as a file in your CryptDrive";
out.canvas_currentBrush = "Current brush"; out.canvas_currentBrush = "Current brush";
out.canvas_chooseColor = "Choose a color"; out.canvas_chooseColor = "Choose a color";
out.canvas_imageEmbed = "Embed an image from your computer";
// Profile // Profile
out.profileButton = "Profile"; // dropdown menu out.profileButton = "Profile"; // dropdown menu

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

@ -858,20 +858,33 @@ define([
return list; return list;
}; };
// Needed for the secure filepicker app // Needed for the secure filepicker app
common.getSecureFilesList = function (filter, cb) { common.getSecureFilesList = function (query, cb) {
var store = common.getStore(); var store = common.getStore();
if (!store) { return void cb("Store is not ready"); } if (!store) { return void cb("Store is not ready"); }
var proxy = store.getProxy(); var proxy = store.getProxy();
var fo = proxy.fo; var fo = proxy.fo;
var list = {}; var list = {};
var hashes = []; var hashes = [];
var types = filter.types; var types = query.types;
var where = filter.where; var where = query.where;
var filter = query.filter || {};
var isFiltered = function (type, data) {
var filtered;
var fType = filter.fileType || [];
if (type === 'file' && fType.length) {
if (!data.fileType) { return true; }
filtered = !fType.some(function (t) {
return data.fileType.indexOf(t) === 0;
});
}
return filtered;
};
fo.getFiles(where).forEach(function (id) { fo.getFiles(where).forEach(function (id) {
var data = fo.getFileData(id); var data = fo.getFileData(id);
var parsed = parsePadUrl(data.href); var parsed = parsePadUrl(data.href);
if ((!types || types.length === 0 || types.indexOf(parsed.type) !== -1) if ((!types || types.length === 0 || types.indexOf(parsed.type) !== -1)
&& hashes.indexOf(parsed.hash) === -1) { && hashes.indexOf(parsed.hash) === -1) {
if (isFiltered(parsed.type, data)) { return; }
hashes.push(parsed.hash); hashes.push(parsed.hash);
list[id] = data; list[id] = data;
} }

80
www/common/sframe-common-interface.js
View File

@ -235,8 +235,38 @@ define([
}; };
// Avatars // Avatars
UI.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]);
};
UI.displayAvatar = function (Common, $container, href, name, cb) { UI.displayAvatar = function (Common, $container, href, name, cb) {
var MutationObserver = window.MutationObserver;
var displayDefault = function () { var displayDefault = function () {
var text = Cryptpad.getFirstEmojiOrCharacter(name); var text = Cryptpad.getFirstEmojiOrCharacter(name);
var $avatar = $('<span>', {'class': 'cp-avatar-default'}).text(text); var $avatar = $('<span>', {'class': 'cp-avatar-default'}).text(text);
@ -260,43 +290,19 @@ define([
var $img = $('<media-tag>').appendTo($container); var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src); $img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey); $img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
var observer = new MutationObserver(function(mutations) { UI.displayMediatagImage(Common, $img, function (err, $image, img) {
mutations.forEach(function(mutation) { var w = img.width;
if (mutation.type === 'childList' && mutation.addedNodes.length) { var h = img.height;
if (mutation.addedNodes.length > 1 || if (w>h) {
mutation.addedNodes[0].nodeName !== 'IMG') { $image.css('max-height', '100%');
$img.remove(); $img.css('flex-direction', 'column');
return void displayDefault(); if (cb) { cb($img); }
} return;
var $image = $img.find('img'); }
var onLoad = function () { $image.css('max-width', '100%');
var img = new Image(); $img.css('flex-direction', 'row');
img.onload = function () { if (cb) { cb($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); }
};
img.src = $image.attr('src');
};
if ($image[0].complete) { onLoad(); }
$image.on('load', onLoad);
}
});
}); });
observer.observe($img[0], {
attributes: false,
childList: true,
characterData: false
});
MediaTag($img[0]);
}); });
} }
}; };

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

@ -75,6 +75,7 @@ define([
funcs.initFilePicker = callWithCommon(UI.initFilePicker); funcs.initFilePicker = callWithCommon(UI.initFilePicker);
funcs.openFilePicker = callWithCommon(UI.openFilePicker); funcs.openFilePicker = callWithCommon(UI.openFilePicker);
funcs.openTemplatePicker = callWithCommon(UI.openTemplatePicker); funcs.openTemplatePicker = callWithCommon(UI.openTemplatePicker);
funcs.displayMediatagImage = callWithCommon(UI.displayMediatagImage);
funcs.displayAvatar = callWithCommon(UI.displayAvatar); funcs.displayAvatar = callWithCommon(UI.displayAvatar);
funcs.createButton = callWithCommon(UI.createButton); funcs.createButton = callWithCommon(UI.createButton);
funcs.createUsageBar = callWithCommon(UI.createUsageBar); funcs.createUsageBar = callWithCommon(UI.createUsageBar);

78
www/whiteboard/inner.js
View File

@ -354,13 +354,40 @@ define([
var onLocal = config.onLocal = function () { var onLocal = config.onLocal = function () {
if (initializing) { return; } if (initializing) { return; }
if (readOnly) { return; } if (readOnly) { return; }
console.error('local');
var content = stringifyInner(canvas.toDatalessJSON()); var content = stringifyInner(canvas.toDatalessJSON());
APP.patchText(content); APP.patchText(content);
}; };
var blobURLToImage = function (url, cb) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
cb(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
};
var addImageToCanvas = function (img) {
var w = img.width;
var h = img.height;
if (w<h) {
img.width = img.width * (300/img.height);
img.height = 300;
} else {
img.height = img.height * (300/img.width);
img.width = 300;
}
var cImg = new Fabric.Image(img, { left:0, top:0, angle:0, });
APP.canvas.add(cImg);
onLocal();
};
config.onInit = function (info) { config.onInit = function (info) {
updateLocalPalette(palette); updateLocalPalette(palette);
readOnly = metadataMgr.getPrivateData().readOnly; readOnly = metadataMgr.getPrivateData().readOnly;
@ -397,14 +424,16 @@ define([
var $export = common.createButton('export', true, {}, saveImage); var $export = common.createButton('export', true, {}, saveImage);
$rightside.append($export); $rightside.append($export);
common.createButton('savetodrive', true, {}, function () {}) if (common.isLoggedIn()) {
.click(function () { common.createButton('savetodrive', true, {}, function () {})
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png', .click(function () {
function (name) { Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
if (name === null || !name.trim()) { return; } function (name) {
APP.upload(name); if (name === null || !name.trim()) { return; }
}); APP.upload(name);
}).appendTo($rightside); });
}).appendTo($rightside);
}
var $forget = common.createButton('forget', true, {}, function (err) { var $forget = common.createButton('forget', true, {}, function (err) {
if (err) { return; } if (err) { return; }
@ -423,34 +452,29 @@ define([
reader.onload = function () { reader.onload = function () {
var img = new Image(); var img = new Image();
img.onload = function () { img.onload = function () {
var w = img.width; addImageToCanvas(img);
var h = img.height;
if (w<h) {
img.width = img.width * (300/img.height);
img.height = 300;
} else {
img.height = img.height * (300/img.width);
img.width = 300;
}
var cImg = new Fabric.Image(img, { left:0, top:0, angle:0, });
APP.canvas.add(cImg);
onLocal();
}; };
img.src = reader.result; img.src = reader.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };
common.createButton('', true) common.createButton('', true)
.attr('title', 'Embed an image') .attr('title', Messages.canvas_imageEmbed)
.removeClass('fa-question').addClass('fa-file-image-o')
.click(function () { .click(function () {
$('<input>', {type:'file'}).on('change', onUpload).click(); $('<input>', {type:'file'}).on('change', onUpload).click();
}).appendTo($rightside); }).appendTo($rightside);
var fileDialogCfg = { var fileDialogCfg = {
onSelect: function (data) { onSelect: function (data) {
if (data.type === 'file') { if (data.type === 'file') {
var $block = $('#cp-app-whiteboard-media-hidden');
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>';
$block.append(mt); common.displayMediatagImage($(mt), function (err, $image) {
blobURLToImage($image.attr('src'), function (imgSrc) {
var img = new Image();
img.onload = function () { addImageToCanvas(img); };
img.src = imgSrc;
});
});
return; return;
} }
} }
@ -463,7 +487,10 @@ define([
}).click(function () { }).click(function () {
var pickerCfg = { var pickerCfg = {
types: ['file'], types: ['file'],
where: ['root'] where: ['root'],
filter: {
fileType: ['image/']
}
}; };
common.openFilePicker(pickerCfg); common.openFilePicker(pickerCfg);
}).appendTo($rightside); }).appendTo($rightside);
@ -509,7 +536,6 @@ define([
Title.updateTitle(Cryptpad.initialName || Title.defaultTitle); Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
} }
nThen(function (waitFor) { nThen(function (waitFor) {
if (newDoc) { if (newDoc) {
canvas.loadFromJSON(newDoc, waitFor(function () { canvas.loadFromJSON(newDoc, waitFor(function () {