Improve the slides layout in print mode
This commit is contained in:
yflory
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;
|
|
||||||
}
|
}
|
||||||
#print {
|
html #print {
|
||||||
position: relative;
|
|
||||||
display: block;
|
display: block;
|
||||||
visibility: visible !important;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
#print .slide-frame {
|
html #print * {
|
||||||
display: block !important;
|
visibility: visible;
|
||||||
page-break-before: always !important;
|
}
|
||||||
page-break-inside: avoid !important;
|
}
|
||||||
|
#print {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
display: none;
|
||||||
#print * {
|
}
|
||||||
visibility: visible !important;
|
#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 {
|
.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;
|
||||||
}
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
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 {
|
.cp {
|
||||||
|
|
||||||
&.slide {
|
&.slide {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user