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

8 years ago · cc43bb8362
parent ef0e1d7aa0 29174b2922
commit cc43bb8362
15 changed files with 1175 additions and 411 deletions
--- a/customize.dist/src/less/mixins.less
+++ b/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) {
--- a/customize.dist/src/less/toolbar.less
+++ b/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 {
--- a/customize.dist/toolbar.css
+++ b/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;
 }
--- a/customize.dist/translations/messages.fr.js
+++ b/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";
--- a/customize.dist/translations/messages.js
+++ b/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";
--- a/478
+++ b/478
@ -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.
+[1mdiff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js[m
+[1mindex 96e36a4..4ad51bd 100644[m
+[1m--- a/customize.dist/translations/messages.fr.js[m
+[1m+++ b/customize.dist/translations/messages.fr.js[m
+[36m@@ -79,12 +79,14 @@[m [mdefine(function () {[m
+ [m
+     out.printButton = "Imprimer";[m
+     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";[m
+[31m-    out.printOptions = "Options d'impression";[m
+[32m+[m[32m    out.printOptions = "Options de mise en page";[m
+     out.printSlideNumber = "Afficher le numéro des slides";[m
+     out.printDate = "Afficher la date";[m
+     out.printTitle = "Afficher le titre du pad";[m
+     out.printCSS = "Personnaliser l'apparence (CSS):";[m
+ [m
+[32m+[m[32m    out.slideOptionsTitle = "Personnaliser la présentation";[m
+[32m+[m
+     out.editShare = "Lien d'édition";[m
+     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";[m
+     out.editOpen = "Éditer dans un nouvel onglet";[m
+[1mdiff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js[m
+[1mindex b463b48..15540fd 100644[m
+[1m--- a/customize.dist/translations/messages.js[m
+[1m+++ b/customize.dist/translations/messages.js[m
+[36m@@ -81,12 +81,14 @@[m [mdefine(function () {[m
+ [m
+     out.printButton = "Print";[m
+     out.printButtonTitle = "Print your slides or export them as a PDF file";[m
+[31m-    out.printOptions = "Print options";[m
+[32m+[m[32m    out.printOptions = "Layout options";[m
+     out.printSlideNumber = "Display the slide number";[m
+     out.printDate = "Display the date";[m
+     out.printTitle = "Display the pad title";[m
+     out.printCSS = "Custom style rules (CSS):";[m
+ [m
+[32m+[m[32m    out.slideOptionsTitle = "Customize your slides";[m
+[32m+[m
+     out.editShare = "Editing link";[m
+     out.editShareTitle = "Copy the editing link to clipboard";[m
+     out.editOpen = "Open editing link in a new tab";[m
+[1mdiff --git a/www/slide/main.js b/www/slide/main.js[m
+[1mindex 50f216e..0bc6f5f 100644[m
+[1m--- a/www/slide/main.js[m
+[1m+++ b/www/slide/main.js[m
+[36m@@ -136,7 +136,8 @@[m [mdefine([[m
+ [m
+             var $modal = $pad.contents().find('#modal');[m
+             var $content = $pad.contents().find('#content');[m
+[31m-            var $print = $pad.contents().find('#print');[m
+[32m+[m[32m            var $print = $pad.contents().find('#print');
            var slideOptions = {};[m
+[32m+[m
+             $( window ).resize(function() {[m
+                 // 20vh[m
+                 // 20 * 16 / 9vw[m
+[36m@@ -149,7 +150,13 @@[m [mdefine([[m
+                 // $print.css('font-size', (20*9/16)+'vw');[m
+             });[m
+ [m
+[31m-            Slide.setModal($modal, $content, $pad, ifrw, initialState);[m
+[32m+[m[32m            Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);[m
+[32m+[m
+[32m+[m[32m            var setStyleState = function (state) {[m
+[32m+[m[32m                $pad.contents().find('#print, #content').find('style').each(function (i, el) {[m
+[32m+[m[32m                    el.disabled = !state;[m
+[32m+[m[32m                });[m
+[32m+[m[32m            };[m
+ [m
+             var enterPresentationMode = function (shouldLog) {[m
+                 Slide.show(true, editor.getValue());[m
+[36m@@ -158,6 +165,7 @@[m [mdefine([[m
+                 }[m
+             };[m
+             var leavePresentationMode = function () {[m
+[32m+[m[32m                setStyleState(false);[m
+                 Slide.show(false);[m
+             };[m
+ [m
+[36m@@ -229,7 +237,8 @@[m [mdefine([[m
+                     content: textValue,[m
+                     metadata: {[m
+                         users: userData,[m
+[31m-                        defaultTitle: defaultName[m
+[32m+[m[32m                        defaultTitle: defaultName,[m
+[32m+[m[32m                        slideOptions: slideOptions[m
+                     }[m
+                 };[m
+                 if (!initializing) {[m
+[36m@@ -370,6 +379,7 @@[m [mdefine([[m
+                     setTabTitle();[m
+                     $bar.find('.' + Toolbar.constants.title).find('span.title').text(data);[m
+                     $bar.find('.' + Toolbar.constants.title).find('input').val(data);[m
+[32m+[m[32m                    if (slideOptions.title) { Slide.updateOptions(); }[m
+                 });[m
+             };[m
+ [m
+[36m@@ -387,6 +397,15 @@[m [mdefine([[m
+                 }[m
+             };[m
+ [m
+[32m+[m[32m            var updateOptions = function (newOpt) {[m
+[32m+[m[32m                if (stringify(newOpt) !== stringify(slideOptions)) {[m
+[32m+[m[32m                    $.extend(slideOptions, newOpt);[m
+[32m+[m[32m                    // TODO: manage realtime + cursor in the "options" modal ??[m
+[32m+[m[32m                    console.log('updating options');[m
+[32m+[m[32m                    Slide.updateOptions();[m
+[32m+[m[32m                }[m
+[32m+[m[32m            };[m
+[32m+[m
+             var updateDefaultTitle = function (defaultTitle) {[m
+                 defaultName = defaultTitle;[m
+                 $bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);[m
+[36m@@ -409,6 +428,7 @@[m [mdefine([[m
+                         updateTitle(json.metadata.title || defaultName);[m
+                         titleUpdated = true;[m
+                     }[m
+[32m+[m[32m                    updateOptions(json.metadata.slideOptions);[m
+                     updateColors(json.metadata.color, json.metadata.backColor);[m
+                 }[m
+                 if (!titleUpdated) {[m
+[36m@@ -424,12 +444,14 @@[m [mdefine([[m
+             };[m
+ [m
+             var createPrintDialog = function () {[m
+[31m-                var printOptions = {[m
+[32m+[m[32m                var slideOptionsTmp = {[m
+                     title: true,[m
+                     slide: true,[m
+[31m-                    date: true[m
+[32m+[m[32m                    date: true,[m
+[32m+[m[32m                    style: ''[m
+                 };[m
+ [m
+[32m+[m[32m                $.extend(slideOptionsTmp, slideOptions);[m[41m

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

                var $slideOptions = $('<button>', {[m
+[32m+[m[32m                    title: Messages.slideOptionsTitle,[m
+[32m+[m[32m                    'class': 'rightside-button fa fa-cog',[m
+[32m+[m[32m                    style: 'font-size: 17px'[m
+[32m+[m[32m                }).click(function () {[m
+                     $('body').append(createPrintDialog());[m
+                 });[m
+[31m-                $rightside.append($printButton);[m
+[32m+[m[32m                $rightside.append($slideOptions);[m
+ [m
+                 var $present = Cryptpad.createButton('present', true)[m
+               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 () {[m
+[36m@@ -726,8 +746,6 @@[m [mdefine([[m
+                 updateMetadata(userDoc);[m
+ [m
+                 editor.setValue(newDoc || initialState);[m
+[31m-                Slide.update(newDoc, true);[m
+[31m-                Slide.draw();[m
+ [m
+                 if (Cryptpad.initialName && APP.title === defaultName) {[m
+                     updateTitle(Cryptpad.initialName);[m
+[1mdiff --git a/www/slide/slide.css b/www/slide/slide.css[m
+[1mindex e96b77a..0404398 100644[m
+[1m--- a/www/slide/slide.css[m
+[1m+++ b/www/slide/slide.css[m
+[36m@@ -80,11 +80,16 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
+   position: relative;[m
+   display: none;[m
+   font-size: 11.25vw;[m
+[32m+[m[32m  /*.slide-frame:first-child {[m
+[32m+[m[32m        h1 { color: yellow; }[m
+[32m+[m[32m        margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
+[32m+[m[32m    }*/[m
+ }[m
+ .cp #print .slide-frame {[m
+   display: block !important;[m
+   padding: 2.5%;[m
+[31m-  margin-top: calc((100vh - 56.25vw)/2);[m
+[32m+[m[32m  margin-top: 7.228vw;[m
+[32m+[m[32m  margin-bottom: 7.228vw;[m
+   border-top: 1px solid black;[m
+   border-bottom: 1px solid black;[m
+   height: 56.25vw;[m
+[36m@@ -98,26 +103,7 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
+ }[m
+ .cp #print .slide-frame h1 {[m
+   padding-top: 0;[m
+[31m-}[m
+[31m-.cp #print .slide-frame .slideNumber {[m
+[31m-  position: absolute;[m
+[31m-  right: 5vh;[m
+[31m-  bottom: 5vh;[m
+[31m-  font-size: 15px;[m
+[31m-}[m
+[31m-.cp #print .slide-frame .slideDate {[m
+[31m-  position: absolute;[m
+[31m-  left: 5vh;[m
+[31m-  bottom: 5vh;[m
+[31m-  font-size: 15px;[m
+[31m-}[m
+[31m-.cp #print .slide-frame .slideTitle {[m
+[31m-  position: absolute;[m
+[31m-  top: 5vh;[m
+[31m-  left: 0px;[m
+[31m-  right: 0px;[m
+[31m-  text-align: center;[m
+[31m-  font-size: 15px;[m
+[32m+[m[32m  color: green;[m
+ }[m
+ .cp div.modal,[m
+ .cp div#modal {[m
+[36m@@ -341,3 +327,29 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
+   max-height: 90%;[m
+   margin: auto;[m
+ }[m
+[32m+[m[32m.cp div#modal #content .slide-frame .slideNumber,[m
+[32m+[m[32m.cp #print .slide-frame .slideNumber {[m
+[32m+[m[32m  position: absolute;[m
+[32m+[m[32m  right: 5vh;[m
+[32m+[m[32m  bottom: 5vh;[m
+[32m+[m[32m  font-size: 10%;[m
+[32m+[m[32m  line-height: 110%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.cp div#modal #content .slide-frame .slideDate,[m
+[32m+[m[32m.cp #print .slide-frame .slideDate {[m
+[32m+[m[32m  position: absolute;[m
+[32m+[m[32m  left: 5vh;[m
+[32m+[m[32m  bottom: 5vh;[m
+[32m+[m[32m  font-size: 10%;[m
+[32m+[m[32m  line-height: 110%;[m
+[32m+[m[32m}[m
+[32m+[m[32m.cp div#modal #content .slide-frame .slideTitle,[m
+[32m+[m[32m.cp #print .slide-frame .slideTitle {[m
+[32m+[m[32m  position: absolute;[m
+[32m+[m[32m  bottom: 5vh;[m
+[32m+[m[32m  left: 0px;[m
+[32m+[m[32m  right: 0px;[m
+[32m+[m[32m  text-align: center;[m
+[32m+[m[32m  font-size: 10%;[m
+[32m+[m[32m  line-height: 110%;[m
+[32m+[m[32m}[m
+[1mdiff --git a/www/slide/slide.js b/www/slide/slide.js[m
+[1mindex 7cbcad4..3990124 100644[m
+[1m--- a/www/slide/slide.js[m
+[1m+++ b/www/slide/slide.js[m
+[36m@@ -14,11 +14,13 @@[m [mdefine([[m
+         content: [],[m
+         changeHandlers: [],[m
+     };[m
+[32m+[m[32m    var APP;[m
+     var ifrw;[m
+     var $modal;[m
+     var $content;[m
+     var $pad;[m
+     var placeholder;[m
+[32m+[m[32m    var options;[m
+     var separator = '<hr data-pewpew="pezpez">';[m
+     var separatorReg = /<hr data\-pewpew="pezpez">/g;[m
+     var slideClass = 'slide-frame';[m
+[36m@@ -114,6 +116,11 @@[m [mdefine([[m
+         slice(root.children).forEach(removeListeners);[m
+     };[m
+ [m
+[32m+[m[32m    var fixCSS = function (css) {[m
+[32m+[m[32m        var append = '.cp #print .slide-frame ';[m
+[32m+[m[32m        var append2 = '.cp div#modal #content .slide-frame ';[m
+[32m+[m[32m        return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');[m
+[32m+[m[32m    };[m
+     var draw = Slide.draw =  function (i) {[m
+         i = i || 0;[m
+         if (typeof(Slide.content) !== 'string') { return; }[m
+[36m@@ -130,11 +137,31 @@[m [mdefine([[m
+         } else {[m
+             DD.apply($content[0], patch);[m
+         }[m
+[32m+[m[32m        var length = getNumberOfSlides();[m
+[32m+[m[32m        $modal.find('style.slideStyle').remove();[m
+[32m+[m[32m        if (options.style && Slide.shown) {[m
+[32m+[m[32m            $modal.prepend($('<style>', {'class': 'slideStyle'}).text(fixCSS(options.style)));[m
+[32m+[m[32m        }[m
+[32m+[m[32m        $content.find('.slide-frame').each(function (i, el) {[m
+[32m+[m[32m            if (options.slide) {[m
+[32m+[m[32m                $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));[m
+[32m+[m[32m            }[m
+[32m+[m[32m            if (options.date) {[m
+[32m+[m[32m                $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));[m
+[32m+[m[32m            }[m
+[32m+[m[32m            if (options.title) {[m
+[32m+[m[32m                $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));[m
+[32m+[m[32m            }[m
+[32m+[m[32m        });[m
+         $content.find('.' + slideClass).hide();[m
+         $content.find('.' + slideClass + ':eq( ' + i + ' )').show();[m
+         change(Slide.lastIndex, Slide.index);[m
+     };[m
+ [m
+[32m+[m[32m    var updateOptions = Slide.updateOptions = function () {[m
+[32m+[m[32m        draw(Slide.index);[m
+[32m+[m[32m    };[m
+[32m+[m
+     var isPresentURL = Slide.isPresentURL = function () {[m
+         var hash = window.location.hash;[m
+         // Present mode has /present at the end of the hash[m
+[36m@@ -269,12 +296,15 @@[m [mdefine([[m
+         });[m
+     };[m
+ [m
+[31m-    Slide.setModal = function ($m, $c, $p, iframe, ph) {[m
+[32m+[m[32m    Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {[m
+         $modal = Slide.$modal = $m;[m
+         $content = Slide.$content = $c;[m
+         $pad = Slide.$pad = $p;[m
+         ifrw = Slide.ifrw = iframe;[m
+         placeholder = Slide.placeholder = ph;[m
+[32m+[m[32m        options = Slide.options = opt;[m
+[32m+[m[32m        APP = appObj;[m
+[32m+[m[32m        console.log(APP);[m
+         addEvent();[m
+     };[m
+ [m
+[1mdiff --git a/www/slide/slide.less b/www/slide/slide.less[m
+[1mindex 31dd1c1..3bbd52e 100644[m
+[1m--- a/www/slide/slide.less[m
+[1m+++ b/www/slide/slide.less[m
+[36m@@ -90,7 +90,10 @@[m [mbody {[m
+         //align-items: center;[m
+         // flex-flow: column;[m
+         padding: 2.5%;[m
+[31m-        margin-top: ~"calc((100vh - 56.25vw)/2)";[m
+[32m+[m[32m        // margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
+[32m+[m[32m        margin-top: 7.228vw;[m
+[32m+[m[32m        margin-bottom: 7.228vw;[m
+[32m+[m[32m        // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";[m
+         border-top: 1px solid black;[m
+         border-bottom: 1px solid black;[m
+         height: 56.25vw;[m
+[36m@@ -103,27 +106,14 @@[m [mbody {[m
+         }[m
+         h1 {[m
+             padding-top: 0;[m
+[32m+[m[32m            color: green;[m
+         }[m
+[31m-        .slideNumber {[m
+[31m-            position: absolute;[m
+[31m-            right: 5vh;[m
+[31m-            bottom: 5vh;[m
+[31m-            font-size: 15px;[m
+[31m-        }[m
+[31m-        .slideDate {[m
+[31m-            position: absolute;[m
+[31m-            left: 5vh;[m
+[31m-            bottom: 5vh;[m
+[31m-            font-size: 15px;[m
+[31m-        }[m
+[31m-        .slideTitle {[m
+[31m-            position: absolute;[m
+[31m-            top: 5vh;[m
+[31m-            left: 0px; right: 0px;[m
+[31m-            text-align: center;[m
+[31m-            font-size: 15px;[m
+[31m-        }[m
+[32m+[m
+     }[m
+[32m+[m[32m    /*.slide-frame:first-child {[m
+[32m+[m[32m        h1 { color: yellow; }[m
+[32m+[m[32m        margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
+[32m+[m[32m    }*/[m
+ }[m
+ [m
+ [m
+[36m@@ -276,6 +266,24 @@[m [mdiv#modal #content, #print {[m
+             max-width: 90%;[m
+             max-height: 90%;[m
+             margin: auto;[m
+[32m+[m[32m        }
        .slideNumber {[m
+[32m+[m[32m            position: absolute;[m
+[32m+[m[32m            right: 5vh;[m
+[32m+[m[32m            bottom: 5vh;[m
+[32m+[m[32m            .size(1);[m
+[32m+[m[32m        }[m
+[32m+[m[32m        .slideDate {[m
+[32m+[m[32m            position: absolute;[m
+[32m+[m[32m            left: 5vh;[m
+[32m+[m[32m            bottom: 5vh;[m
+[32m+[m[32m            .size(1);[m
+[32m+[m[32m        }[m
+[32m+[m[32m        .slideTitle {[m
+[32m+[m[32m            position: absolute;[m
+[32m+[m[32m            bottom: 5vh;[m
+[32m+[m[32m            left: 0px; right: 0px;[m
+[32m+[m[32m            text-align: center;[m
+[32m+[m[32m            .size(1);[m
+         }[m
+     }[m
+ }[m
+warning: LF will be replaced by CRLF in www/slide/slide.js.
+The file will have its original line endings in your working directory.
--- a/www/common/cryptpad-common.js
+++ b/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);
    };

--- a/www/common/toolbar.js
+++ b/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;
-            //}
        }
        if (title) {
-            lagLight.attr('title', title);
-            $(lagElement).html('');
-            $(lagElement).append(lagLight);
+            $lag.attr('title', title);
        }
    };

--- a/www/drive/file.css
+++ b/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;
--- a/www/drive/file.less
+++ b/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;
--- a/www/drive/main.js
+++ b/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;
        };

--- a/www/slide/main.js
+++ b/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);
--- a/www/slide/slide.css
+++ b/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,36 +166,22 @@ 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;
@ -190,75 +189,107 @@ body .CodeMirror-focused .cm-matchhighlight {
                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%;
 }
--- 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,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;
--- a/www/slide/slide.less
+++ b/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,55 +75,63 @@ 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;
+        align-items: center;
+        justify-content: center;
+
    }
-        .slideTitle {
-            position: absolute;
-            top: 5vh;
-            left: 0px; right: 0px;
-            text-align: center;
+    .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))";
+    }*/
 }

-.cp {

-&.slide {
-    #modal {
+/* 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;
@ -132,7 +140,6 @@ body {
    #button_exit {
        left: 20px;
        top: 20px;
-            z-index: 9001;
    }
    #button_left {
        left: 6vw;
@ -142,12 +149,6 @@ body {
        right: 6vw;
        bottom: 10vh;
    }
-        #content {
-            h1, h2, h3, h4, h5, h6 {
-                text-align: center;
-            }
-
-        }
    &.shown {
        display: block;
        position: fixed;
@ -159,29 +160,20 @@ body {
        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;
-        }
-    }
-}
-
-div.modal, div#modal {
-    display: none;
-
    #content {
+        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;
+            border: 1px solid;
+            white-space: normal;

            vertical-align: middle;
-        padding: 2.5vw;

            /* center things as much as possible

@ -191,46 +183,18 @@ div.modal, div#modal {

            */

+            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;
-        position: absolute;
-        top:0;bottom:0; // vertical center
-        left:0;right:0; // horizontal center
-
-        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;
+        .slide-container {
+            display: inline-block;
+            height: 100%; width: 100vw;
            text-align: center;
        }
-
-        pre > code {
-            display: block;
-            position: relative;
-            border: 1px solid #333;
-            width: 90%;
-            margin: auto;
-            padding-left: .25vw;
-        }
-
-        ul, ol {
-            min-width: 50%;
-            max-width: 100%;
-            display: table;
-            margin: 0 auto;
-        }
    }

    box-sizing: border-box;
@ -260,55 +224,83 @@ div.modal, div#modal {
    &.shown {
        display: block;
    }
+}

-    table {
-        margin: 30px;
-
-        border-collapse: collapse;
-        tr {
-            td {
-            }
-        }
-
-        input {
-            height: 100%;
-            width: 90%;
-            border: 3px solid @base;
-        }
-
-        thead {
-            tr {
-                th {
-                    span.remove {
+/* Slide content */
+div#modal #content, #print {
+    .slide-frame {
+        * {
+            .size(2.75);
+            * {
+                font-size: 100%;
+                line-height: 1em;
            }
        }
+        ul, ol {
+            ul, ol {
+                margin: 0;
            }
        }
-        tbody {
-            tr {
-                td {

+        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%;
+            margin: auto;
+            padding-left: .25vw;
        }
+
+        ul, ol {
+            min-width: 50%;
+            max-width: 100%;
+            display: table;
+            margin: 0 auto;
+            padding-left: 0.3em;
        }
-        tfoot {
-            tr {
-                td {
-                    z-index: 4000;
-                    cursor: pointer;
-                }
+        // 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);
        }
+        .slideDate {
+            position: absolute;
+            left: 5vh;
+            bottom: 5vh;
+            .size(1);
        }
+        .slideTitle {
+            position: absolute;
+            bottom: 5vh;
+            left: 0px; right: 0px;
+            text-align: center;
+            .size(1);
        }
-
-    #addtime,
-    #adddate {
-        color: @cp-green;
-        border: 1px solid @cp-green;
-        padding: 15px;
+        text-align: left;
+        position: relative;
    }
-
-    #adddate { .top-left; }
-    #addtime { .bottom-left; }
 }
 }