Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging
This commit is contained in:
ansuz
commit
cc43bb8362
@ -23,8 +23,11 @@
|
|||||||
.top-left(@s: 5px) { border-top-left-radius: @s; }
|
.top-left(@s: 5px) { border-top-left-radius: @s; }
|
||||||
|
|
||||||
.size (@n) {
|
.size (@n) {
|
||||||
font-size: @n * 1vw;
|
// font-size: @n * 1vmin;
|
||||||
line-height: @n * 1.1vw;
|
// line-height: @n * 1.1vmin;
|
||||||
|
font-size: @n * 10%;
|
||||||
|
// line-height: @n * 11%;
|
||||||
|
line-height: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.two-part-gradient (@start, @end) {
|
.two-part-gradient (@start, @end) {
|
||||||
|
|||||||
@ -88,6 +88,73 @@
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clag () {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#newLag {
|
||||||
|
height: 20px;
|
||||||
|
width: 23px;
|
||||||
|
background: transparent;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px;
|
||||||
|
margin: 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
box-sizing: content-box;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4px;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 1px;
|
||||||
|
background: black;
|
||||||
|
vertical-align: bottom;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid black;
|
||||||
|
transition: background 1s, border 1s;
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
&.bar1 { height: 5px; }
|
||||||
|
&.bar2 { height: 10px; }
|
||||||
|
&.bar3 { height: 15px; }
|
||||||
|
&.bar4 { height: 20px; }
|
||||||
|
}
|
||||||
|
&.lag0 {
|
||||||
|
span {
|
||||||
|
.clag();
|
||||||
|
border-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.lag1 {
|
||||||
|
.bar2, .bar3, .bar4 { .clag(); }
|
||||||
|
span {
|
||||||
|
background-color: orange;
|
||||||
|
border-color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.lag2 {
|
||||||
|
.bar3, .bar4 { .clag(); }
|
||||||
|
span {
|
||||||
|
background-color: orange;
|
||||||
|
border-color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.lag3 {
|
||||||
|
.bar4 { .clag(); }
|
||||||
|
span {
|
||||||
|
background-color: green;
|
||||||
|
border-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.lag4 {
|
||||||
|
span {
|
||||||
|
background-color: green;
|
||||||
|
border-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
div {
|
div {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
&.cryptpad-back {
|
&.cryptpad-back {
|
||||||
|
|||||||
@ -161,6 +161,74 @@
|
|||||||
.cryptpad-toolbar .cryptpad-lag div {
|
.cryptpad-toolbar .cryptpad-lag div {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
.cryptpad-toolbar #newLag {
|
||||||
|
height: 20px;
|
||||||
|
width: 23px;
|
||||||
|
background: transparent;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px;
|
||||||
|
margin: 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 4px;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 1px;
|
||||||
|
background: black;
|
||||||
|
vertical-align: bottom;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid black;
|
||||||
|
transition: background 1s, border 1s;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span.bar1 {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span.bar2 {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span.bar3 {
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag span.bar4 {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag0 span {
|
||||||
|
background: transparent;
|
||||||
|
border-color: red;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag1 .bar2,
|
||||||
|
.cryptpad-toolbar #newLag.lag1 .bar3,
|
||||||
|
.cryptpad-toolbar #newLag.lag1 .bar4 {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag1 span {
|
||||||
|
background-color: orange;
|
||||||
|
border-color: orange;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag2 .bar3,
|
||||||
|
.cryptpad-toolbar #newLag.lag2 .bar4 {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag2 span {
|
||||||
|
background-color: orange;
|
||||||
|
border-color: orange;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag3 .bar4 {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag3 span {
|
||||||
|
background-color: green;
|
||||||
|
border-color: green;
|
||||||
|
}
|
||||||
|
.cryptpad-toolbar #newLag.lag4 span {
|
||||||
|
background-color: green;
|
||||||
|
border-color: green;
|
||||||
|
}
|
||||||
.cryptpad-toolbar div {
|
.cryptpad-toolbar div {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -77,14 +77,17 @@ 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.printButton = "Imprimer (Entrée)";
|
||||||
out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
|
out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
|
||||||
out.printOptions = "Options d'impression";
|
out.printOptions = "Options de mise en page";
|
||||||
out.printSlideNumber = "Afficher le numéro des slides";
|
out.printSlideNumber = "Afficher le numéro des slides";
|
||||||
out.printDate = "Afficher la date";
|
out.printDate = "Afficher la date";
|
||||||
out.printTitle = "Afficher le titre du pad";
|
out.printTitle = "Afficher le titre du pad";
|
||||||
out.printCSS = "Personnaliser l'apparence (CSS):";
|
out.printCSS = "Personnaliser l'apparence (CSS):";
|
||||||
|
|
||||||
|
out.slideOptionsTitle = "Personnaliser la présentation";
|
||||||
|
out.slideOptionsButton = "Enregistrer (Entrée)";
|
||||||
|
|
||||||
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,14 +79,17 @@ 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.printButton = "Print (enter)";
|
||||||
out.printButtonTitle = "Print your slides or export them as a PDF file";
|
out.printButtonTitle = "Print your slides or export them as a PDF file";
|
||||||
out.printOptions = "Print options";
|
out.printOptions = "Layout options";
|
||||||
out.printSlideNumber = "Display the slide number";
|
out.printSlideNumber = "Display the slide number";
|
||||||
out.printDate = "Display the date";
|
out.printDate = "Display the date";
|
||||||
out.printTitle = "Display the pad title";
|
out.printTitle = "Display the pad title";
|
||||||
out.printCSS = "Custom style rules (CSS):";
|
out.printCSS = "Custom style rules (CSS):";
|
||||||
|
|
||||||
|
out.slideOptionsTitle = "Customize your slides";
|
||||||
|
out.slideOptionsButton = "Save (enter)";
|
||||||
|
|
||||||
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";
|
||||||
|
|||||||
478
q
Normal file
478
q
Normal file
@ -0,0 +1,478 @@
|
|||||||
|
warning: LF will be replaced by CRLF in customize.dist/translations/messages.fr.js.
|
||||||
|
The file will have its original line endings in your working directory.
|
||||||
|
[1mdiff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js[m
|
||||||
|
[1mindex 96e36a4..4ad51bd 100644[m
|
||||||
|
[1m--- a/customize.dist/translations/messages.fr.js[m
|
||||||
|
[1m+++ b/customize.dist/translations/messages.fr.js[m
|
||||||
|
[36m@@ -79,12 +79,14 @@[m [mdefine(function () {[m
|
||||||
|
[m
|
||||||
|
out.printButton = "Imprimer";[m
|
||||||
|
out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";[m
|
||||||
|
[31m- out.printOptions = "Options d'impression";[m
|
||||||
|
[32m+[m[32m out.printOptions = "Options de mise en page";[m
|
||||||
|
out.printSlideNumber = "Afficher le numéro des slides";[m
|
||||||
|
out.printDate = "Afficher la date";[m
|
||||||
|
out.printTitle = "Afficher le titre du pad";[m
|
||||||
|
out.printCSS = "Personnaliser l'apparence (CSS):";[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m out.slideOptionsTitle = "Personnaliser la présentation";[m
|
||||||
|
[32m+[m
|
||||||
|
out.editShare = "Lien d'édition";[m
|
||||||
|
out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";[m
|
||||||
|
out.editOpen = "Éditer dans un nouvel onglet";[m
|
||||||
|
[1mdiff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js[m
|
||||||
|
[1mindex b463b48..15540fd 100644[m
|
||||||
|
[1m--- a/customize.dist/translations/messages.js[m
|
||||||
|
[1m+++ b/customize.dist/translations/messages.js[m
|
||||||
|
[36m@@ -81,12 +81,14 @@[m [mdefine(function () {[m
|
||||||
|
[m
|
||||||
|
out.printButton = "Print";[m
|
||||||
|
out.printButtonTitle = "Print your slides or export them as a PDF file";[m
|
||||||
|
[31m- out.printOptions = "Print options";[m
|
||||||
|
[32m+[m[32m out.printOptions = "Layout options";[m
|
||||||
|
out.printSlideNumber = "Display the slide number";[m
|
||||||
|
out.printDate = "Display the date";[m
|
||||||
|
out.printTitle = "Display the pad title";[m
|
||||||
|
out.printCSS = "Custom style rules (CSS):";[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m out.slideOptionsTitle = "Customize your slides";[m
|
||||||
|
[32m+[m
|
||||||
|
out.editShare = "Editing link";[m
|
||||||
|
out.editShareTitle = "Copy the editing link to clipboard";[m
|
||||||
|
out.editOpen = "Open editing link in a new tab";[m
|
||||||
|
[1mdiff --git a/www/slide/main.js b/www/slide/main.js[m
|
||||||
|
[1mindex 50f216e..0bc6f5f 100644[m
|
||||||
|
[1m--- a/www/slide/main.js[m
|
||||||
|
[1m+++ b/www/slide/main.js[m
|
||||||
|
[36m@@ -136,7 +136,8 @@[m [mdefine([[m
|
||||||
|
[m
|
||||||
|
var $modal = $pad.contents().find('#modal');[m
|
||||||
|
var $content = $pad.contents().find('#content');[m
|
||||||
|
[31m- var $print = $pad.contents().find('#print');[m
|
||||||
|
[32m+[m[32m var $print = $pad.contents().find('#print');
var slideOptions = {};[m
|
||||||
|
[32m+[m
|
||||||
|
$( window ).resize(function() {[m
|
||||||
|
// 20vh[m
|
||||||
|
// 20 * 16 / 9vw[m
|
||||||
|
[36m@@ -149,7 +150,13 @@[m [mdefine([[m
|
||||||
|
// $print.css('font-size', (20*9/16)+'vw');[m
|
||||||
|
});[m
|
||||||
|
[m
|
||||||
|
[31m- Slide.setModal($modal, $content, $pad, ifrw, initialState);[m
|
||||||
|
[32m+[m[32m Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);[m
|
||||||
|
[32m+[m
|
||||||
|
[32m+[m[32m var setStyleState = function (state) {[m
|
||||||
|
[32m+[m[32m $pad.contents().find('#print, #content').find('style').each(function (i, el) {[m
|
||||||
|
[32m+[m[32m el.disabled = !state;[m
|
||||||
|
[32m+[m[32m });[m
|
||||||
|
[32m+[m[32m };[m
|
||||||
|
[m
|
||||||
|
var enterPresentationMode = function (shouldLog) {[m
|
||||||
|
Slide.show(true, editor.getValue());[m
|
||||||
|
[36m@@ -158,6 +165,7 @@[m [mdefine([[m
|
||||||
|
}[m
|
||||||
|
};[m
|
||||||
|
var leavePresentationMode = function () {[m
|
||||||
|
[32m+[m[32m setStyleState(false);[m
|
||||||
|
Slide.show(false);[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[36m@@ -229,7 +237,8 @@[m [mdefine([[m
|
||||||
|
content: textValue,[m
|
||||||
|
metadata: {[m
|
||||||
|
users: userData,[m
|
||||||
|
[31m- defaultTitle: defaultName[m
|
||||||
|
[32m+[m[32m defaultTitle: defaultName,[m
|
||||||
|
[32m+[m[32m slideOptions: slideOptions[m
|
||||||
|
}[m
|
||||||
|
};[m
|
||||||
|
if (!initializing) {[m
|
||||||
|
[36m@@ -370,6 +379,7 @@[m [mdefine([[m
|
||||||
|
setTabTitle();[m
|
||||||
|
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);[m
|
||||||
|
$bar.find('.' + Toolbar.constants.title).find('input').val(data);[m
|
||||||
|
[32m+[m[32m if (slideOptions.title) { Slide.updateOptions(); }[m
|
||||||
|
});[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[36m@@ -387,6 +397,15 @@[m [mdefine([[m
|
||||||
|
}[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m var updateOptions = function (newOpt) {[m
|
||||||
|
[32m+[m[32m if (stringify(newOpt) !== stringify(slideOptions)) {[m
|
||||||
|
[32m+[m[32m $.extend(slideOptions, newOpt);[m
|
||||||
|
[32m+[m[32m // TODO: manage realtime + cursor in the "options" modal ??[m
|
||||||
|
[32m+[m[32m console.log('updating options');[m
|
||||||
|
[32m+[m[32m Slide.updateOptions();[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m };[m
|
||||||
|
[32m+[m
|
||||||
|
var updateDefaultTitle = function (defaultTitle) {[m
|
||||||
|
defaultName = defaultTitle;[m
|
||||||
|
$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);[m
|
||||||
|
[36m@@ -409,6 +428,7 @@[m [mdefine([[m
|
||||||
|
updateTitle(json.metadata.title || defaultName);[m
|
||||||
|
titleUpdated = true;[m
|
||||||
|
}[m
|
||||||
|
[32m+[m[32m updateOptions(json.metadata.slideOptions);[m
|
||||||
|
updateColors(json.metadata.color, json.metadata.backColor);[m
|
||||||
|
}[m
|
||||||
|
if (!titleUpdated) {[m
|
||||||
|
[36m@@ -424,12 +444,14 @@[m [mdefine([[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
var createPrintDialog = function () {[m
|
||||||
|
[31m- var printOptions = {[m
|
||||||
|
[32m+[m[32m var slideOptionsTmp = {[m
|
||||||
|
title: true,[m
|
||||||
|
slide: true,[m
|
||||||
|
[31m- date: true[m
|
||||||
|
[32m+[m[32m date: true,[m
|
||||||
|
[32m+[m[32m style: ''[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m $.extend(slideOptionsTmp, slideOptions);[m[41m
[m
|
||||||
|
var $container = $('<div class="alertify">');[m
|
||||||
|
var $container2 = $('<div class="dialog">').appendTo($container);[m
|
||||||
|
var $div = $('<div id="printOptions">').appendTo($container2);[m
|
||||||
|
[36m@@ -440,21 +462,21 @@[m [mdefine([[m
|
||||||
|
$('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {[m
|
||||||
|
var c = this.checked;[m
|
||||||
|
console.log(c);[m
|
||||||
|
[31m- printOptions.slide = c;[m
|
||||||
|
[32m+[m[32m slideOptionsTmp.slide = c;[m
|
||||||
|
}).appendTo($p).css('width', 'auto');[m
|
||||||
|
$('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);[m
|
||||||
|
$p.append($('<br>'));[m
|
||||||
|
// Date[m
|
||||||
|
$('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {[m
|
||||||
|
var c = this.checked;[m
|
||||||
|
[31m- printOptions.date = c;[m
|
||||||
|
[32m+[m[32m slideOptionsTmp.date = c;[m
|
||||||
|
}).appendTo($p).css('width', 'auto');[m
|
||||||
|
$('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);[m
|
||||||
|
$p.append($('<br>'));[m
|
||||||
|
// Title[m
|
||||||
|
$('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {[m
|
||||||
|
var c = this.checked;[m
|
||||||
|
[31m- printOptions.title = c;[m
|
||||||
|
[32m+[m[32m slideOptionsTmp.title = c;[m
|
||||||
|
}).appendTo($p).css('width', 'auto');[m
|
||||||
|
$('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);[m
|
||||||
|
$p.append($('<br>'));[m
|
||||||
|
[36m@@ -462,34 +484,18 @@[m [mdefine([[m
|
||||||
|
$('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);[m
|
||||||
|
$p.append($('<br>'));[m
|
||||||
|
var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);[m
|
||||||
|
[32m+[m[32m $textarea.val(slideOptionsTmp.style);[m
|
||||||
|
[32m+[m
|
||||||
|
[m
|
||||||
|
[31m- var fixCSS = function (css) {[m
|
||||||
|
[31m- var append = '.cp #print ';[m
|
||||||
|
[31m- return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');[m
|
||||||
|
[31m- };[m
|
||||||
|
[m
|
||||||
|
var todo = function () {[m
|
||||||
|
[31m- var $style = $('<style>').text(fixCSS($textarea.val()));[m
|
||||||
|
[31m- $print.prepend($style);[m
|
||||||
|
[31m- var length = $print.find('.slide-frame').length;[m
|
||||||
|
[31m- $print.find('.slide-frame').each(function (i, el) {[m
|
||||||
|
[31m- if (printOptions.slide) {[m
|
||||||
|
[31m- $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));[m
|
||||||
|
[31m- }[m
|
||||||
|
[31m- if (printOptions.date) {[m
|
||||||
|
[31m- $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));[m
|
||||||
|
[31m- }[m
|
||||||
|
[31m- if (printOptions.title) {[m
|
||||||
|
[31m- $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));[m
|
||||||
|
[31m- }[m
|
||||||
|
[31m- });[m
|
||||||
|
[31m- window.frames["pad-iframe"].focus();[m
|
||||||
|
[31m- window.frames["pad-iframe"].print();[m
|
||||||
|
[32m+[m[32m $.extend(slideOptions, slideOptionsTmp);
slideOptions.style = $textarea.val();[m
|
||||||
|
[32m+[m[32m onLocal();[m
|
||||||
|
$container.remove();[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
var $nav = $('<nav>').appendTo($div);[m
|
||||||
|
[31m- var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);[m
|
||||||
|
[32m+[m[32m var $ok = $('<button>', {'class': 'ok'}).text(Messages.settings_save).appendTo($nav).click(todo);[m
|
||||||
|
var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {[m
|
||||||
|
$container.remove();[m
|
||||||
|
});[m
|
||||||
|
[36m@@ -556,10 +562,24 @@[m [mdefine([[m
|
||||||
|
'class': 'rightside-button fa fa-print',[m
|
||||||
|
style: 'font-size: 17px'[m
|
||||||
|
}).click(function () {[m
|
||||||
|
[32m+[m[32m Slide.update(editor.getValue(), true);[m
|
||||||
|
$print.html($content.html());[m
|
||||||
|
[32m+[m[32m Cryptpad.confirm("Are you sure you want to print?", function (yes) {[m
|
||||||
|
[32m+[m[32m if (yes) {[m
|
||||||
|
[32m+[m[32m window.frames["pad-iframe"].focus();[m
|
||||||
|
[32m+[m[32m window.frames["pad-iframe"].print();[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m }, {ok: Messages.printButton});[m
|
||||||
|
[32m+[m[32m //$('body').append(createPrintDialog());[m
|
||||||
|
[32m+[m[32m });[m
|
||||||
|
[32m+[m[32m $rightside.append($printButton);
var $slideOptions = $('<button>', {[m
|
||||||
|
[32m+[m[32m title: Messages.slideOptionsTitle,[m
|
||||||
|
[32m+[m[32m 'class': 'rightside-button fa fa-cog',[m
|
||||||
|
[32m+[m[32m style: 'font-size: 17px'[m
|
||||||
|
[32m+[m[32m }).click(function () {[m
|
||||||
|
$('body').append(createPrintDialog());[m
|
||||||
|
});[m
|
||||||
|
[31m- $rightside.append($printButton);[m
|
||||||
|
[32m+[m[32m $rightside.append($slideOptions);[m
|
||||||
|
[m
|
||||||
|
var $present = Cryptpad.createButton('present', true)[m
|
||||||
|
warning: LF will be replaced by CRLF in customize.dist/translations/messages.js.
|
||||||
|
The file will have its original line endings in your working directory.
|
||||||
|
warning: LF will be replaced by CRLF in www/slide/slide.css.
|
||||||
|
The file will have its original line endings in your working directory.
|
||||||
|
.click(function () {[m
|
||||||
|
[36m@@ -726,8 +746,6 @@[m [mdefine([[m
|
||||||
|
updateMetadata(userDoc);[m
|
||||||
|
[m
|
||||||
|
editor.setValue(newDoc || initialState);[m
|
||||||
|
[31m- Slide.update(newDoc, true);[m
|
||||||
|
[31m- Slide.draw();[m
|
||||||
|
[m
|
||||||
|
if (Cryptpad.initialName && APP.title === defaultName) {[m
|
||||||
|
updateTitle(Cryptpad.initialName);[m
|
||||||
|
[1mdiff --git a/www/slide/slide.css b/www/slide/slide.css[m
|
||||||
|
[1mindex e96b77a..0404398 100644[m
|
||||||
|
[1m--- a/www/slide/slide.css[m
|
||||||
|
[1m+++ b/www/slide/slide.css[m
|
||||||
|
[36m@@ -80,11 +80,16 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
|
||||||
|
position: relative;[m
|
||||||
|
display: none;[m
|
||||||
|
font-size: 11.25vw;[m
|
||||||
|
[32m+[m[32m /*.slide-frame:first-child {[m
|
||||||
|
[32m+[m[32m h1 { color: yellow; }[m
|
||||||
|
[32m+[m[32m margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
|
||||||
|
[32m+[m[32m }*/[m
|
||||||
|
}[m
|
||||||
|
.cp #print .slide-frame {[m
|
||||||
|
display: block !important;[m
|
||||||
|
padding: 2.5%;[m
|
||||||
|
[31m- margin-top: calc((100vh - 56.25vw)/2);[m
|
||||||
|
[32m+[m[32m margin-top: 7.228vw;[m
|
||||||
|
[32m+[m[32m margin-bottom: 7.228vw;[m
|
||||||
|
border-top: 1px solid black;[m
|
||||||
|
border-bottom: 1px solid black;[m
|
||||||
|
height: 56.25vw;[m
|
||||||
|
[36m@@ -98,26 +103,7 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
|
||||||
|
}[m
|
||||||
|
.cp #print .slide-frame h1 {[m
|
||||||
|
padding-top: 0;[m
|
||||||
|
[31m-}[m
|
||||||
|
[31m-.cp #print .slide-frame .slideNumber {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- right: 5vh;[m
|
||||||
|
[31m- bottom: 5vh;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[31m-}[m
|
||||||
|
[31m-.cp #print .slide-frame .slideDate {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- left: 5vh;[m
|
||||||
|
[31m- bottom: 5vh;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[31m-}[m
|
||||||
|
[31m-.cp #print .slide-frame .slideTitle {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- top: 5vh;[m
|
||||||
|
[31m- left: 0px;[m
|
||||||
|
[31m- right: 0px;[m
|
||||||
|
[31m- text-align: center;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[32m+[m[32m color: green;[m
|
||||||
|
}[m
|
||||||
|
.cp div.modal,[m
|
||||||
|
.cp div#modal {[m
|
||||||
|
[36m@@ -341,3 +327,29 @@[m [mbody .CodeMirror-focused .cm-matchhighlight {[m
|
||||||
|
max-height: 90%;[m
|
||||||
|
margin: auto;[m
|
||||||
|
}[m
|
||||||
|
[32m+[m[32m.cp div#modal #content .slide-frame .slideNumber,[m
|
||||||
|
[32m+[m[32m.cp #print .slide-frame .slideNumber {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m right: 5vh;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m font-size: 10%;[m
|
||||||
|
[32m+[m[32m line-height: 110%;[m
|
||||||
|
[32m+[m[32m}[m
|
||||||
|
[32m+[m[32m.cp div#modal #content .slide-frame .slideDate,[m
|
||||||
|
[32m+[m[32m.cp #print .slide-frame .slideDate {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m left: 5vh;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m font-size: 10%;[m
|
||||||
|
[32m+[m[32m line-height: 110%;[m
|
||||||
|
[32m+[m[32m}[m
|
||||||
|
[32m+[m[32m.cp div#modal #content .slide-frame .slideTitle,[m
|
||||||
|
[32m+[m[32m.cp #print .slide-frame .slideTitle {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m left: 0px;[m
|
||||||
|
[32m+[m[32m right: 0px;[m
|
||||||
|
[32m+[m[32m text-align: center;[m
|
||||||
|
[32m+[m[32m font-size: 10%;[m
|
||||||
|
[32m+[m[32m line-height: 110%;[m
|
||||||
|
[32m+[m[32m}[m
|
||||||
|
[1mdiff --git a/www/slide/slide.js b/www/slide/slide.js[m
|
||||||
|
[1mindex 7cbcad4..3990124 100644[m
|
||||||
|
[1m--- a/www/slide/slide.js[m
|
||||||
|
[1m+++ b/www/slide/slide.js[m
|
||||||
|
[36m@@ -14,11 +14,13 @@[m [mdefine([[m
|
||||||
|
content: [],[m
|
||||||
|
changeHandlers: [],[m
|
||||||
|
};[m
|
||||||
|
[32m+[m[32m var APP;[m
|
||||||
|
var ifrw;[m
|
||||||
|
var $modal;[m
|
||||||
|
var $content;[m
|
||||||
|
var $pad;[m
|
||||||
|
var placeholder;[m
|
||||||
|
[32m+[m[32m var options;[m
|
||||||
|
var separator = '<hr data-pewpew="pezpez">';[m
|
||||||
|
var separatorReg = /<hr data\-pewpew="pezpez">/g;[m
|
||||||
|
var slideClass = 'slide-frame';[m
|
||||||
|
[36m@@ -114,6 +116,11 @@[m [mdefine([[m
|
||||||
|
slice(root.children).forEach(removeListeners);[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m var fixCSS = function (css) {[m
|
||||||
|
[32m+[m[32m var append = '.cp #print .slide-frame ';[m
|
||||||
|
[32m+[m[32m var append2 = '.cp div#modal #content .slide-frame ';[m
|
||||||
|
[32m+[m[32m return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');[m
|
||||||
|
[32m+[m[32m };[m
|
||||||
|
var draw = Slide.draw = function (i) {[m
|
||||||
|
i = i || 0;[m
|
||||||
|
if (typeof(Slide.content) !== 'string') { return; }[m
|
||||||
|
[36m@@ -130,11 +137,31 @@[m [mdefine([[m
|
||||||
|
} else {[m
|
||||||
|
DD.apply($content[0], patch);[m
|
||||||
|
}[m
|
||||||
|
[32m+[m[32m var length = getNumberOfSlides();[m
|
||||||
|
[32m+[m[32m $modal.find('style.slideStyle').remove();[m
|
||||||
|
[32m+[m[32m if (options.style && Slide.shown) {[m
|
||||||
|
[32m+[m[32m $modal.prepend($('<style>', {'class': 'slideStyle'}).text(fixCSS(options.style)));[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m $content.find('.slide-frame').each(function (i, el) {[m
|
||||||
|
[32m+[m[32m if (options.slide) {[m
|
||||||
|
[32m+[m[32m $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m if (options.date) {[m
|
||||||
|
[32m+[m[32m $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m if (options.title) {[m
|
||||||
|
[32m+[m[32m $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m });[m
|
||||||
|
$content.find('.' + slideClass).hide();[m
|
||||||
|
$content.find('.' + slideClass + ':eq( ' + i + ' )').show();[m
|
||||||
|
change(Slide.lastIndex, Slide.index);[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[32m+[m[32m var updateOptions = Slide.updateOptions = function () {[m
|
||||||
|
[32m+[m[32m draw(Slide.index);[m
|
||||||
|
[32m+[m[32m };[m
|
||||||
|
[32m+[m
|
||||||
|
var isPresentURL = Slide.isPresentURL = function () {[m
|
||||||
|
var hash = window.location.hash;[m
|
||||||
|
// Present mode has /present at the end of the hash[m
|
||||||
|
[36m@@ -269,12 +296,15 @@[m [mdefine([[m
|
||||||
|
});[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[31m- Slide.setModal = function ($m, $c, $p, iframe, ph) {[m
|
||||||
|
[32m+[m[32m Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {[m
|
||||||
|
$modal = Slide.$modal = $m;[m
|
||||||
|
$content = Slide.$content = $c;[m
|
||||||
|
$pad = Slide.$pad = $p;[m
|
||||||
|
ifrw = Slide.ifrw = iframe;[m
|
||||||
|
placeholder = Slide.placeholder = ph;[m
|
||||||
|
[32m+[m[32m options = Slide.options = opt;[m
|
||||||
|
[32m+[m[32m APP = appObj;[m
|
||||||
|
[32m+[m[32m console.log(APP);[m
|
||||||
|
addEvent();[m
|
||||||
|
};[m
|
||||||
|
[m
|
||||||
|
[1mdiff --git a/www/slide/slide.less b/www/slide/slide.less[m
|
||||||
|
[1mindex 31dd1c1..3bbd52e 100644[m
|
||||||
|
[1m--- a/www/slide/slide.less[m
|
||||||
|
[1m+++ b/www/slide/slide.less[m
|
||||||
|
[36m@@ -90,7 +90,10 @@[m [mbody {[m
|
||||||
|
//align-items: center;[m
|
||||||
|
// flex-flow: column;[m
|
||||||
|
padding: 2.5%;[m
|
||||||
|
[31m- margin-top: ~"calc((100vh - 56.25vw)/2)";[m
|
||||||
|
[32m+[m[32m // margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
|
||||||
|
[32m+[m[32m margin-top: 7.228vw;[m
|
||||||
|
[32m+[m[32m margin-bottom: 7.228vw;[m
|
||||||
|
[32m+[m[32m // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";[m
|
||||||
|
border-top: 1px solid black;[m
|
||||||
|
border-bottom: 1px solid black;[m
|
||||||
|
height: 56.25vw;[m
|
||||||
|
[36m@@ -103,27 +106,14 @@[m [mbody {[m
|
||||||
|
}[m
|
||||||
|
h1 {[m
|
||||||
|
padding-top: 0;[m
|
||||||
|
[32m+[m[32m color: green;[m
|
||||||
|
}[m
|
||||||
|
[31m- .slideNumber {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- right: 5vh;[m
|
||||||
|
[31m- bottom: 5vh;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[31m- }[m
|
||||||
|
[31m- .slideDate {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- left: 5vh;[m
|
||||||
|
[31m- bottom: 5vh;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[31m- }[m
|
||||||
|
[31m- .slideTitle {[m
|
||||||
|
[31m- position: absolute;[m
|
||||||
|
[31m- top: 5vh;[m
|
||||||
|
[31m- left: 0px; right: 0px;[m
|
||||||
|
[31m- text-align: center;[m
|
||||||
|
[31m- font-size: 15px;[m
|
||||||
|
[31m- }[m
|
||||||
|
[32m+[m
|
||||||
|
}[m
|
||||||
|
[32m+[m[32m /*.slide-frame:first-child {[m
|
||||||
|
[32m+[m[32m h1 { color: yellow; }[m
|
||||||
|
[32m+[m[32m margin-top: ~"calc(((100vh - 56.25vw)/2))";[m
|
||||||
|
[32m+[m[32m }*/[m
|
||||||
|
}[m
|
||||||
|
[m
|
||||||
|
[m
|
||||||
|
[36m@@ -276,6 +266,24 @@[m [mdiv#modal #content, #print {[m
|
||||||
|
max-width: 90%;[m
|
||||||
|
max-height: 90%;[m
|
||||||
|
margin: auto;[m
|
||||||
|
[32m+[m[32m }
.slideNumber {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m right: 5vh;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m .size(1);[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m .slideDate {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m left: 5vh;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m .size(1);[m
|
||||||
|
[32m+[m[32m }[m
|
||||||
|
[32m+[m[32m .slideTitle {[m
|
||||||
|
[32m+[m[32m position: absolute;[m
|
||||||
|
[32m+[m[32m bottom: 5vh;[m
|
||||||
|
[32m+[m[32m left: 0px; right: 0px;[m
|
||||||
|
[32m+[m[32m text-align: center;[m
|
||||||
|
[32m+[m[32m .size(1);[m
|
||||||
|
}[m
|
||||||
|
}[m
|
||||||
|
}[m
|
||||||
|
warning: LF will be replaced by CRLF in www/slide/slide.js.
|
||||||
|
The file will have its original line endings in your working directory.
|
||||||
@ -1493,7 +1493,7 @@ define([
|
|||||||
return $('button.ok');
|
return $('button.ok');
|
||||||
};
|
};
|
||||||
|
|
||||||
var listenForKeys = function (yes, no) {
|
var listenForKeys = common.listenForKeys = function (yes, no) {
|
||||||
var handler = function (e) {
|
var handler = function (e) {
|
||||||
switch (e.which) {
|
switch (e.which) {
|
||||||
case 27: // cancel
|
case 27: // cancel
|
||||||
@ -1510,7 +1510,7 @@ define([
|
|||||||
return handler;
|
return handler;
|
||||||
};
|
};
|
||||||
|
|
||||||
var stopListening = function (handler) {
|
var stopListening = common.stopListening = function (handler) {
|
||||||
$(window).off('keyup', handler);
|
$(window).off('keyup', handler);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -342,7 +342,12 @@ define([
|
|||||||
'class': LAG_ELEM_CLS,
|
'class': LAG_ELEM_CLS,
|
||||||
id: uid(),
|
id: uid(),
|
||||||
});
|
});
|
||||||
return $lag[0];
|
var $a = $('<span>', {id: 'newLag'});
|
||||||
|
$s1 = $('<span>', {'class': 'bar1'}).appendTo($a);
|
||||||
|
$s2 = $('<span>', {'class': 'bar2'}).appendTo($a);
|
||||||
|
$s3 = $('<span>', {'class': 'bar3'}).appendTo($a);
|
||||||
|
$s4 = $('<span>', {'class': 'bar4'}).appendTo($a);
|
||||||
|
return $a[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
var checkLag = function (getLag, lagElement) {
|
var checkLag = function (getLag, lagElement) {
|
||||||
@ -354,29 +359,35 @@ define([
|
|||||||
'class': 'lag'
|
'class': 'lag'
|
||||||
});
|
});
|
||||||
var title;
|
var title;
|
||||||
|
var $lag = $(lagElement);
|
||||||
|
$lag.attr('class', '');
|
||||||
if (lag) {
|
if (lag) {
|
||||||
lagErrors = 0;
|
|
||||||
firstConnection = false;
|
firstConnection = false;
|
||||||
title = Messages.lag + ' : ' + lag + ' ms\n';
|
title = Messages.lag + ' : ' + lag + ' ms\n';
|
||||||
if (lag && lag.waiting || lag > 1000) {
|
if (lag > 30000) {
|
||||||
lagLight.addClass('lag-orange');
|
$lag.addClass('lag0');
|
||||||
|
title = Messages.redLight;
|
||||||
|
} else if (lag > 5000) {
|
||||||
|
$lag.addClass('lag1');
|
||||||
title += Messages.orangeLight;
|
title += Messages.orangeLight;
|
||||||
|
} else if (lag > 1000) {
|
||||||
|
$lag.addClass('lag2');
|
||||||
|
title += Messages.orangeLight;
|
||||||
|
} else if (lag > 300) {
|
||||||
|
$lag.addClass('lag3');
|
||||||
|
title += Messages.greenLight;
|
||||||
} else {
|
} else {
|
||||||
lagLight.addClass('lag-green');
|
$lag.addClass('lag4');
|
||||||
title += Messages.greenLight;
|
title += Messages.greenLight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (!firstConnection) {
|
else if (!firstConnection) {
|
||||||
// Display the red light at the 2nd failed attemp to get the lag
|
// Display the red light at the 2nd failed attemp to get the lag
|
||||||
//if (lagErrors > 1) {
|
lagLight.addClass('lag-red');
|
||||||
lagLight.addClass('lag-red');
|
title = Messages.redLight;
|
||||||
title = Messages.redLight;
|
|
||||||
//}
|
|
||||||
}
|
}
|
||||||
if (title) {
|
if (title) {
|
||||||
lagLight.attr('title', title);
|
$lag.attr('title', title);
|
||||||
$(lagElement).html('');
|
|
||||||
$(lagElement).append(lagLight);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -122,14 +122,14 @@ span.fa-folder-open {
|
|||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
#tree li > span.element-row:not(.selected):hover {
|
#tree li > span.element-row:not(.selected):not(.active):hover {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
#tree span.element {
|
#tree span.element {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#tree .active {
|
#tree .active:not(.selected) {
|
||||||
text-decoration: underline;
|
background-color: #c8c8c8;
|
||||||
}
|
}
|
||||||
#tree .category2 {
|
#tree .category2 {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
|
|||||||
@ -156,7 +156,7 @@ span {
|
|||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
& > span.element-row:not(.selected):hover {
|
& > span.element-row:not(.selected):not(.active):hover {
|
||||||
background-color: @drive-hover;
|
background-color: @drive-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -164,7 +164,9 @@ span {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
text-decoration: underline;
|
&:not(.selected) {
|
||||||
|
background-color: darken(@drive-hover, 15%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.category2 {
|
.category2 {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
|
|||||||
@ -438,7 +438,7 @@ define([
|
|||||||
var updateContextButton = function () {
|
var updateContextButton = function () {
|
||||||
var $li = $content.find('.selected');
|
var $li = $content.find('.selected');
|
||||||
if ($li.length === 0) {
|
if ($li.length === 0) {
|
||||||
$li = findDataHolder($tree.find('.element.active'));
|
$li = findDataHolder($tree.find('.active'));
|
||||||
}
|
}
|
||||||
var $button = $driveToolbar.find('#contextButton');
|
var $button = $driveToolbar.find('#contextButton');
|
||||||
if ($button.length) { // mobile
|
if ($button.length) { // mobile
|
||||||
@ -1538,7 +1538,7 @@ define([
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
var $li = $content.find('.selected');
|
var $li = $content.find('.selected');
|
||||||
if ($li.length !== 1) {
|
if ($li.length !== 1) {
|
||||||
$li = findDataHolder($tree.find('.element.active'));
|
$li = findDataHolder($tree.find('.active'));
|
||||||
}
|
}
|
||||||
// Close if already opened
|
// Close if already opened
|
||||||
if ($iframe.find('.contextMenu:visible').length) {
|
if ($iframe.find('.contextMenu:visible').length) {
|
||||||
@ -1657,7 +1657,7 @@ define([
|
|||||||
}
|
}
|
||||||
$elementRow.data('path', path);
|
$elementRow.data('path', path);
|
||||||
addDragAndDropHandlers($elementRow, path, true, droppable);
|
addDragAndDropHandlers($elementRow, path, true, droppable);
|
||||||
if (active) { $name.addClass('active'); }
|
if (active) { $elementRow.addClass('active'); }
|
||||||
return $element;
|
return $element;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -137,8 +137,15 @@ define([
|
|||||||
var $modal = $pad.contents().find('#modal');
|
var $modal = $pad.contents().find('#modal');
|
||||||
var $content = $pad.contents().find('#content');
|
var $content = $pad.contents().find('#content');
|
||||||
var $print = $pad.contents().find('#print');
|
var $print = $pad.contents().find('#print');
|
||||||
|
var slideOptions = {};
|
||||||
|
|
||||||
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) {
|
var enterPresentationMode = function (shouldLog) {
|
||||||
Slide.show(true, editor.getValue());
|
Slide.show(true, editor.getValue());
|
||||||
@ -147,6 +154,7 @@ define([
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
var leavePresentationMode = function () {
|
var leavePresentationMode = function () {
|
||||||
|
setStyleState(false);
|
||||||
Slide.show(false);
|
Slide.show(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -218,7 +226,8 @@ define([
|
|||||||
content: textValue,
|
content: textValue,
|
||||||
metadata: {
|
metadata: {
|
||||||
users: userData,
|
users: userData,
|
||||||
defaultTitle: defaultName
|
defaultTitle: defaultName,
|
||||||
|
slideOptions: slideOptions
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (!initializing) {
|
if (!initializing) {
|
||||||
@ -359,6 +368,7 @@ define([
|
|||||||
setTabTitle();
|
setTabTitle();
|
||||||
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
|
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
|
||||||
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
|
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
|
||||||
|
if (slideOptions.title) { Slide.updateOptions(); }
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -366,6 +376,7 @@ define([
|
|||||||
if (text) {
|
if (text) {
|
||||||
textColor = text;
|
textColor = text;
|
||||||
$modal.css('color', text);
|
$modal.css('color', text);
|
||||||
|
$modal.css('border-color', text);
|
||||||
$pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
|
$pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
|
||||||
}
|
}
|
||||||
if (back) {
|
if (back) {
|
||||||
@ -376,6 +387,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) {
|
var updateDefaultTitle = function (defaultTitle) {
|
||||||
defaultName = defaultTitle;
|
defaultName = defaultTitle;
|
||||||
$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
|
$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
|
||||||
@ -398,6 +417,7 @@ define([
|
|||||||
updateTitle(json.metadata.title || defaultName);
|
updateTitle(json.metadata.title || defaultName);
|
||||||
titleUpdated = true;
|
titleUpdated = true;
|
||||||
}
|
}
|
||||||
|
updateOptions(json.metadata.slideOptions);
|
||||||
updateColors(json.metadata.color, json.metadata.backColor);
|
updateColors(json.metadata.color, json.metadata.backColor);
|
||||||
}
|
}
|
||||||
if (!titleUpdated) {
|
if (!titleUpdated) {
|
||||||
@ -413,12 +433,14 @@ define([
|
|||||||
};
|
};
|
||||||
|
|
||||||
var createPrintDialog = function () {
|
var createPrintDialog = function () {
|
||||||
var printOptions = {
|
var slideOptionsTmp = {
|
||||||
title: true,
|
title: false,
|
||||||
slide: true,
|
slide: false,
|
||||||
date: true
|
date: false,
|
||||||
|
style: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$.extend(slideOptionsTmp, slideOptions);
|
||||||
var $container = $('<div class="alertify">');
|
var $container = $('<div class="alertify">');
|
||||||
var $container2 = $('<div class="dialog">').appendTo($container);
|
var $container2 = $('<div class="dialog">').appendTo($container);
|
||||||
var $div = $('<div id="printOptions">').appendTo($container2);
|
var $div = $('<div id="printOptions">').appendTo($container2);
|
||||||
@ -429,21 +451,21 @@ define([
|
|||||||
$('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
|
$('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
|
||||||
var c = this.checked;
|
var c = this.checked;
|
||||||
console.log(c);
|
console.log(c);
|
||||||
printOptions.slide = c;
|
slideOptionsTmp.slide = c;
|
||||||
}).appendTo($p).css('width', 'auto');
|
}).appendTo($p).css('width', 'auto');
|
||||||
$('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
|
$('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
|
||||||
$p.append($('<br>'));
|
$p.append($('<br>'));
|
||||||
// Date
|
// Date
|
||||||
$('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {
|
$('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {
|
||||||
var c = this.checked;
|
var c = this.checked;
|
||||||
printOptions.date = c;
|
slideOptionsTmp.date = c;
|
||||||
}).appendTo($p).css('width', 'auto');
|
}).appendTo($p).css('width', 'auto');
|
||||||
$('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);
|
$('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);
|
||||||
$p.append($('<br>'));
|
$p.append($('<br>'));
|
||||||
// Title
|
// Title
|
||||||
$('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {
|
$('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {
|
||||||
var c = this.checked;
|
var c = this.checked;
|
||||||
printOptions.title = c;
|
slideOptionsTmp.title = c;
|
||||||
}).appendTo($p).css('width', 'auto');
|
}).appendTo($p).css('width', 'auto');
|
||||||
$('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
|
$('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
|
||||||
$p.append($('<br>'));
|
$p.append($('<br>'));
|
||||||
@ -451,37 +473,29 @@ define([
|
|||||||
$('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
|
$('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
|
||||||
$p.append($('<br>'));
|
$p.append($('<br>'));
|
||||||
var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
|
var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
|
||||||
|
$textarea.val(slideOptionsTmp.style);
|
||||||
|
window.setTimeout(function () { $textarea.focus(); }, 0);
|
||||||
|
|
||||||
var fixCSS = function (css) {
|
var h;
|
||||||
var append = '.cp #print ';
|
|
||||||
return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
|
|
||||||
};
|
|
||||||
|
|
||||||
var todo = function () {
|
var todo = function () {
|
||||||
var $style = $('<style>').text(fixCSS($textarea.val()));
|
$.extend(slideOptions, slideOptionsTmp);
|
||||||
$print.prepend($style);
|
slideOptions.style = $textarea.val();
|
||||||
var length = $print.find('.slide-frame').length;
|
onLocal();
|
||||||
$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();
|
$container.remove();
|
||||||
|
Cryptpad.stopListening(h);
|
||||||
|
};
|
||||||
|
var todoCancel = function () {
|
||||||
|
$container.remove();
|
||||||
|
Cryptpad.stopListening(h);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
h = Cryptpad.listenForKeys(todo, todoCancel);
|
||||||
|
|
||||||
var $nav = $('<nav>').appendTo($div);
|
var $nav = $('<nav>').appendTo($div);
|
||||||
var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
|
var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancelButton).appendTo($nav).click(todoCancel);
|
||||||
var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
|
var $ok = $('<button>', {'class': 'ok'}).text(Messages.slideOptionsButton).appendTo($nav).click(todo);
|
||||||
$container.remove();
|
|
||||||
});
|
|
||||||
return $container;
|
return $container;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -545,10 +559,24 @@ define([
|
|||||||
'class': 'rightside-button fa fa-print',
|
'class': 'rightside-button fa fa-print',
|
||||||
style: 'font-size: 17px'
|
style: 'font-size: 17px'
|
||||||
}).click(function () {
|
}).click(function () {
|
||||||
|
Slide.update(editor.getValue(), true);
|
||||||
$print.html($content.html());
|
$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 () {
|
||||||
$('body').append(createPrintDialog());
|
$('body').append(createPrintDialog());
|
||||||
});
|
});
|
||||||
$rightside.append($printButton);
|
$rightside.append($slideOptions);
|
||||||
|
|
||||||
var $present = Cryptpad.createButton('present', true)
|
var $present = Cryptpad.createButton('present', true)
|
||||||
.click(function () {
|
.click(function () {
|
||||||
@ -715,8 +743,6 @@ define([
|
|||||||
updateMetadata(userDoc);
|
updateMetadata(userDoc);
|
||||||
|
|
||||||
editor.setValue(newDoc || initialState);
|
editor.setValue(newDoc || initialState);
|
||||||
Slide.update(newDoc, true);
|
|
||||||
Slide.draw();
|
|
||||||
|
|
||||||
if (Cryptpad.initialName && APP.title === defaultName) {
|
if (Cryptpad.initialName && APP.title === defaultName) {
|
||||||
updateTitle(Cryptpad.initialName);
|
updateTitle(Cryptpad.initialName);
|
||||||
|
|||||||
@ -44,7 +44,7 @@ body .CodeMirror-focused .cm-matchhighlight {
|
|||||||
@media print {
|
@media print {
|
||||||
@page {
|
@page {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
size: auto;
|
size: landscape;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
display: block;
|
display: block;
|
||||||
@ -63,110 +63,58 @@ body .CodeMirror-focused .cm-matchhighlight {
|
|||||||
max-height: none;
|
max-height: none;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
html #print {
|
html .cp #print {
|
||||||
display: block;
|
display: block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
html #print * {
|
html .cp #print * {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#print {
|
.cp {
|
||||||
|
/* Slide position (print mode) */
|
||||||
|
/* Slide position (present mode) */
|
||||||
|
/* Slide content */
|
||||||
|
}
|
||||||
|
.cp #print {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
|
font-size: 10.125vw;
|
||||||
|
/*.slide-frame:first-child {
|
||||||
|
margin-top: ~"calc(((100vh - 56.25vw)/2))";
|
||||||
|
}*/
|
||||||
}
|
}
|
||||||
#print .slide-frame {
|
.cp #print .slide-frame {
|
||||||
display: flex !important;
|
display: block !important;
|
||||||
justify-content: center;
|
padding: 0.5em;
|
||||||
align-items: center;
|
margin: auto;
|
||||||
flex-flow: column;
|
border: 1px solid black;
|
||||||
padding: 5vh 0;
|
height: 50.625vw;
|
||||||
height: 100vh;
|
width: 90vw;
|
||||||
width: 100%;
|
|
||||||
page-break-after: always;
|
page-break-after: always;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
#print .slide-frame li {
|
.cp #print .slide-frame li {
|
||||||
min-width: 50vw;
|
min-width: 45vw;
|
||||||
}
|
}
|
||||||
#print .slide-frame h1 {
|
.cp #print .slide-frame h1 {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
#print .slide-frame .slideNumber {
|
.cp #print .slide-container {
|
||||||
position: absolute;
|
width: 90vw;
|
||||||
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;
|
|
||||||
font-size: 30px;
|
|
||||||
opacity: 0.6;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.cp.slide #modal .button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
.cp.slide #modal #button_exit {
|
|
||||||
left: 20px;
|
|
||||||
top: 20px;
|
|
||||||
z-index: 9001;
|
|
||||||
}
|
|
||||||
.cp.slide #modal #button_left {
|
|
||||||
left: 6vw;
|
|
||||||
bottom: 10vh;
|
|
||||||
}
|
|
||||||
.cp.slide #modal #button_right {
|
|
||||||
right: 6vw;
|
|
||||||
bottom: 10vh;
|
|
||||||
}
|
|
||||||
.cp.slide #modal #content h1,
|
|
||||||
.cp.slide #modal #content h2,
|
|
||||||
.cp.slide #modal #content h3,
|
|
||||||
.cp.slide #modal #content h4,
|
|
||||||
.cp.slide #modal #content h5,
|
|
||||||
.cp.slide #modal #content h6 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.cp.slide #modal.shown {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
margin: 0vh 5vw;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
.cp.slide #modal #content p,
|
.cp #print .slide-container:last-child {
|
||||||
.cp.slide #modal #content ul,
|
height: calc(100vh - 2px);
|
||||||
.cp.slide #modal #content ol {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.cp.slide #modal #content img {
|
|
||||||
position: relative;
|
|
||||||
min-width: 1%;
|
|
||||||
max-width: 90%;
|
|
||||||
max-height: 90%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
.cp div.modal,
|
.cp div.modal,
|
||||||
.cp div#modal {
|
.cp div#modal {
|
||||||
|
/* Navigation buttons */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 9001;
|
z-index: 9001;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -177,104 +125,84 @@ body .CodeMirror-focused .cm-matchhighlight {
|
|||||||
display: none;
|
display: none;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
.cp div.modal .button,
|
||||||
|
.cp div#modal .button {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 30px;
|
||||||
|
opacity: 0.6;
|
||||||
|
display: none;
|
||||||
|
z-index: 9001;
|
||||||
|
}
|
||||||
|
.cp div.modal .button:hover,
|
||||||
|
.cp div#modal .button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
.cp div.modal #button_exit,
|
||||||
|
.cp div#modal #button_exit {
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
.cp div.modal #button_left,
|
||||||
|
.cp div#modal #button_left {
|
||||||
|
left: 6vw;
|
||||||
|
bottom: 10vh;
|
||||||
|
}
|
||||||
|
.cp div.modal #button_right,
|
||||||
|
.cp div#modal #button_right {
|
||||||
|
right: 6vw;
|
||||||
|
bottom: 10vh;
|
||||||
|
}
|
||||||
|
.cp div.modal.shown,
|
||||||
|
.cp div#modal.shown {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.cp div.modal #content,
|
.cp div.modal #content,
|
||||||
.cp div#modal #content {
|
.cp div#modal #content {
|
||||||
|
transition: margin-left 1s;
|
||||||
|
font-size: 20vh;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.cp div.modal #content .slide-frame,
|
||||||
|
.cp div#modal #content .slide-frame {
|
||||||
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid white;
|
border: 1px solid;
|
||||||
|
white-space: normal;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding: 2.5vw;
|
|
||||||
/* center things as much as possible
|
/* center things as much as possible
|
||||||
|
|
||||||
margin-top: 50vh;
|
margin-top: 50vh;
|
||||||
margin-bottom: 50vh;
|
margin-bottom: 50vh;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
padding: 0.5em;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 56.25vw;
|
height: 56.25vw;
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
max-width: 177.78vh;
|
max-width: 177.78vh;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
.cp div.modal #content p,
|
.cp div.modal #content .slide-container,
|
||||||
.cp div#modal #content p,
|
.cp div#modal #content .slide-container {
|
||||||
.cp div.modal #content li,
|
display: inline-block;
|
||||||
.cp div#modal #content li,
|
height: 100%;
|
||||||
.cp div.modal #content pre,
|
width: 100vw;
|
||||||
.cp div#modal #content pre,
|
|
||||||
.cp div.modal #content code,
|
|
||||||
.cp div#modal #content code {
|
|
||||||
font-size: 2.75vw;
|
|
||||||
line-height: 3.025vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h1,
|
|
||||||
.cp div#modal #content h1 {
|
|
||||||
font-size: 5vw;
|
|
||||||
line-height: 5.5vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h2,
|
|
||||||
.cp div#modal #content h2 {
|
|
||||||
font-size: 4.2vw;
|
|
||||||
line-height: 4.62vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h3,
|
|
||||||
.cp div#modal #content h3 {
|
|
||||||
font-size: 3.6vw;
|
|
||||||
line-height: 3.96vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h4,
|
|
||||||
.cp div#modal #content h4 {
|
|
||||||
font-size: 3vw;
|
|
||||||
line-height: 3.3vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h5,
|
|
||||||
.cp div#modal #content h5 {
|
|
||||||
font-size: 2.2vw;
|
|
||||||
line-height: 2.42vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h6,
|
|
||||||
.cp div#modal #content h6 {
|
|
||||||
font-size: 1.6vw;
|
|
||||||
line-height: 1.76vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content h1,
|
|
||||||
.cp div#modal #content h1,
|
|
||||||
.cp div.modal #content h2,
|
|
||||||
.cp div#modal #content h2,
|
|
||||||
.cp div.modal #content h3,
|
|
||||||
.cp div#modal #content h3,
|
|
||||||
.cp div.modal #content h4,
|
|
||||||
.cp div#modal #content h4,
|
|
||||||
.cp div.modal #content h5,
|
|
||||||
.cp div#modal #content h5,
|
|
||||||
.cp div.modal #content h6,
|
|
||||||
.cp div#modal #content h6 {
|
|
||||||
color: inherit;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.cp div.modal #content pre > code,
|
|
||||||
.cp div#modal #content pre > code {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid #333;
|
|
||||||
width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
padding-left: .25vw;
|
|
||||||
}
|
|
||||||
.cp div.modal #content ul,
|
|
||||||
.cp div#modal #content ul,
|
|
||||||
.cp div.modal #content ol,
|
|
||||||
.cp div#modal #content ol {
|
|
||||||
min-width: 50%;
|
|
||||||
max-width: 100%;
|
|
||||||
display: table;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.cp div.modal .center,
|
.cp div.modal .center,
|
||||||
.cp div#modal .center {
|
.cp div#modal .center {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -288,35 +216,128 @@ body .CodeMirror-focused .cm-matchhighlight {
|
|||||||
.cp div#modal.shown {
|
.cp div#modal.shown {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.cp div.modal table,
|
.cp div#modal #content .slide-frame,
|
||||||
.cp div#modal table {
|
.cp #print .slide-frame {
|
||||||
margin: 30px;
|
text-align: left;
|
||||||
border-collapse: collapse;
|
position: relative;
|
||||||
}
|
}
|
||||||
.cp div.modal table input,
|
.cp div#modal #content .slide-frame *,
|
||||||
.cp div#modal table input {
|
.cp #print .slide-frame * {
|
||||||
height: 100%;
|
font-size: 27.5%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame * *,
|
||||||
|
.cp #print .slide-frame * * {
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame ul ul,
|
||||||
|
.cp #print .slide-frame ul ul,
|
||||||
|
.cp div#modal #content .slide-frame ol ul,
|
||||||
|
.cp #print .slide-frame ol ul,
|
||||||
|
.cp div#modal #content .slide-frame ul ol,
|
||||||
|
.cp #print .slide-frame ul ol,
|
||||||
|
.cp div#modal #content .slide-frame ol ol,
|
||||||
|
.cp #print .slide-frame ol ol {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h1,
|
||||||
|
.cp #print .slide-frame h1 {
|
||||||
|
font-size: 50%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h2,
|
||||||
|
.cp #print .slide-frame h2 {
|
||||||
|
font-size: 42%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h3,
|
||||||
|
.cp #print .slide-frame h3 {
|
||||||
|
font-size: 36%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h4,
|
||||||
|
.cp #print .slide-frame h4 {
|
||||||
|
font-size: 30%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h5,
|
||||||
|
.cp #print .slide-frame h5 {
|
||||||
|
font-size: 22%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h6,
|
||||||
|
.cp #print .slide-frame h6 {
|
||||||
|
font-size: 16%;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame h1,
|
||||||
|
.cp #print .slide-frame h1,
|
||||||
|
.cp div#modal #content .slide-frame h2,
|
||||||
|
.cp #print .slide-frame h2,
|
||||||
|
.cp div#modal #content .slide-frame h3,
|
||||||
|
.cp #print .slide-frame h3,
|
||||||
|
.cp div#modal #content .slide-frame h4,
|
||||||
|
.cp #print .slide-frame h4,
|
||||||
|
.cp div#modal #content .slide-frame h5,
|
||||||
|
.cp #print .slide-frame h5,
|
||||||
|
.cp div#modal #content .slide-frame h6,
|
||||||
|
.cp #print .slide-frame h6 {
|
||||||
|
color: inherit;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 0;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
.cp div#modal #content .slide-frame pre > code,
|
||||||
|
.cp #print .slide-frame pre > code {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #333;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
border: 3px solid #fff;
|
margin: auto;
|
||||||
|
padding-left: .25vw;
|
||||||
}
|
}
|
||||||
.cp div.modal table tfoot tr td,
|
.cp div#modal #content .slide-frame ul,
|
||||||
.cp div#modal table tfoot tr td {
|
.cp #print .slide-frame ul,
|
||||||
z-index: 4000;
|
.cp div#modal #content .slide-frame ol,
|
||||||
cursor: pointer;
|
.cp #print .slide-frame ol {
|
||||||
|
min-width: 50%;
|
||||||
|
max-width: 100%;
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: 0.3em;
|
||||||
}
|
}
|
||||||
.cp div.modal #addtime,
|
.cp div#modal #content .slide-frame img,
|
||||||
.cp div#modal #addtime,
|
.cp #print .slide-frame img {
|
||||||
.cp div.modal #adddate,
|
position: relative;
|
||||||
.cp div#modal #adddate {
|
min-width: 1%;
|
||||||
color: #46E981;
|
max-width: 90%;
|
||||||
border: 1px solid #46E981;
|
max-height: 90%;
|
||||||
padding: 15px;
|
margin: auto;
|
||||||
}
|
}
|
||||||
.cp div.modal #adddate,
|
.cp div#modal #content .slide-frame .slideNumber,
|
||||||
.cp div#modal #adddate {
|
.cp #print .slide-frame .slideNumber {
|
||||||
border-top-left-radius: 5px;
|
position: absolute;
|
||||||
|
right: 5vh;
|
||||||
|
bottom: 5vh;
|
||||||
|
font-size: 10%;
|
||||||
|
line-height: 110%;
|
||||||
}
|
}
|
||||||
.cp div.modal #addtime,
|
.cp div#modal #content .slide-frame .slideDate,
|
||||||
.cp div#modal #addtime {
|
.cp #print .slide-frame .slideDate {
|
||||||
border-bottom-left-radius: 5px;
|
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%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,11 +14,13 @@ define([
|
|||||||
content: [],
|
content: [],
|
||||||
changeHandlers: [],
|
changeHandlers: [],
|
||||||
};
|
};
|
||||||
|
var APP;
|
||||||
var ifrw;
|
var ifrw;
|
||||||
var $modal;
|
var $modal;
|
||||||
var $content;
|
var $content;
|
||||||
var $pad;
|
var $pad;
|
||||||
var placeholder;
|
var placeholder;
|
||||||
|
var options;
|
||||||
var separator = '<hr data-pewpew="pezpez">';
|
var separator = '<hr data-pewpew="pezpez">';
|
||||||
var separatorReg = /<hr data\-pewpew="pezpez">/g;
|
var separatorReg = /<hr data\-pewpew="pezpez">/g;
|
||||||
var slideClass = 'slide-frame';
|
var slideClass = 'slide-frame';
|
||||||
@ -114,12 +116,29 @@ define([
|
|||||||
slice(root.children).forEach(removeListeners);
|
slice(root.children).forEach(removeListeners);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var updateFontSize = Slide.updateFontSize = function() {
|
||||||
|
// 20vh
|
||||||
|
// 20 * 16 / 9vw
|
||||||
|
if ($(window).width() > 16/9*$(window).height()) {
|
||||||
|
$content.css('font-size', '20vh');
|
||||||
|
// $print.css('font-size', '20vh');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$content.css('font-size', (20*9/16)+'vw');
|
||||||
|
// $print.css('font-size', (20*9/16)+'vw');
|
||||||
|
};
|
||||||
|
|
||||||
|
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) {
|
var draw = Slide.draw = function (i) {
|
||||||
i = i || 0;
|
i = i || 0;
|
||||||
if (typeof(Slide.content) !== 'string') { return; }
|
if (typeof(Slide.content) !== 'string') { return; }
|
||||||
|
|
||||||
var c = Slide.content;
|
var c = Slide.content;
|
||||||
var m = '<span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span><span class="'+slideClass+'">')+'</span>';
|
var m = '<span class="slide-container"><span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>';
|
||||||
|
|
||||||
var Dom = domFromHTML('<div id="content">' + m + '</div>');
|
var Dom = domFromHTML('<div id="content">' + m + '</div>');
|
||||||
removeListeners(Dom.body);
|
removeListeners(Dom.body);
|
||||||
@ -130,11 +149,33 @@ define([
|
|||||||
} else {
|
} else {
|
||||||
DD.apply($content[0], patch);
|
DD.apply($content[0], patch);
|
||||||
}
|
}
|
||||||
$content.find('.' + slideClass).hide();
|
var length = getNumberOfSlides();
|
||||||
$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
|
$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();
|
||||||
|
$content.css('margin-left', -(i*100)+'vw');
|
||||||
|
updateFontSize();
|
||||||
change(Slide.lastIndex, Slide.index);
|
change(Slide.lastIndex, Slide.index);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var updateOptions = Slide.updateOptions = function () {
|
||||||
|
draw(Slide.index);
|
||||||
|
};
|
||||||
|
|
||||||
var isPresentURL = Slide.isPresentURL = function () {
|
var isPresentURL = Slide.isPresentURL = function () {
|
||||||
var hash = window.location.hash;
|
var hash = window.location.hash;
|
||||||
// Present mode has /present at the end of the hash
|
// Present mode has /present at the end of the hash
|
||||||
@ -269,13 +310,62 @@ define([
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
Slide.setModal = function ($m, $c, $p, iframe, ph) {
|
$(window).resize(Slide.updateFontSize);
|
||||||
|
|
||||||
|
// Swipe
|
||||||
|
var addSwipeEvents = function () {
|
||||||
|
var touch = {
|
||||||
|
maxTime: 2000,
|
||||||
|
minXDist: 150,
|
||||||
|
maxYDist: 100
|
||||||
|
};
|
||||||
|
|
||||||
|
var resetSwipe = function () {
|
||||||
|
touch.x = 0;
|
||||||
|
touch.y = 0;
|
||||||
|
touch.time = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
$content.on('touchstart', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
resetSwipe();
|
||||||
|
var t = e.originalEvent.changedTouches[0];
|
||||||
|
touch.x = t.pageX;
|
||||||
|
touch.y = t.pageY;
|
||||||
|
touch.time = new Date().getTime();
|
||||||
|
});
|
||||||
|
|
||||||
|
$content.on('touchend', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var t = e.originalEvent.changedTouches[0];
|
||||||
|
var xDist = t.pageX - touch.x;
|
||||||
|
var yDist = t.pageY - touch.y;
|
||||||
|
var time = new Date().getTime() - touch.time;
|
||||||
|
if (time <= touch.maxTime && Math.abs(xDist) >= touch.minXDist && Math.abs(yDist) <= touch.maxYDist) {
|
||||||
|
if (xDist < 0) {
|
||||||
|
Slide.right();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Slide.left();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$content.on('touchmove', function (e){
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
|
||||||
$modal = Slide.$modal = $m;
|
$modal = Slide.$modal = $m;
|
||||||
$content = Slide.$content = $c;
|
$content = Slide.$content = $c;
|
||||||
$pad = Slide.$pad = $p;
|
$pad = Slide.$pad = $p;
|
||||||
ifrw = Slide.ifrw = iframe;
|
ifrw = Slide.ifrw = iframe;
|
||||||
placeholder = Slide.placeholder = ph;
|
placeholder = Slide.placeholder = ph;
|
||||||
|
options = Slide.options = opt;
|
||||||
|
APP = appObj;
|
||||||
addEvent();
|
addEvent();
|
||||||
|
addSwipeEvents();
|
||||||
};
|
};
|
||||||
|
|
||||||
return Slide;
|
return Slide;
|
||||||
|
|||||||
@ -48,7 +48,7 @@ body {
|
|||||||
@media print {
|
@media print {
|
||||||
@page {
|
@page {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
size: auto;
|
size: landscape;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
.CodeMirror, #cme_toolbox {
|
.CodeMirror, #cme_toolbox {
|
||||||
@ -66,7 +66,7 @@ body {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
#print {
|
.cp #print {
|
||||||
display: block;
|
display: block;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
* {
|
* {
|
||||||
@ -75,161 +75,125 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.cp {
|
||||||
|
|
||||||
|
/* Slide position (print mode) */
|
||||||
|
@ratio:0.9;
|
||||||
#print {
|
#print {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
|
font-size: @ratio*11.25vw;
|
||||||
.slide-frame {
|
.slide-frame {
|
||||||
display: flex !important;
|
display: block !important;
|
||||||
justify-content: center;
|
padding: 0.5em;
|
||||||
align-items: center;
|
margin: auto;
|
||||||
flex-flow: column;
|
border: 1px solid black;
|
||||||
padding: 5vh 0;
|
height: @ratio*56.25vw;
|
||||||
height: 100vh;
|
width: @ratio*100vw;
|
||||||
width: 100%;
|
|
||||||
page-break-after: always;
|
page-break-after: always;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
li {
|
li {
|
||||||
min-width: 50vw;
|
min-width: @ratio*50vw;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
.slideNumber {
|
align-items: center;
|
||||||
position: absolute;
|
justify-content: center;
|
||||||
right: 5vh;
|
|
||||||
bottom: 5vh;
|
}
|
||||||
}
|
.slide-container {
|
||||||
.slideDate {
|
width: 90vw;
|
||||||
position: absolute;
|
height: 100vh;
|
||||||
left: 5vh;
|
margin: 0vh 5vw;
|
||||||
bottom: 5vh;
|
display: flex;
|
||||||
}
|
&:last-child {
|
||||||
.slideTitle {
|
height: ~"calc(100vh - 2px)";
|
||||||
position: absolute;
|
|
||||||
top: 5vh;
|
|
||||||
left: 0px; right: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/*.slide-frame:first-child {
|
||||||
|
margin-top: ~"calc(((100vh - 56.25vw)/2))";
|
||||||
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.cp {
|
|
||||||
|
|
||||||
&.slide {
|
|
||||||
#modal {
|
|
||||||
.button {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 30px;
|
|
||||||
opacity: 0.6;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
#button_exit {
|
|
||||||
left: 20px;
|
|
||||||
top: 20px;
|
|
||||||
z-index: 9001;
|
|
||||||
}
|
|
||||||
#button_left {
|
|
||||||
left: 6vw;
|
|
||||||
bottom: 10vh;
|
|
||||||
}
|
|
||||||
#button_right {
|
|
||||||
right: 6vw;
|
|
||||||
bottom: 10vh;
|
|
||||||
}
|
|
||||||
#content {
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
&.shown {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#modal #content {
|
|
||||||
p, ul, ol { font-size: 26px; }
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: relative;
|
|
||||||
min-width: 1%;
|
|
||||||
max-width: 90%;
|
|
||||||
max-height: 90%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/* Slide position (present mode) */
|
||||||
div.modal, div#modal {
|
div.modal, div#modal {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
#content {
|
/* Navigation buttons */
|
||||||
box-sizing: border-box;
|
.button {
|
||||||
border: 1px solid white;
|
|
||||||
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: 2.5vw;
|
|
||||||
|
|
||||||
/* center things as much as possible
|
|
||||||
|
|
||||||
margin-top: 50vh;
|
|
||||||
margin-bottom: 50vh;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
width: 100vw;
|
|
||||||
height: 56.25vw; // height:width ratio = 9/16 = .5625
|
|
||||||
max-height: 100vh;
|
|
||||||
max-width: 177.78vh; // 16/9 = 1.778
|
|
||||||
margin: auto;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;bottom:0; // vertical center
|
cursor: pointer;
|
||||||
left:0;right:0; // horizontal center
|
font-size: 30px;
|
||||||
|
opacity: 0.6;
|
||||||
|
display: none;
|
||||||
|
z-index: 9001;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
#button_exit {
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
#button_left {
|
||||||
|
left: 6vw;
|
||||||
|
bottom: 10vh;
|
||||||
|
}
|
||||||
|
#button_right {
|
||||||
|
right: 6vw;
|
||||||
|
bottom: 10vh;
|
||||||
|
}
|
||||||
|
&.shown {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
transition: margin-left 1s;
|
||||||
|
font-size: 20vh;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
.slide-frame {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid;
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
p, li, pre, code {
|
vertical-align: middle;
|
||||||
.size(2.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { .size(5); }
|
/* center things as much as possible
|
||||||
h2 { .size(4.2); }
|
|
||||||
h3 { .size(3.6); }
|
|
||||||
h4 { .size (3); }
|
|
||||||
h5 { .size(2.2); }
|
|
||||||
h6 { .size(1.6); }
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
margin-top: 50vh;
|
||||||
color: inherit;
|
margin-bottom: 50vh;
|
||||||
text-align: center;
|
transform: translateY(-50%);
|
||||||
}
|
|
||||||
|
|
||||||
pre > code {
|
*/
|
||||||
display: block;
|
|
||||||
position: relative;
|
padding: 0.5em;
|
||||||
border: 1px solid #333;
|
width: 100vw;
|
||||||
width: 90%;
|
height: 56.25vw; // height:width ratio = 9/16 = .5625
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 177.78vh; // 16/9 = 1.778
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-left: .25vw;
|
|
||||||
}
|
}
|
||||||
|
.slide-container {
|
||||||
ul, ol {
|
display: inline-block;
|
||||||
min-width: 50%;
|
height: 100%; width: 100vw;
|
||||||
max-width: 100%;
|
text-align: center;
|
||||||
display: table;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -260,55 +224,83 @@ div.modal, div#modal {
|
|||||||
&.shown {
|
&.shown {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
/* Slide content */
|
||||||
margin: 30px;
|
div#modal #content, #print {
|
||||||
|
.slide-frame {
|
||||||
border-collapse: collapse;
|
* {
|
||||||
tr {
|
.size(2.75);
|
||||||
td {
|
* {
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
ul, ol {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
h1 { .size(5); }
|
||||||
height: 100%;
|
h2 { .size(4.2); }
|
||||||
|
h3 { .size(3.6); }
|
||||||
|
h4 { .size (3); }
|
||||||
|
h5 { .size(2.2); }
|
||||||
|
h6 { .size(1.6); }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: inherit;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 0;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #333;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
border: 3px solid @base;
|
margin: auto;
|
||||||
|
padding-left: .25vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
ul, ol {
|
||||||
tr {
|
min-width: 50%;
|
||||||
th {
|
max-width: 100%;
|
||||||
span.remove {
|
display: table;
|
||||||
}
|
margin: 0 auto;
|
||||||
}
|
padding-left: 0.3em;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
tbody {
|
// p, ul, ol { padding-left: 10%; }
|
||||||
tr {
|
|
||||||
td {
|
|
||||||
|
|
||||||
}
|
img {
|
||||||
}
|
position: relative;
|
||||||
|
min-width: 1%;
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
.slideNumber {
|
||||||
|
position: absolute;
|
||||||
|
right: 5vh;
|
||||||
|
bottom: 5vh;
|
||||||
|
.size(1);
|
||||||
}
|
}
|
||||||
tfoot {
|
.slideDate {
|
||||||
tr {
|
position: absolute;
|
||||||
td {
|
left: 5vh;
|
||||||
z-index: 4000;
|
bottom: 5vh;
|
||||||
cursor: pointer;
|
.size(1);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.slideTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5vh;
|
||||||
|
left: 0px; right: 0px;
|
||||||
|
text-align: center;
|
||||||
|
.size(1);
|
||||||
|
}
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#addtime,
|
|
||||||
#adddate {
|
|
||||||
color: @cp-green;
|
|
||||||
border: 1px solid @cp-green;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#adddate { .top-left; }
|
|
||||||
#addtime { .bottom-left; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user