infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

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

Browse Source
pull/1/head
yflory 8 years ago
parent e139295d7e
commit cd77f50717
4 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File

13
www/slide/main.js
Unescape Escape View File

@ -139,18 +139,6 @@ define([
var $print = $pad.contents().find('#print');
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);
var setStyleState = function (state) {
@ -388,6 +376,7 @@ define([
if (text) {
textColor = text;
$modal.css('color', text);
$modal.css('border-color', text);
$pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
}
if (back) {

80
www/slide/slide.css
Unescape Escape View File

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

61
www/slide/slide.js
Unescape Escape View File

@ -116,6 +116,18 @@ define([
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 ';
@ -156,6 +168,7 @@ define([
//$content.find('.' + slideClass).hide();
//$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
$content.css('margin-left', -(i*100)+'vw');
updateFontSize();
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) {
$modal = Slide.$modal = $m;
$content = Slide.$content = $c;
@ -305,8 +364,8 @@ define([
placeholder = Slide.placeholder = ph;
options = Slide.options = opt;
APP = appObj;
console.log(APP);
addEvent();
addSwipeEvents();
};
return Slide;

56
www/slide/slide.less
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save