cryptpad/q

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.
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 96e36a4..4ad51bd 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -79,12 +79,14 @@ define(function () {
 
out.printButton = "Imprimer";
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.editShare = "Lien d'édition";
out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
out.editOpen = "Éditer dans un nouvel onglet";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index b463b48..15540fd 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -81,12 +81,14 @@ define(function () {
 
out.printButton = "Print";
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.editShare = "Editing link";
out.editShareTitle = "Copy the editing link to clipboard";
out.editOpen = "Open editing link in a new tab";
diff --git a/www/slide/main.js b/www/slide/main.js
index 50f216e..0bc6f5f 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -136,7 +136,8 @@ define([
 
var $modal = $pad.contents().find('#modal');
var $content = $pad.contents().find('#content');
- var $print = $pad.contents().find('#print');
var slideOptions = {};tents().find('#print');
+
$( window ).resize(function() {
// 20vh
// 20 * 16 / 9vw
@@ -149,7 +150,13 @@ define([
// $print.css('font-size', (20*9/16)+'vw');
});
 
- 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());
@@ -158,6 +165,7 @@ define([
}
};
var leavePresentationMode = function () {
+ setStyleState(false);
Slide.show(false);
};
 
@@ -229,7 +237,8 @@ define([
content: textValue,
metadata: {
users: userData,
- defaultTitle: defaultName
+ defaultTitle: defaultName,
+ slideOptions: slideOptions
}
};
if (!initializing) {
@@ -370,6 +379,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(); }
});
};
 
@@ -387,6 +397,15 @@ define([
}
};
 
+ var updateOptions = function (newOpt) {
+ if (stringify(newOpt) !== stringify(slideOptions)) {
+ $.extend(slideOptions, newOpt);
+ // TODO: manage realtime + cursor in the "options" modal ??
+ console.log('updating options');
+ Slide.updateOptions();
+ }
+ };
+
var updateDefaultTitle = function (defaultTitle) {
defaultName = defaultTitle;
$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
@@ -409,6 +428,7 @@ define([
updateTitle(json.metadata.title || defaultName);
titleUpdated = true;
}
+ updateOptions(json.metadata.slideOptions);
updateColors(json.metadata.color, json.metadata.backColor);
}
if (!titleUpdated) {
@@ -424,12 +444,14 @@ define([
};
 
var createPrintDialog = function () {
- var printOptions = {
+ var slideOptionsTmp = {
title: true,
slide: true,
- date: true
+ date: true,
+ style: ''
};
 
+ $.extend(slideOptionsTmp, slideOptions);
var $container = $('<div class="alertify">');
var $container2 = $('<div class="dialog">').appendTo($container);
var $div = $('<div id="printOptions">').appendTo($container2);
@@ -440,21 +462,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>'));
@@ -462,34 +484,18 @@ 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);
+
 
- var fixCSS = function (css) {
- var append = '.cp #print ';
- return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
- };
 
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();
slideOptions.style = $textarea.val();mp);
+ onLocal();
$container.remove();
};
 
var $nav = $('<nav>').appendTo($div);
- var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
+ var $ok = $('<button>', {'class': 'ok'}).text(Messages.settings_save).appendTo($nav).click(todo);
var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
$container.remove();
});
@@ -556,10 +562,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());
+ });
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)
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 () {
@@ -726,8 +746,6 @@ define([
updateMetadata(userDoc);
 
editor.setValue(newDoc || initialState);
- Slide.update(newDoc, true);
- Slide.draw();
 
if (Cryptpad.initialName && APP.title === defaultName) {
updateTitle(Cryptpad.initialName);
diff --git a/www/slide/slide.css b/www/slide/slide.css
index e96b77a..0404398 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -80,11 +80,16 @@ body .CodeMirror-focused .cm-matchhighlight {
position: relative;
display: none;
font-size: 11.25vw;
+ /*.slide-frame:first-child {
+ h1 { color: yellow; }
+ margin-top: ~"calc(((100vh - 56.25vw)/2))";
+ }*/
}
.cp #print .slide-frame {
display: block !important;
padding: 2.5%;
- margin-top: calc((100vh - 56.25vw)/2);
+ margin-top: 7.228vw;
+ margin-bottom: 7.228vw;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: 56.25vw;
@@ -98,26 +103,7 @@ body .CodeMirror-focused .cm-matchhighlight {
}
.cp #print .slide-frame h1 {
padding-top: 0;
-}
-.cp #print .slide-frame .slideNumber {
- position: absolute;
- right: 5vh;
- bottom: 5vh;
- font-size: 15px;
-}
-.cp #print .slide-frame .slideDate {
- position: absolute;
- left: 5vh;
- bottom: 5vh;
- font-size: 15px;
-}
-.cp #print .slide-frame .slideTitle {
- position: absolute;
- top: 5vh;
- left: 0px;
- right: 0px;
- text-align: center;
- font-size: 15px;
+ color: green;
}
.cp div.modal,
.cp div#modal {
@@ -341,3 +327,29 @@ body .CodeMirror-focused .cm-matchhighlight {
max-height: 90%;
margin: auto;
}
+.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 #content .slide-frame .slideDate,
+.cp #print .slide-frame .slideDate {
+ position: absolute;
+ left: 5vh;
+ bottom: 5vh;
+ font-size: 10%;
+ line-height: 110%;
+}
+.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%;
+}
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 7cbcad4..3990124 100644
--- 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,6 +116,11 @@ define([
slice(root.children).forEach(removeListeners);
};
 
+ 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; }
@@ -130,11 +137,31 @@ define([
} else {
DD.apply($content[0], patch);
}
+ 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();
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,12 +296,15 @@ define([
});
};
 
- Slide.setModal = function ($m, $c, $p, iframe, ph) {
+ 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;
+ console.log(APP);
addEvent();
};
 
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 31dd1c1..3bbd52e 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -90,7 +90,10 @@ body {
//align-items: center;
// flex-flow: column;
padding: 2.5%;
- margin-top: ~"calc((100vh - 56.25vw)/2)";
+ // margin-top: ~"calc(((100vh - 56.25vw)/2))";
+ margin-top: 7.228vw;
+ margin-bottom: 7.228vw;
+ // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
border-top: 1px solid black;
border-bottom: 1px solid black;
height: 56.25vw;
@@ -103,27 +106,14 @@ body {
}
h1 {
padding-top: 0;
+ color: green;
}
- .slideNumber {
- position: absolute;
- right: 5vh;
- bottom: 5vh;
- font-size: 15px;
- }
- .slideDate {
- position: absolute;
- left: 5vh;
- bottom: 5vh;
- font-size: 15px;
- }
- .slideTitle {
- position: absolute;
- top: 5vh;
- left: 0px; right: 0px;
- text-align: center;
- font-size: 15px;
- }
+
}
+ /*.slide-frame:first-child {
+ h1 { color: yellow; }
+ margin-top: ~"calc(((100vh - 56.25vw)/2))";
+ }*/
}
 

@@ -276,6 +266,24 @@ div#modal #content, #print {
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);
}
}
}
warning: LF will be replaced by CRLF in www/slide/slide.js.
The file will have its original line endings in your working directory.