Add a file picker in the slide app

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;
+        }
+    }
+}
+