infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve the slides layout in print mode

Browse Source
pull/1/head
yflory 8 years ago
parent 2392167996
commit f94db93897
7 changed files with 222 additions and 58 deletions
Show Stats Download Patch File Download Diff File

8
customize.dist/translations/messages.fr.js
Unescape Escape View File

@ -77,6 +77,14 @@ define(function () {
out.backgroundButtonTitle = 'Changer la couleur de fond de la 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.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
out.editOpen = "Éditer dans un nouvel onglet";

10
customize.dist/translations/messages.js
Unescape Escape View File

@ -79,6 +79,14 @@ define(function () {
out.backgroundButtonTitle = 'Change the background color in the presentation';
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.editShareTitle = "Copy the editing link to clipboard";
out.editOpen = "Open editing link in a new tab";
@ -94,7 +102,7 @@ define(function () {
out.okButton = 'OK (enter)';
out.cancel = "Cancel"; // Not used?
out.cancel = "Cancel";
out.cancelButton = 'Cancel (esc)';
// Polls

12
www/slide/index.html
Unescape Escape View File

@ -35,19 +35,21 @@
}
/* 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 */
#pad-iframe.fullscreen {
body #pad-iframe.fullscreen {
top: 0px;
height: 100% !important;
height: 100%;
}
#iframe-container.fullscreen {
body #iframe-container.fullscreen {
top: 0px;
height: 100% !important;
height: 100%;
}
</style>
</head>
<body>
<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 id="loading">
<div class="loadingContainer">

91
www/slide/main.js
Unescape Escape View File

@ -412,6 +412,80 @@ define([
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) {
userList = info.userList;
@ -467,15 +541,13 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
var $printButton = $('<button>').text('PRINT').click(function () {
console.log($print.html());
console.log($content.html());
console.log($content.html());
var $printButton = $('<button>', {
title: Messages.printButtonTitle,
'class': 'rightside-button fa fa-print',
style: 'font-size: 17px'
}).click(function () {
$print.html($content.html());
ifrw.focus();
ifrw.print();
console.log($print.html());
$('body').append(createPrintDialog());
});
$rightside.append($printButton);
@ -641,7 +713,8 @@ define([
updateMetadata(userDoc);
editor.setValue(newDoc || initialState);
Slide.update(newDoc);
Slide.update(newDoc, true);
Slide.draw();
if (Cryptpad.initialName && APP.title === defaultName) {
updateTitle(Cryptpad.initialName);

75
www/slide/slide.css
Unescape Escape View File

@ -41,38 +41,75 @@ body .CodeMirror-focused .cm-matchhighlight {
#colorPicker_check {
display: block;
}
#print {
display: none;
}
@media print {
@page {
margin: 0;
size: auto;
}
body {
display: block;
}
body .CodeMirror,
body #cme_toolbox {
display: none !important;
display: none;
}
body * {
visibility: hidden !important;
visibility: hidden;
height: auto;
max-height: none;
}
html,
body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
max-height: none;
overflow: visible;
}
#print {
position: relative;
html #print {
display: block;
visibility: visible !important;
visibility: visible;
}
#print .slide-frame {
display: block !important;
page-break-before: always !important;
page-break-inside: avoid !important;
position: relative;
}
#print * {
visibility: visible !important;
html #print * {
visibility: visible;
}
}
#print {
position: relative;
display: none;
}
#print .slide-frame {
display: flex !important;
justify-content: center;
align-items: center;
flex-flow: column;
padding: 5vh 0;
height: 100vh;
width: 100%;
page-break-after: always;
position: relative;
box-sizing: border-box;
}
#print .slide-frame li {
min-width: 50vw;
}
#print .slide-frame h1 {
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 {
position: absolute;
cursor: pointer;

6
www/slide/slide.js
Unescape Escape View File

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

78
www/slide/slide.less
Unescape Escape View File

@ -45,39 +45,75 @@ body {
display: block;
}
#print {
display: none;
}
@media print {
@page {
margin: 0;
size: auto;
}
body {
.CodeMirror, #cme_toolbox {
display: none !important;
display: none;
}
}
body * {
visibility: hidden !important;
* {
visibility: hidden;
height: auto;
max-height: none;
}
display:block;
}
html, body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
max-height: none;
overflow: visible;
}
#print {
html {
#print {
display: block;
visibility: visible;
* {
visibility: visible;
}
}
}
}
#print {
position: relative;
display: none;
.slide-frame {
display: flex !important;
justify-content: center;
align-items: center;
flex-flow: column;
padding: 5vh 0;
height: 100vh;
width: 100%;
page-break-after: always;
position: relative;
display: block;
visibility: visible !important;
.slide-frame {
display: block !important;
page-break-before: always !important;
page-break-inside: avoid !important;
position: relative;
box-sizing: border-box;
li {
min-width: 50vw;
}
* {
visibility: visible !important;
h1 {
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 {
&.slide {

Write Preview
Loading…
Cancel
Save