cryptpad/q

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.