diff options
| -rw-r--r-- | public/css/extra.css | 2 | ||||
| -rw-r--r-- | public/css/slide-preview.css | 54 | ||||
| -rw-r--r-- | public/js/index.js | 45 | ||||
| -rw-r--r-- | public/views/foot.ejs | 3 | ||||
| -rw-r--r-- | public/views/head.ejs | 1 |
5 files changed, 92 insertions, 13 deletions
diff --git a/public/css/extra.css b/public/css/extra.css index 3ed7caa8..8e137975 100644 --- a/public/css/extra.css +++ b/public/css/extra.css @@ -81,6 +81,8 @@ } .ui-infobar { + position: relative; + z-index: 2; max-width: 758px; margin-top: 25px; margin-bottom: -25px; diff --git a/public/css/slide-preview.css b/public/css/slide-preview.css new file mode 100644 index 00000000..e1969ec9 --- /dev/null +++ b/public/css/slide-preview.css @@ -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; +} diff --git a/public/js/index.js b/public/js/index.js index 5251541c..6a1c6e76 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -2914,18 +2914,39 @@ function updateViewInner() { var lastMeta = md.meta; md.meta = {}; var rendered = md.render(value); - // only render again when meta changed - if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) { - parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix')); - rendered = md.render(value); - } - // prevent XSS - rendered = preventXSS(rendered); - var result = postProcess(rendered).children().toArray(); - partialUpdate(result, lastResult, ui.area.markdown.children().toArray()); - if (result && lastResult && result.length != lastResult.length) - updateDataAttrs(result, ui.area.markdown.children().toArray()); - lastResult = $(result).clone(); + 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 + if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) { + parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix')); + rendered = md.render(value); + } + // prevent XSS + rendered = preventXSS(rendered); + var result = postProcess(rendered).children().toArray(); + partialUpdate(result, lastResult, ui.area.markdown.children().toArray()); + if (result && lastResult && result.length != lastResult.length) + updateDataAttrs(result, ui.area.markdown.children().toArray()); + lastResult = $(result).clone(); + } finishView(ui.area.markdown); autoLinkify(ui.area.markdown); deduplicatedHeaderId(ui.area.markdown); diff --git a/public/views/foot.ejs b/public/views/foot.ejs index 67018c21..474a0746 100644 --- a/public/views/foot.ejs +++ b/public/views/foot.ejs @@ -77,4 +77,5 @@ <script src="<%- url %>/js/render.js" defer></script> <script src="<%- url %>/js/history.js" defer></script> <script src="<%- url %>/js/index.js" defer></script> -<script src="<%- url %>/js/syncscroll.js" defer></script>
\ No newline at end of file +<script src="<%- url %>/js/syncscroll.js" defer></script> +<script src="<%- url %>/js/reveal-markdown.js" defer></script>
\ No newline at end of file diff --git a/public/views/head.ejs b/public/views/head.ejs index 70f6455d..e4dfb570 100644 --- a/public/views/head.ejs +++ b/public/views/head.ejs @@ -38,6 +38,7 @@ <link rel="stylesheet" href="<%- url %>/css/markdown.css"> <link rel="stylesheet" href="<%- url %>/css/index.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"> <!-- 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:// --> |