Update to support slide preview in both mode
This commit is contained in:
parent
0f4f270193
commit
8791447ef9
5 changed files with 91 additions and 12 deletions
|
@ -81,6 +81,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-infobar {
|
.ui-infobar {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
max-width: 758px;
|
max-width: 758px;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
margin-bottom: -25px;
|
margin-bottom: -25px;
|
||||||
|
|
54
public/css/slide-preview.css
Normal file
54
public/css/slide-preview.css
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
.markdown-body.slides {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background-color: currentColor;
|
||||||
|
box-shadow: 0 0 0 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides section[data-markdown] {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
background-color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides section[data-markdown]::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 56.23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides section[data-markdown] div:first-child {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 1em;
|
||||||
|
right: 1em;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides section[data-markdown] ul {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body.slides > section > section + section::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -1.5em;
|
||||||
|
right: 1em;
|
||||||
|
height: 1.5em;
|
||||||
|
border: 3px solid #777;
|
||||||
|
}
|
|
@ -2914,6 +2914,26 @@ function updateViewInner() {
|
||||||
var lastMeta = md.meta;
|
var lastMeta = md.meta;
|
||||||
md.meta = {};
|
md.meta = {};
|
||||||
var rendered = md.render(value);
|
var rendered = md.render(value);
|
||||||
|
if (md.meta.type && md.meta.type === 'slide') {
|
||||||
|
var slideOptions = {
|
||||||
|
separator: '^(\r\n?|\n)---(\r\n?|\n)$',
|
||||||
|
verticalSeparator: '^(\r\n?|\n)----(\r\n?|\n)$'
|
||||||
|
};
|
||||||
|
var slides = RevealMarkdown.slidify(editor.getValue(), slideOptions);
|
||||||
|
ui.area.markdown.html(slides);
|
||||||
|
RevealMarkdown.initialize();
|
||||||
|
// prevent XSS
|
||||||
|
ui.area.markdown.html(preventXSS(ui.area.markdown.html()));
|
||||||
|
ui.area.markdown.addClass('slides');
|
||||||
|
syncscroll = false;
|
||||||
|
checkSyncToggle();
|
||||||
|
} else {
|
||||||
|
if (lastMeta.type && lastMeta.type === 'slide') {
|
||||||
|
refreshView();
|
||||||
|
ui.area.markdown.removeClass('slides');
|
||||||
|
syncscroll = true;
|
||||||
|
checkSyncToggle();
|
||||||
|
}
|
||||||
// only render again when meta changed
|
// only render again when meta changed
|
||||||
if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
|
if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
|
||||||
parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix'));
|
parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix'));
|
||||||
|
@ -2926,6 +2946,7 @@ function updateViewInner() {
|
||||||
if (result && lastResult && result.length != lastResult.length)
|
if (result && lastResult && result.length != lastResult.length)
|
||||||
updateDataAttrs(result, ui.area.markdown.children().toArray());
|
updateDataAttrs(result, ui.area.markdown.children().toArray());
|
||||||
lastResult = $(result).clone();
|
lastResult = $(result).clone();
|
||||||
|
}
|
||||||
finishView(ui.area.markdown);
|
finishView(ui.area.markdown);
|
||||||
autoLinkify(ui.area.markdown);
|
autoLinkify(ui.area.markdown);
|
||||||
deduplicatedHeaderId(ui.area.markdown);
|
deduplicatedHeaderId(ui.area.markdown);
|
||||||
|
|
|
@ -78,3 +78,4 @@
|
||||||
<script src="<%- url %>/js/history.js" defer></script>
|
<script src="<%- url %>/js/history.js" defer></script>
|
||||||
<script src="<%- url %>/js/index.js" defer></script>
|
<script src="<%- url %>/js/index.js" defer></script>
|
||||||
<script src="<%- url %>/js/syncscroll.js" defer></script>
|
<script src="<%- url %>/js/syncscroll.js" defer></script>
|
||||||
|
<script src="<%- url %>/js/reveal-markdown.js" defer></script>
|
|
@ -38,6 +38,7 @@
|
||||||
<link rel="stylesheet" href="<%- url %>/css/markdown.css">
|
<link rel="stylesheet" href="<%- url %>/css/markdown.css">
|
||||||
<link rel="stylesheet" href="<%- url %>/css/index.css">
|
<link rel="stylesheet" href="<%- url %>/css/index.css">
|
||||||
<link rel="stylesheet" href="<%- url %>/css/extra.css">
|
<link rel="stylesheet" href="<%- url %>/css/extra.css">
|
||||||
|
<link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
|
||||||
<link rel="stylesheet" href="<%- url %>/css/site.css">
|
<link rel="stylesheet" href="<%- url %>/css/site.css">
|
||||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
|
|
Loading…
Reference in a new issue