mirror of https://github.com/xwiki-labs/cryptpad
Fix transitions in slides, add swipe event handlers, and fix print in firefox
This commit is contained in:
yflory
parent
e139295d7e
commit
cd77f50717
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue