From 45ac3e40a2181efaf06e7d1e6aea577fda5ec8bc Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 17 Mar 2017 17:49:03 +0100
Subject: [PATCH] Copy print options to present mode

---
 customize.dist/translations/messages.fr.js |   4 +-
 customize.dist/translations/messages.js    |   4 +-
 q                                          | 478 +++++++++++++++++++++
 www/slide/main.js                          |  81 ++--
 www/slide/slide.css                        |  52 ++-
 www/slide/slide.js                         |  32 +-
 www/slide/slide.less                       |  46 +-
 7 files changed, 622 insertions(+), 75 deletions(-)
 create mode 100644 q

diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 96e36a4b1..4ad51bdf7 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -79,12 +79,14 @@ define(function () {
 
     out.printButton = "Imprimer";
     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
-    out.printOptions = "Options d'impression";
+    out.printOptions = "Options de mise en page";
     out.printSlideNumber = "Afficher le numéro des slides";
     out.printDate = "Afficher la date";
     out.printTitle = "Afficher le titre du pad";
     out.printCSS = "Personnaliser l'apparence (CSS):";
 
+    out.slideOptionsTitle = "Personnaliser la présentation";
+
     out.editShare = "Lien d'édition";
     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
     out.editOpen = "Éditer dans un nouvel onglet";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index b463b4853..15540fd1a 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -81,12 +81,14 @@ define(function () {
 
     out.printButton = "Print";
     out.printButtonTitle = "Print your slides or export them as a PDF file";
-    out.printOptions = "Print options";
+    out.printOptions = "Layout options";
     out.printSlideNumber = "Display the slide number";
     out.printDate = "Display the date";
     out.printTitle = "Display the pad title";
     out.printCSS = "Custom style rules (CSS):";
 
+    out.slideOptionsTitle = "Customize your slides";
+
     out.editShare = "Editing link";
     out.editShareTitle = "Copy the editing link to clipboard";
     out.editOpen = "Open editing link in a new tab";
diff --git a/q b/q
new file mode 100644
index 000000000..cbba0eb66
--- /dev/null
+++ b/q
@@ -0,0 +1,478 @@
+warning: LF will be replaced by CRLF in customize.dist/translations/messages.fr.js.
+The file will have its original line endings in your working directory.
+diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
+index 96e36a4..4ad51bd 100644
+--- a/customize.dist/translations/messages.fr.js
++++ b/customize.dist/translations/messages.fr.js
+@@ -79,12 +79,14 @@ define(function () {
+ 
+     out.printButton = "Imprimer";
+     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
+-    out.printOptions = "Options d'impression";
++    out.printOptions = "Options de mise en page";
+     out.printSlideNumber = "Afficher le numéro des slides";
+     out.printDate = "Afficher la date";
+     out.printTitle = "Afficher le titre du pad";
+     out.printCSS = "Personnaliser l'apparence (CSS):";
+ 
++    out.slideOptionsTitle = "Personnaliser la présentation";
++
+     out.editShare = "Lien d'édition";
+     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
+     out.editOpen = "Éditer dans un nouvel onglet";
+diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
+index b463b48..15540fd 100644
+--- a/customize.dist/translations/messages.js
++++ b/customize.dist/translations/messages.js
+@@ -81,12 +81,14 @@ define(function () {
+ 
+     out.printButton = "Print";
+     out.printButtonTitle = "Print your slides or export them as a PDF file";
+-    out.printOptions = "Print options";
++    out.printOptions = "Layout options";
+     out.printSlideNumber = "Display the slide number";
+     out.printDate = "Display the date";
+     out.printTitle = "Display the pad title";
+     out.printCSS = "Custom style rules (CSS):";
+ 
++    out.slideOptionsTitle = "Customize your slides";
++
+     out.editShare = "Editing link";
+     out.editShareTitle = "Copy the editing link to clipboard";
+     out.editOpen = "Open editing link in a new tab";
+diff --git a/www/slide/main.js b/www/slide/main.js
+index 50f216e..0bc6f5f 100644
+--- a/www/slide/main.js
++++ b/www/slide/main.js
+@@ -136,7 +136,8 @@ define([
+ 
+             var $modal = $pad.contents().find('#modal');
+             var $content = $pad.contents().find('#content');
+-            var $print = $pad.contents().find('#print');
++            var $print = $pad.contents().find('#print');
            var slideOptions = {};
++
+             $( window ).resize(function() {
+                 // 20vh
+                 // 20 * 16 / 9vw
+@@ -149,7 +150,13 @@ define([
+                 // $print.css('font-size', (20*9/16)+'vw');
+             });
+ 
+-            Slide.setModal($modal, $content, $pad, ifrw, initialState);
++            Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
++
++            var setStyleState = function (state) {
++                $pad.contents().find('#print, #content').find('style').each(function (i, el) {
++                    el.disabled = !state;
++                });
++            };
+ 
+             var enterPresentationMode = function (shouldLog) {
+                 Slide.show(true, editor.getValue());
+@@ -158,6 +165,7 @@ define([
+                 }
+             };
+             var leavePresentationMode = function () {
++                setStyleState(false);
+                 Slide.show(false);
+             };
+ 
+@@ -229,7 +237,8 @@ define([
+                     content: textValue,
+                     metadata: {
+                         users: userData,
+-                        defaultTitle: defaultName
++                        defaultTitle: defaultName,
++                        slideOptions: slideOptions
+                     }
+                 };
+                 if (!initializing) {
+@@ -370,6 +379,7 @@ define([
+                     setTabTitle();
+                     $bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
+                     $bar.find('.' + Toolbar.constants.title).find('input').val(data);
++                    if (slideOptions.title) { Slide.updateOptions(); }
+                 });
+             };
+ 
+@@ -387,6 +397,15 @@ define([
+                 }
+             };
+ 
++            var updateOptions = function (newOpt) {
++                if (stringify(newOpt) !== stringify(slideOptions)) {
++                    $.extend(slideOptions, newOpt);
++                    // TODO: manage realtime + cursor in the "options" modal ??
++                    console.log('updating options');
++                    Slide.updateOptions();
++                }
++            };
++
+             var updateDefaultTitle = function (defaultTitle) {
+                 defaultName = defaultTitle;
+                 $bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
+@@ -409,6 +428,7 @@ define([
+                         updateTitle(json.metadata.title || defaultName);
+                         titleUpdated = true;
+                     }
++                    updateOptions(json.metadata.slideOptions);
+                     updateColors(json.metadata.color, json.metadata.backColor);
+                 }
+                 if (!titleUpdated) {
+@@ -424,12 +444,14 @@ define([
+             };
+ 
+             var createPrintDialog = function () {
+-                var printOptions = {
++                var slideOptionsTmp = {
+                     title: true,
+                     slide: true,
+-                    date: true
++                    date: true,
++                    style: ''
+                 };
+ 
++                $.extend(slideOptionsTmp, slideOptions);


+                 var $container = $('<div class="alertify">');
+                 var $container2 = $('<div class="dialog">').appendTo($container);
+                 var $div = $('<div id="printOptions">').appendTo($container2);
+@@ -440,21 +462,21 @@ define([
+                 $('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
+                     var c = this.checked;
+                     console.log(c);
+-                    printOptions.slide = c;
++                    slideOptionsTmp.slide = c;
+                 }).appendTo($p).css('width', 'auto');
+                 $('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
+                 $p.append($('<br>'));
+                 // Date
+                 $('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {
+                     var c = this.checked;
+-                    printOptions.date = c;
++                    slideOptionsTmp.date = c;
+                 }).appendTo($p).css('width', 'auto');
+                 $('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);
+                 $p.append($('<br>'));
+                 // Title
+                 $('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {
+                     var c = this.checked;
+-                    printOptions.title = c;
++                    slideOptionsTmp.title = c;
+                 }).appendTo($p).css('width', 'auto');
+                 $('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
+                 $p.append($('<br>'));
+@@ -462,34 +484,18 @@ define([
+                 $('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
+                 $p.append($('<br>'));
+                 var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
++                $textarea.val(slideOptionsTmp.style);
++
+ 
+-                var fixCSS = function (css) {
+-                    var append = '.cp #print ';
+-                    return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
+-                };
+ 
+                 var todo = function () {
+-                    var $style = $('<style>').text(fixCSS($textarea.val()));
+-                    $print.prepend($style);
+-                    var length = $print.find('.slide-frame').length;
+-                    $print.find('.slide-frame').each(function (i, el) {
+-                        if (printOptions.slide) {
+-                            $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
+-                        }
+-                        if (printOptions.date) {
+-                            $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
+-                        }
+-                        if (printOptions.title) {
+-                            $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
+-                        }
+-                    });
+-                    window.frames["pad-iframe"].focus();
+-                    window.frames["pad-iframe"].print();
++                    $.extend(slideOptions, slideOptionsTmp);
                    slideOptions.style = $textarea.val();
++                    onLocal();
+                     $container.remove();
+                 };
+ 
+                 var $nav = $('<nav>').appendTo($div);
+-                var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
++                var $ok = $('<button>', {'class': 'ok'}).text(Messages.settings_save).appendTo($nav).click(todo);
+                 var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
+                     $container.remove();
+                 });
+@@ -556,10 +562,24 @@ define([
+                     'class': 'rightside-button fa fa-print',
+                     style: 'font-size: 17px'
+                 }).click(function () {
++                    Slide.update(editor.getValue(), true);
+                     $print.html($content.html());
++                    Cryptpad.confirm("Are you sure you want to print?", function (yes) {
++                        if (yes) {
++                            window.frames["pad-iframe"].focus();
++                            window.frames["pad-iframe"].print();
++                        }
++                    }, {ok: Messages.printButton});
++                    //$('body').append(createPrintDialog());
++                });
++                $rightside.append($printButton);

                var $slideOptions = $('<button>', {
++                    title: Messages.slideOptionsTitle,
++                    'class': 'rightside-button fa fa-cog',
++                    style: 'font-size: 17px'
++                }).click(function () {
+                     $('body').append(createPrintDialog());
+                 });
+-                $rightside.append($printButton);
++                $rightside.append($slideOptions);
+ 
+                 var $present = Cryptpad.createButton('present', true)
+               warning: LF will be replaced by CRLF in customize.dist/translations/messages.js.
+The file will have its original line endings in your working directory.
+warning: LF will be replaced by CRLF in www/slide/slide.css.
+The file will have its original line endings in your working directory.
+      .click(function () {
+@@ -726,8 +746,6 @@ define([
+                 updateMetadata(userDoc);
+ 
+                 editor.setValue(newDoc || initialState);
+-                Slide.update(newDoc, true);
+-                Slide.draw();
+ 
+                 if (Cryptpad.initialName && APP.title === defaultName) {
+                     updateTitle(Cryptpad.initialName);
+diff --git a/www/slide/slide.css b/www/slide/slide.css
+index e96b77a..0404398 100644
+--- a/www/slide/slide.css
++++ b/www/slide/slide.css
+@@ -80,11 +80,16 @@ body .CodeMirror-focused .cm-matchhighlight {
+   position: relative;
+   display: none;
+   font-size: 11.25vw;
++  /*.slide-frame:first-child {
++        h1 { color: yellow; }
++        margin-top: ~"calc(((100vh - 56.25vw)/2))";
++    }*/
+ }
+ .cp #print .slide-frame {
+   display: block !important;
+   padding: 2.5%;
+-  margin-top: calc((100vh - 56.25vw)/2);
++  margin-top: 7.228vw;
++  margin-bottom: 7.228vw;
+   border-top: 1px solid black;
+   border-bottom: 1px solid black;
+   height: 56.25vw;
+@@ -98,26 +103,7 @@ body .CodeMirror-focused .cm-matchhighlight {
+ }
+ .cp #print .slide-frame h1 {
+   padding-top: 0;
+-}
+-.cp #print .slide-frame .slideNumber {
+-  position: absolute;
+-  right: 5vh;
+-  bottom: 5vh;
+-  font-size: 15px;
+-}
+-.cp #print .slide-frame .slideDate {
+-  position: absolute;
+-  left: 5vh;
+-  bottom: 5vh;
+-  font-size: 15px;
+-}
+-.cp #print .slide-frame .slideTitle {
+-  position: absolute;
+-  top: 5vh;
+-  left: 0px;
+-  right: 0px;
+-  text-align: center;
+-  font-size: 15px;
++  color: green;
+ }
+ .cp div.modal,
+ .cp div#modal {
+@@ -341,3 +327,29 @@ body .CodeMirror-focused .cm-matchhighlight {
+   max-height: 90%;
+   margin: auto;
+ }
++.cp div#modal #content .slide-frame .slideNumber,
++.cp #print .slide-frame .slideNumber {
++  position: absolute;
++  right: 5vh;
++  bottom: 5vh;
++  font-size: 10%;
++  line-height: 110%;
++}
++.cp div#modal #content .slide-frame .slideDate,
++.cp #print .slide-frame .slideDate {
++  position: absolute;
++  left: 5vh;
++  bottom: 5vh;
++  font-size: 10%;
++  line-height: 110%;
++}
++.cp div#modal #content .slide-frame .slideTitle,
++.cp #print .slide-frame .slideTitle {
++  position: absolute;
++  bottom: 5vh;
++  left: 0px;
++  right: 0px;
++  text-align: center;
++  font-size: 10%;
++  line-height: 110%;
++}
+diff --git a/www/slide/slide.js b/www/slide/slide.js
+index 7cbcad4..3990124 100644
+--- a/www/slide/slide.js
++++ b/www/slide/slide.js
+@@ -14,11 +14,13 @@ define([
+         content: [],
+         changeHandlers: [],
+     };
++    var APP;
+     var ifrw;
+     var $modal;
+     var $content;
+     var $pad;
+     var placeholder;
++    var options;
+     var separator = '<hr data-pewpew="pezpez">';
+     var separatorReg = /<hr data\-pewpew="pezpez">/g;
+     var slideClass = 'slide-frame';
+@@ -114,6 +116,11 @@ define([
+         slice(root.children).forEach(removeListeners);
+     };
+ 
++    var fixCSS = function (css) {
++        var append = '.cp #print .slide-frame ';
++        var append2 = '.cp div#modal #content .slide-frame ';
++        return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');
++    };
+     var draw = Slide.draw =  function (i) {
+         i = i || 0;
+         if (typeof(Slide.content) !== 'string') { return; }
+@@ -130,11 +137,31 @@ define([
+         } else {
+             DD.apply($content[0], patch);
+         }
++        var length = getNumberOfSlides();
++        $modal.find('style.slideStyle').remove();
++        if (options.style && Slide.shown) {
++            $modal.prepend($('<style>', {'class': 'slideStyle'}).text(fixCSS(options.style)));
++        }
++        $content.find('.slide-frame').each(function (i, el) {
++            if (options.slide) {
++                $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
++            }
++            if (options.date) {
++                $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
++            }
++            if (options.title) {
++                $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
++            }
++        });
+         $content.find('.' + slideClass).hide();
+         $content.find('.' + slideClass + ':eq( ' + i + ' )').show();
+         change(Slide.lastIndex, Slide.index);
+     };
+ 
++    var updateOptions = Slide.updateOptions = function () {
++        draw(Slide.index);
++    };
++
+     var isPresentURL = Slide.isPresentURL = function () {
+         var hash = window.location.hash;
+         // Present mode has /present at the end of the hash
+@@ -269,12 +296,15 @@ define([
+         });
+     };
+ 
+-    Slide.setModal = function ($m, $c, $p, iframe, ph) {
++    Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
+         $modal = Slide.$modal = $m;
+         $content = Slide.$content = $c;
+         $pad = Slide.$pad = $p;
+         ifrw = Slide.ifrw = iframe;
+         placeholder = Slide.placeholder = ph;
++        options = Slide.options = opt;
++        APP = appObj;
++        console.log(APP);
+         addEvent();
+     };
+ 
+diff --git a/www/slide/slide.less b/www/slide/slide.less
+index 31dd1c1..3bbd52e 100644
+--- a/www/slide/slide.less
++++ b/www/slide/slide.less
+@@ -90,7 +90,10 @@ body {
+         //align-items: center;
+         // flex-flow: column;
+         padding: 2.5%;
+-        margin-top: ~"calc((100vh - 56.25vw)/2)";
++        // margin-top: ~"calc(((100vh - 56.25vw)/2))";
++        margin-top: 7.228vw;
++        margin-bottom: 7.228vw;
++        // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
+         border-top: 1px solid black;
+         border-bottom: 1px solid black;
+         height: 56.25vw;
+@@ -103,27 +106,14 @@ body {
+         }
+         h1 {
+             padding-top: 0;
++            color: green;
+         }
+-        .slideNumber {
+-            position: absolute;
+-            right: 5vh;
+-            bottom: 5vh;
+-            font-size: 15px;
+-        }
+-        .slideDate {
+-            position: absolute;
+-            left: 5vh;
+-            bottom: 5vh;
+-            font-size: 15px;
+-        }
+-        .slideTitle {
+-            position: absolute;
+-            top: 5vh;
+-            left: 0px; right: 0px;
+-            text-align: center;
+-            font-size: 15px;
+-        }
++
+     }
++    /*.slide-frame:first-child {
++        h1 { color: yellow; }
++        margin-top: ~"calc(((100vh - 56.25vw)/2))";
++    }*/
+ }
+ 
+ 
+@@ -276,6 +266,24 @@ div#modal #content, #print {
+             max-width: 90%;
+             max-height: 90%;
+             margin: auto;
++        }
        .slideNumber {
++            position: absolute;
++            right: 5vh;
++            bottom: 5vh;
++            .size(1);
++        }
++        .slideDate {
++            position: absolute;
++            left: 5vh;
++            bottom: 5vh;
++            .size(1);
++        }
++        .slideTitle {
++            position: absolute;
++            bottom: 5vh;
++            left: 0px; right: 0px;
++            text-align: center;
++            .size(1);
+         }
+     }
+ }
+warning: LF will be replaced by CRLF in www/slide/slide.js.
+The file will have its original line endings in your working directory.
diff --git a/www/slide/main.js b/www/slide/main.js
index 50f216e56..8c125e1e3 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -137,6 +137,8 @@ define([
             var $modal = $pad.contents().find('#modal');
             var $content = $pad.contents().find('#content');
             var $print = $pad.contents().find('#print');
+            var slideOptions = {};
+
             $( window ).resize(function() {
                 // 20vh
                 // 20 * 16 / 9vw
@@ -149,7 +151,13 @@ define([
                 // $print.css('font-size', (20*9/16)+'vw');
             });
 
-            Slide.setModal($modal, $content, $pad, ifrw, initialState);
+            Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
+
+            var setStyleState = function (state) {
+                $pad.contents().find('#print, #content').find('style').each(function (i, el) {
+                    el.disabled = !state;
+                });
+            };
 
             var enterPresentationMode = function (shouldLog) {
                 Slide.show(true, editor.getValue());
@@ -158,6 +166,7 @@ define([
                 }
             };
             var leavePresentationMode = function () {
+                setStyleState(false);
                 Slide.show(false);
             };
 
@@ -229,7 +238,8 @@ define([
                     content: textValue,
                     metadata: {
                         users: userData,
-                        defaultTitle: defaultName
+                        defaultTitle: defaultName,
+                        slideOptions: slideOptions
                     }
                 };
                 if (!initializing) {
@@ -370,6 +380,7 @@ define([
                     setTabTitle();
                     $bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
                     $bar.find('.' + Toolbar.constants.title).find('input').val(data);
+                    if (slideOptions.title) { Slide.updateOptions(); }
                 });
             };
 
@@ -387,6 +398,14 @@ define([
                 }
             };
 
+            var updateOptions = function (newOpt) {
+                if (stringify(newOpt) !== stringify(slideOptions)) {
+                    $.extend(slideOptions, newOpt);
+                    // TODO: manage realtime + cursor in the "options" modal ??
+                    Slide.updateOptions();
+                }
+            };
+
             var updateDefaultTitle = function (defaultTitle) {
                 defaultName = defaultTitle;
                 $bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
@@ -409,6 +428,7 @@ define([
                         updateTitle(json.metadata.title || defaultName);
                         titleUpdated = true;
                     }
+                    updateOptions(json.metadata.slideOptions);
                     updateColors(json.metadata.color, json.metadata.backColor);
                 }
                 if (!titleUpdated) {
@@ -424,12 +444,14 @@ define([
             };
 
             var createPrintDialog = function () {
-                var printOptions = {
+                var slideOptionsTmp = {
                     title: true,
                     slide: true,
-                    date: true
+                    date: true,
+                    style: ''
                 };
 
+                $.extend(slideOptionsTmp, slideOptions);
                 var $container = $('<div class="alertify">');
                 var $container2 = $('<div class="dialog">').appendTo($container);
                 var $div = $('<div id="printOptions">').appendTo($container2);
@@ -440,21 +462,21 @@ define([
                 $('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
                     var c = this.checked;
                     console.log(c);
-                    printOptions.slide = c;
+                    slideOptionsTmp.slide = c;
                 }).appendTo($p).css('width', 'auto');
                 $('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
                 $p.append($('<br>'));
                 // Date
                 $('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {
                     var c = this.checked;
-                    printOptions.date = c;
+                    slideOptionsTmp.date = c;
                 }).appendTo($p).css('width', 'auto');
                 $('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);
                 $p.append($('<br>'));
                 // Title
                 $('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {
                     var c = this.checked;
-                    printOptions.title = c;
+                    slideOptionsTmp.title = c;
                 }).appendTo($p).css('width', 'auto');
                 $('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
                 $p.append($('<br>'));
@@ -462,34 +484,19 @@ define([
                 $('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
                 $p.append($('<br>'));
                 var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
+                $textarea.val(slideOptionsTmp.style);
+
 
-                var fixCSS = function (css) {
-                    var append = '.cp #print ';
-                    return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
-                };
 
                 var todo = function () {
-                    var $style = $('<style>').text(fixCSS($textarea.val()));
-                    $print.prepend($style);
-                    var length = $print.find('.slide-frame').length;
-                    $print.find('.slide-frame').each(function (i, el) {
-                        if (printOptions.slide) {
-                            $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
-                        }
-                        if (printOptions.date) {
-                            $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
-                        }
-                        if (printOptions.title) {
-                            $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
-                        }
-                    });
-                    window.frames["pad-iframe"].focus();
-                    window.frames["pad-iframe"].print();
+                    $.extend(slideOptions, slideOptionsTmp);
+                    slideOptions.style = $textarea.val();
+                    onLocal();
                     $container.remove();
                 };
 
                 var $nav = $('<nav>').appendTo($div);
-                var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
+                var $ok = $('<button>', {'class': 'ok'}).text(Messages.settings_save).appendTo($nav).click(todo);
                 var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
                     $container.remove();
                 });
@@ -556,10 +563,24 @@ define([
                     'class': 'rightside-button fa fa-print',
                     style: 'font-size: 17px'
                 }).click(function () {
+                    Slide.update(editor.getValue(), true);
                     $print.html($content.html());
+                    Cryptpad.confirm("Are you sure you want to print?", function (yes) {
+                        if (yes) {
+                            window.frames["pad-iframe"].focus();
+                            window.frames["pad-iframe"].print();
+                        }
+                    }, {ok: Messages.printButton});
+                    //$('body').append(createPrintDialog());
+                });
+                $rightside.append($printButton);

                var $slideOptions = $('<button>', {
+                    title: Messages.slideOptionsTitle,
+                    'class': 'rightside-button fa fa-cog',
+                    style: 'font-size: 17px'
+                }).click(function () {
                     $('body').append(createPrintDialog());
                 });
-                $rightside.append($printButton);
+                $rightside.append($slideOptions);
 
                 var $present = Cryptpad.createButton('present', true)
                     .click(function () {
@@ -726,8 +747,6 @@ define([
                 updateMetadata(userDoc);
 
                 editor.setValue(newDoc || initialState);
-                Slide.update(newDoc, true);
-                Slide.draw();
 
                 if (Cryptpad.initialName && APP.title === defaultName) {
                     updateTitle(Cryptpad.initialName);
diff --git a/www/slide/slide.css b/www/slide/slide.css
index e96b77a44..34d860d6a 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -80,11 +80,15 @@ body .CodeMirror-focused .cm-matchhighlight {
   position: relative;
   display: none;
   font-size: 11.25vw;
+  /*.slide-frame:first-child {
+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
+    }*/
 }
 .cp #print .slide-frame {
   display: block !important;
   padding: 2.5%;
-  margin-top: calc((100vh - 56.25vw)/2);
+  margin-top: 7.228vw;
+  margin-bottom: 7.228vw;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   height: 56.25vw;
@@ -99,26 +103,6 @@ body .CodeMirror-focused .cm-matchhighlight {
 .cp #print .slide-frame h1 {
   padding-top: 0;
 }
-.cp #print .slide-frame .slideNumber {
-  position: absolute;
-  right: 5vh;
-  bottom: 5vh;
-  font-size: 15px;
-}
-.cp #print .slide-frame .slideDate {
-  position: absolute;
-  left: 5vh;
-  bottom: 5vh;
-  font-size: 15px;
-}
-.cp #print .slide-frame .slideTitle {
-  position: absolute;
-  top: 5vh;
-  left: 0px;
-  right: 0px;
-  text-align: center;
-  font-size: 15px;
-}
 .cp div.modal,
 .cp div#modal {
   /* Navigation buttons */
@@ -341,3 +325,29 @@ body .CodeMirror-focused .cm-matchhighlight {
   max-height: 90%;
   margin: auto;
 }
+.cp div#modal #content .slide-frame .slideNumber,
+.cp #print .slide-frame .slideNumber {
+  position: absolute;
+  right: 5vh;
+  bottom: 5vh;
+  font-size: 10%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame .slideDate,
+.cp #print .slide-frame .slideDate {
+  position: absolute;
+  left: 5vh;
+  bottom: 5vh;
+  font-size: 10%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame .slideTitle,
+.cp #print .slide-frame .slideTitle {
+  position: absolute;
+  bottom: 5vh;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+  font-size: 10%;
+  line-height: 110%;
+}
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 7cbcad480..399012450 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -14,11 +14,13 @@ define([
         content: [],
         changeHandlers: [],
     };
+    var APP;
     var ifrw;
     var $modal;
     var $content;
     var $pad;
     var placeholder;
+    var options;
     var separator = '<hr data-pewpew="pezpez">';
     var separatorReg = /<hr data\-pewpew="pezpez">/g;
     var slideClass = 'slide-frame';
@@ -114,6 +116,11 @@ define([
         slice(root.children).forEach(removeListeners);
     };
 
+    var fixCSS = function (css) {
+        var append = '.cp #print .slide-frame ';
+        var append2 = '.cp div#modal #content .slide-frame ';
+        return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');
+    };
     var draw = Slide.draw =  function (i) {
         i = i || 0;
         if (typeof(Slide.content) !== 'string') { return; }
@@ -130,11 +137,31 @@ define([
         } else {
             DD.apply($content[0], patch);
         }
+        var length = getNumberOfSlides();
+        $modal.find('style.slideStyle').remove();
+        if (options.style && Slide.shown) {
+            $modal.prepend($('<style>', {'class': 'slideStyle'}).text(fixCSS(options.style)));
+        }
+        $content.find('.slide-frame').each(function (i, el) {
+            if (options.slide) {
+                $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
+            }
+            if (options.date) {
+                $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
+            }
+            if (options.title) {
+                $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
+            }
+        });
         $content.find('.' + slideClass).hide();
         $content.find('.' + slideClass + ':eq( ' + i + ' )').show();
         change(Slide.lastIndex, Slide.index);
     };
 
+    var updateOptions = Slide.updateOptions = function () {
+        draw(Slide.index);
+    };
+
     var isPresentURL = Slide.isPresentURL = function () {
         var hash = window.location.hash;
         // Present mode has /present at the end of the hash
@@ -269,12 +296,15 @@ define([
         });
     };
 
-    Slide.setModal = function ($m, $c, $p, iframe, ph) {
+    Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
         $modal = Slide.$modal = $m;
         $content = Slide.$content = $c;
         $pad = Slide.$pad = $p;
         ifrw = Slide.ifrw = iframe;
         placeholder = Slide.placeholder = ph;
+        options = Slide.options = opt;
+        APP = appObj;
+        console.log(APP);
         addEvent();
     };
 
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 31dd1c120..2c4548e83 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -90,7 +90,10 @@ body {
         //align-items: center;
         // flex-flow: column;
         padding: 2.5%;
-        margin-top: ~"calc((100vh - 56.25vw)/2)";
+        // margin-top: ~"calc(((100vh - 56.25vw)/2))";
+        margin-top: 7.228vw;
+        margin-bottom: 7.228vw;
+        // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         height: 56.25vw;
@@ -104,26 +107,11 @@ body {
         h1 {
             padding-top: 0;
         }
-        .slideNumber {
-            position: absolute;
-            right: 5vh;
-            bottom: 5vh;
-            font-size: 15px;
-        }
-        .slideDate {
-            position: absolute;
-            left: 5vh;
-            bottom: 5vh;
-            font-size: 15px;
-        }
-        .slideTitle {
-            position: absolute;
-            top: 5vh;
-            left: 0px; right: 0px;
-            text-align: center;
-            font-size: 15px;
-        }
+
     }
+    /*.slide-frame:first-child {
+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
+    }*/
 }
 
 
@@ -276,6 +264,24 @@ div#modal #content, #print {
             max-width: 90%;
             max-height: 90%;
             margin: auto;
+        }
        .slideNumber {
+            position: absolute;
+            right: 5vh;
+            bottom: 5vh;
+            .size(1);
+        }
+        .slideDate {
+            position: absolute;
+            left: 5vh;
+            bottom: 5vh;
+            .size(1);
+        }
+        .slideTitle {
+            position: absolute;
+            bottom: 5vh;
+            left: 0px; right: 0px;
+            text-align: center;
+            .size(1);
         }
     }
 }