From 1ec41f4e097908ff6ecfc59de6577693cfee2161 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 4 Jan 2018 17:22:01 +0100
Subject: [PATCH] Ability to pick a background image in slides

---
 customize.dist/translations/messages.fr.js |  5 ++
 customize.dist/translations/messages.js    |  5 ++
 www/common/sframe-app-framework.js         |  4 +-
 www/filepicker/inner.js                    |  8 ++-
 www/slide/app-slide.less                   | 65 ++++++++++++++++++++
 www/slide/inner.js                         | 70 +++++++++++++++++++++-
 www/slide/slide.js                         |  6 +-
 7 files changed, 154 insertions(+), 9 deletions(-)

diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 58babab3f..a79cb382f 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -153,6 +153,11 @@ define(function () {
     out.printTitle = "Afficher le titre du pad";
     out.printCSS = "Personnaliser l'apparence (CSS):";
     out.printTransition = "Activer les animations de transition";
+    out.printBackground = "Utiliser une image d'arrière-plan";
+    out.printBackgroundButton = "Choisir une image";
+    out.printBackgroundValue = "<b>Arrière-plan actuel:</b> <em>{0}</em>";
+    out.printBackgroundNoValue = "<em>Aucun arrière-plan affiché</em>";
+    out.printBackgroundRemove = "Supprimer cet arrière-plan";
 
     out.filePickerButton = "Intégrer un fichier stocké dans CryptDrive";
     out.filePicker_close = "Fermer";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index ecc4060ec..1d7fd8b15 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -156,6 +156,11 @@ define(function () {
     out.printTitle = "Display the pad title";
     out.printCSS = "Custom style rules (CSS):";
     out.printTransition = "Enable transition animations";
+    out.printBackground = "Use a background image";
+    out.printBackgroundButton = "Pick an image";
+    out.printBackgroundValue = "<b>Current background:</b> <em>{0}</em>";
+    out.printBackgroundNoValue = "<em>No background image displayed</em>";
+    out.printBackgroundRemove = "Remove this background image";
 
     out.filePickerButton = "Embed a file stored in CryptDrive";
     out.filePicker_close = "Close";
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index cfb3462c3..9c6f7e4c9 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -368,9 +368,9 @@ define([
                     if (data.type !== 'file') { console.log('unhandled embed type ' + data.type); return; } 
                     var privateDat = cpNfInner.metadataMgr.getPrivateData();
                     var origin = privateDat.fileHost || privateDat.origin;
-                    var src = origin + data.src;
+                    var src = data.src = origin + data.src;
                     mediaTagEmbedder($('<media-tag src="' + src +
-                        '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'));
+                        '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
                 }
             });
             $embedButton = $('<button>', {
diff --git a/www/filepicker/inner.js b/www/filepicker/inner.js
index a45ab6b65..1409ad556 100644
--- a/www/filepicker/inner.js
+++ b/www/filepicker/inner.js
@@ -45,6 +45,7 @@ define([
                 sframeChan.event("EV_FILE_PICKED", {
                     type: parsed.type,
                     src: src,
+                    name: data.name,
                     key: parsed.hashData.key
                 });
                 return;
@@ -52,6 +53,7 @@ define([
             sframeChan.event("EV_FILE_PICKED", {
                 type: parsed.type,
                 href: data.url,
+                name: data.name
             });
         };
 
@@ -66,8 +68,8 @@ define([
         APP.FM = common.createFileManager(fmConfig);
 
         // Create file picker
-        var onSelect = function (url) {
-            onFilePicked({url: url});
+        var onSelect = function (url, name) {
+            onFilePicked({url: url, name: name});
         };
         var data = {
             FM: APP.FM
@@ -132,7 +134,7 @@ define([
                         $('<span>', {'class': 'cp-filepicker-content-element-name'}).text(name)
                             .appendTo($span);
                         $span.click(function () {
-                            if (typeof onSelect === "function") { onSelect(data.href); }
+                            if (typeof onSelect === "function") { onSelect(data.href, name); }
                         });
 
                         // Add thumbnail if it exists
diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less
index b79dbc49b..8926f52eb 100644
--- a/www/slide/app-slide.less
+++ b/www/slide/app-slide.less
@@ -79,6 +79,28 @@ h6 { font-size: 24px; }
         }
     }
 }
+.cp-app-slide-shown {
+    .cp-app-slide-container {
+        position: relative;
+        &> media-tag {
+            position: absolute;
+            top:0; right: 0; bottom: 0; left: 0;
+            z-index: -1;
+            &> img {
+                width: 100vw;
+                height: 56.25vw; // height:width ratio = 9/16 = .5625
+                max-height: 100vh;
+                max-width: 177.78vh; // 16/9 = 1.778
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+            }
+        }
+    }
+}
 .cp-app-slide-preview {
     .cp-app-slide-viewer {
         width: 50vw;
@@ -91,6 +113,26 @@ h6 { font-size: 24px; }
             display: block;
             height: 100%;
             #cp-app-slide-modal-content {
+                .cp-app-slide-container {
+                    position: relative;
+                    &> media-tag {
+                        position: absolute;
+                        top:0; right: 0; bottom: 0; left: 0;
+                        z-index: -1;
+                        &> img {
+                            width: 50vw;
+                            height: 28.125vw;
+                            max-height: ~"calc(100vh - 96px)";
+                            max-width: ~"calc(16 / 9 * (100vh - 96px))";
+                            position: absolute;
+                            left: 0;
+                            right: 0;
+                            top: 0;
+                            bottom: 0;
+                            margin: auto;
+                        }
+                    }
+                }
                 .cp-app-slide-container {
                     width: 100%;
                 }
@@ -115,6 +157,11 @@ h6 { font-size: 24px; }
 
 /* Slide position (print mode) */
 @ratio:0.9;
+@media print {
+    #cp-app-slide-editor-container {
+        display: none;
+    }
+}
 #cp-app-slide-print {
     position: relative;
     display: none;
@@ -139,6 +186,24 @@ h6 { font-size: 24px; }
         }
 
     }
+    .cp-app-slide-container {
+        position: relative;
+        &> media-tag {
+            position: absolute;
+            top:0; right: 0; bottom: 0; left: 0;
+            z-index: -1;
+            &> img {
+                width: 90vw;
+                height: 50.625vw;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+            }
+        }
+    }
     .cp-app-slide-container {
         width: 90vw;
         height: 100vh;
diff --git a/www/slide/inner.js b/www/slide/inner.js
index 9a8f39ebf..8b4610ca5 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -113,11 +113,16 @@ define([
         $toolbarDrawer.append($printButton);
     };
 
+    // Flag to check if a file from the filepicker is a mediatag for the slides or a background image
+    var Background = {
+        isBackground: false
+    };
+
     var mkSlideOptionsButton = function (framework, slideOptions, $toolbarDrawer) {
         var metadataMgr = framework._.cpNfInner.metadataMgr;
         var updateSlideOptions = function (newOpt) {
             if (JSONSortify(newOpt) !== JSONSortify(slideOptions)) {
-                $.extend(slideOptions, newOpt);
+                $.extend(true, slideOptions, newOpt);
                 // TODO: manage realtime + cursor in the "options" modal ??
                 Slide.updateOptions();
             }
@@ -129,17 +134,19 @@ define([
             metadataMgr.updateMetadata(metadata);
             framework.localChange();
         };
+        var common = framework._.sfCommon;
         var createPrintDialog = function (invalidStyle) {
             var slideOptionsTmp = {
                 title: false,
                 slide: false,
                 date: false,
+                background: false,
                 transition: true,
                 style: '',
                 styleLess: ''
             };
 
-            $.extend(slideOptionsTmp, slideOptions);
+            $.extend(true, slideOptionsTmp, slideOptions);
             var $container = $('<div class="alertify">');
             var $container2 = $('<div class="dialog">').appendTo($container);
             var $div = $('<div id="printOptions">').appendTo($container2);
@@ -194,6 +201,55 @@ define([
             $('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
                 .appendTo($p);
             $p.append($('<br>'));
+            $p.append($('<br>'));
+            // Background image
+            $('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)
+                .appendTo($p);
+            if (common.isLoggedIn()) {
+                $p.append($('<br>'));
+                $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': '',
+                    style: 'font-size: 17px',
+                    id: 'cp-app-slide-options-bg'
+                }).click(function () {
+                    Background.isBackground = true;
+                    var pickerCfg = {
+                        types: ['file'],
+                        where: ['root'],
+                        filter: {
+                            fileType: ['image/']
+                        }
+                    };
+                    common.openFilePicker(pickerCfg);
+                }).text(Messages.printBackgroundButton).appendTo($p);
+            }
+            $p.append($('<br>'));
+            var $bgValue = $('<div>').appendTo($p);
+            var refreshValue = function () {
+                $bgValue.html('');
+                if (slideOptionsTmp.background && slideOptionsTmp.background.name) {
+                    $bgValue.append(Messages._getKey("printBackgroundValue", [slideOptionsTmp.background.name]));
+                    $('<button>', {
+                        'class': 'fa fa-times',
+                        title: Messages.printBackgroundRemove
+                    }).click(function () {
+                        slideOptionsTmp.background = false;
+                        refreshValue();
+                    }).appendTo($bgValue);
+                } else {
+                    $bgValue.append(Messages.printBackgroundNoValue);
+                }
+            };
+            refreshValue();
+            if (common.isLoggedIn()) {
+                Background.todo = function (newData) {
+                    slideOptionsTmp.background = newData;
+                    refreshValue();
+                };
+            }
+            $p.append($('<br>'));
+            $p.append($('<br>'));
             // CSS
             $('<label>', {'for': 'cp-app-slide-options-css'}).text(Messages.printCSS).appendTo($p);
             $p.append($('<br>'));
@@ -348,7 +404,15 @@ define([
     };
 
     var mkFilePicker = function (framework, editor) {
-        framework.setMediaTagEmbedder(function (mt) {
+        framework.setMediaTagEmbedder(function (mt, data) {
+            if (Background.isBackground) {
+                if (data.type === 'file') {
+                    data.mt = mt[0].outerHTML;
+                    Background.todo(data);
+                }
+                Background.isBackground = false;
+                return;
+            }
             editor.replaceSelection($(mt)[0].outerHTML);
         });
     };
diff --git a/www/slide/slide.js b/www/slide/slide.js
index f0ef35fe0..adc0a808b 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -75,7 +75,11 @@ define([
         if (typeof(Slide.content) !== 'string') { return; }
 
         var c = Slide.content;
-        var m = '<span class="cp-app-slide-container"><span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container"><span class="'+slideClass+'">')+'</span></span>';
+        var mediatagBg = '';
+        if (options.background && options.background.mt) {
+            mediatagBg = options.background.mt;
+        }
+        var m = '<span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">')+'</span></span>';
 
         try { DiffMd.apply(m, $content); } catch (e) { return console.error(e); }