From 66d8c0ed11c262660a91d7e82b4b62e918502a67 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 16 Jun 2017 15:11:32 +0200
Subject: [PATCH 1/3] Add a preview mode to the slide app

---
 www/slide/inner.html | 21 +++++++++---------
 www/slide/main.js    | 27 ++++++++++++++++++++++-
 www/slide/slide.css  | 47 ++++++++++++++++++++++++++++++++++-----
 www/slide/slide.js   | 25 ++++++++++++++++-----
 www/slide/slide.less | 52 +++++++++++++++++++++++++++++++++++++++-----
 5 files changed, 144 insertions(+), 28 deletions(-)

diff --git a/www/slide/inner.html b/www/slide/inner.html
index 8fde658df..1726cd2f1 100644
--- a/www/slide/inner.html
+++ b/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>
diff --git a/www/slide/main.js b/www/slide/main.js
index ad6b8652b..18cb06be1 100644
--- a/www/slide/main.js
+++ b/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 +  ')';
diff --git a/www/slide/slide.css b/www/slide/slide.css
index 51eb88edd..6bf7e459b 100644
--- a/www/slide/slide.css
+++ b/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;
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 731e5b8ee..ed0f0ab2c 100644
--- a/www/slide/slide.js
+++ b/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
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 67db16e10..1a6d6e333 100644
--- a/www/slide/slide.less
+++ b/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;

From 1df11f28139ac2a9d895234c391dfe1f0faa5c43 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 19 Jun 2017 10:26:14 +0200
Subject: [PATCH 2/3] Update the font-size when entering/leaving present mode

---
 www/slide/slide.css  | 6 +++---
 www/slide/slide.js   | 5 +++--
 www/slide/slide.less | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/www/slide/slide.css b/www/slide/slide.css
index 6bf7e459b..0fcc0951c 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -89,7 +89,7 @@ body .CodeMirror-focused .cm-matchhighlight {
   flex: 1;
   overflow: hidden;
 }
-.preview .cp div#modal {
+.preview .cp div#modal:not(.shown) {
   position: relative;
   top: auto;
   left: auto;
@@ -97,10 +97,10 @@ body .CodeMirror-focused .cm-matchhighlight {
   display: block;
   height: 100%;
 }
-.preview .cp div#modal #content .slide-container {
+.preview .cp div#modal:not(.shown) #content .slide-container {
   width: 100%;
 }
-.preview .cp div#modal #content .slide-frame {
+.preview .cp div#modal:not(.shown) #content .slide-frame {
   width: 50vw;
   height: 28.125vw;
   max-height: 100vh;
diff --git a/www/slide/slide.js b/www/slide/slide.js
index ed0f0ab2c..fd5277853 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -38,7 +38,7 @@ define([
         }
     };
 
-    var updateFontSize = Slide.updateFontSize = function() {
+    var updateFontSize = Slide.updateFontSize = function () {
         // 20vh
         // 20 * 16 / 9vw
         var wbase = 20;
@@ -130,6 +130,7 @@ define([
             $pad.addClass('fullscreen');
             $('#iframe-container').addClass('fullscreen');
             $('.top-bar').hide();
+            updateFontSize();
             return;
         }
         window.location.hash = window.location.hash.replace(/\/present$/, '/');
@@ -140,10 +141,10 @@ define([
         $('#iframe-container').removeClass('fullscreen');
         $('.top-bar').show();
         $modal.removeClass('shown');
+        updateFontSize();
     };
 
     Slide.update = function (content, init) {
-        console.log(content, init);
         updateFontSize();
         //if (!init) { return; }
         if (!content) { content = ''; }
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 1a6d6e333..ccd4c454d 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -97,7 +97,7 @@ body {
 .preview .cp {
     flex: 1;
     overflow: hidden;
-    div#modal {
+    div#modal:not(.shown) {
         position: relative;
         top: auto;
         left: auto;

From 928dadcf7799ebd75ee2cd155b721851ad1cc398 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 19 Jun 2017 10:37:01 +0200
Subject: [PATCH 3/3] Fix toolbar dropdown menus not visible in slide

---
 www/slide/slide.css  | 3 +++
 www/slide/slide.less | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/www/slide/slide.css b/www/slide/slide.css
index 0fcc0951c..2fa01e6f2 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -71,6 +71,9 @@ body .CodeMirror-focused .cm-matchhighlight {
     visibility: visible;
   }
 }
+#cme_toolbox {
+  z-index: 10000;
+}
 #editorContainer {
   flex: 1;
   display: flex;
diff --git a/www/slide/slide.less b/www/slide/slide.less
index ccd4c454d..83778ee7d 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -77,6 +77,9 @@ body {
 }
 
 
+#cme_toolbox {
+    z-index: 10000;
+}
 #editorContainer {
     flex: 1;
     display: flex;