From a80b00a7655036a1814cd54b0b4cf8c7517f51c2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jul 2017 18:32:03 +0200
Subject: [PATCH] Move the file picker in common

---
 customize.dist/src/less/mixins.less | 53 ++++++++++++++++++++
 www/common/cryptpad-common.js       | 62 +++++++++++++++++++++++
 www/common/diffMarked.js            |  1 -
 www/drive/file.less                 | 49 +-----------------
 www/slide/main.js                   | 77 +++++------------------------
 5 files changed, 128 insertions(+), 114 deletions(-)

diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less
index cd900a60c..0ef09dd36 100644
--- a/customize.dist/src/less/mixins.less
+++ b/customize.dist/src/less/mixins.less
@@ -138,3 +138,56 @@
         background: white;
     }
 }
+
+.fileIcon {
+    li {
+        display: inline-block;
+        margin: 10px 10px;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 5px;
+        padding-bottom: 5px;
+
+        &:not(.selected):not(.selectedTmp) {
+            border: 1px solid #CCC;
+        }
+        .name {
+            width: 100%;
+            height: 48px;
+            margin: 8px 0;
+            display: inline-block;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            //text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .truncated {
+            display: block;
+            position: absolute;
+            bottom: 0px;
+            left: 0; right: 0;
+            text-align: center;
+        }
+        img.icon {
+            height: 48px;
+            max-height: none;
+            max-width: none;
+            margin: 8px 0;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 48px;
+            margin: 8px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 5b7e5a15a..9a3e7abf4 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -1098,6 +1098,7 @@ define([
                 }
                 break;
             case 'upload':
+                console.log('UPLOAD');
                 button = $('<button>', {
                     'class': 'btn btn-primary new',
                     title: Messages.uploadButtonTitle,
@@ -1403,6 +1404,67 @@ define([
         }
     };
 
+
+    common.createFileDialog = function (cfg) {
+        var $body = cfg.$body || $('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 = common.getUserFilesList();
+            var fo = common.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 () {
+                    if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
+                    $block.hide();
+                });
+            });
+        };
+        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);
+        });
+        //$filter.append(' '+Messages.or+' ');
+        var data = {FM: cfg.data.FM};
+        $filter.append(common.createButton('upload', false, data, function () {
+            $block.hide();
+        }));
+        updateContainer();
+        $body.keydown(function (e) {
+            if (e.which === 27) { $block.hide(); }
+        });
+        $block.show();
+    };
+
+
+
+
     // Create a button with a dropdown menu
     // input is a config object with parameters:
     //  - container (optional): the dropdown container (span)
diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index 07d15e8e8..42da27b97 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -164,7 +164,6 @@ define([
             var $mts = $content.find('media-tag:not(:has(*))');
             $mts.each(function (i, el) {
                 MediaTag(el);
-                console.log(el.outerHTML);
                 var observer = new MutationObserver(function(mutations) {
                     mutations.forEach(function(mutation) {
                         if (mutation.type === 'childList') {
diff --git a/www/drive/file.less b/www/drive/file.less
index 676ac8f89..7e352c22c 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -468,62 +468,15 @@ span {
     }
     div.grid {
         padding: 20px;
+        .fileIcon;
         li {
-            display: inline-block;
-            margin: 10px 10px;
-            width: 140px;
-            height: 140px;
-            text-align: center;
-            vertical-align: top;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            padding-top: 5px;
-            padding-bottom: 5px;
-
-            &:not(.selected):not(.selectedTmp) {
-                border: 1px solid #CCC;
-            }
-            .name {
-                width: 100%;
-                height: 48px;
-                margin: 8px 0;
-                display: inline-block;
-                //align-items: center;
-                //justify-content: center;
-                overflow: hidden;
-                //text-overflow: ellipsis;
-                word-wrap: break-word;
-            }
             &.element {
                 position: relative;
             }
-            .truncated {
-                display: block;
-                position: absolute;
-                bottom: 0px;
-                left: 0; right: 0;
-                text-align: center;
-            }
             input {
                 width: 100%;
                 margin-top: 5px;
             }
-            img.icon {
-                height: 48px;
-                max-height: none;
-                max-width: none;
-                margin: 8px 0;
-            }
-            .fa {
-                display: block;
-                margin: auto;
-                font-size: 48px;
-                margin: 8px 0;
-                text-align: center;
-                &.listonly {
-                    display: none;
-                }
-            }
         }
         .listElement {
             display: none;
diff --git a/www/slide/main.js b/www/slide/main.js
index 480bd5921..84e83124e 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -199,70 +199,6 @@ 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 parsed = Cryptpad.parsePadUrl(data.href);
-                            var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
-                            var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
-                            var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
-                            editor.replaceSelection(mt);
-                            //var cleanName = name.replace(/[\[\]]/g, '');
-                            //var text = '!['+cleanName+']('+data.href+')';
-                            //editor.replaceSelection(text);
-                            $block.hide();
-                        });
-                    });
-                };
-                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);
-                });
-                $filter.append(' '+Messages.or+' ');
-                var data = {FM: APP.FM};
-                $filter.append(Cryptpad.createButton('upload', false, data, function () {
-                    $block.hide();
-                }));
-                updateContainer();
-                $body.keydown(function (e) {
-                    if (e.which === 27) { $block.hide(); }
-                });
-                $block.show();
-            };
-
             var createPrintDialog = function () {
                 var slideOptionsTmp = {
                     title: false,
@@ -427,12 +363,23 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
+                var fileDialogCfg = {
+                    $body: $iframe.find('body'),
+                    onSelect: function (href) {
+                        var parsed = Cryptpad.parsePadUrl(href);
+                        var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                        var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                        var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                        editor.replaceSelection(mt);
+                    },
+                    data: APP
+                };
                 $('<button>', {
                     title: Messages.filePickerButton,
                     'class': 'rightside-button fa fa-picture-o',
                     style: 'font-size: 17px'
                 }).click(function () {
-                    $('body').append(createFileDialog());
+                    Cryptpad.createFileDialog(fileDialogCfg);
                 }).appendTo($rightside);
 
                 var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);