From 65ccfe39ef017f4db1c9ac1f6169eb6b3b0e54c6 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 9 Jan 2018 12:02:56 +0100
Subject: [PATCH] Add a 'properties' button in pads to display pad data

---
 .../src/less2/include/alertify.less           |   5 +
 customize.dist/translations/messages.fr.js    |   3 +
 customize.dist/translations/messages.js       |   3 +
 www/common/common-ui-elements.js              | 128 +++++++++++++++++-
 www/common/sframe-app-framework.js            |   3 +
 www/drive/inner.js                            |  82 ++---------
 6 files changed, 150 insertions(+), 74 deletions(-)

diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index a75a0bb07..d3bf95360 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -125,6 +125,8 @@
                         width: 100%;
                     }
                 }
+                display: flex;
+                flex-flow: column;
             }
 
             width: 100%;
@@ -132,6 +134,8 @@
             position: relative;
             top: 50%;
             transform: translateY(-50%);
+            max-height: 100%;
+            display: flex;
 
             > * {
                 width: 100%;
@@ -148,6 +152,7 @@
                 padding: @alertify_padding-base;
                 margin-bottom: @alertify_padding-base;
                 margin: 0;
+                overflow: auto;
             }
 
             input:not(.form-control), textarea {
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index c254c69ee..ad1059b6c 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -144,6 +144,9 @@ define(function () {
     out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation';
     out.colorButtonTitle = 'Changer la couleur du texte en mode présentation';
 
+    out.propertiesButton = "Propriétés";
+    out.propertiesButtonTitle = 'Voir les propriétés de ce pad';
+
     out.printText = "Imprimer";
     out.printButton = "Imprimer (Entrée)";
     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 5cee6cb97..08d206ca4 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -147,6 +147,9 @@ define(function () {
     out.backgroundButtonTitle = 'Change the background color in the presentation';
     out.colorButtonTitle = 'Change the text color in presentation mode';
 
+    out.propertiesButton = "Properties";
+    out.propertiesButtonTitle = 'Get pad properties';
+
     out.printText = "Print";
     out.printButton = "Print (enter)";
     out.printButtonTitle = "Print your slides or export them as a PDF file";
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 992f98352..3cd975a65 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -9,9 +9,12 @@ define([
     '/common/hyperscript.js',
     '/common/media-tag.js',
     '/customize/messages.js',
+    '/customize/application_config.js',
+    '/bower_components/nthen/index.js',
 
     'css!/common/tippy.css',
-], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages) {
+], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages, AppConfig,
+             NThen) {
     var UIElements = {};
 
     // Configure MediaTags to use our local viewer
@@ -54,6 +57,112 @@ define([
         };
     };
 
+    var getPropertiesData = function (common, cb) {
+        var data = {};
+        NThen(function (waitFor) {
+            common.getPadAttribute('href', waitFor(function (err, val) {
+                var base = common.getMetadataMgr().getPrivateData().origin;
+
+                var parsed = Hash.parsePadUrl(val);
+                if (parsed.hashData.mode === "view") {
+                    data.roHref = base + val;
+                    return;
+                }
+
+                // We're not in a read-only pad
+                data.href = base + val;
+                // Get Read-only href
+                if (parsed.hashData.type !== "pad") { return; }
+                var i = data.href.indexOf('#') + 1;
+                var hBase = data.href.slice(0, i);
+                var hrefsecret = Hash.getSecrets(parsed.type, parsed.hash);
+                if (!hrefsecret.keys) { return; }
+                var viewHash = Hash.getViewHashFromKeys(hrefsecret.channel, hrefsecret.keys);
+                data.roHref = hBase + viewHash;
+            }));
+            common.getPadAttribute('atime', waitFor(function (err, val) {
+                data.atime = val;
+            }));
+            common.getPadAttribute('ctime', waitFor(function (err, val) {
+                data.ctime = val;
+            }));
+            common.getPadAttribute('tags', waitFor(function (err, val) {
+                data.tags = val;
+            }));
+        }).nThen(function () {
+            cb(void 0, data);
+        });
+    };
+    UIElements.getProperties = function (common, data, cb) {
+        var $d = $('<div>');
+        $('<strong>').text(Messages.fc_prop).appendTo($d);
+
+        if (!data || !data.href) { return void cb(void 0, $d); }
+
+        $('<br>').appendTo($d);
+        if (data.href) {
+            $('<label>', {'for': 'cp-app-prop-link'}).text(Messages.editShare).appendTo($d);
+            $d.append(UI.dialog.selectable(data.href, {
+                id: 'cp-app-prop-link',
+            }));
+        }
+
+        if (data.roHref) {
+            $('<label>', {'for': 'cp-app-prop-rolink'}).text(Messages.viewShare).appendTo($d);
+            $d.append(UI.dialog.selectable(data.roHref, {
+                id: 'cp-app-prop-rolink',
+            }));
+        }
+
+        if (data.tags && Array.isArray(data.tags)) {
+            $('<label>', {'for': 'cp-app-prop-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
+            $d.append(UI.dialog.selectable(data.tags.join(', '), {
+                id: 'cp-app-prop-tags',
+            }));
+        }
+
+        $('<label>', {'for': 'cp-app-prop-ctime'}).text(Messages.fm_creation)
+            .appendTo($d);
+        $d.append(UI.dialog.selectable(new Date(data.ctime).toLocaleString(), {
+            id: 'cp-app-prop-ctime',
+        }));
+
+        $('<label>', {'for': 'cp-app-prop-atime'}).text(Messages.fm_lastAccess)
+            .appendTo($d);
+        $d.append(UI.dialog.selectable(new Date(data.atime).toLocaleString(), {
+            id: 'cp-app-prop-atime',
+        }));
+
+        if (common.isLoggedIn() && AppConfig.enablePinning) {
+            // check the size of this file...
+            common.getFileSize(data.href, function (e, bytes) {
+                if (e) {
+                    // there was a problem with the RPC
+                    console.error(e);
+
+                    // but we don't want to break the interface.
+                    // continue as if there was no RPC
+                    return void cb(void 0, $d);
+                }
+                var KB = Util.bytesToKilobytes(bytes);
+
+                var formatted = Messages._getKey('formattedKB', [KB]);
+                $('<br>').appendTo($d);
+
+                $('<label>', {
+                    'for': 'cp-app-prop-size'
+                }).text(Messages.fc_sizeInKilobytes).appendTo($d);
+
+                $d.append(UI.dialog.selectable(formatted, {
+                    id: 'cp-app-prop-size',
+                }));
+                cb(void 0, $d);
+            });
+        } else {
+            cb(void 0, $d);
+        }
+    };
+
     UIElements.createButton = function (common, type, rightside, data, callback) {
         var AppConfig = common.getAppConfig();
         var button;
@@ -255,6 +364,23 @@ define([
                 });
                 updateIcon(data.element.is(':visible'));
                 break;
+            case 'properties':
+                button = $('<button>', {
+                    'class': 'fa fa-info-circle',
+                    title: Messages.propertiesButtonTitle,
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
+                .text(Messages.propertiesButton))
+                .click(common.prepareFeedback(type))
+                .click(function () {
+                    getPropertiesData(common, function (e, data) {
+                        if (e) { return void console.error(e); }
+                        UIElements.getProperties(common, data, function (e, $prop) {
+                            if (e) { return void console.error(e); }
+                            UI.alert($prop[0], undefined, true);
+                        });
+                    });
+                });
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 9c6f7e4c9..04f924c14 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -548,6 +548,9 @@ define([
                 toolbar.$rightside.append($tags);
             }
 
+            var $properties = common.createButton('properties', true);
+            toolbar.$drawer.append($properties);
+
             createFilePicker();
 
             cb(Object.freeze({
diff --git a/www/drive/inner.js b/www/drive/inner.js
index 9863c396f..485ca8fa0 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -2568,86 +2568,22 @@ define([
             }
             var ro = filesOp.isReadOnlyFile(el);
             var base = APP.origin;
-            var $d = $('<div>');
-            $('<strong>').text(Messages.fc_prop).appendTo($d);
-
-            var data = filesOp.getFileData(el);
-            if (!data || !data.href) { return void cb(void 0, $d); }
-
-            $('<br>').appendTo($d);
-            if (!ro) {
-                $('<label>', {'for': 'cp-app-drive-prop-link'}).text(Messages.editShare).appendTo($d);
-                $d.append(UI.dialog.selectable(base + data.href, {
-                    id: 'cp-app-drive-prop-link',
-                }));
-            }
-
-            var parsed = Hash.parsePadUrl(data.href);
-            if (parsed.hashData && parsed.hashData.type === 'pad') {
-                var roLink = ro ? base + data.href : base + getReadOnlyUrl(el);
-                if (roLink) {
-                    $('<label>', {'for': 'cp-app-drive-prop-rolink'}).text(Messages.viewShare).appendTo($d);
-                    $d.append(UI.dialog.selectable(roLink, {
-                        id: 'cp-app-drive-prop-rolink',
-                    }));
-                }
-            }
-
-            if (data.tags && Array.isArray(data.tags)) {
-                $('<label>', {'for': 'cp-app-drive-prop-tags'}).text(Messages.fm_prop_tagsList).appendTo($d);
-                $d.append(UI.dialog.selectable(data.tags.join(', '), {
-                    id: 'cp-app-drive-prop-tags',
-                }));
-            }
-
-            $('<label>', {'for': 'cp-app-drive-prop-ctime'}).text(Messages.fm_creation)
-                .appendTo($d);
-            $d.append(UI.dialog.selectable(new Date(data.ctime).toLocaleString(), {
-                id: 'cp-app-drive-prop-ctime',
-            }));
-
-            $('<label>', {'for': 'cp-app-drive-prop-atime'}).text(Messages.fm_lastAccess)
-                .appendTo($d);
-            $d.append(UI.dialog.selectable(new Date(data.atime).toLocaleString(), {
-                id: 'cp-app-drive-prop-atime',
-            }));
-
-            if (APP.loggedIn && AppConfig.enablePinning) {
-                // check the size of this file...
-                common.getFileSize(data.href, function (e, bytes) {
-                    if (e) {
-                        // there was a problem with the RPC
-                        logError(e);
-
-                        // but we don't want to break the interface.
-                        // continue as if there was no RPC
-
-                        return void cb(void 0, $d);
-                    }
-                    var KB = Util.bytesToKilobytes(bytes);
-
-                    var formatted = Messages._getKey('formattedKB', [KB]);
-                    $('<br>').appendTo($d);
-
-                    $('<label>', {
-                        'for': 'cp-app-drive-prop-size'
-                    }).text(Messages.fc_sizeInKilobytes).appendTo($d);
-
-                    $d.append(UI.dialog.selectable(formatted, {
-                        id: 'cp-app-drive-prop-size',
-                    }));
-                    cb(void 0, $d);
-                });
+            var data = JSON.parse(JSON.stringify(filesOp.getFileData(el)));
+            if (!data || !data.href) { return void cb('INVALID_FILE'); }
+            data.href = base + data.href;
+            if (ro) {
+                data.roHref = data.href;
+                delete data.href;
             } else {
-                cb(void 0, $d);
+                data.roHref = base + getReadOnlyUrl(el);
             }
+
+            UIElements.getProperties(common, data, cb);
         };
 
         $contextMenu.on("click", "a", function(e) {
             e.stopPropagation();
             var paths = $(this).data('paths');
-            //var path = $(this).data('path');
-            //var $element = $(this).data('element');
 
             var el;
             if (paths.length === 0) {