summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/js/extra.js637
-rw-r--r--public/js/index.js41
2 files changed, 326 insertions, 352 deletions
diff --git a/public/js/extra.js b/public/js/extra.js
index ba61a669..f1681b2e 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -1,15 +1,17 @@
require('prismjs/themes/prism.css');
-
-var Prism = require('prismjs');
require('prismjs/components/prism-wiki');
require('prismjs/components/prism-haskell');
require('prismjs/components/prism-go');
require('prismjs/components/prism-typescript');
require('prismjs/components/prism-jsx');
-var hljs = require('highlight.js');
-var PDFObject = require('pdfobject');
-var S = require('string');
-var saveAs = require('file-saver').saveAs;
+
+import Prism from 'prismjs';
+import hljs from 'highlight.js';
+import PDFObject from 'pdfobject';
+import S from 'string';
+import { saveAs } from 'file-saver';
+
+require('./common');
require('../vendor/md-toc');
//auto update last change
@@ -21,9 +23,10 @@ window.lastchangeui = {
user: $(".ui-lastchangeuser"),
nouser: $(".ui-no-lastchangeuser")
}
-var ownerui = $(".ui-owner");
-function updateLastChange() {
+const ownerui = $(".ui-owner");
+
+export function updateLastChange() {
if (!lastchangeui) return;
if (createtime) {
if (createtime && !lastchangetime) {
@@ -31,7 +34,7 @@ function updateLastChange() {
} else {
lastchangeui.status.text('changed');
}
- var time = lastchangetime || createtime;
+ const time = lastchangetime || createtime;
lastchangeui.time.html(moment(time).fromNow());
lastchangeui.time.attr('title', moment(time).format('llll'));
}
@@ -40,13 +43,14 @@ setInterval(updateLastChange, 60000);
window.lastchangeuser = null;
window.lastchangeuserprofile = null;
-function updateLastChangeUser() {
+
+export function updateLastChangeUser() {
if (lastchangeui) {
if (lastchangeuser && lastchangeuserprofile) {
- var icon = lastchangeui.user.children('i');
+ const icon = lastchangeui.user.children('i');
icon.attr('title', lastchangeuserprofile.name).tooltip('fixTitle');
if (lastchangeuserprofile.photo)
- icon.attr('style', 'background-image:url(' + lastchangeuserprofile.photo + ')');
+ icon.attr('style', `background-image:url(${lastchangeuserprofile.photo})`);
lastchangeui.user.show();
lastchangeui.nouser.hide();
} else {
@@ -58,12 +62,13 @@ function updateLastChangeUser() {
window.owner = null;
window.ownerprofile = null;
-function updateOwner() {
+
+export function updateOwner() {
if (ownerui) {
if (owner && ownerprofile && owner !== lastchangeuser) {
- var icon = ownerui.children('i');
+ const icon = ownerui.children('i');
icon.attr('title', ownerprofile.name).tooltip('fixTitle');
- var styleString = 'background-image:url(' + ownerprofile.photo + ')';
+ const styleString = `background-image:url(${ownerprofile.photo})`;
if (ownerprofile.photo && icon.attr('style') !== styleString)
icon.attr('style', styleString);
ownerui.show();
@@ -75,11 +80,11 @@ function updateOwner() {
//get title
function getTitle(view) {
- var title = "";
+ let title = "";
if (md && md.meta && md.meta.title && (typeof md.meta.title == "string" || typeof md.meta.title == "number")) {
title = md.meta.title;
} else {
- var h1s = view.find("h1");
+ const h1s = view.find("h1");
if (h1s.length > 0) {
title = h1s.first().text();
} else {
@@ -90,8 +95,8 @@ function getTitle(view) {
}
//render title
-function renderTitle(view) {
- var title = getTitle(view);
+export function renderTitle(view) {
+ let title = getTitle(view);
if (title) {
title += ' - HackMD';
} else {
@@ -101,8 +106,8 @@ function renderTitle(view) {
}
//render filename
-function renderFilename(view) {
- var filename = getTitle(view);
+export function renderFilename(view) {
+ let filename = getTitle(view);
if (!filename) {
filename = 'Untitled';
}
@@ -110,29 +115,29 @@ function renderFilename(view) {
}
// render tags
-function renderTags(view) {
- var tags = [];
- var rawtags = [];
+export function renderTags(view) {
+ const tags = [];
+ const rawtags = [];
if (md && md.meta && md.meta.tags && (typeof md.meta.tags == "string" || typeof md.meta.tags == "number")) {
- var metaTags = ('' + md.meta.tags).split(',');
+ const metaTags = (`${md.meta.tags}`).split(',');
for (var i = 0; i < metaTags.length; i++) {
- var text = metaTags[i].trim();
+ const text = metaTags[i].trim();
if (text) rawtags.push(text);
}
} else {
- view.find('h6').each(function (key, value) {
+ view.find('h6').each((key, value) => {
if (/^tags/gmi.test($(value).text())) {
- var codes = $(value).find("code");
- for (var i = 0; i < codes.length; i++) {
- var text = codes[i].innerHTML.trim();
+ const codes = $(value).find("code");
+ for (let i = 0; i < codes.length; i++) {
+ const text = codes[i].innerHTML.trim();
if (text) rawtags.push(text);
}
}
});
}
for (var i = 0; i < rawtags.length; i++) {
- var found = false;
- for (var j = 0; j < tags.length; j++) {
+ let found = false;
+ for (let j = 0; j < tags.length; j++) {
if (tags[j] == rawtags[i]) {
found = true;
break;
@@ -145,13 +150,13 @@ function renderTags(view) {
}
function slugifyWithUTF8(text) {
- var newText = S(text.toLowerCase()).trim().stripTags().dasherize().s;
+ let newText = S(text.toLowerCase()).trim().stripTags().dasherize().s;
newText = newText.replace(/([\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\[\\\]\^\`\{\|\}\~])/g, '');
return newText;
}
-function isValidURL(str) {
- var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+export function isValidURL(str) {
+ const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
@@ -165,12 +170,12 @@ function isValidURL(str) {
}
//parse meta
-function parseMeta(md, edit, view, toc, tocAffix) {
- var lang = null;
- var dir = null;
- var breaks = true;
+export function parseMeta(md, edit, view, toc, tocAffix) {
+ let lang = null;
+ let dir = null;
+ let breaks = true;
if (md && md.meta) {
- var meta = md.meta;
+ const meta = md.meta;
lang = meta.lang;
dir = meta.dir;
breaks = meta.breaks;
@@ -210,13 +215,13 @@ function parseMeta(md, edit, view, toc, tocAffix) {
window.viewAjaxCallback = null;
//regex for extra tags
-var spaceregex = /\s*/;
-var notinhtmltagregex = /(?![^<]*>|[^<>]*<\/)/;
-var coloregex = /\[color=([#|\(|\)|\s|\,|\w]*?)\]/;
+const spaceregex = /\s*/;
+const notinhtmltagregex = /(?![^<]*>|[^<>]*<\/)/;
+let coloregex = /\[color=([#|\(|\)|\s|\,|\w]*?)\]/;
coloregex = new RegExp(coloregex.source + notinhtmltagregex.source, "g");
-var nameregex = /\[name=(.*?)\]/;
-var timeregex = /\[time=([:|,|+|-|\(|\)|\s|\w]*?)\]/;
-var nameandtimeregex = new RegExp(nameregex.source + spaceregex.source + timeregex.source + notinhtmltagregex.source, "g");
+let nameregex = /\[name=(.*?)\]/;
+let timeregex = /\[time=([:|,|+|-|\(|\)|\s|\w]*?)\]/;
+const nameandtimeregex = new RegExp(nameregex.source + spaceregex.source + timeregex.source + notinhtmltagregex.source, "g");
nameregex = new RegExp(nameregex.source + notinhtmltagregex.source, "g");
timeregex = new RegExp(timeregex.source + notinhtmltagregex.source, "g");
@@ -231,35 +236,36 @@ function replaceExtraTags(html) {
if (typeof mermaid !== 'undefined' && mermaid) mermaid.startOnLoad = false;
//dynamic event or object binding here
-function finishView(view) {
+export function finishView(view) {
//todo list
- var lis = view.find('li.raw').removeClass("raw").sortByDepth().toArray();
- for (var i = 0; i < lis.length; i++) {
- var li = lis[i];
- var html = $(li).clone()[0].innerHTML;
- var p = $(li).children('p');
+ const lis = view.find('li.raw').removeClass("raw").sortByDepth().toArray();
+
+ for (let li of lis) {
+ let html = $(li).clone()[0].innerHTML;
+ const p = $(li).children('p');
if (p.length == 1) {
html = p.html();
li = p[0];
}
html = replaceExtraTags(html);
li.innerHTML = html;
- var disabled = 'disabled';
+ let disabled = 'disabled';
if(typeof editor !== 'undefined' && havePermission())
disabled = '';
if (/^\s*\[[x ]\]\s*/.test(html)) {
- li.innerHTML = html.replace(/^\s*\[ \]\s*/, '<input type="checkbox" class="task-list-item-checkbox "' + disabled + '><label></label>')
- .replace(/^\s*\[x\]\s*/, '<input type="checkbox" class="task-list-item-checkbox" checked ' + disabled + '><label></label>');
- lis[i].setAttribute('class', 'task-list-item');
+ li.innerHTML = html.replace(/^\s*\[ \]\s*/, `<input type="checkbox" class="task-list-item-checkbox "${disabled}><label></label>`)
+ .replace(/^\s*\[x\]\s*/, `<input type="checkbox" class="task-list-item-checkbox" checked ${disabled}><label></label>`);
+ li.setAttribute('class', 'task-list-item');
}
if (typeof editor !== 'undefined' && havePermission())
$(li).find('input').change(toggleTodoEvent);
//color tag in list will convert it to tag icon with color
- var tag_color = $(li).closest('ul').find(".color");
- tag_color.each(function (key, value) {
+ const tag_color = $(li).closest('ul').find(".color");
+ tag_color.each((key, value) => {
$(value).addClass('fa fa-tag').css('color', $(value).attr('data-color'));
});
}
+
//youtube
view.find("div.youtube.raw").removeClass("raw")
.click(function () {
@@ -270,41 +276,41 @@ function finishView(view) {
.click(function () {
imgPlayiframe(this, '//player.vimeo.com/video/');
})
- .each(function (key, value) {
+ .each((key, value) => {
$.ajax({
type: 'GET',
- url: '//vimeo.com/api/v2/video/' + $(value).attr('data-videoid') + '.json',
+ url: `//vimeo.com/api/v2/video/${$(value).attr('data-videoid')}.json`,
jsonp: 'callback',
dataType: 'jsonp',
- success: function (data) {
- var thumbnail_src = data[0].thumbnail_large;
- var image = '<img src="' + thumbnail_src + '" />';
+ success(data) {
+ const thumbnail_src = data[0].thumbnail_large;
+ const image = `<img src="${thumbnail_src}" />`;
$(value).prepend(image);
if(viewAjaxCallback) viewAjaxCallback();
}
});
});
//gist
- view.find("code[data-gist-id]").each(function (key, value) {
+ view.find("code[data-gist-id]").each((key, value) => {
if ($(value).children().length == 0)
$(value).gist(viewAjaxCallback);
});
//sequence diagram
- var sequences = view.find("div.sequence-diagram.raw").removeClass("raw");
- sequences.each(function (key, value) {
+ const sequences = view.find("div.sequence-diagram.raw").removeClass("raw");
+ sequences.each((key, value) => {
try {
var $value = $(value);
- var $ele = $(value).parent().parent();
+ const $ele = $(value).parent().parent();
- var sequence = $value;
+ const sequence = $value;
sequence.sequenceDiagram({
theme: 'simple'
});
$ele.addClass('sequence-diagram');
$value.children().unwrap().unwrap();
- var svg = $ele.find('> svg');
- svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
+ const svg = $ele.find('> svg');
+ svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`);
svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
} catch (err) {
$value.unwrap();
@@ -312,13 +318,13 @@ function finishView(view) {
}
});
//flowchart
- var flow = view.find("div.flow-chart.raw").removeClass("raw");
- flow.each(function (key, value) {
+ const flow = view.find("div.flow-chart.raw").removeClass("raw");
+ flow.each((key, value) => {
try {
var $value = $(value);
- var $ele = $(value).parent().parent();
+ const $ele = $(value).parent().parent();
- var chart = flowchart.parse($value.text());
+ const chart = flowchart.parse($value.text());
$value.html('');
chart.drawSVG(value, {
'line-width': 2,
@@ -335,14 +341,14 @@ function finishView(view) {
}
});
//graphviz
- var Viz = require("viz.js");
- var graphvizs = view.find("div.graphviz.raw").removeClass("raw");
- graphvizs.each(function (key, value) {
+ const Viz = require("viz.js");
+ const graphvizs = view.find("div.graphviz.raw").removeClass("raw");
+ graphvizs.each((key, value) => {
try {
var $value = $(value);
- var $ele = $(value).parent().parent();
+ const $ele = $(value).parent().parent();
- var graphviz = Viz($value.text());
+ const graphviz = Viz($value.text());
if (!graphviz) throw Error('viz.js output empty graph');
$value.html(graphviz);
@@ -354,14 +360,14 @@ function finishView(view) {
}
});
//mermaid
- var mermaids = view.find("div.mermaid.raw").removeClass("raw");
- mermaids.each(function (key, value) {
+ const mermaids = view.find("div.mermaid.raw").removeClass("raw");
+ mermaids.each((key, value) => {
try {
var $value = $(value);
- var $ele = $(value).closest('pre');
+ const $ele = $(value).closest('pre');
- var mermaidError = null;
- mermaid.parseError = function (err, hash) {
+ let mermaidError = null;
+ mermaid.parseError = (err, hash) => {
mermaidError = err;
};
@@ -379,44 +385,44 @@ function finishView(view) {
}
});
//image href new window(emoji not included)
- var images = view.find("img.raw[src]").removeClass("raw");
- images.each(function (key, value) {
+ const images = view.find("img.raw[src]").removeClass("raw");
+ images.each((key, value) => {
// if it's already wrapped by link, then ignore
- var $value = $(value);
- $value[0].onload = function (e) {
+ const $value = $(value);
+ $value[0].onload = e => {
if(viewAjaxCallback) viewAjaxCallback();
};
});
//blockquote
- var blockquote = view.find("blockquote.raw").removeClass("raw");
- var blockquote_p = blockquote.find("p");
- blockquote_p.each(function (key, value) {
- var html = $(value).html();
+ const blockquote = view.find("blockquote.raw").removeClass("raw");
+ const blockquote_p = blockquote.find("p");
+ blockquote_p.each((key, value) => {
+ let html = $(value).html();
html = replaceExtraTags(html);
$(value).html(html);
});
//color tag in blockquote will change its left border color
- var blockquote_color = blockquote.find(".color");
- blockquote_color.each(function (key, value) {
+ const blockquote_color = blockquote.find(".color");
+ blockquote_color.each((key, value) => {
$(value).closest("blockquote").css('border-left-color', $(value).attr('data-color'));
});
//slideshare
view.find("div.slideshare.raw").removeClass("raw")
- .each(function (key, value) {
+ .each((key, value) => {
$.ajax({
type: 'GET',
- url: '//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/' + $(value).attr('data-slideshareid') + '&format=json',
+ url: `//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/${$(value).attr('data-slideshareid')}&format=json`,
jsonp: 'callback',
dataType: 'jsonp',
- success: function (data) {
- var $html = $(data.html);
- var iframe = $html.closest('iframe');
- var caption = $html.closest('div');
- var inner = $('<div class="inner"></div>').append(iframe);
- var height = iframe.attr('height');
- var width = iframe.attr('width');
- var ratio = (height / width) * 100;
- inner.css('padding-bottom', ratio + '%');
+ success(data) {
+ const $html = $(data.html);
+ const iframe = $html.closest('iframe');
+ const caption = $html.closest('div');
+ const inner = $('<div class="inner"></div>').append(iframe);
+ const height = iframe.attr('height');
+ const width = iframe.attr('width');
+ const ratio = (height / width) * 100;
+ inner.css('padding-bottom', `${ratio}%`);
$(value).html(inner).append(caption);
if(viewAjaxCallback) viewAjaxCallback();
}
@@ -424,31 +430,31 @@ function finishView(view) {
});
//speakerdeck
view.find("div.speakerdeck.raw").removeClass("raw")
- .each(function (key, value) {
- var url = 'https://speakerdeck.com/oembed.json?url=https%3A%2F%2Fspeakerdeck.com%2F' + encodeURIComponent($(value).attr('data-speakerdeckid'));
+ .each((key, value) => {
+ const url = `https://speakerdeck.com/oembed.json?url=https%3A%2F%2Fspeakerdeck.com%2F${encodeURIComponent($(value).attr('data-speakerdeckid'))}`;
//use yql because speakerdeck not support jsonp
$.ajax({
url: 'https://query.yahooapis.com/v1/public/yql',
data: {
- q: "select * from json where url ='" + url + "'",
+ q: `select * from json where url ='${url}'`,
format: "json"
},
dataType: "jsonp",
- success: function (data) {
+ success(data) {
if (!data.query || !data.query.results) return;
- var json = data.query.results.json;
- var html = json.html;
+ const json = data.query.results.json;
+ const html = json.html;
var ratio = json.height / json.width;
$(value).html(html);
- var iframe = $(value).children('iframe');
- var src = iframe.attr('src');
+ const iframe = $(value).children('iframe');
+ const src = iframe.attr('src');
if (src.indexOf('//') == 0)
- iframe.attr('src', 'https:' + src);
- var inner = $('<div class="inner"></div>').append(iframe);
- var height = iframe.attr('height');
- var width = iframe.attr('width');
+ iframe.attr('src', `https:${src}`);
+ const inner = $('<div class="inner"></div>').append(iframe);
+ const height = iframe.attr('height');
+ const width = iframe.attr('width');
var ratio = (height / width) * 100;
- inner.css('padding-bottom', ratio + '%');
+ inner.css('padding-bottom', `${ratio}%`);
$(value).html(inner);
if(viewAjaxCallback) viewAjaxCallback();
}
@@ -457,8 +463,8 @@ function finishView(view) {
//pdf
view.find("div.pdf.raw").removeClass("raw")
.each(function (key, value) {
- var url = $(value).attr('data-pdfurl');
- var inner = $('<div></div>');
+ const url = $(value).attr('data-pdfurl');
+ const inner = $('<div></div>');
$(this).append(inner);
PDFObject.embed(url, inner, {
height: '400px'
@@ -466,12 +472,12 @@ function finishView(view) {
});
//syntax highlighting
view.find("code.raw").removeClass("raw")
- .each(function (key, value) {
- var langDiv = $(value);
+ .each((key, value) => {
+ const langDiv = $(value);
if (langDiv.length > 0) {
- var reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim();
- var codeDiv = langDiv.find('.code');
- var code = "";
+ const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim();
+ const codeDiv = langDiv.find('.code');
+ let code = "";
if (codeDiv.length > 0) code = codeDiv.html();
else code = langDiv.html();
if (!reallang) {
@@ -490,8 +496,8 @@ function finishView(view) {
};
} else {
code = S(code).unescapeHTML().s;
- var languages = hljs.listLanguages();
- if (languages.indexOf(reallang) == -1) {
+ const languages = hljs.listLanguages();
+ if (!languages.includes(reallang)) {
var result = hljs.highlightAuto(code);
} else {
var result = hljs.highlight(reallang, code);
@@ -502,7 +508,7 @@ function finishView(view) {
}
});
//mathjax
- var mathjaxdivs = view.find('span.mathjax.raw').removeClass("raw").toArray();
+ const mathjaxdivs = view.find('span.mathjax.raw').removeClass("raw").toArray();
try {
if (mathjaxdivs.length > 1) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub, mathjaxdivs]);
@@ -519,16 +525,16 @@ function finishView(view) {
}
//only static transform should be here
-function postProcess(code) {
- var result = $('<div>' + code + '</div>');
+export function postProcess(code) {
+ const result = $(`<div>${code}</div>`);
//link should open in new window or tab
result.find('a:not([href^="#"]):not([target])').attr('target', '_blank');
//update continue line numbers
- var linenumberdivs = result.find('.gutter.linenumber').toArray();
- for (var i = 0; i < linenumberdivs.length; i++) {
+ const linenumberdivs = result.find('.gutter.linenumber').toArray();
+ for (let i = 0; i < linenumberdivs.length; i++) {
if ($(linenumberdivs[i]).hasClass('continue')) {
- var startnumber = linenumberdivs[i - 1] ? parseInt($(linenumberdivs[i - 1]).find('> span').last().attr('data-linenumber')) : 0;
- $(linenumberdivs[i]).find('> span').each(function(key, value) {
+ const startnumber = linenumberdivs[i - 1] ? parseInt($(linenumberdivs[i - 1]).find('> span').last().attr('data-linenumber')) : 0;
+ $(linenumberdivs[i]).find('> span').each((key, value) => {
$(value).attr('data-linenumber', startnumber + key + 1);
});
}
@@ -538,8 +544,8 @@ function postProcess(code) {
window.postProcess = postProcess;
function generateCleanHTML(view) {
- var src = view.clone();
- var eles = src.find('*');
+ const src = view.clone();
+ const eles = src.find('*');
//remove syncscroll parts
eles.removeClass('part');
src.find('*[class=""]').removeAttr('class');
@@ -550,24 +556,24 @@ function generateCleanHTML(view) {
//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');
+ src.find("img.emoji").each((key, value) => {
+ let 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');
+ $(value).attr('src', `https://www.tortue.me/emoji/${name}.png`);
});
//replace video to iframe
- src.find("div[data-videoid]").each(function (key, value) {
- var id = $(value).attr('data-videoid');
- var style = $(value).attr('style');
- var url = null;
+ src.find("div[data-videoid]").each((key, value) => {
+ const id = $(value).attr('data-videoid');
+ const style = $(value).attr('style');
+ let 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>');
+ const iframe = $('<iframe frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
iframe.attr('src', url + id);
iframe.attr('style', style);
$(value).html(iframe);
@@ -576,45 +582,44 @@ function generateCleanHTML(view) {
return src;
}
-function exportToRawHTML(view) {
- var filename = renderFilename(ui.area.markdown) + '.html';
- var src = generateCleanHTML(view);
+export function exportToRawHTML(view) {
+ const filename = `${renderFilename(ui.area.markdown)}.html`;
+ const src = generateCleanHTML(view);
$(src).find('a.anchor').remove();
- var html = src[0].outerHTML;
- var blob = new Blob([html], {
+ const html = src[0].outerHTML;
+ const blob = new Blob([html], {
type: "text/html;charset=utf-8"
});
saveAs(blob, filename);
}
-var common = require('./common.js');
//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 = generateCleanHTML(view);
+export function exportToHTML(view) {
+ const title = renderTitle(ui.area.markdown);
+ const filename = `${renderFilename(ui.area.markdown)}.html`;
+ const src = generateCleanHTML(view);
//generate toc
- var toc = $('#ui-toc').clone();
+ const toc = $('#ui-toc').clone();
toc.find('*').removeClass('active').find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
- var tocAffix = $('#ui-toc-affix').clone();
+ const tocAffix = $('#ui-toc-affix').clone();
tocAffix.find('*').removeClass('active').find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
//generate html via template
- $.get(serverurl + '/build/html.min.css', function (css) {
- $.get(serverurl + '/views/html.hbs', function (data) {
- var template = Handlebars.compile(data);
- var context = {
+ $.get(`${serverurl}/build/html.min.css`, css => {
+ $.get(`${serverurl}/views/html.hbs`, data => {
+ const template = Handlebars.compile(data);
+ const context = {
url: serverurl,
- title: title,
- css: css,
+ title,
+ css,
html: src[0].outerHTML,
'ui-toc': toc.html(),
'ui-toc-affix': tocAffix.html(),
- lang: (md && md.meta && md.meta.lang) ? 'lang="' + md.meta.lang + '"' : null,
- dir: (md && md.meta && md.meta.dir) ? 'dir="' + md.meta.dir + '"' : null
+ lang: (md && md.meta && md.meta.lang) ? `lang="${md.meta.lang}"` : null,
+ dir: (md && md.meta && md.meta.dir) ? `dir="${md.meta.dir}"` : null
};
- var html = template(context);
+ const html = template(context);
// console.log(html);
- var blob = new Blob([html], {
+ const blob = new Blob([html], {
type: "text/html;charset=utf-8"
});
saveAs(blob, filename);
@@ -624,17 +629,16 @@ function exportToHTML(view) {
//jQuery sortByDepth
$.fn.sortByDepth = function () {
- var ar = this.map(function () {
+ const ar = this.map(function () {
return {
length: $(this).parents().length,
elt: this
}
- }).get(),
- result = [],
- i = ar.length;
- ar.sort(function (a, b) {
- return a.length - b.length;
- });
+ }).get();
+
+ const result = [];
+ let i = ar.length;
+ ar.sort((a, b) => a.length - b.length);
while (i--) {
result.push(ar[i].elt);
}
@@ -642,16 +646,16 @@ $.fn.sortByDepth = function () {
};
function toggleTodoEvent(e) {
- var startline = $(this).closest('li').attr('data-startline') - 1;
- var line = editor.getLine(startline);
- var matches = line.match(/^[>\s]*[\-\+\*]\s\[([x ])\]/);
+ const startline = $(this).closest('li').attr('data-startline') - 1;
+ const line = editor.getLine(startline);
+ const matches = line.match(/^[>\s]*[\-\+\*]\s\[([x ])\]/);
if (matches && matches.length >= 2) {
- var checked = null;
+ let checked = null;
if (matches[1] == 'x')
checked = true;
else if (matches[1] == ' ')
checked = false;
- var replacements = matches[0].match(/(^[>\s]*[\-\+\*]\s\[)([x ])(\])/);
+ const replacements = matches[0].match(/(^[>\s]*[\-\+\*]\s\[)([x ])(\])/);
editor.replaceRange(checked ? ' ' : 'x', {
line: startline,
ch: replacements[1].length
@@ -667,11 +671,11 @@ function removeHash() {
history.pushState("", document.title, window.location.pathname + window.location.search);
}
-var tocExpand = false;
+let tocExpand = false;
function checkExpandToggle() {
- var toc = $('.ui-toc-dropdown .toc');
- var toggle = $('.expand-toggle');
+ const toc = $('.ui-toc-dropdown .toc');
+ const toggle = $('.expand-toggle');
if (!tocExpand) {
toc.removeClass('expand');
toggle.text('Expand all');
@@ -682,8 +686,8 @@ function checkExpandToggle() {
}
//toc
-function generateToc(id) {
- var target = $('#' + id);
+export function generateToc(id) {
+ const target = $(`#${id}`);
target.html('');
new Toc('doc', {
'level': 3,
@@ -695,25 +699,25 @@ function generateToc(id) {
});
if (target.text() == 'undefined')
target.html('');
- var tocMenu = $('<div class="toc-menu"></div');
- var toggle = $('<a class="expand-toggle" href="#">Expand all</a>');
- var backtotop = $('<a class="back-to-top" href="#">Back to top</a>');
- var gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>');
+ const tocMenu = $('<div class="toc-menu"></div');
+ const toggle = $('<a class="expand-toggle" href="#">Expand all</a>');
+ const backtotop = $('<a class="back-to-top" href="#">Back to top</a>');
+ const gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>');
checkExpandToggle();
- toggle.click(function (e) {
+ toggle.click(e => {
e.preventDefault();
e.stopPropagation();
tocExpand = !tocExpand;
checkExpandToggle();
});
- backtotop.click(function (e) {
+ backtotop.click(e => {
e.preventDefault();
e.stopPropagation();
if (scrollToTop)
scrollToTop();
removeHash();
});
- gotobottom.click(function (e) {
+ gotobottom.click(e => {
e.preventDefault();
e.stopPropagation();
if (scrollToBottom)
@@ -725,18 +729,18 @@ function generateToc(id) {
}
//smooth all hash trigger scrolling
-function smoothHashScroll() {
- var hashElements = $("a[href^='#']:not([smoothhashscroll])").toArray();
- for (var i = 0; i < hashElements.length; i++) {
- var element = hashElements[i];
- var $element = $(element);
- var hash = element.hash;
+export function smoothHashScroll() {
+ const hashElements = $("a[href^='#']:not([smoothhashscroll])").toArray();
+
+ for (const element of hashElements) {
+ const $element = $(element);
+ const hash = element.hash;
if (hash) {
$element.on('click', function (e) {
// store hash
- var hash = decodeURIComponent(this.hash);
+ const hash = decodeURIComponent(this.hash);
// escape special characters in jquery selector
- var $hash = $(hash.replace(/(:|\.|\[|\]|,)/g, "\\$1"));
+ const $hash = $(hash.replace(/(:|\.|\[|\]|,)/g, "\\$1"));
// return if no element been selected
if ($hash.length <= 0) return;
// prevent default anchor click behavior
@@ -744,7 +748,7 @@ function smoothHashScroll() {
// animate
$('body, html').stop(true, true).animate({
scrollTop: $hash.offset().top
- }, 100, "linear", function () {
+ }, 100, "linear", () => {
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
@@ -757,29 +761,29 @@ function smoothHashScroll() {
function imgPlayiframe(element, src) {
if (!$(element).attr("data-videoid")) return;
- var iframe = $("<iframe frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
- $(iframe).attr("src", src + $(element).attr("data-videoid") + '?autoplay=1');
+ const iframe = $("<iframe frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
+ $(iframe).attr("src", `${src + $(element).attr("data-videoid")}?autoplay=1`);
$(element).find('img').css('visibility', 'hidden');
$(element).append(iframe);
}
-var anchorForId = function (id) {
- var anchor = document.createElement("a");
+const anchorForId = id => {
+ const anchor = document.createElement("a");
anchor.className = "anchor hidden-xs";
- anchor.href = "#" + id;
+ anchor.href = `#${id}`;
anchor.innerHTML = "<span class=\"octicon octicon-link\"></span>";
anchor.title = id;
return anchor;
};
-var linkifyAnchors = function (level, containingElement) {
- var headers = containingElement.getElementsByTagName("h" + level);
- for (var h = 0; h < headers.length; h++) {
- var header = headers[h];
+const linkifyAnchors = (level, containingElement) => {
+ const headers = containingElement.getElementsByTagName(`h${level}`);
+
+ for (const header of headers) {
if (header.getElementsByClassName("anchor").length == 0) {
if (typeof header.id == "undefined" || header.id == "") {
//to escape characters not allow in css and humanize
- var id = slugifyWithUTF8(getHeaderContent(header));
+ const id = slugifyWithUTF8(getHeaderContent(header));
header.id = id;
}
header.insertBefore(anchorForId(header.id), header.firstChild);
@@ -787,49 +791,49 @@ var linkifyAnchors = function (level, containingElement) {
}
};
-function autoLinkify(view) {
- var contentBlock = view[0];
+export function autoLinkify(view) {
+ const contentBlock = view[0];
if (!contentBlock) {
return;
}
- for (var level = 1; level <= 6; level++) {
+ for (let level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
function getHeaderContent(header) {
- var headerHTML = $(header).clone();
+ const headerHTML = $(header).clone();
headerHTML.find('.MathJax_Preview').remove();
headerHTML.find('.MathJax').remove();
return headerHTML[0].innerHTML;
}
-function deduplicatedHeaderId(view) {
- var headers = view.find(':header.raw').removeClass('raw').toArray();
- for (var i = 0; i < headers.length; i++) {
- var id = $(headers[i]).attr('id');
+export function deduplicatedHeaderId(view) {
+ const headers = view.find(':header.raw').removeClass('raw').toArray();
+ for (let i = 0; i < headers.length; i++) {
+ const id = $(headers[i]).attr('id');
if (!id) continue;
- var duplicatedHeaders = view.find(':header[id="' + id + '"]').toArray();
- for (var j = 0; j < duplicatedHeaders.length; j++) {
+ const duplicatedHeaders = view.find(`:header[id="${id}"]`).toArray();
+ for (let j = 0; j < duplicatedHeaders.length; j++) {
if (duplicatedHeaders[j] != headers[i]) {
- var newId = id + j;
- var $duplicatedHeader = $(duplicatedHeaders[j]);
+ const newId = id + j;
+ const $duplicatedHeader = $(duplicatedHeaders[j]);
$duplicatedHeader.attr('id', newId);
- var $headerLink = $duplicatedHeader.find('> .header-link');
- $headerLink.attr('href', '#' + newId);
+ const $headerLink = $duplicatedHeader.find('> .header-link');
+ $headerLink.attr('href', `#${newId}`);
$headerLink.attr('title', newId);
}
}
}
}
-function renderTOC(view) {
- var tocs = view.find('.toc').toArray();
- for (var i = 0; i < tocs.length; i++) {
- var toc = $(tocs[i]);
- var id = 'toc' + i;
+export function renderTOC(view) {
+ const tocs = view.find('.toc').toArray();
+ for (let i = 0; i < tocs.length; i++) {
+ const toc = $(tocs[i]);
+ const id = `toc${i}`;
toc.attr('id', id);
- var target = $('#' + id);
+ const target = $(`#${id}`);
target.html('');
new Toc('doc', {
'level': 3,
@@ -844,8 +848,8 @@ function renderTOC(view) {
}
}
-function scrollToHash() {
- var hash = location.hash;
+export function scrollToHash() {
+ const hash = location.hash;
location.hash = "";
location.hash = hash;
}
@@ -855,39 +859,39 @@ function highlightRender(code, lang) {
return;
code = S(code).escapeHTML().s
if (lang == 'sequence') {
- return '<div class="sequence-diagram raw">' + code + '</div>';
+ return `<div class="sequence-diagram raw">${code}</div>`;
} else if (lang == 'flow') {
- return '<div class="flow-chart raw">' + code + '</div>';
+ return `<div class="flow-chart raw">${code}</div>`;
} else if (lang == 'graphviz') {
- return '<div class="graphviz raw">' + code + '</div>';
+ return `<div class="graphviz raw">${code}</div>`;
} else if (lang == 'mermaid') {
- return '<div class="mermaid raw">' + code + '</div>';
+ return `<div class="mermaid raw">${code}</div>`;
}
- var result = {
+ const result = {
value: code
};
- var showlinenumbers = /\=$|\=\d+$|\=\+$/.test(lang);
+ const showlinenumbers = /\=$|\=\d+$|\=\+$/.test(lang);
if (showlinenumbers) {
- var startnumber = 1;
- var matches = lang.match(/\=(\d+)$/);
+ let startnumber = 1;
+ const matches = lang.match(/\=(\d+)$/);
if (matches)
startnumber = parseInt(matches[1]);
- var lines = result.value.split('\n');
- var linenumbers = [];
- for (var i = 0; i < lines.length - 1; i++) {
- linenumbers[i] = "<span data-linenumber='" + (startnumber + i) + "'></span>";
+ const lines = result.value.split('\n');
+ const linenumbers = [];
+ for (let i = 0; i < lines.length - 1; i++) {
+ linenumbers[i] = `<span data-linenumber='${startnumber + i}'></span>`;
}
- var continuelinenumber = /\=\+$/.test(lang);
- var linegutter = "<div class='gutter linenumber" + (continuelinenumber ? " continue" : "") + "'>" + linenumbers.join('\n') + "</div>";
- result.value = "<div class='wrapper'>" + linegutter + "<div class='code'>" + result.value + "</div></div>";
+ const continuelinenumber = /\=\+$/.test(lang);
+ const linegutter = `<div class='gutter linenumber${continuelinenumber ? " continue" : ""}'>${linenumbers.join('\n')}</div>`;
+ result.value = `<div class='wrapper'>${linegutter}<div class='code'>${result.value}</div></div>`;
}
return result.value;
}
-var markdownit = require('markdown-it');
-var markdownitContainer = require('markdown-it-container');
+import markdownit from 'markdown-it';
+import markdownitContainer from 'markdown-it-container';
-var md = markdownit('default', {
+export let md = markdownit('default', {
html: true,
breaks: true,
langPrefix: "",
@@ -923,19 +927,17 @@ emojify.setConfig({
elements: ['script', 'textarea', 'a', 'pre', 'code', 'svg'],
classes: ['no-emojify']
},
- img_dir: serverurl + '/build/emojify.js/dist/images/basic',
+ img_dir: `${serverurl}/build/emojify.js/dist/images/basic`,
ignore_emoticons: true
});
-md.renderer.rules.emoji = function(token, idx) {
- return emojify.replace(':' + token[idx].markup + ':');
-};
+md.renderer.rules.emoji = (token, idx) => emojify.replace(`:${token[idx].markup}:`);
function renderContainer(tokens, idx, options, env, self) {
tokens[idx].attrJoin('role', 'alert');
tokens[idx].attrJoin('class', 'alert');
- tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
- return self.renderToken.apply(self, arguments);
+ tokens[idx].attrJoin('class', `alert-${tokens[idx].info.trim()}`);
+ return self.renderToken(...arguments);
}
md.use(markdownitContainer, 'success', { render: renderContainer });
md.use(markdownitContainer, 'info', { render: renderContainer });
@@ -944,25 +946,25 @@ md.use(markdownitContainer, 'danger', { render: renderContainer });
md.renderer.rules.image = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
- return self.renderToken.apply(self, arguments);
+ return self.renderToken(...arguments);
};
md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
- return self.renderToken.apply(self, arguments);
+ return self.renderToken(...arguments);
};
md.renderer.rules.blockquote_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
- return self.renderToken.apply(self, arguments);
+ return self.renderToken(...arguments);
};
md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
tokens[idx].attrJoin('class', 'raw');
- return self.renderToken.apply(self, arguments);
+ return self.renderToken(...arguments);
};
-md.renderer.rules.fence = function (tokens, idx, options, env, self) {
- var token = tokens[idx],
- info = token.info ? md.utils.unescapeAll(token.info).trim() : '',
- langName = '',
- highlighted;
+md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+ const token = tokens[idx];
+ const info = token.info ? md.utils.unescapeAll(token.info).trim() : '';
+ let langName = '';
+ let highlighted;
if (info) {
langName = info.split(/\s+/g)[0];
@@ -979,110 +981,99 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
}
if (highlighted.indexOf('<pre') === 0) {
- return highlighted + '\n';
+ return `${highlighted}\n`;
}
- return '<pre><code' + self.renderAttrs(token) + '>'
- + highlighted
- + '</code></pre>\n';
+ return `<pre><code${self.renderAttrs(token)}>${highlighted}</code></pre>\n`;
};
/* Defined regex markdown it plugins */
-var Plugin = require('markdown-it-regexp');
+import Plugin from 'markdown-it-regexp';
//youtube
-var youtubePlugin = new Plugin(
+const youtubePlugin = new Plugin(
// regexp to match
/{%youtube\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var videoid = match[1];
+ (match, utils) => {
+ const videoid = match[1];
if (!videoid) return;
- var div = $('<div class="youtube raw"></div>');
+ const div = $('<div class="youtube raw"></div>');
div.attr('data-videoid', videoid);
- var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
- var image = '<img src="' + thumbnail_src + '" />';
+ const thumbnail_src = `//img.youtube.com/vi/${videoid}/hqdefault.jpg`;
+ const image = `<img src="${thumbnail_src}" />`;
div.append(image);
- var icon = '<i class="icon fa fa-youtube-play fa-5x"></i>';
+ const icon = '<i class="icon fa fa-youtube-play fa-5x"></i>';
div.append(icon);
return div[0].outerHTML;
}
);
//vimeo
-var vimeoPlugin = new Plugin(
+const vimeoPlugin = new Plugin(
// regexp to match
/{%vimeo\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var videoid = match[1];
+ (match, utils) => {
+ const videoid = match[1];
if (!videoid) return;
- var div = $('<div class="vimeo raw"></div>');
+ const div = $('<div class="vimeo raw"></div>');
div.attr('data-videoid', videoid);
- var icon = '<i class="icon fa fa-vimeo-square fa-5x"></i>';
+ const icon = '<i class="icon fa fa-vimeo-square fa-5x"></i>';
div.append(icon);
return div[0].outerHTML;
}
);
//gist
-var gistPlugin = new Plugin(
+const gistPlugin = new Plugin(
// regexp to match
/{%gist\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var gistid = match[1];
- var code = '<code data-gist-id="' + gistid + '"/>';
+ (match, utils) => {
+ const gistid = match[1];
+ const code = `<code data-gist-id="${gistid}"/>`;
return code;
}
);
//TOC
-var tocPlugin = new Plugin(
+const tocPlugin = new Plugin(
// regexp to match
/^\[TOC\]$/i,
- // this function will be called when something matches
- function (match, utils) {
- return '<div class="toc"></div>';
- }
+ (match, utils) => '<div class="toc"></div>'
);
//slideshare
-var slidesharePlugin = new Plugin(
+const slidesharePlugin = new Plugin(
// regexp to match
/{%slideshare\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var slideshareid = match[1];
- var div = $('<div class="slideshare raw"></div>');
+ (match, utils) => {
+ const slideshareid = match[1];
+ const div = $('<div class="slideshare raw"></div>');
div.attr('data-slideshareid', slideshareid);
return div[0].outerHTML;
}
);
//speakerdeck
-var speakerdeckPlugin = new Plugin(
+const speakerdeckPlugin = new Plugin(
// regexp to match
/{%speakerdeck\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var speakerdeckid = match[1];
- var div = $('<div class="speakerdeck raw"></div>');
+ (match, utils) => {
+ const speakerdeckid = match[1];
+ const div = $('<div class="speakerdeck raw"></div>');
div.attr('data-speakerdeckid', speakerdeckid);
return div[0].outerHTML;
}
);
//pdf
-var pdfPlugin = new Plugin(
+const pdfPlugin = new Plugin(
// regexp to match
/{%pdf\s*([\d\D]*?)\s*%}/,
- // this function will be called when something matches
- function (match, utils) {
- var pdfurl = match[1];
+ (match, utils) => {
+ const pdfurl = match[1];
if (!isValidURL(pdfurl)) return match[0];
- var div = $('<div class="pdf raw"></div>');
+ const div = $('<div class="pdf raw"></div>');
div.attr('data-pdfurl', pdfurl);
return div[0].outerHTML;
}
@@ -1090,8 +1081,8 @@ var pdfPlugin = new Plugin(
//yaml meta, from https://github.com/eugeneware/remarkable-meta
function get(state, line) {
- var pos = state.bMarks[line];
- var max = state.eMarks[line];
+ const pos = state.bMarks[line];
+ const max = state.eMarks[line];
return state.src.substr(pos, max - pos);
}
@@ -1100,9 +1091,9 @@ function meta(state, start, end, silent) {
if (state.tShift[start] < 0) return false;
if (!get(state, start).match(/^---$/)) return false;
- var data = [];
+ const data = [];
for (var line = start + 1; line < end; line++) {
- var str = get(state, line);
+ const str = get(state, line);
if (str.match(/^(\.{3}|-{3})$/)) break;
if (state.tShift[line] < 0) break;
data.push(str);
@@ -1138,24 +1129,6 @@ md.use(slidesharePlugin);
md.use(speakerdeckPlugin);
md.use(pdfPlugin);
-module.exports = {
- md: md,
- updateLastChange: updateLastChange,
- postProcess: postProcess,
- finishView: finishView,
- autoLinkify: autoLinkify,
- deduplicatedHeaderId: deduplicatedHeaderId,
- renderTOC: renderTOC,
- renderTitle: renderTitle,
- renderFilename: renderFilename,
- renderTags: renderTags,
- isValidURL: isValidURL,
- generateToc: generateToc,
- smoothHashScroll: smoothHashScroll,
- scrollToHash: scrollToHash,
- updateLastChangeUser: updateLastChangeUser,
- updateOwner: updateOwner,
- parseMeta: parseMeta,
- exportToHTML: exportToHTML,
- exportToRawHTML: exportToRawHTML
+export default {
+ md
};
diff --git a/public/js/index.js b/public/js/index.js
index 381f051e..7406c9a2 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -30,26 +30,27 @@ import {
version
} from './common';
-var extra = require('./extra');
-var md = extra.md;
-var updateLastChange = extra.updateLastChange;
-var postProcess = extra.postProcess;
-var finishView = extra.finishView;
-var autoLinkify = extra.autoLinkify;
-var generateToc = extra.generateToc;
-var smoothHashScroll = extra.smoothHashScroll;
-var deduplicatedHeaderId = extra.deduplicatedHeaderId;
-var renderTOC = extra.renderTOC;
-var renderTitle = extra.renderTitle;
-var renderFilename = extra.renderFilename;
-var renderTags = extra.renderTags;
-var isValidURL = extra.isValidURL;
-var scrollToHash = extra.scrollToHash;
-var updateLastChangeUser = extra.updateLastChangeUser;
-var updateOwner = extra.updateOwner;
-var parseMeta = extra.parseMeta;
-var exportToHTML = extra.exportToHTML;
-var exportToRawHTML = extra.exportToRawHTML;
+import {
+ autoLinkify,
+ deduplicatedHeaderId,
+ exportToHTML,
+ exportToRawHTML,
+ finishView,
+ generateToc,
+ isValidURL,
+ md,
+ parseMeta,
+ postProcess,
+ renderFilename,
+ renderTOC,
+ renderTags,
+ renderTitle,
+ scrollToHash,
+ smoothHashScroll,
+ updateLastChange,
+ updateLastChangeUser,
+ updateOwner
+} from './extra';
import {
clearMap,