infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Embed images from the drive in whiteboard

pull/1/head
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.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_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";
@ -285,6 +285,7 @@ define(function () {
out.canvas_saveToDrive = "Sauvegarder cette image en tant que fichier dans CryptDrive";
out.canvas_currentBrush = "Pinceau actuel";
out.canvas_chooseColor = "Choisir une couleur";
out.canvas_imageEmbed = "Intégrer une image de votre ordinateur";
// Profile
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.printTransition = "Enable transition animations";
out.filePickerButton = "Embed a file";
out.filePickerButton = "Embed a file stored in CryptDrive";
out.filePicker_close = "Close";
out.filePicker_description = "Choose a file from your CryptDrive to embed it or upload a new one";
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_currentBrush = "Current brush";
out.canvas_chooseColor = "Choose a color";
out.canvas_imageEmbed = "Embed an image from your computer";
// Profile
out.profileButton = "Profile"; // dropdown menu

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

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

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

@ -235,8 +235,38 @@ define([
};
// 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) {
var MutationObserver = window.MutationObserver;
var displayDefault = function () {
var text = Cryptpad.getFirstEmojiOrCharacter(name);
var $avatar = $('<span>', {'class': 'cp-avatar-default'}).text(text);
@ -260,43 +290,19 @@ define([
var $img = $('<media-tag>').appendTo($container);
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length) {
if (mutation.addedNodes.length > 1 ||
mutation.addedNodes[0].nodeName !== 'IMG') {
$img.remove();
return void displayDefault();
}
var $image = $img.find('img');
var onLoad = function () {
var img = new Image();
img.onload = function () {
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);
}
});
UI.displayMediatagImage(Common, $img, function (err, $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); }
});
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.openFilePicker = callWithCommon(UI.openFilePicker);
funcs.openTemplatePicker = callWithCommon(UI.openTemplatePicker);
funcs.displayMediatagImage = callWithCommon(UI.displayMediatagImage);
funcs.displayAvatar = callWithCommon(UI.displayAvatar);
funcs.createButton = callWithCommon(UI.createButton);
funcs.createUsageBar = callWithCommon(UI.createUsageBar);

78
www/whiteboard/inner.js
View File

@ -354,13 +354,40 @@ define([
var onLocal = config.onLocal = function () {
if (initializing) { return; }
if (readOnly) { return; }
console.error('local');
var content = stringifyInner(canvas.toDatalessJSON());
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) {
updateLocalPalette(palette);
readOnly = metadataMgr.getPrivateData().readOnly;
@ -397,14 +424,16 @@ define([
var $export = common.createButton('export', true, {}, saveImage);
$rightside.append($export);
common.createButton('savetodrive', true, {}, function () {})
.click(function () {
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
function (name) {
if (name === null || !name.trim()) { return; }
APP.upload(name);
});
}).appendTo($rightside);
if (common.isLoggedIn()) {
common.createButton('savetodrive', true, {}, function () {})
.click(function () {
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
function (name) {
if (name === null || !name.trim()) { return; }
APP.upload(name);
});
}).appendTo($rightside);
}
var $forget = common.createButton('forget', true, {}, function (err) {
if (err) { return; }
@ -423,34 +452,29 @@ define([
reader.onload = function () {
var img = new Image();
img.onload = function () {
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();
addImageToCanvas(img);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
};
common.createButton('', true)
.attr('title', 'Embed an image')
.attr('title', Messages.canvas_imageEmbed)
.removeClass('fa-question').addClass('fa-file-image-o')
.click(function () {
$('<input>', {type:'file'}).on('change', onUpload).click();
}).appendTo($rightside);
var fileDialogCfg = {
onSelect: function (data) {
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>';
$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;
}
}
@ -463,7 +487,10 @@ define([
}).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root']
where: ['root'],
filter: {
fileType: ['image/']
}
};
common.openFilePicker(pickerCfg);
}).appendTo($rightside);
@ -509,7 +536,6 @@ define([
Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
}
nThen(function (waitFor) {
if (newDoc) {
canvas.loadFromJSON(newDoc, waitFor(function () {