Improve the slides layout in print mode
yflory
parent
2392167996
commit
f94db93897
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -45,39 +45,75 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
margin: 0;
|
||||
size: auto;
|
||||
}
|
||||
body {
|
||||
.CodeMirror, #cme_toolbox {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
body * {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
html, body {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
#print {
|
||||
position: relative;
|
||||
display: block;
|
||||
visibility: visible !important;
|
||||
.slide-frame {
|
||||
display: block !important;
|
||||
page-break-before: always !important;
|
||||
page-break-inside: avoid !important;
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
visibility: visible !important;
|
||||
visibility: hidden;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
display:block;
|
||||
}
|
||||
html, body {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
li {
|
||||
min-width: 50vw;
|
||||
}
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue