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] 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;