Merge branch 'staging' into framework

customize.dist/pages.js

@@ -629,6 +629,7 @@ define([
                 }
             }),
             h('div#cp-app-whiteboard-pickers'),
+            h('div#cp-app-whiteboard-media-hidden')
         ];
     };
 

customize.dist/src/less2/include/toolbar.less

@@ -75,6 +75,7 @@
             margin: 10px 0;
             margin-bottom: 20px;
             &>span {
+                height: 48px;
                 padding: 5px;
                 margin: 2px 0;
                 background: rgba(0,0,0,0.1);
@@ -82,6 +83,30 @@
                 .cp-avatar-default, media-tag {
                     margin-right: 5px;
                 }
+                &.cp-userlist-clickable {
+                    cursor: pointer;
+                    &:hover {
+                        background-color: rgba(0,0,0,0.3);
+                    }
+                }
+                .cp-toolbar-userlist-rightcol {
+                    order: 10;
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    display: flex;
+                    flex-flow: column;
+                    .cp-toolbar-userlist-name {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .cp-toolbar-userlist-friend {
+                        padding: 0;
+                    }
+                }
             }
         }
         .cp-toolbar-userlist-friend {
@@ -619,30 +644,6 @@
                     }
                     &.cp-avatar {
                         .avatar_main(48px);
-                        &.cp-userlist-clickable {
-                            cursor: pointer;
-                            &:hover {
-                                background-color: rgba(0,0,0,0.3);
-                            }
-                        }
-                        .cp-toolbar-userlist-rightcol {
-                            order: 10;
-                            flex: 1;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            display: flex;
-                            flex-flow: column;
-                            .cp-toolbar-userlist-name {
-                                flex: 1;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                            }
-                            .cp-toolbar-userlist-friend {
-                                padding: 0;
-                            }
-                        }
                         media-tag {
                             margin: 8px;
                         }

customize.dist/translations/messages.fr.js

@@ -150,7 +150,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";
@@ -284,6 +284,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

customize.dist/translations/messages.js

@@ -152,7 +152,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

www/common/cryptpad-common.js

@@ -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 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) {
             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;
             }

www/common/sframe-chainpad-netflux-inner.js

@@ -135,4 +135,4 @@ define([
         });
     };
     return Object.freeze(module.exports);
-});
+});

www/common/sframe-common-interface.js

@@ -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) {
+                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]);
             });
         }
     };

www/common/sframe-common.js

@@ -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);

www/whiteboard/app-whiteboard.less

@@ -25,6 +25,10 @@
         display: none;
     }
 
+    #cp-app-whiteboard-media-hidden {
+        display: none;
+    }
+
     // created in the html
     #cp-app-whiteboard-canvas-area {
         flex: 1;

www/whiteboard/inner.js

@@ -178,6 +178,7 @@ define([
 
         APP.draw = true;
         var toggleDrawMode = function () {
+            canvas.deactivateAll().renderAll();
             APP.draw = !APP.draw;
             canvas.isDrawingMode = APP.draw;
             $toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
@@ -233,6 +234,7 @@ define([
         APP.FM = common.createFileManager({});
         APP.upload = function (title) {
             var canvas = $canvas[0];
+            APP.canvas.deactivateAll().renderAll();
             var finish = function (thumb) {
                 canvas.toBlob(function (blob) {
                     blob.name = title;
@@ -359,6 +361,34 @@ define([
             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;
@@ -395,14 +425,16 @@ define([
             var $export = common.createButton('export', true, {}, saveImage);
             $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) {
                 if (err) { return; }
@@ -413,6 +445,56 @@ define([
 
             if (!readOnly) {
                 makeColorButton($rightside);
+
+                // Embed image
+                var onUpload = function (e) {
+                    var file = e.target.files[0];
+                    var reader = new FileReader();
+                    reader.onload = function () {
+                        var img = new Image();
+                        img.onload = function () {
+                            addImageToCanvas(img);
+                        };
+                        img.src = reader.result;
+                    };
+                    reader.readAsDataURL(file);
+                };
+                common.createButton('', true)
+                    .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 mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
+                            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;
+                        }
+                    }
+                };
+                common.initFilePicker(fileDialogCfg);
+                APP.$mediaTagButton = $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': 'cp-toolbar-rightside-button fa fa-picture-o',
+                    style: 'font-size: 17px'
+                }).click(function () {
+                    var pickerCfg = {
+                        types: ['file'],
+                        where: ['root'],
+                        filter: {
+                            fileType: ['image/']
+                        }
+                    };
+                    common.openFilePicker(pickerCfg);
+                }).appendTo($rightside);
             }
 
             metadataMgr.onChange(function () {
@@ -454,19 +536,25 @@ define([
             } else {
                 Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
             }
-            if (newDoc) {
-                canvas.loadFromJSON(newDoc);
-                canvas.renderAll();
-            }
 
-            setEditable(!readOnly);
+            nThen(function (waitFor) {
-            initializing = false;
+                if (newDoc) {
-            config.onLocal();
+                    canvas.loadFromJSON(newDoc, waitFor(function () {
-            Cryptpad.removeLoadingScreen();
+                        console.log('loaded');
-            if (readOnly) { return; }
+                        canvas.renderAll();
-            if (isNew) {
+                    }));
-                common.openTemplatePicker();
+                }
-            }
+            }).nThen(function () {
+                setEditable(!readOnly);
+                initializing = false;
+                config.onLocal();
+                Cryptpad.removeLoadingScreen();
+                if (readOnly) { return; }
+                if (isNew) {
+                    common.openTemplatePicker();
+                }
+            });
+
         };
 
         config.onRemote = function () {
@@ -476,14 +564,12 @@ define([
             var json = JSON.parse(userDoc);
             var remoteDoc = json.content;
 
-            if (json.metadata) {
+            canvas.loadFromJSON(remoteDoc, function () {
-                metadataMgr.updateMetadata(json.metadata);
+                canvas.renderAll();
-            }
+                if (json.metadata) {
-
+                    metadataMgr.updateMetadata(json.metadata);
-            // TODO update palette if it has changed
+                }
-
+            });
-            canvas.loadFromJSON(remoteDoc);
-            canvas.renderAll();
 
             var content = canvas.toDatalessJSON();
             if (content !== remoteDoc) { common.notify(); }