Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/src/less/mixins.less

@@ -23,8 +23,11 @@
 .top-left(@s: 5px) { border-top-left-radius: @s; }
 
 .size (@n) {
-    font-size: @n * 1vw;
-    line-height: @n * 1.1vw;
+    // font-size: @n * 1vmin;
+    // line-height: @n * 1.1vmin;
+    font-size: @n * 10%;
+    // line-height: @n * 11%;
+    line-height: 110%;
 }
 
 .two-part-gradient (@start, @end) {

customize.dist/src/less/toolbar.less

@@ -88,6 +88,73 @@
             margin: auto;
         }
     }
+
+.clag () {
+    background: transparent;
+}
+
+
+    #newLag {
+        height: 20px;
+        width: 23px;
+        background: transparent;
+        display: inline-block;
+        padding: 3px;
+        margin: 3px;
+        vertical-align: top;
+        box-sizing: content-box;
+        span {
+            display: inline-block;
+            width: 4px;
+            margin: 0;
+            margin-right: 1px;
+            background: black;
+            vertical-align: bottom;
+            box-sizing: border-box;
+            border: 1px solid black;
+            transition: background 1s, border 1s;
+            &:last-child {
+                margin-right: 0;
+            }
+            &.bar1 { height: 5px; }
+            &.bar2 { height: 10px; }
+            &.bar3 { height: 15px; }
+            &.bar4 { height: 20px; }
+        }
+        &.lag0 {
+            span {
+                .clag();
+                border-color: red;
+            }
+        }
+        &.lag1 {
+            .bar2, .bar3, .bar4 { .clag(); }
+            span {
+                background-color: orange;
+                border-color: orange;
+            }
+        }
+        &.lag2 {
+            .bar3, .bar4 { .clag(); }
+            span {
+                background-color: orange;
+                border-color: orange;
+            }
+        }
+        &.lag3 {
+            .bar4 { .clag(); }
+            span {
+                background-color: green;
+                border-color: green;
+            }
+        }
+        &.lag4 {
+            span {
+                background-color: green;
+                border-color: green;
+            }
+        }
+    }
     div {
         white-space: normal;
         &.cryptpad-back {

customize.dist/toolbar.css

@@ -161,6 +161,74 @@
 .cryptpad-toolbar .cryptpad-lag div {
   margin: auto;
 }
+.cryptpad-toolbar #newLag {
+  height: 20px;
+  width: 23px;
+  background: transparent;
+  display: inline-block;
+  padding: 3px;
+  margin: 3px;
+  vertical-align: top;
+  box-sizing: content-box;
+}
+.cryptpad-toolbar #newLag span {
+  display: inline-block;
+  width: 4px;
+  margin: 0;
+  margin-right: 1px;
+  background: black;
+  vertical-align: bottom;
+  box-sizing: border-box;
+  border: 1px solid black;
+  transition: background 1s, border 1s;
+}
+.cryptpad-toolbar #newLag span:last-child {
+  margin-right: 0;
+}
+.cryptpad-toolbar #newLag span.bar1 {
+  height: 5px;
+}
+.cryptpad-toolbar #newLag span.bar2 {
+  height: 10px;
+}
+.cryptpad-toolbar #newLag span.bar3 {
+  height: 15px;
+}
+.cryptpad-toolbar #newLag span.bar4 {
+  height: 20px;
+}
+.cryptpad-toolbar #newLag.lag0 span {
+  background: transparent;
+  border-color: red;
+}
+.cryptpad-toolbar #newLag.lag1 .bar2,
+.cryptpad-toolbar #newLag.lag1 .bar3,
+.cryptpad-toolbar #newLag.lag1 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag1 span {
+  background-color: orange;
+  border-color: orange;
+}
+.cryptpad-toolbar #newLag.lag2 .bar3,
+.cryptpad-toolbar #newLag.lag2 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag2 span {
+  background-color: orange;
+  border-color: orange;
+}
+.cryptpad-toolbar #newLag.lag3 .bar4 {
+  background: transparent;
+}
+.cryptpad-toolbar #newLag.lag3 span {
+  background-color: green;
+  border-color: green;
+}
+.cryptpad-toolbar #newLag.lag4 span {
+  background-color: green;
+  border-color: green;
+}
 .cryptpad-toolbar div {
   white-space: normal;
 }

customize.dist/translations/messages.fr.js

@@ -77,14 +77,17 @@ 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.printButton = "Imprimer";
+    out.printButton = "Imprimer (Entrée)";
     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.slideOptionsButton = "Enregistrer (Entrée)";
+
     out.editShare = "Lien d'édition";
     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
     out.editOpen = "Éditer dans un nouvel onglet";

customize.dist/translations/messages.js

@@ -79,14 +79,17 @@ define(function () {
     out.backgroundButtonTitle = 'Change the background color in the presentation';
     out.colorButtonTitle = 'Change the text color in presentation mode';
 
-    out.printButton = "Print";
+    out.printButton = "Print (enter)";
     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.slideOptionsButton = "Save (enter)";
+
     out.editShare = "Editing link";
     out.editShareTitle = "Copy the editing link to clipboard";
     out.editOpen = "Open editing link in a new tab";

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.

www/common/cryptpad-common.js

@@ -1493,7 +1493,7 @@ define([
         return $('button.ok');
     };
 
-    var listenForKeys = function (yes, no) {
+    var listenForKeys = common.listenForKeys = function (yes, no) {
         var handler = function (e) {
             switch (e.which) {
                 case 27: // cancel
@@ -1510,7 +1510,7 @@ define([
         return handler;
     };
 
-    var stopListening = function (handler) {
+    var stopListening = common.stopListening = function (handler) {
         $(window).off('keyup', handler);
     };
 

www/common/toolbar.js

@@ -342,7 +342,12 @@ define([
             'class': LAG_ELEM_CLS,
             id: uid(),
         });
-        return $lag[0];
+        var $a = $('<span>', {id: 'newLag'});
+        $s1 = $('<span>', {'class': 'bar1'}).appendTo($a);
+        $s2 = $('<span>', {'class': 'bar2'}).appendTo($a);
+        $s3 = $('<span>', {'class': 'bar3'}).appendTo($a);
+        $s4 = $('<span>', {'class': 'bar4'}).appendTo($a);
+        return $a[0];
     };
 
     var checkLag = function (getLag, lagElement) {
@@ -354,29 +359,35 @@ define([
             'class': 'lag'
         });
         var title;
+        var $lag = $(lagElement);
+        $lag.attr('class', '');
         if (lag) {
-            lagErrors = 0;
             firstConnection = false;
             title = Messages.lag + ' : ' + lag + ' ms\n';
-            if (lag && lag.waiting || lag > 1000) {
-                lagLight.addClass('lag-orange');
+            if (lag > 30000) {
+                $lag.addClass('lag0');
+                title = Messages.redLight;
+            } else if (lag > 5000) {
+                $lag.addClass('lag1');
+                title += Messages.orangeLight;
+            } else if (lag > 1000) {
+                $lag.addClass('lag2');
                 title += Messages.orangeLight;
+            } else if (lag > 300) {
+                $lag.addClass('lag3');
+                title += Messages.greenLight;
             } else {
-                lagLight.addClass('lag-green');
+                $lag.addClass('lag4');
                 title += Messages.greenLight;
             }
         }
         else if (!firstConnection) {
             // Display the red light at the 2nd failed attemp to get the lag
-            //if (lagErrors > 1) {
-                lagLight.addClass('lag-red');
-                title = Messages.redLight;
-            //}
+            lagLight.addClass('lag-red');
+            title = Messages.redLight;
         }
         if (title) {
-            lagLight.attr('title', title);
-            $(lagElement).html('');
-            $(lagElement).append(lagLight);
+            $lag.attr('title', title);
         }
     };
 

www/drive/file.css

@@ -122,14 +122,14 @@ span.fa-folder-open {
   margin-left: -5px;
   padding-left: 5px;
 }
-#tree li > span.element-row:not(.selected):hover {
+#tree li > span.element-row:not(.selected):not(.active):hover {
   background-color: #eee;
 }
 #tree span.element {
   cursor: pointer;
 }
-#tree .active {
-  text-decoration: underline;
+#tree .active:not(.selected) {
+  background-color: #c8c8c8;
 }
 #tree .category2 {
   margin-top: 2em;

www/drive/file.less

@@ -156,7 +156,7 @@ span {
             margin-left: -5px;
             padding-left: 5px;
         }
-        & > span.element-row:not(.selected):hover {
+        & > span.element-row:not(.selected):not(.active):hover {
             background-color: @drive-hover;
         }
     }
@@ -164,7 +164,9 @@ span {
         cursor: pointer;
     }
     .active {
-        text-decoration: underline;
+        &:not(.selected) {
+            background-color: darken(@drive-hover, 15%);
+        }
     }
     .category2 {
         margin-top: 2em;

www/drive/main.js

@@ -438,7 +438,7 @@ define([
         var updateContextButton = function () {
             var $li = $content.find('.selected');
             if ($li.length === 0) {
-                $li = findDataHolder($tree.find('.element.active'));
+                $li = findDataHolder($tree.find('.active'));
             }
             var $button = $driveToolbar.find('#contextButton');
             if ($button.length) { // mobile
@@ -1538,7 +1538,7 @@ define([
                     e.stopPropagation();
                     var $li = $content.find('.selected');
                     if ($li.length !== 1) {
-                        $li = findDataHolder($tree.find('.element.active'));
+                        $li = findDataHolder($tree.find('.active'));
                     }
                     // Close if already opened
                     if ($iframe.find('.contextMenu:visible').length) {
@@ -1657,7 +1657,7 @@ define([
             }
             $elementRow.data('path', path);
             addDragAndDropHandlers($elementRow, path, true, droppable);
-            if (active) { $name.addClass('active'); }
+            if (active) { $elementRow.addClass('active'); }
             return $element;
         };
 

www/slide/main.js

@@ -137,8 +137,15 @@ define([
             var $modal = $pad.contents().find('#modal');
             var $content = $pad.contents().find('#content');
             var $print = $pad.contents().find('#print');
+            var slideOptions = {};
 
-            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());
@@ -147,6 +154,7 @@ define([
                 }
             };
             var leavePresentationMode = function () {
+                setStyleState(false);
                 Slide.show(false);
             };
 
@@ -218,7 +226,8 @@ define([
                     content: textValue,
                     metadata: {
                         users: userData,
-                        defaultTitle: defaultName
+                        defaultTitle: defaultName,
+                        slideOptions: slideOptions
                     }
                 };
                 if (!initializing) {
@@ -359,6 +368,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(); }
                 });
             };
 
@@ -366,6 +376,7 @@ define([
                 if (text) {
                     textColor = text;
                     $modal.css('color', text);
+                    $modal.css('border-color', text);
                     $pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
                 }
                 if (back) {
@@ -376,6 +387,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);
@@ -398,6 +417,7 @@ define([
                         updateTitle(json.metadata.title || defaultName);
                         titleUpdated = true;
                     }
+                    updateOptions(json.metadata.slideOptions);
                     updateColors(json.metadata.color, json.metadata.backColor);
                 }
                 if (!titleUpdated) {
@@ -413,12 +433,14 @@ define([
             };
 
             var createPrintDialog = function () {
-                var printOptions = {
-                    title: true,
-                    slide: true,
-                    date: true
+                var slideOptionsTmp = {
+                    title: false,
+                    slide: false,
+                    date: false,
+                    style: ''
                 };
 
+                $.extend(slideOptionsTmp, slideOptions);
                 var $container = $('<div class="alertify">');
                 var $container2 = $('<div class="dialog">').appendTo($container);
                 var $div = $('<div id="printOptions">').appendTo($container2);
@@ -429,21 +451,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>'));
@@ -451,37 +473,29 @@ 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);
+                window.setTimeout(function () { $textarea.focus(); }, 0);
 
-                var fixCSS = function (css) {
-                    var append = '.cp #print ';
-                    return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
-                };
+                var h;
 
                 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();
+                    Cryptpad.stopListening(h);
+                };
+                var todoCancel = function () {
                     $container.remove();
+                    Cryptpad.stopListening(h);
                 };
 
+                h = Cryptpad.listenForKeys(todo, todoCancel);
+
                 var $nav = $('<nav>').appendTo($div);
-                var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
-                var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
-                    $container.remove();
-                });
+                var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancelButton).appendTo($nav).click(todoCancel);
+                var $ok = $('<button>', {'class': 'ok'}).text(Messages.slideOptionsButton).appendTo($nav).click(todo);
+
                 return $container;
             };
 
@@ -545,10 +559,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 () {
@@ -715,8 +743,6 @@ define([
                 updateMetadata(userDoc);
 
                 editor.setValue(newDoc || initialState);
-                Slide.update(newDoc, true);
-                Slide.draw();
 
                 if (Cryptpad.initialName && APP.title === defaultName) {
                     updateTitle(Cryptpad.initialName);

www/slide/slide.css

@@ -44,7 +44,7 @@ body .CodeMirror-focused .cm-matchhighlight {
 @media print {
   @page {
     margin: 0;
-    size: auto;
+    size: landscape;
   }
   body {
     display: block;
@@ -63,86 +63,99 @@ body .CodeMirror-focused .cm-matchhighlight {
     max-height: none;
     overflow: visible;
   }
-  html #print {
+  html .cp #print {
     display: block;
     visibility: visible;
   }
-  html #print * {
+  html .cp #print * {
     visibility: visible;
   }
 }
-#print {
+.cp {
+  /* Slide position (print mode) */
+  /* Slide position (present mode) */
+  /* Slide content */
+}
+.cp #print {
   position: relative;
   display: none;
+  font-size: 10.125vw;
+  /*.slide-frame:first-child {
+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
+    }*/
 }
-#print .slide-frame {
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  flex-flow: column;
-  padding: 5vh 0;
-  height: 100vh;
-  width: 100%;
+.cp #print .slide-frame {
+  display: block !important;
+  padding: 0.5em;
+  margin: auto;
+  border: 1px solid black;
+  height: 50.625vw;
+  width: 90vw;
   page-break-after: always;
   position: relative;
   box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
 }
-#print .slide-frame li {
-  min-width: 50vw;
+.cp #print .slide-frame li {
+  min-width: 45vw;
 }
-#print .slide-frame h1 {
+.cp #print .slide-frame h1 {
   padding-top: 0;
 }
-#print .slide-frame .slideNumber {
-  position: absolute;
-  right: 5vh;
-  bottom: 5vh;
+.cp #print .slide-container {
+  width: 90vw;
+  height: 100vh;
+  margin: 0vh 5vw;
+  display: flex;
 }
-#print .slide-frame .slideDate {
-  position: absolute;
-  left: 5vh;
-  bottom: 5vh;
+.cp #print .slide-container:last-child {
+  height: calc(100vh - 2px);
 }
-#print .slide-frame .slideTitle {
-  position: absolute;
-  top: 5vh;
+.cp div.modal,
+.cp div#modal {
+  /* Navigation buttons */
+  box-sizing: border-box;
+  z-index: 9001;
+  position: fixed;
+  top: 0px;
   left: 0px;
-  right: 0px;
-  text-align: center;
+  width: 100%;
+  height: 100vh;
+  display: none;
+  background-color: #000;
 }
-.cp.slide #modal .button {
+.cp div.modal .button,
+.cp div#modal .button {
   position: absolute;
   cursor: pointer;
   font-size: 30px;
   opacity: 0.6;
   display: none;
+  z-index: 9001;
 }
-.cp.slide #modal .button:hover {
+.cp div.modal .button:hover,
+.cp div#modal .button:hover {
   opacity: 1;
   display: block !important;
 }
-.cp.slide #modal #button_exit {
+.cp div.modal #button_exit,
+.cp div#modal #button_exit {
   left: 20px;
   top: 20px;
-  z-index: 9001;
 }
-.cp.slide #modal #button_left {
+.cp div.modal #button_left,
+.cp div#modal #button_left {
   left: 6vw;
   bottom: 10vh;
 }
-.cp.slide #modal #button_right {
+.cp div.modal #button_right,
+.cp div#modal #button_right {
   right: 6vw;
   bottom: 10vh;
 }
-.cp.slide #modal #content h1,
-.cp.slide #modal #content h2,
-.cp.slide #modal #content h3,
-.cp.slide #modal #content h4,
-.cp.slide #modal #content h5,
-.cp.slide #modal #content h6 {
-  text-align: center;
-}
-.cp.slide #modal.shown {
+.cp div.modal.shown,
+.cp div#modal.shown {
   display: block;
   position: fixed;
   top: 0px;
@@ -153,112 +166,130 @@ body .CodeMirror-focused .cm-matchhighlight {
   height: 100vh;
   width: 100%;
 }
-.cp.slide #modal #content p,
-.cp.slide #modal #content ul,
-.cp.slide #modal #content ol {
-  font-size: 26px;
-}
-.cp.slide #modal #content img {
-  position: relative;
-  min-width: 1%;
-  max-width: 90%;
-  max-height: 90%;
-  margin: auto;
-}
-.cp div.modal,
-.cp div#modal {
-  box-sizing: border-box;
-  z-index: 9001;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100vh;
-  display: none;
-  background-color: #000;
-}
 .cp div.modal #content,
 .cp div#modal #content {
+  transition: margin-left 1s;
+  font-size: 20vh;
+  position: relative;
+  height: 100%;
+  overflow: visible;
+  white-space: nowrap;
+}
+.cp div.modal #content .slide-frame,
+.cp div#modal #content .slide-frame {
+  display: inline-block;
   box-sizing: border-box;
-  border: 1px solid white;
+  border: 1px solid;
+  white-space: normal;
   vertical-align: middle;
-  padding: 2.5vw;
   /* center things as much as possible
 
-            margin-top: 50vh;
-            margin-bottom: 50vh;
-            transform: translateY(-50%);
+                margin-top: 50vh;
+                margin-bottom: 50vh;
+                transform: translateY(-50%);
 
-        */
+            */
+  padding: 0.5em;
   width: 100vw;
   height: 56.25vw;
   max-height: 100vh;
   max-width: 177.78vh;
   margin: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.cp div.modal #content p,
-.cp div#modal #content p,
-.cp div.modal #content li,
-.cp div#modal #content li,
-.cp div.modal #content pre,
-.cp div#modal #content pre,
-.cp div.modal #content code,
-.cp div#modal #content code {
-  font-size: 2.75vw;
-  line-height: 3.025vw;
-}
-.cp div.modal #content h1,
-.cp div#modal #content h1 {
-  font-size: 5vw;
-  line-height: 5.5vw;
-}
-.cp div.modal #content h2,
-.cp div#modal #content h2 {
-  font-size: 4.2vw;
-  line-height: 4.62vw;
-}
-.cp div.modal #content h3,
-.cp div#modal #content h3 {
-  font-size: 3.6vw;
-  line-height: 3.96vw;
-}
-.cp div.modal #content h4,
-.cp div#modal #content h4 {
-  font-size: 3vw;
-  line-height: 3.3vw;
-}
-.cp div.modal #content h5,
-.cp div#modal #content h5 {
-  font-size: 2.2vw;
-  line-height: 2.42vw;
-}
-.cp div.modal #content h6,
-.cp div#modal #content h6 {
-  font-size: 1.6vw;
-  line-height: 1.76vw;
-}
-.cp div.modal #content h1,
-.cp div#modal #content h1,
-.cp div.modal #content h2,
-.cp div#modal #content h2,
-.cp div.modal #content h3,
-.cp div#modal #content h3,
-.cp div.modal #content h4,
-.cp div#modal #content h4,
-.cp div.modal #content h5,
-.cp div#modal #content h5,
-.cp div.modal #content h6,
-.cp div#modal #content h6 {
+}
+.cp div.modal #content .slide-container,
+.cp div#modal #content .slide-container {
+  display: inline-block;
+  height: 100%;
+  width: 100vw;
+  text-align: center;
+}
+.cp div.modal .center,
+.cp div#modal .center {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  margin: auto;
+  border: 1px solid #ffffff;
+  text-align: center;
+}
+.cp div.modal.shown,
+.cp div#modal.shown {
+  display: block;
+}
+.cp div#modal #content .slide-frame,
+.cp #print .slide-frame {
+  text-align: left;
+  position: relative;
+}
+.cp div#modal #content .slide-frame *,
+.cp #print .slide-frame * {
+  font-size: 27.5%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame * *,
+.cp #print .slide-frame * * {
+  font-size: 100%;
+  line-height: 1em;
+}
+.cp div#modal #content .slide-frame ul ul,
+.cp #print .slide-frame ul ul,
+.cp div#modal #content .slide-frame ol ul,
+.cp #print .slide-frame ol ul,
+.cp div#modal #content .slide-frame ul ol,
+.cp #print .slide-frame ul ol,
+.cp div#modal #content .slide-frame ol ol,
+.cp #print .slide-frame ol ol {
+  margin: 0;
+}
+.cp div#modal #content .slide-frame h1,
+.cp #print .slide-frame h1 {
+  font-size: 50%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h2,
+.cp #print .slide-frame h2 {
+  font-size: 42%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h3,
+.cp #print .slide-frame h3 {
+  font-size: 36%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h4,
+.cp #print .slide-frame h4 {
+  font-size: 30%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h5,
+.cp #print .slide-frame h5 {
+  font-size: 22%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h6,
+.cp #print .slide-frame h6 {
+  font-size: 16%;
+  line-height: 110%;
+}
+.cp div#modal #content .slide-frame h1,
+.cp #print .slide-frame h1,
+.cp div#modal #content .slide-frame h2,
+.cp #print .slide-frame h2,
+.cp div#modal #content .slide-frame h3,
+.cp #print .slide-frame h3,
+.cp div#modal #content .slide-frame h4,
+.cp #print .slide-frame h4,
+.cp div#modal #content .slide-frame h5,
+.cp #print .slide-frame h5,
+.cp div#modal #content .slide-frame h6,
+.cp #print .slide-frame h6 {
   color: inherit;
   text-align: center;
+  padding-top: 0;
+  margin-bottom: 0.5em;
 }
-.cp div.modal #content pre > code,
-.cp div#modal #content pre > code {
+.cp div#modal #content .slide-frame pre > code,
+.cp #print .slide-frame pre > code {
   display: block;
   position: relative;
   border: 1px solid #333;
@@ -266,57 +297,47 @@ body .CodeMirror-focused .cm-matchhighlight {
   margin: auto;
   padding-left: .25vw;
 }
-.cp div.modal #content ul,
-.cp div#modal #content ul,
-.cp div.modal #content ol,
-.cp div#modal #content ol {
+.cp div#modal #content .slide-frame ul,
+.cp #print .slide-frame ul,
+.cp div#modal #content .slide-frame ol,
+.cp #print .slide-frame ol {
   min-width: 50%;
   max-width: 100%;
   display: table;
   margin: 0 auto;
+  padding-left: 0.3em;
 }
-.cp div.modal .center,
-.cp div#modal .center {
+.cp div#modal #content .slide-frame img,
+.cp #print .slide-frame img {
   position: relative;
-  width: 80%;
-  height: 80%;
+  min-width: 1%;
+  max-width: 90%;
+  max-height: 90%;
   margin: auto;
-  border: 1px solid #ffffff;
-  text-align: center;
 }
-.cp div.modal.shown,
-.cp div#modal.shown {
-  display: block;
-}
-.cp div.modal table,
-.cp div#modal table {
-  margin: 30px;
-  border-collapse: collapse;
-}
-.cp div.modal table input,
-.cp div#modal table input {
-  height: 100%;
-  width: 90%;
-  border: 3px solid #fff;
+.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 table tfoot tr td,
-.cp div#modal table tfoot tr td {
-  z-index: 4000;
-  cursor: pointer;
+.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 #addtime,
-.cp div#modal #addtime,
-.cp div.modal #adddate,
-.cp div#modal #adddate {
-  color: #46E981;
-  border: 1px solid #46E981;
-  padding: 15px;
-}
-.cp div.modal #adddate,
-.cp div#modal #adddate {
-  border-top-left-radius: 5px;
-}
-.cp div.modal #addtime,
-.cp div#modal #addtime {
-  border-bottom-left-radius: 5px;
+.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%;
 }

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,12 +116,29 @@ define([
         slice(root.children).forEach(removeListeners);
     };
 
+    var updateFontSize = Slide.updateFontSize = function() {
+        // 20vh
+        // 20 * 16 / 9vw
+        if ($(window).width() > 16/9*$(window).height()) {
+            $content.css('font-size', '20vh');
+            // $print.css('font-size', '20vh');
+            return;
+        }
+        $content.css('font-size', (20*9/16)+'vw');
+        // $print.css('font-size', (20*9/16)+'vw');
+    };
+
+    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; }
 
         var c = Slide.content;
-        var m = '<span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span><span class="'+slideClass+'">')+'</span>';
+        var m = '<span class="slide-container"><span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>';
 
         var Dom = domFromHTML('<div id="content">' + m + '</div>');
         removeListeners(Dom.body);
@@ -130,11 +149,33 @@ define([
         } else {
             DD.apply($content[0], patch);
         }
-        $content.find('.' + slideClass).hide();
-        $content.find('.' + slideClass + ':eq( ' + i + ' )').show();
+        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();
+        $content.css('margin-left', -(i*100)+'vw');
+        updateFontSize();
         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,13 +310,62 @@ define([
         });
     };
 
-    Slide.setModal = function ($m, $c, $p, iframe, ph) {
+    $(window).resize(Slide.updateFontSize);
+
+    // Swipe
+    var addSwipeEvents = function () {
+        var touch = {
+            maxTime: 2000,
+            minXDist: 150,
+            maxYDist: 100
+        };
+
+        var resetSwipe = function () {
+            touch.x = 0;
+            touch.y = 0;
+            touch.time = 0;
+        };
+
+        $content.on('touchstart', function (e) {
+            e.preventDefault();
+            resetSwipe();
+            var t = e.originalEvent.changedTouches[0];
+            touch.x = t.pageX;
+            touch.y = t.pageY;
+            touch.time = new Date().getTime();
+        });
+
+        $content.on('touchend', function (e) {
+            e.preventDefault();
+            var t = e.originalEvent.changedTouches[0];
+            var xDist = t.pageX - touch.x;
+            var yDist = t.pageY - touch.y;
+            var time = new Date().getTime() - touch.time;
+            if (time <= touch.maxTime && Math.abs(xDist) >= touch.minXDist && Math.abs(yDist) <= touch.maxYDist) {
+                if (xDist < 0) {
+                    Slide.right();
+                    return;
+                }
+                Slide.left();
+            }
+        });
+
+        $content.on('touchmove', function (e){
+            e.preventDefault();
+        });
+    };
+
+
+    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;
         addEvent();
+        addSwipeEvents();
     };
 
     return Slide;

www/slide/slide.less

@@ -48,7 +48,7 @@ body {
 @media print {
     @page {
         margin: 0;
-        size: auto;
+        size: landscape;
     }
     body {
         .CodeMirror, #cme_toolbox {
@@ -66,7 +66,7 @@ body {
         overflow: visible;
     }
     html {
-        #print {
+        .cp #print {
             display: block;
             visibility: visible;
             * {
@@ -75,161 +75,125 @@ body {
         }
     }
 }
+
+
+.cp {
+
+/* Slide position (print mode) */
+@ratio:0.9;
 #print {
     position: relative;
     display: none;
+    font-size: @ratio*11.25vw;
     .slide-frame {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
-        flex-flow: column;
-        padding: 5vh 0;
-        height: 100vh;
-        width: 100%;
+        display: block !important;
+        padding: 0.5em;
+        margin: auto;
+        border: 1px solid black;
+        height: @ratio*56.25vw;
+        width: @ratio*100vw;
         page-break-after: always;
         position: relative;
         box-sizing: border-box;
         li {
-            min-width: 50vw;
+            min-width: @ratio*50vw;
         }
         h1 {
             padding-top: 0;
         }
-        .slideNumber {
-            position: absolute;
-            right: 5vh;
-            bottom: 5vh;
-        }
-        .slideDate {
-            position: absolute;
-            left: 5vh;
-            bottom: 5vh;
-        }
-        .slideTitle {
-            position: absolute;
-            top: 5vh;
-            left: 0px; right: 0px;
-            text-align: center;
-        }
-    }
-}
-
-.cp {
-
-&.slide {
-    #modal {
-        .button {
-            position: absolute;
-            cursor: pointer;
-            font-size: 30px;
-            opacity: 0.6;
-            display: none;
-        }
-        .button:hover {
-            opacity: 1;
-            display: block !important;
-        }
-        #button_exit {
-            left: 20px;
-            top: 20px;
-            z-index: 9001;
-        }
-        #button_left {
-            left: 6vw;
-            bottom: 10vh;
-        }
-        #button_right {
-            right: 6vw;
-            bottom: 10vh;
-        }
-        #content {
-            h1, h2, h3, h4, h5, h6 {
-                text-align: center;
-            }
+        align-items: center;
+        justify-content: center;
 
-        }
-        &.shown {
-            display: block;
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            z-index: 100;
-            background-color: black;
-            color: white;
-            height: 100vh;
-            width: 100%;
-        }
     }
-    #modal #content {
-        p, ul, ol { font-size: 26px; }
-
-        img {
-            position: relative;
-            min-width: 1%;
-            max-width: 90%;
-            max-height: 90%;
-            margin: auto;
+    .slide-container {
+        width: 90vw;
+        height: 100vh;
+        margin: 0vh 5vw;
+        display: flex;
+        &:last-child {
+            height: ~"calc(100vh - 2px)";
         }
     }
+    /*.slide-frame:first-child {
+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
+    }*/
 }
 
+
+/* Slide position (present mode) */
 div.modal, div#modal {
     display: none;
 
+    /* Navigation buttons */
+    .button {
+        position: absolute;
+        cursor: pointer;
+        font-size: 30px;
+        opacity: 0.6;
+        display: none;
+        z-index: 9001;
+    }
+    .button:hover {
+        opacity: 1;
+        display: block !important;
+    }
+    #button_exit {
+        left: 20px;
+        top: 20px;
+    }
+    #button_left {
+        left: 6vw;
+        bottom: 10vh;
+    }
+    #button_right {
+        right: 6vw;
+        bottom: 10vh;
+    }
+    &.shown {
+        display: block;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        z-index: 100;
+        background-color: black;
+        color: white;
+        height: 100vh;
+        width: 100%;
+    }
     #content {
-        box-sizing: border-box;
-        border: 1px solid white;
-
-        vertical-align: middle;
-        padding: 2.5vw;
-
-        /* center things as much as possible
+        transition: margin-left 1s;
+        font-size: 20vh;
+        position: relative;
+        height: 100%;
+        overflow: visible;
+        white-space: nowrap;
+        .slide-frame {
+            display: inline-block;
+            box-sizing: border-box;
+            border: 1px solid;
+            white-space: normal;
 
-            margin-top: 50vh;
-            margin-bottom: 50vh;
-            transform: translateY(-50%);
+            vertical-align: middle;
 
-        */
+            /* center things as much as possible
 
-        width: 100vw;
-        height: 56.25vw; // height:width ratio = 9/16 = .5625
-        max-height: 100vh;
-        max-width: 177.78vh; // 16/9 = 1.778
-        margin: auto;
-        position: absolute;
-        top:0;bottom:0; // vertical center
-        left:0;right:0; // horizontal center
+                margin-top: 50vh;
+                margin-bottom: 50vh;
+                transform: translateY(-50%);
 
-        p, li, pre, code {
-            .size(2.75);
-        }
-
-        h1 { .size(5); }
-        h2 { .size(4.2); }
-        h3 { .size(3.6); }
-        h4 { .size (3); }
-        h5 { .size(2.2); }
-        h6 { .size(1.6); }
+            */
 
-        h1, h2, h3, h4, h5, h6 {
-            color: inherit;
-            text-align: center;
-        }
-
-        pre > code {
-            display: block;
-            position: relative;
-            border: 1px solid #333;
-            width: 90%;
+            padding: 0.5em;
+            width: 100vw;
+            height: 56.25vw; // height:width ratio = 9/16 = .5625
+            max-height: 100vh;
+            max-width: 177.78vh; // 16/9 = 1.778
             margin: auto;
-            padding-left: .25vw;
         }
-
-        ul, ol {
-            min-width: 50%;
-            max-width: 100%;
-            display: table;
-            margin: 0 auto;
+        .slide-container {
+            display: inline-block;
+            height: 100%; width: 100vw;
+            text-align: center;
         }
     }
 
@@ -260,55 +224,83 @@ div.modal, div#modal {
     &.shown {
         display: block;
     }
+}
 
-    table {
-        margin: 30px;
-
-        border-collapse: collapse;
-        tr {
-            td {
+/* Slide content */
+div#modal #content, #print {
+    .slide-frame {
+        * {
+            .size(2.75);
+            * {
+                font-size: 100%;
+                line-height: 1em;
+            }
+        }
+        ul, ol {
+            ul, ol {
+                margin: 0;
             }
         }
 
-        input {
-            height: 100%;
+        h1 { .size(5); }
+        h2 { .size(4.2); }
+        h3 { .size(3.6); }
+        h4 { .size (3); }
+        h5 { .size(2.2); }
+        h6 { .size(1.6); }
+
+        h1, h2, h3, h4, h5, h6 {
+            color: inherit;
+            text-align: center;
+            padding-top: 0;
+            margin-bottom: 0.5em;
+        }
+
+        pre > code {
+            display: block;
+            position: relative;
+            border: 1px solid #333;
             width: 90%;
-            border: 3px solid @base;
+            margin: auto;
+            padding-left: .25vw;
         }
 
-        thead {
-            tr {
-                th {
-                    span.remove {
-                    }
-                }
-            }
+        ul, ol {
+            min-width: 50%;
+            max-width: 100%;
+            display: table;
+            margin: 0 auto;
+            padding-left: 0.3em;
         }
-        tbody {
-            tr {
-                td {
+        // p, ul, ol { padding-left: 10%; }
 
-                }
-            }
+        img {
+            position: relative;
+            min-width: 1%;
+            max-width: 90%;
+            max-height: 90%;
+            margin: auto;
+        }
        .slideNumber {
+            position: absolute;
+            right: 5vh;
+            bottom: 5vh;
+            .size(1);
         }
-        tfoot {
-            tr {
-                td {
-                    z-index: 4000;
-                    cursor: pointer;
-                }
-            }
+        .slideDate {
+            position: absolute;
+            left: 5vh;
+            bottom: 5vh;
+            .size(1);
         }
+        .slideTitle {
+            position: absolute;
+            bottom: 5vh;
+            left: 0px; right: 0px;
+            text-align: center;
+            .size(1);
+        }
+        text-align: left;
+        position: relative;
     }
-
-    #addtime,
-    #adddate {
-        color: @cp-green;
-        border: 1px solid @cp-green;
-        padding: 15px;
-    }
-
-    #adddate { .top-left; }
-    #addtime { .bottom-left; }
 }
 }