Add a preview mode to the slide app

www/slide/inner.html

@@ -40,18 +40,19 @@
     <div id="bar"></div>
 <!--    <textarea></textarea>-->
     <div id="cme_toolbox" class="toolbar-container"></div>
-    <textarea id="editor1" name="editor1"></textarea>
 
-
-    <span class="cp slide">
-    <div id="modal">
-        <div id="button_exit" class="button"><span class="fa fa-times"></span></div>
-        <div id="button_left" class="button"><span class="fa fa-chevron-left"></span></div>
-        <div id="button_right" class="button"><span class="fa fa-chevron-right"></span></div>
-        <div id="content"></div>
+    <div id="editorContainer">
+        <textarea id="editor1" name="editor1"></textarea>
+        <div class="cp slide" tabindex="2">
+            <div id="modal">
+                <div id="button_exit" class="button"><span class="fa fa-times"></span></div>
+                <div id="button_left" class="button"><span class="fa fa-chevron-left"></span></div>
+                <div id="button_right" class="button"><span class="fa fa-chevron-right"></span></div>
+                <div id="content"></div>
+            </div>
+            <div id="print"></div>
+        </div>
     </div>
-    <div id="print"></div>
-    </span>
     <div id="nope"></div>
     <div id="colorPicker_check"></div>
 </body>

www/slide/main.js

@@ -425,6 +425,25 @@ define([
                     $('body').append(createFileDialog());
                 }).appendTo($rightside);
 
+                var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
+                $previewButton.removeClass('fa-question').addClass('fa-eye');
+                $previewButton.attr('title', Messages.previewButtonTitle);
+                $previewButton.click(function () {
+                    var $c = $iframe.find('#editorContainer');
+                    if ($c.hasClass('preview')) {
+                        Cryptpad.setPadAttribute('previewMode', false, function (e) {
+                            if (e) { return console.log(e); }
+                        });
+                        return void $c.removeClass('preview');
+                    }
+                    Cryptpad.setPadAttribute('previewMode', true, function (e) {
+                        if (e) { return console.log(e); }
+                    });
+                    $c.addClass('preview');
+                    Slide.updateFontSize();
+                });
+                $rightside.append($previewButton);
+
                 var $printButton = $('<button>', {
                     title: Messages.printButtonTitle,
                     'class': 'rightside-button fa fa-print',
@@ -558,9 +577,15 @@ define([
 
                 if (Cryptpad.initialName && Title.isDefaultTitle()) {
                     Title.updateTitle(Cryptpad.initialName);
-                    onLocal();
                 }
 
+                Cryptpad.getPadAttribute('previewMode', function (e, data) {
+                    if (e) { return void console.error(e); }
+                    if (data === true && APP.$previewButton) {
+                        APP.$previewButton.click();
+                    }
+                });
+
                 Slide.onChange(function (o, n, l) {
                     if (n !== null) {
                         document.title = Title.title + ' (' + (++n) + '/' + l +  ')';

www/slide/slide.css

@@ -71,6 +71,41 @@ body .CodeMirror-focused .cm-matchhighlight {
     visibility: visible;
   }
 }
+#editorContainer {
+  flex: 1;
+  display: flex;
+  flex-flow: row;
+  height: 100%;
+  overflow: hidden;
+}
+#editorContainer .CodeMirror {
+  resize: none;
+  width: 100vw;
+}
+#editorContainer.preview .CodeMirror {
+  width: 50vw;
+}
+.preview .cp {
+  flex: 1;
+  overflow: hidden;
+}
+.preview .cp div#modal {
+  position: relative;
+  top: auto;
+  left: auto;
+  width: auto;
+  display: block;
+  height: 100%;
+}
+.preview .cp div#modal #content .slide-container {
+  width: 100%;
+}
+.preview .cp div#modal #content .slide-frame {
+  width: 50vw;
+  height: 28.125vw;
+  max-height: 100vh;
+  max-width: 177.78vh;
+}
 .cp {
   /* Slide position (print mode) */
   /* Slide position (present mode) */
@@ -114,6 +149,8 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal,
 .cp div#modal {
+  background-color: black;
+  color: white;
   /* Navigation buttons */
   box-sizing: border-box;
   z-index: 9001;
@@ -161,8 +198,6 @@ body .CodeMirror-focused .cm-matchhighlight {
   top: 0px;
   left: 0px;
   z-index: 100;
-  background-color: black;
-  color: white;
   height: 100vh;
   width: 100%;
 }
@@ -174,10 +209,6 @@ body .CodeMirror-focused .cm-matchhighlight {
   overflow: visible;
   white-space: nowrap;
 }
-.cp div.modal #content.transition,
-.cp div#modal #content.transition {
-  transition: margin-left 1s;
-}
 .cp div.modal #content .slide-frame,
 .cp div#modal #content .slide-frame {
   display: inline-block;
@@ -207,6 +238,10 @@ body .CodeMirror-focused .cm-matchhighlight {
   text-align: center;
   vertical-align: top;
 }
+.cp div.modal #content.transition .slide-container,
+.cp div#modal #content.transition .slide-container {
+  transition: margin-left 1s;
+}
 .cp div.modal .center,
 .cp div#modal .center {
   position: relative;

www/slide/slide.js

@@ -41,12 +41,20 @@ define([
     var updateFontSize = Slide.updateFontSize = function() {
         // 20vh
         // 20 * 16 / 9vw
-        if ($(window).width() > 16/9*$(window).height()) {
-            $content.css('font-size', '20vh');
+        var wbase = 20;
+        var vh = 20;
+        var $elem = $(window);
+        if (!Slide.shown) {
+            wbase = 10;
+            vh *= $content.height()/$(window).height();
+            $elem = $content;
+        }
+        if ($elem.width() > 16/9*$elem.height()) {
+            $content.css('font-size', vh+'vh');
             // $print.css('font-size', '20vh');
             return;
         }
-        $content.css('font-size', (20*9/16)+'vw');
+        $content.css('font-size', (wbase*9/16)+'vw');
         // $print.css('font-size', (20*9/16)+'vw');
     };
 
@@ -86,7 +94,8 @@ define([
         }
         //$content.find('.' + slideClass).hide();
         //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
-        $content.css('margin-left', -(i*100)+'vw');
+        //$content.css('margin-left', -(i*100)+'vw');
+        $content.find('.slide-container').first().css('margin-left', -(i*100)+'%');
         updateFontSize();
         change(Slide.lastIndex, Slide.index);
     };
@@ -134,7 +143,9 @@ define([
     };
 
     Slide.update = function (content, init) {
-        if (!Slide.shown && !init) { return; }
+        console.log(content, init);
+        updateFontSize();
+        //if (!init) { return; }
         if (!content) { content = ''; }
         var old = Slide.content;
         Slide.content = content.replace(/\n\s*\-\-\-\s*\n/g, '\n\n'+separator+'\n\n');
@@ -198,13 +209,15 @@ define([
             $modal.trigger(ev);
         });
         $modal.find('#button_right').click(function () {
+            console.log('right');
             var ev = $.Event("keyup");
             ev.which = 39;
             $modal.trigger(ev);
         });
 
+        $pad.contents().find('.CodeMirror').keyup(function (e) { e.stopPropagation(); });
         $(ifrw).on('keyup', function (e) {
-            if (!Slide.shown) { return; }
+            //if (!Slide.shown) { return; }
             if (e.ctrlKey) { return; }
             switch(e.which) {
                 case 33: // pageup

www/slide/slide.less

@@ -77,6 +77,46 @@ body {
 }
 
 
+#editorContainer {
+    flex: 1;
+    display: flex;
+    flex-flow: row;
+    height: 100%;
+    overflow: hidden;
+    .CodeMirror {
+        resize: none;
+        width: 100vw;
+    }
+    &.preview {
+        .CodeMirror {
+            //resize: horizontal;
+            width: 50vw;
+        }
+    }
+}
+.preview .cp {
+    flex: 1;
+    overflow: hidden;
+    div#modal {
+        position: relative;
+        top: auto;
+        left: auto;
+        width: auto;
+        display: block;
+        height: 100%;
+        #content {
+            .slide-container {
+                width: 100%;
+            }
+            .slide-frame {
+                width: 50vw;
+                height: 28.125vw; // height:width ratio = 9/16 = .5625
+                max-height: 100vh;
+                max-width: 177.78vh; // 16/9 = 1.778
+            }
+        }
+    }
+}
 .cp {
 
 /* Slide position (print mode) */
@@ -123,6 +163,8 @@ body {
 /* Slide position (present mode) */
 div.modal, div#modal {
     display: none;
+    background-color: black;
+    color: white;
 
     /* Navigation buttons */
     .button {
@@ -155,15 +197,10 @@ div.modal, div#modal {
         top: 0px;
         left: 0px;
         z-index: 100;
-        background-color: black;
-        color: white;
         height: 100vh;
         width: 100%;
     }
     #content {
-        &.transition {
-            transition: margin-left 1s;
-        }
         font-size: 20vh;
         position: relative;
         height: 100%;
@@ -198,6 +235,11 @@ div.modal, div#modal {
             text-align: center;
             vertical-align: top;
         }
+        &.transition {
+            .slide-container {
+                transition: margin-left 1s;
+            }
+        }
     }
 
     box-sizing: border-box;