maintain aspect ratio for slides

display index and slide count in title

customize.dist/main.css

@@ -384,7 +384,8 @@ form.realtime #adduser {
 form.realtime #addoption {
   border-bottom-left-radius: 5px;
 }
-div.modal {
+div.modal,
+div#modal {
   box-sizing: border-box;
   z-index: 9001;
   position: fixed;
@@ -395,7 +396,75 @@ div.modal {
   display: none;
   background-color: #302B28;
 }
-div.modal .center {
+div.modal #content,
+div#modal #content {
+  box-sizing: border-box;
+  border: 1px solid white;
+  vertical-align: middle;
+  padding: 2.5vw;
+  width: 100vw;
+  height: 56.25vw;
+  max-height: 100vh;
+  max-width: 177.78vh;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+div.modal #content p,
+div#modal #content p,
+div.modal #content li,
+div#modal #content li,
+div.modal #content pre,
+div#modal #content pre,
+div.modal #content code,
+div#modal #content code {
+  font-size: 2.5vw;
+  line-height: 3vw;
+}
+div.modal #content h1,
+div#modal #content h1 {
+  font-size: 5vw;
+  line-height: 6vw;
+}
+div.modal #content h2,
+div#modal #content h2 {
+  font-size: 4.2vw;
+  line-height: 5.04vw;
+}
+div.modal #content h3,
+div#modal #content h3 {
+  font-size: 3.6vw;
+  line-height: 4.32vw;
+}
+div.modal #content h4,
+div#modal #content h4 {
+  font-size: 3vw;
+  line-height: 3.6vw;
+}
+div.modal #content h5,
+div#modal #content h5 {
+  font-size: 2.2vw;
+  line-height: 2.64vw;
+}
+div.modal #content h6,
+div#modal #content h6 {
+  font-size: 1.6vw;
+  line-height: 1.92vw;
+}
+div.modal #content pre > code,
+div#modal #content pre > code {
+  display: block;
+  position: relative;
+  border: 1px solid #333;
+  width: 90%;
+  margin: auto;
+  padding-left: .25vw;
+}
+div.modal .center,
+div#modal .center {
   position: relative;
   width: 80%;
   height: 80%;
@@ -403,31 +472,39 @@ div.modal .center {
   border: 1px solid #685d56;
   text-align: center;
 }
-div.modal.shown {
+div.modal.shown,
+div#modal.shown {
   display: block;
 }
-div.modal table {
+div.modal table,
+div#modal table {
   margin: 30px;
   border-collapse: collapse;
 }
-div.modal table input {
+div.modal table input,
+div#modal table input {
   height: 100%;
   width: 90%;
   border: 3px solid #302B28;
 }
-div.modal table tfoot tr td {
+div.modal table tfoot tr td,
+div#modal table tfoot tr td {
   z-index: 4000;
   cursor: pointer;
 }
 div.modal #addtime,
-div.modal #adddate {
+div#modal #addtime,
+div.modal #adddate,
+div#modal #adddate {
   color: #46E981;
   border: 1px solid #46E981;
   padding: 15px;
 }
-div.modal #adddate {
+div.modal #adddate,
+div#modal #adddate {
   border-top-left-radius: 5px;
 }
-div.modal #addtime {
+div.modal #addtime,
+div#modal #addtime {
   border-bottom-left-radius: 5px;
 }

customize.dist/src/cryptpad.less

@@ -471,7 +471,63 @@ form.realtime {
     #addoption { .bottom-left; }
 }
 
-div.modal {
+.viewportRatio (@x, @y, @p: 100) {
+    width: @p * 100vw;
+    height: @y * (@p * 100vw) / @x;
+    max-width: @x / @y * (@p * 100vh);
+    max-height: (@p * 100vh);
+}
+
+div.modal, div#modal {
+
+    #content {
+        box-sizing: border-box;
+        .size (@n) {
+            font-size: @n * 1vw;
+            line-height: @n * 1.2vw;
+        }
+
+        border: 1px solid white;
+
+        vertical-align: middle;
+        padding: 2.5vw;
+
+
+        width: 100vw;
+        height: 56.25vw; // height:width ratio = 9/16 = .5625
+        //background: pink;
+        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.5);
+        }
+
+        h1 { .size(5); }
+        h2 { .size(4.2); }
+        h3 { .size(3.6); }
+        h4 { .size (3); }
+        h5 { .size(2.2); }
+        h6 { .size(1.6); }
+
+
+        pre > code {
+
+            display: block;
+            position: relative;
+            border: 1px solid #333;
+            width: 90%;
+            margin: auto;
+            padding-left: .25vw;
+
+        }
+
+    }
+
     box-sizing: border-box;
     z-index: 9001;
     position: fixed;

www/slide/main.js

@@ -102,7 +102,7 @@ define([
                 console.log("Couldn't get pad title");
                 return;
             }
-            document.title = title || window.location.hash.slice(1, 9);
+            document.title = APP.title = title || window.location.hash.slice(1, 9);
             Cryptpad.rememberPad(title, function (err, data) {
                 if (err) {
                     console.log("Couldn't remember pad");
@@ -140,7 +140,7 @@ define([
                         console.log(err);
                         return;
                     }
-                    document.title = window.location.hash.slice(1,9);
+                    document.title = APP.title = window.location.hash.slice(1,9);
                 });
             });
         });
@@ -167,7 +167,7 @@ define([
                             console.error(err);
                             return;
                         }
-                        document.title = title;
+                        document.title = APP.title = title;
                     });
                 });
             });
@@ -267,6 +267,15 @@ define([
             });
         }
 
+        Slide.onChange(function (o, n, l) {
+            if (n !== null) {
+                document.title = APP.title + ' (' + (++n) + '/' + l +  ')';
+                return;
+            }
+            console.log("Exiting presentation mode");
+            document.title = APP.title;
+        });
+
         setEditable(true);
         initializing = false;
     };

www/slide/slide.js

@@ -12,6 +12,7 @@ define([
         index: 0,
         lastIndex: 0,
         content: [],
+        changeHandlers: [],
     };
     var $modal;
     var $content;
@@ -20,6 +21,25 @@ define([
         $content = Slide.$content = $c;
     };
 
+    Slide.onChange = function (f) {
+        if (typeof(f) === 'function') {
+            Slide.changeHandlers.push(f);
+        }
+    };
+
+    var change = function (oldIndex, newIndex) {
+        if (oldIndex === newIndex) {
+            return false;
+        }
+        if (Slide.changeHandlers.length) {
+            Slide.changeHandlers.some(function (f, i) {
+                // HERE
+                f(oldIndex, newIndex, Slide.content.length);
+            });
+            return true;
+        }
+    };
+
     var forbiddenTags = Slide.forbiddenTags = [
         'SCRIPT',
         'IFRAME',
@@ -87,10 +107,10 @@ define([
 
         if (typeof(patch) === 'string') {
             $content.html(Marked(c));
-            return;
         } else {
             DD.apply($content[0], patch);
         }
+        change(Slide.lastIndex, Slide.index);
     };
 
     var show = Slide.show = function (bool, content) {
@@ -99,8 +119,10 @@ define([
             Slide.update(content);
             Slide.draw(Slide.index);
             $modal.addClass('shown');
+            change(null, Slide.index);
             return;
         }
+        change(Slide.index, null);
         $modal.removeClass('shown');
     };
 
@@ -115,12 +137,16 @@ define([
 
     var left = Slide.left = function () {
         console.log('left');
+        Slide.lastIndex = Slide.index;
+
         var i = Slide.index = Math.max(0, Slide.index - 1);
         Slide.draw(i);
     };
 
     var right = Slide.right = function () {
         console.log('right');
+        Slide.lastIndex = Slide.index;
+
         var i = Slide.index = Math.min(Slide.content.length -1, Slide.index + 1);
         Slide.draw(i);
     };