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

Fix transitions in slides, add swipe event handlers, and fix print in firefox

Browse Source
This commit is contained in:
yflory
2017-03-20 12:47:28 +01:00
parent e139295d7e
commit cd77f50717
4 changed files with 121 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
www/slide/main.js
View File

@@ -139,18 +139,6 @@ define([
var $print = $pad.contents().find('#print'); var $print = $pad.contents().find('#print');
var slideOptions = {}; var slideOptions = {};
$( window ).resize(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');
});
Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState); Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
var setStyleState = function (state) { var setStyleState = function (state) {
@@ -388,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) {

80
www/slide/slide.css
View File

@@ -79,29 +79,39 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp #print { .cp #print {
position: relative; position: relative;
display: none; display: none;
font-size: 11.25vw; font-size: 10.125vw;
/*.slide-frame:first-child { /*.slide-frame:first-child {
margin-top: ~"calc(((100vh - 56.25vw)/2))"; margin-top: ~"calc(((100vh - 56.25vw)/2))";
}*/ }*/
} }
.cp #print .slide-frame { .cp #print .slide-frame {
display: block !important; display: block !important;
padding: 2.5%; padding: 0.5em;
margin-top: 7.228vw; margin: auto;
border-top: 1px solid black; border: 1px solid black;
border-bottom: 1px solid black; height: 50.625vw;
height: 56.25vw; width: 90vw;
width: 100vw;
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;
} }
.cp #print .slide-frame li { .cp #print .slide-frame li {
min-width: 50vw; min-width: 45vw;
} }
.cp #print .slide-frame h1 { .cp #print .slide-frame h1 {
padding-top: 0; padding-top: 0;
} }
.cp #print .slide-container {
width: 90vw;
height: 100vh;
margin: 0vh 5vw;
display: flex;
}
.cp #print .slide-container:last-child {
height: calc(100vh - 2px);
}
.cp div.modal, .cp div.modal,
.cp div#modal { .cp div#modal {
/* Navigation buttons */ /* Navigation buttons */
@@ -162,12 +172,15 @@ body .CodeMirror-focused .cm-matchhighlight {
font-size: 20vh; font-size: 20vh;
position: relative; position: relative;
height: 100%; height: 100%;
overflow: visible;
white-space: nowrap;
} }
.cp div.modal #content .slide-frame, .cp div.modal #content .slide-frame,
.cp div#modal #content .slide-frame { .cp div#modal #content .slide-frame {
display: inline-block; 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;
/* center things as much as possible /* center things as much as possible
@@ -176,7 +189,7 @@ body .CodeMirror-focused .cm-matchhighlight {
transform: translateY(-50%); transform: translateY(-50%);
*/ */
padding: 2.5%; padding: 0.5em;
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
max-height: 100vh; max-height: 100vh;
@@ -208,49 +221,13 @@ body .CodeMirror-focused .cm-matchhighlight {
text-align: left; text-align: left;
position: relative; position: relative;
} }
.cp div#modal #content .slide-frame p, .cp div#modal #content .slide-frame *,
.cp #print .slide-frame p, .cp #print .slide-frame * {
.cp div#modal #content .slide-frame li,
.cp #print .slide-frame li,
.cp div#modal #content .slide-frame pre,
.cp #print .slide-frame pre,
.cp div#modal #content .slide-frame code,
.cp #print .slide-frame code {
font-size: 27.5%; font-size: 27.5%;
line-height: 110%; line-height: 110%;
} }
.cp div#modal #content .slide-frame p p, .cp div#modal #content .slide-frame * *,
.cp #print .slide-frame p p, .cp #print .slide-frame * * {
.cp div#modal #content .slide-frame li p,
.cp #print .slide-frame li p,
.cp div#modal #content .slide-frame pre p,
.cp #print .slide-frame pre p,
.cp div#modal #content .slide-frame code p,
.cp #print .slide-frame code p,
.cp div#modal #content .slide-frame p li,
.cp #print .slide-frame p li,
.cp div#modal #content .slide-frame li li,
.cp #print .slide-frame li li,
.cp div#modal #content .slide-frame pre li,
.cp #print .slide-frame pre li,
.cp div#modal #content .slide-frame code li,
.cp #print .slide-frame code li,
.cp div#modal #content .slide-frame p pre,
.cp #print .slide-frame p pre,
.cp div#modal #content .slide-frame li pre,
.cp #print .slide-frame li pre,
.cp div#modal #content .slide-frame pre pre,
.cp #print .slide-frame pre pre,
.cp div#modal #content .slide-frame code pre,
.cp #print .slide-frame code pre,
.cp div#modal #content .slide-frame p code,
.cp #print .slide-frame p code,
.cp div#modal #content .slide-frame li code,
.cp #print .slide-frame li code,
.cp div#modal #content .slide-frame pre code,
.cp #print .slide-frame pre code,
.cp div#modal #content .slide-frame code code,
.cp #print .slide-frame code code {
font-size: 100%; font-size: 100%;
line-height: 1em; line-height: 1em;
} }
@@ -308,6 +285,8 @@ body .CodeMirror-focused .cm-matchhighlight {
.cp #print .slide-frame h6 { .cp #print .slide-frame h6 {
color: inherit; color: inherit;
text-align: center; text-align: center;
padding-top: 0;
margin-bottom: 0.5em;
} }
.cp div#modal #content .slide-frame pre > code, .cp div#modal #content .slide-frame pre > code,
.cp #print .slide-frame pre > code { .cp #print .slide-frame pre > code {
@@ -326,6 +305,7 @@ body .CodeMirror-focused .cm-matchhighlight {
max-width: 100%; max-width: 100%;
display: table; display: table;
margin: 0 auto; margin: 0 auto;
padding-left: 0.3em;
} }
.cp div#modal #content .slide-frame img, .cp div#modal #content .slide-frame img,
.cp #print .slide-frame img { .cp #print .slide-frame img {

61
www/slide/slide.js
View File

@@ -116,6 +116,18 @@ 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 fixCSS = function (css) {
var append = '.cp #print .slide-frame '; var append = '.cp #print .slide-frame ';
var append2 = '.cp div#modal #content .slide-frame '; var append2 = '.cp div#modal #content .slide-frame ';
@@ -156,6 +168,7 @@ define([
//$content.find('.' + slideClass).hide(); //$content.find('.' + slideClass).hide();
//$content.find('.' + slideClass + ':eq( ' + i + ' )').show(); //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
$content.css('margin-left', -(i*100)+'vw'); $content.css('margin-left', -(i*100)+'vw');
updateFontSize();
change(Slide.lastIndex, Slide.index); change(Slide.lastIndex, Slide.index);
}; };
@@ -297,6 +310,52 @@ define([
}); });
}; };
$(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) { 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;
@@ -305,8 +364,8 @@ define([
placeholder = Slide.placeholder = ph; placeholder = Slide.placeholder = ph;
options = Slide.options = opt; options = Slide.options = opt;
APP = appObj; APP = appObj;
console.log(APP);
addEvent(); addEvent();
addSwipeEvents();
}; };
return Slide; return Slide;

56
www/slide/slide.less
View File

@@ -80,35 +80,40 @@ body {
.cp { .cp {
/* Slide position (print mode) */ /* Slide position (print mode) */
@ratio:0.9;
#print { #print {
position: relative; position: relative;
display: none; display: none;
font-size: 11.25vw; font-size: @ratio*11.25vw;
.slide-frame { .slide-frame {
display: block !important; display: block !important;
// justify-content: center; padding: 0.5em;
//align-items: center; margin: auto;
// flex-flow: column; border: 1px solid black;
padding: 2.5%; height: @ratio*56.25vw;
// margin-top: ~"calc(((100vh - 56.25vw)/2))"; width: @ratio*100vw;
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;
width: 100vw;
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;
} }
align-items: center;
justify-content: center;
} }
.slide-container {
width: 90vw;
height: 100vh;
margin: 0vh 5vw;
display: flex;
&:last-child {
height: ~"calc(100vh - 2px)";
}
}
/*.slide-frame:first-child { /*.slide-frame:first-child {
margin-top: ~"calc(((100vh - 56.25vw)/2))"; margin-top: ~"calc(((100vh - 56.25vw)/2))";
}*/ }*/
@@ -157,18 +162,18 @@ div.modal, div#modal {
} }
#content { #content {
transition: margin-left 1s; transition: margin-left 1s;
font-size: 20vh; font-size: 20vh;
// position: absolute;
// top:0;bottom:0; // vertical center
position: relative; position: relative;
height: 100%; height: 100%;
overflow: visible;
white-space: nowrap;
.slide-frame { .slide-frame {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box; border: 1px solid;
white-space: normal;
vertical-align: middle; vertical-align: middle;
vertical-align: middle;
/* center things as much as possible /* center things as much as possible
@@ -178,7 +183,7 @@ div.modal, div#modal {
*/ */
padding: 0.5em;
width: 100vw; width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625 height: 56.25vw; // height:width ratio = 9/16 = .5625
max-height: 100vh; max-height: 100vh;
@@ -186,10 +191,6 @@ div.modal, div#modal {
margin: auto; margin: auto;
} }
.slide-container { .slide-container {
.slide-container {
// position: absolute;
// top:0;
// bottom:0; // vertical center
display: inline-block; display: inline-block;
height: 100%; width: 100vw; height: 100%; width: 100vw;
text-align: center; text-align: center;
@@ -228,9 +229,9 @@ div.modal, div#modal {
/* Slide content */ /* Slide content */
div#modal #content, #print { div#modal #content, #print {
.slide-frame { .slide-frame {
.slide-frame { * {
.size(2.75); .size(2.75);
.size(2.75); * {
font-size: 100%; font-size: 100%;
line-height: 1em; line-height: 1em;
} }
@@ -251,6 +252,8 @@ div#modal #content, #print {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: inherit; color: inherit;
text-align: center; text-align: center;
padding-top: 0;
margin-bottom: 0.5em;
} }
pre > code { pre > code {
@@ -267,6 +270,7 @@ div#modal #content, #print {
max-width: 100%; max-width: 100%;
display: table; display: table;
margin: 0 auto; margin: 0 auto;
padding-left: 0.3em;
} }
// p, ul, ol { padding-left: 10%; } // p, ul, ol { padding-left: 10%; }