Add a file picker in the slide app

customize.dist/translations/messages.fr.js

@@ -132,6 +132,11 @@ define(function () {
     out.printCSS = "Personnaliser l'apparence (CSS):";
     out.printTransition = "Activer les animations de transition";
 
+    out.filePickerButton = "Intégrer un fichier";
+    out.filePicker_close = "Fermer";
+    out.filePicker_description = "Choisissez un fichier de votre CryptDrive pour l'intégrer";
+    out.filePicker_filter = "Filtrez les fichiers par leur nom";
+
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
 

customize.dist/translations/messages.js

@@ -134,6 +134,11 @@ define(function () {
     out.printCSS = "Custom style rules (CSS):";
     out.printTransition = "Enable transition animations";
 
+    out.filePickerButton = "Embed a file";
+    out.filePicker_close = "Close";
+    out.filePicker_description = "Choose a file from your CryptDrive to embed it";
+    out.filePicker_filter = "Filter files by name";
+
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
 

www/common/cryptpad-common.js

@@ -131,6 +131,11 @@ define([
             return store.getProxy().proxy;
         }
     };
+    common.getFO = function () {
+        if (store && store.getProxy()) {
+            return store.getProxy().fo;
+        }
+    };
     var getNetwork = common.getNetwork = function () {
         if (store) {
             if (store.getProxy() && store.getProxy().info) {
@@ -644,6 +649,23 @@ define([
         });
     };
 
+    common.getUserFilesList = function () {
+        var store = common.getStore();
+        var proxy = store.getProxy();
+        var fo = proxy.fo;
+        var hashes = [];
+        var list = fo.getFiles().filter(function (id) {
+            var href = fo.getFileData(id).href;
+            var parsed = parsePadUrl(href);
+            if ((parsed.type === 'file' || parsed.type === 'media')
+                 && hashes.indexOf(parsed.hash) === -1) {
+                hashes.push(parsed.hash);
+                return true;
+            }
+        });
+        return list;
+    };
+
     var getUserChannelList = common.getUserChannelList = function () {
         var store = common.getStore();
         var proxy = store.getProxy();

www/slide/main.js

@@ -196,6 +196,61 @@ define([
                 }
             };
 
+            var createFileDialog = function () {
+                var $body = $iframe.find('body');
+                var $block = $body.find('#fileDialog');
+                if (!$block.length) {
+                    $block = $('<div>', {id: "fileDialog"}).appendTo($body);
+                }
+                $block.html('');
+                $('<span>', {
+                    'class': 'close fa fa-times',
+                    'title': Messages.filePicker_close
+                }).click(function () {
+                    $block.hide();
+                }).appendTo($block);
+                var $description = $('<p>').text(Messages.filePicker_description);
+                $block.append($description);
+                var $filter = $('<p>').appendTo($block);
+                var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
+                var updateContainer = function () {
+                    $container.html('');
+                    var filter = $filter.find('.filter').val().trim();
+                    var list = Cryptpad.getUserFilesList();
+                    var fo = Cryptpad.getFO();
+                    list.forEach(function (id) {
+                        var data = fo.getFileData(id);
+                        var name = fo.getTitle(id);
+                        if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
+                            return;
+                        }
+                        var $span = $('<span>', {'class': 'element'}).appendTo($container);
+                        var $inner = $('<span>').text(name);
+                        $span.append($inner).click(function () {
+                            var cleanName = name.replace(/[\[\]]/g, '');
+                            var text = '!['+cleanName+']('+data.href+')';
+                            editor.replaceSelection(text);
+                            $block.hide();
+                            console.log(data.href);
+                        });
+                    });
+                };
+                var to;
+                $('<input>', {
+                    type: 'text',
+                    'class': 'filter',
+                    'placeholder': Messages.filePicker_filter
+                }).appendTo($filter).on('keypress', function () {
+                    if (to) { window.clearTimeout(to); }
+                    to = window.setTimeout(updateContainer, 300);
+                });
+                updateContainer();
+                $body.keydown(function (e) {
+                    if (e.which === 27) { $block.hide(); }
+                });
+                $block.show();
+            };
+
             var createPrintDialog = function () {
                 var slideOptionsTmp = {
                     title: false,
@@ -357,6 +412,14 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
+                $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': 'rightside-button fa fa-picture-o',
+                    style: 'font-size: 17px'
+                }).click(function () {
+                    $('body').append(createFileDialog());
+                }).appendTo($rightside);
+
                 var $printButton = $('<button>', {
                     title: Messages.printButtonTitle,
                     'class': 'rightside-button fa fa-print',

www/slide/slide.css

@@ -345,3 +345,42 @@ body .CodeMirror-focused .cm-matchhighlight {
   font-size: 10%;
   line-height: 110%;
 }
+#fileDialog {
+  position: absolute;
+  background-color: rgba(200, 200, 200, 0.8);
+  top: 15vh;
+  bottom: 15vh;
+  left: 10vw;
+  right: 10vw;
+  border: 1px solid black;
+  z-index: 10;
+  overflow: auto;
+  display: none;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  text-align: center;
+}
+#fileDialog .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 5px;
+  cursor: pointer;
+}
+#fileDialog .element {
+  cursor: pointer;
+  display: inline-flex;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #ccc;
+  margin: 5px;
+  overflow: hidden;
+  word-wrap: break-word;
+  background-color: white;
+  padding: 5px;
+  align-items: center;
+}
+#fileDialog .element span {
+  width: 100px;
+  text-align: center;
+}

www/slide/slide.less

@@ -308,3 +308,42 @@ div#modal #content, #print {
     }
 }
 }
+
+#fileDialog {
+    position: absolute;
+    background-color: rgba(200, 200, 200, 0.8);
+    top: 15vh; bottom: 15vh;
+    left: 10vw; right: 10vw;
+    border: 1px solid black;
+    z-index: 10;
+    overflow: auto;
+    display: none;
+    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-size: 16px;
+    text-align: center;
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 5px;
+        cursor: pointer;
+    }
+    .element {
+        cursor: pointer;
+        display: inline-flex;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #ccc;
+        margin: 5px;
+        overflow: hidden;
+        word-wrap: break-word;
+        background-color: white;
+        padding: 5px;
+        align-items: center;
+        span {
+            width: 100px;
+            text-align: center;
+        }
+    }
+}
+