web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Copy print options to present mode

Browse Source
This commit is contained in:
yflory
2017-03-17 17:49:03 +01:00
parent a5f11d0d0d
commit 45ac3e40a2
7 changed files with 622 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
www/slide/main.js
View File

@@ -137,6 +137,8 @@ define([
var $modal = $pad.contents().find('#modal');
var $content = $pad.contents().find('#content');
var $print = $pad.contents().find('#print');
var slideOptions = {};
$( window ).resize(function() {
// 20vh
// 20 * 16 / 9vw
@@ -149,7 +151,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 +166,7 @@ define([
}
};
var leavePresentationMode = function () {
setStyleState(false);
Slide.show(false);
};
@@ -229,7 +238,8 @@ define([
content: textValue,
metadata: {
users: userData,
defaultTitle: defaultName
defaultTitle: defaultName,
slideOptions: slideOptions
}
};
if (!initializing) {
@@ -370,6 +380,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 +398,14 @@ define([
}
};
var updateOptions = function (newOpt) {
if (stringify(newOpt) !== stringify(slideOptions)) {
$.extend(slideOptions, newOpt);
// TODO: manage realtime + cursor in the "options" modal ??
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,19 @@ 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();
$.extend(slideOptions, slideOptionsTmp);
slideOptions.style = $textarea.val();
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 +563,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());
});
$rightside.append($printButton);
var $slideOptions = $('<button>', {
title: Messages.slideOptionsTitle,
'class': 'rightside-button fa fa-cog',
style: 'font-size: 17px'
}).click(function () {
$rightside.append($printButton);
$('body').append(createPrintDialog());
});
$rightside.append($slideOptions);
@@ -726,8 +747,6 @@ define([
// Update the user list (metadata) from the hyperjson
updateMetadata(userDoc);
Slide.update(newDoc, true);
Slide.draw();
editor.setValue(newDoc || initialState);

52
www/slide/slide.css
View File

@@ -80,11 +80,15 @@ body .CodeMirror-focused .cm-matchhighlight {
position: relative;
display: none;
font-size: 11.25vw;
/*.slide-frame:first-child {
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;
@@ -99,26 +103,6 @@ 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;
}
.cp div.modal,
.cp div#modal {
/* Navigation buttons */
@@ -341,3 +325,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%;
}

32
www/slide/slide.js
View File

@@ -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();
};

46
www/slide/slide.less
View File

@@ -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;
@@ -104,26 +107,11 @@ body {
h1 {
padding-top: 0;
}
.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 {
margin-top: ~"calc(((100vh - 56.25vw)/2))";
}*/
}
@@ -276,6 +264,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);
}
}