Improve the slides layout in print mode

pull/1/head
yflory 8 years ago
parent 2392167996
commit f94db93897

@ -77,6 +77,14 @@ define(function () {
out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation'; out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation';
out.colorButtonTitle = 'Changer la couleur du texte en mode présentation'; out.colorButtonTitle = 'Changer la couleur du texte en mode présentation';
out.printButton = "Imprimer";
out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
out.printOptions = "Options d'impression";
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.editShare = "Lien d'édition"; out.editShare = "Lien d'édition";
out.editShareTitle = "Copier le lien d'édition dans le presse-papiers"; out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
out.editOpen = "Éditer dans un nouvel onglet"; out.editOpen = "Éditer dans un nouvel onglet";

@ -79,6 +79,14 @@ define(function () {
out.backgroundButtonTitle = 'Change the background color in the presentation'; out.backgroundButtonTitle = 'Change the background color in the presentation';
out.colorButtonTitle = 'Change the text color in presentation mode'; out.colorButtonTitle = 'Change the text color in presentation mode';
out.printButton = "Print";
out.printButtonTitle = "Print your slides or export them as a PDF file";
out.printOptions = "Print 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.editShare = "Editing link"; out.editShare = "Editing link";
out.editShareTitle = "Copy the editing link to clipboard"; out.editShareTitle = "Copy the editing link to clipboard";
out.editOpen = "Open editing link in a new tab"; out.editOpen = "Open editing link in a new tab";
@ -94,7 +102,7 @@ define(function () {
out.okButton = 'OK (enter)'; out.okButton = 'OK (enter)';
out.cancel = "Cancel"; // Not used? out.cancel = "Cancel";
out.cancelButton = 'Cancel (esc)'; out.cancelButton = 'Cancel (esc)';
// Polls // Polls

@ -35,19 +35,21 @@
} }
/* We use !important here to override the 96% set to the element in DecorateToolbar.js /* We use !important here to override the 96% set to the element in DecorateToolbar.js
when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */ when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
#pad-iframe.fullscreen { body #pad-iframe.fullscreen {
top: 0px; top: 0px;
height: 100% !important; height: 100%;
} }
#iframe-container.fullscreen { body #iframe-container.fullscreen {
top: 0px; top: 0px;
height: 100% !important; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="iframe-container"> <div id="iframe-container">
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script> <iframe id="pad-iframe", name="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
</div> </div>
<div id="loading"> <div id="loading">
<div class="loadingContainer"> <div class="loadingContainer">

@ -412,6 +412,80 @@ define([
onLocal(); onLocal();
}; };
var createPrintDialog = function () {
var printOptions = {
title: true,
slide: true,
date: true
};
var $container = $('<div class="alertify">');
var $container2 = $('<div class="dialog">').appendTo($container);
var $div = $('<div id="printOptions">').appendTo($container2);
var $p = $('<p>', {'class': 'msg'}).appendTo($div);
$('<b>').text(Messages.printOptions).appendTo($p);
$p.append($('<br>'));
// Slide number
$('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
var c = this.checked;
console.log(c);
printOptions.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;
}).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;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
$p.append($('<br>'));
// CSS
$('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
$p.append($('<br>'));
var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
var fixCSS = function (css) {
var append = '.cp #print ';
css = css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {')
return css;
};
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();
$container.remove();
};
var $nav = $('<nav>').appendTo($div);
var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
$container.remove();
});
return $container;
};
var onInit = config.onInit = function (info) { var onInit = config.onInit = function (info) {
userList = info.userList; userList = info.userList;
@ -467,15 +541,13 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad); $rightside.append($forgetPad);
var $printButton = $('<button>').text('PRINT').click(function () { var $printButton = $('<button>', {
console.log($print.html()); title: Messages.printButtonTitle,
console.log($content.html()); 'class': 'rightside-button fa fa-print',
console.log($content.html()); style: 'font-size: 17px'
}).click(function () {
$print.html($content.html()); $print.html($content.html());
$('body').append(createPrintDialog());
ifrw.focus();
ifrw.print();
console.log($print.html());
}); });
$rightside.append($printButton); $rightside.append($printButton);
@ -641,7 +713,8 @@ define([
updateMetadata(userDoc); updateMetadata(userDoc);
editor.setValue(newDoc || initialState); editor.setValue(newDoc || initialState);
Slide.update(newDoc); Slide.update(newDoc, true);
Slide.draw();
if (Cryptpad.initialName && APP.title === defaultName) { if (Cryptpad.initialName && APP.title === defaultName) {
updateTitle(Cryptpad.initialName); updateTitle(Cryptpad.initialName);

@ -41,37 +41,74 @@ body .CodeMirror-focused .cm-matchhighlight {
#colorPicker_check { #colorPicker_check {
display: block; display: block;
} }
#print {
display: none;
}
@media print { @media print {
@page {
margin: 0;
size: auto;
}
body {
display: block;
}
body .CodeMirror, body .CodeMirror,
body #cme_toolbox { body #cme_toolbox {
display: none !important; display: none;
} }
body * { body * {
visibility: hidden !important; visibility: hidden;
height: auto;
max-height: none;
} }
html, html,
body { body {
height: auto !important; max-height: none;
max-height: none !important; overflow: visible;
overflow: visible !important; }
html #print {
display: block;
visibility: visible;
}
html #print * {
visibility: visible;
}
} }
#print { #print {
position: relative; position: relative;
display: block; display: none;
visibility: visible !important;
} }
#print .slide-frame { #print .slide-frame {
display: block !important; display: flex !important;
page-break-before: always !important; justify-content: center;
page-break-inside: avoid !important; align-items: center;
flex-flow: column;
padding: 5vh 0;
height: 100vh;
width: 100%;
page-break-after: always;
position: relative; position: relative;
box-sizing: border-box;
}
#print .slide-frame li {
min-width: 50vw;
} }
#print * { #print .slide-frame h1 {
visibility: visible !important; padding-top: 0;
} }
#print .slide-frame .slideNumber {
position: absolute;
right: 5vh;
bottom: 5vh;
}
#print .slide-frame .slideDate {
position: absolute;
left: 5vh;
bottom: 5vh;
}
#print .slide-frame .slideTitle {
position: absolute;
top: 5vh;
left: 0px;
right: 0px;
text-align: center;
} }
.cp.slide #modal .button { .cp.slide #modal .button {
position: absolute; position: absolute;

@ -29,7 +29,7 @@ define([
} }
}; };
var getNumberOfSlides = function () { var getNumberOfSlides = Slide.getNumberOfSlides = function () {
return $content.find('.' + slideClass).length; return $content.find('.' + slideClass).length;
}; };
@ -170,8 +170,8 @@ define([
$modal.removeClass('shown'); $modal.removeClass('shown');
}; };
var update = Slide.update = function (content) { var update = Slide.update = function (content, init) {
if (!Slide.shown) { return; } if (!Slide.shown && !init) { return; }
if (!content) { content = ''; } if (!content) { content = ''; }
var old = Slide.content; var old = Slide.content;
Slide.content = content.replace(/\n\s*\-\-\-\s*\n/g, '\n\n'+separator+'\n\n'); Slide.content = content.replace(/\n\s*\-\-\-\s*\n/g, '\n\n'+separator+'\n\n');

@ -45,39 +45,75 @@ body {
display: block; display: block;
} }
#print {
display: none;
}
@media print { @media print {
@page {
margin: 0;
size: auto;
}
body { body {
.CodeMirror, #cme_toolbox { .CodeMirror, #cme_toolbox {
display: none !important; display: none;
} }
* {
visibility: hidden;
height: auto;
max-height: none;
} }
body * { display:block;
visibility: hidden !important;
} }
html, body { html, body {
height: auto !important; max-height: none;
max-height: none !important; overflow: visible;
overflow: visible !important;
} }
html {
#print { #print {
position: relative;
display: block; display: block;
visibility: visible !important; visibility: visible;
* {
visibility: visible;
}
}
}
}
#print {
position: relative;
display: none;
.slide-frame { .slide-frame {
display: block !important; display: flex !important;
page-break-before: always !important; justify-content: center;
page-break-inside: avoid !important; align-items: center;
flex-flow: column;
padding: 5vh 0;
height: 100vh;
width: 100%;
page-break-after: always;
position: relative; position: relative;
box-sizing: border-box;
li {
min-width: 50vw;
} }
* { h1 {
visibility: visible !important; padding-top: 0;
} }
.slideNumber {
position: absolute;
right: 5vh;
bottom: 5vh;
} }
.slideDate {
position: absolute;
left: 5vh;
bottom: 5vh;
}
.slideTitle {
position: absolute;
top: 5vh;
left: 0px; right: 0px;
text-align: center;
} }
}
}
.cp { .cp {
&.slide { &.slide {

Loading…
Cancel
Save