mirror of https://github.com/status-im/codimd.git
Added support of export to HTML, and changed the navbar menu for consistency
This commit is contained in:
Wu Cheng-Han
parent
60414febee
commit
5f82df7eb2
|
|
@ -0,0 +1 @@
|
|||
cleancss -o html.min.css github-extract.css markdown.css extra.css site.css
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -212,8 +212,70 @@ function postProcess(code) {
|
|||
result.find('a:not([target])').attr('target', '_blank');
|
||||
return result;
|
||||
}
|
||||
|
||||
//extract markdown body to html and compile to template
|
||||
function exportToHTML(view) {
|
||||
var title = renderTitle(ui.area.markdown);
|
||||
var filename = renderFilename(ui.area.markdown) + '.html';
|
||||
var src = view.clone();
|
||||
var eles = src.find('*');
|
||||
//remove syncscroll parts
|
||||
eles.removeClass('part');
|
||||
src.find('*[class=""]').removeAttr('class');
|
||||
eles.removeAttr('data-startline data-endline');
|
||||
eles.find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
|
||||
//remove gist content
|
||||
src.find("code[data-gist-id]").children().remove();
|
||||
//disable todo list
|
||||
src.find("input.task-list-item-checkbox").attr('disabled', '');
|
||||
//replace emoji image path
|
||||
src.find("img.emoji").each(function (key, value) {
|
||||
var name = $(value).attr('alt');
|
||||
name = name.substr(1);
|
||||
name = name.slice(0, name.length - 1);
|
||||
$(value).attr('src', 'https://www.tortue.me/emoji/' + name + '.png');
|
||||
});
|
||||
//replace video to iframe
|
||||
src.find("div[videoid]").each(function (key, value) {
|
||||
var id = $(value).attr('videoid');
|
||||
var style = $(value).attr('style');
|
||||
var url = null;
|
||||
if ($(value).hasClass('youtube')) {
|
||||
url = 'https://www.youtube.com/embed/';
|
||||
} else if ($(value).hasClass('vimeo')) {
|
||||
url = 'https://player.vimeo.com/video/';
|
||||
}
|
||||
if (url) {
|
||||
var iframe = $('<iframe frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
|
||||
iframe.attr('src', url + id);
|
||||
iframe.attr('style', style);
|
||||
$(value).html(iframe);
|
||||
}
|
||||
});
|
||||
//generate toc
|
||||
var toc = $('#toc').clone();
|
||||
toc.find('*').removeClass('active');
|
||||
var tocAffix = $('#toc-affix').clone();
|
||||
tocAffix.find('*').removeClass('active');
|
||||
//generate html via template
|
||||
$.get('/css/html.min.css', function (css) {
|
||||
$.get('/views/html.hbs', function (data) {
|
||||
var template = Handlebars.compile(data);
|
||||
var context = {
|
||||
title: title,
|
||||
css: css,
|
||||
html: src[0].outerHTML,
|
||||
toc: toc.html(),
|
||||
'toc-affix': tocAffix.html()
|
||||
};
|
||||
var html = template(context);
|
||||
// console.log(html);
|
||||
var blob = new Blob([html], {
|
||||
type: "text/html;charset=utf-8"
|
||||
});
|
||||
saveAs(blob, filename);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//jQuery sortByDepth
|
||||
|
|
|
|||
|
|
@ -285,9 +285,10 @@ var ui = {
|
|||
new: $(".ui-new"),
|
||||
publish: $(".ui-publish"),
|
||||
download: {
|
||||
markdown: $(".ui-download-markdown")
|
||||
markdown: $(".ui-download-markdown"),
|
||||
html: $(".ui-download-html")
|
||||
},
|
||||
save: {
|
||||
export: {
|
||||
dropbox: $(".ui-save-dropbox")
|
||||
},
|
||||
import: {
|
||||
|
|
@ -801,8 +802,12 @@ ui.toolbar.download.markdown.click(function () {
|
|||
});
|
||||
saveAs(blob, filename);
|
||||
});
|
||||
//save to dropbox
|
||||
ui.toolbar.save.dropbox.click(function () {
|
||||
//html
|
||||
ui.toolbar.download.html.click(function () {
|
||||
exportToHTML(ui.area.markdown);
|
||||
});
|
||||
//export to dropbox
|
||||
ui.toolbar.export.dropbox.click(function () {
|
||||
var filename = renderFilename(ui.area.markdown) + '.md';
|
||||
var options = {
|
||||
files: [
|
||||
|
|
|
|||
|
|
@ -27,20 +27,22 @@
|
|||
<li role="presentation"><a role="menuitem" class="ui-publish" tabindex="-1" href="#" target="_blank"><i class="fa fa-print fa-fw"></i> Publish</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Save</li>
|
||||
<li class="dropdown-header">Export</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Download</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Import</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
|
||||
</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Download</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
|
||||
</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="https://www.facebook.com/messages/866415986748945" class="ui-feedback" title="Feedback" target="_blank"><i class="fa fa-bullhorn fa-fw"></i> Feedback</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -94,17 +96,21 @@
|
|||
Menu <i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="menu">
|
||||
<li class="dropdown-header">Save</li>
|
||||
<li class="dropdown-header">Export</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
|
||||
</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Import</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
|
||||
</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Download</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
|
||||
</li>
|
||||
<li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>
|
||||
{{title}}
|
||||
</title>
|
||||
<link rel="icon" type="image/png" href="https://hackmd.io/favicon.png">
|
||||
<link rel="apple-touch-icon" href="https://hackmd.io/apple-touch-icon.png">
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.8.0/styles/github-gist.min.css">
|
||||
<style>
|
||||
{{{css}}}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{{html}}}
|
||||
<div class="ui-toc dropup unselectable hidden-print" style="display:none;">
|
||||
<div class="pull-right dropdown">
|
||||
<a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul id="toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
|
||||
{{{toc}}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;">
|
||||
{{{toc-affix}}}
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" defer></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.2/gist-embed.min.js" defer></script>
|
||||
<script>
|
||||
var markdown = $(".markdown-body");
|
||||
//smooth all hash trigger scrolling
|
||||
function smoothHashScroll() {
|
||||
var hashElements = $("a[href^='#']").toArray();
|
||||
for (var i = 0; i < hashElements.length; i++) {
|
||||
var element = hashElements[i];
|
||||
var $element = $(element);
|
||||
var hash = element.hash;
|
||||
if (hash) {
|
||||
$element.on('click', function (e) {
|
||||
// store hash
|
||||
var hash = this.hash;
|
||||
if ($(hash).length <= 0) return;
|
||||
// prevent default anchor click behavior
|
||||
e.preventDefault();
|
||||
// animate
|
||||
$('body, html').stop(true, true).animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 100, "linear", function () {
|
||||
// when done, add hash to url
|
||||
// (default click behaviour)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
smoothHashScroll();
|
||||
var toc = $('.ui-toc');
|
||||
var tocAffix = $('.ui-affix-toc');
|
||||
var tocDropdown = $('.ui-toc-dropdown');
|
||||
//toc
|
||||
tocDropdown.click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
var enoughForAffixToc = true;
|
||||
|
||||
function generateScrollspy() {
|
||||
$(document.body).scrollspy({
|
||||
target: ''
|
||||
});
|
||||
$(document.body).scrollspy('refresh');
|
||||
if (enoughForAffixToc) {
|
||||
toc.hide();
|
||||
tocAffix.show();
|
||||
} else {
|
||||
tocAffix.hide();
|
||||
toc.show();
|
||||
}
|
||||
$(document.body).scroll();
|
||||
}
|
||||
|
||||
function windowResize() {
|
||||
//toc right
|
||||
var paddingRight = parseFloat(markdown.css('padding-right'));
|
||||
var right = ($(window).width() - (markdown.offset().left + markdown.outerWidth() - paddingRight));
|
||||
toc.css('right', right + 'px');
|
||||
//affix toc left
|
||||
var newbool;
|
||||
var rightMargin = (markdown.parent().outerWidth() - markdown.outerWidth()) / 2;
|
||||
//for ipad or wider device
|
||||
if (rightMargin >= 133) {
|
||||
newbool = true;
|
||||
var affixLeftMargin = (tocAffix.outerWidth() - tocAffix.width()) / 2;
|
||||
var left = markdown.offset().left + markdown.outerWidth() - affixLeftMargin;
|
||||
tocAffix.css('left', left + 'px');
|
||||
} else {
|
||||
newbool = false;
|
||||
}
|
||||
if (newbool != enoughForAffixToc) {
|
||||
enoughForAffixToc = newbool;
|
||||
generateScrollspy();
|
||||
}
|
||||
}
|
||||
$(window).resize(function () {
|
||||
windowResize();
|
||||
});
|
||||
$(document).ready(function () {
|
||||
windowResize();
|
||||
generateScrollspy();
|
||||
});
|
||||
|
||||
//remove hash
|
||||
function removeHash() {
|
||||
window.location.hash = '';
|
||||
}
|
||||
|
||||
var backtotop = $('.back-to-top');
|
||||
var gotobottom = $('.go-to-bottom');
|
||||
|
||||
backtotop.click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (scrollToTop)
|
||||
scrollToTop();
|
||||
removeHash();
|
||||
});
|
||||
gotobottom.click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (scrollToBottom)
|
||||
scrollToBottom();
|
||||
removeHash();
|
||||
});
|
||||
|
||||
function scrollToTop() {
|
||||
$('body, html').stop(true, true).animate({
|
||||
scrollTop: 0
|
||||
}, 100, "linear");
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
$('body, html').stop(true, true).animate({
|
||||
scrollTop: $(document.body)[0].scrollHeight
|
||||
}, 100, "linear");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue