200 lines
8 KiB
JavaScript
200 lines
8 KiB
JavaScript
// Microdown
|
|
// https://github.com/commit-intl/micro-down
|
|
const microdown=function(){function l(n,e,r){return"<"+n+(r?" "+Object.keys(r).map(function(n){return r[n]?n+'="'+(a(r[n])||"")+'"':""}).join(" "):"")+">"+e+"</"+n+">"}function c(n,e){return e=n.match(/^[+-]/m)?"ul":"ol",n?"<"+e+">"+n.replace(/(?:[+-]|\d+\.) +(.*)\n?(([ \t].*\n?)*)/g,function(n,e,r){return"<li>"+g(e+"\n"+(t=r||"").replace(new RegExp("^"+(t.match(/^\s+/)||"")[0],"gm"),"").replace(o,c))+"</li>";var t})+"</"+e+">":""}function e(r,t,u,c){return function(n,e){return n=n.replace(t,u),l(r,c?c(n):n)}}function t(n,u){return f(n,[/<!--((.|\n)*?)-->/g,"\x3c!--$1--\x3e",/^("""|```)(.*)\n((.*\n)*?)\1/gm,function(n,e,r,t){return'"""'===e?l("div",p(t,u),{class:r}):u&&u.preCode?l("pre",l("code",a(t),{class:r})):l("pre",a(t),{class:r})},/(^>.*\n?)+/gm,e("blockquote",/^> ?(.*)$/gm,"$1",r),/((^|\n)\|.+)+/g,e("table",/^.*(\n\|---.*?)?$/gm,function(n,t){return e("tr",/\|(-?)([^|]*)\1(\|$)?/gm,function(n,e,r){return l(e||t?"th":"td",g(r))})(n.slice(0,n.length-(t||"").length))}),o,c,/#\[([^\]]+?)]/g,'<a name="$1"></a>',/^(#+) +(.*)(?:$)/gm,function(n,e,r){return l("h"+e.length,g(r))},/^(===+|---+)(?=\s*$)/gm,"<hr>"],p,u)}var i=this,a=function(n){return n?n.replace(/"/g,""").replace(/</g,"<").replace(/>/g,">"):""},o=/(?:(^|\n)([+-]|\d+\.) +(.*(\n[ \t]+.*)*))+/g,g=function c(n,i){var o=[];return n=(n||"").trim().replace(/`([^`]*)`/g,function(n,e){return"\\"+o.push(l("code",a(e)))}).replace(/[!&]?\[([!&]?\[.*?\)|[^\]]*?)]\((.*?)( .*?)?\)|(\w+:\/\/[$\-.+!*'()/,\w]+)/g,function(n,e,r,t,u){return u?i?n:"\\"+o.push(l("a",u,{href:u})):"&"==n[0]?(e=e.match(/^(.+),(.+),([^ \]]+)( ?.+?)?$/),"\\"+o.push(l("iframe","",{width:e[1],height:e[2],frameborder:e[3],class:e[4],src:r,title:t}))):"\\"+o.push("!"==n[0]?l("img","",{src:r,alt:e,title:t}):l("a",c(e,1),{href:r,title:t}))}),n=function r(n){return n.replace(/\\(\d+)/g,function(n,e){return r(o[Number.parseInt(e)-1])})}(i?n:r(n))},r=function t(n){return f(n,[/([*_]{1,3})((.|\n)+?)\1/g,function(n,e,r){return e=e.length,r=t(r),1<e&&(r=l("strong",r)),e%2&&(r=l("em",r)),r},/(~{1,3})((.|\n)+?)\1/g,function(n,e,r){return l([,"u","s","del"][e.length],t(r))},/ \n|\n /g,"<br>"],t)},f=function(n,e,r,t){for(var u,c=0;c<e.length;){if(u=e[c++].exec(n))return r(n.slice(0,u.index),t)+("string"==typeof e[c]?e[c].replace(/\$(\d)/g,function(n,e){return u[e]}):e[c].apply(i,u))+r(n.slice(u.index+u[0].length),t);c++}return n},p=function(n,e){n=n.replace(/[\r\v\b\f]/g,"").replace(/\\./g,function(n){return"&#"+n.charCodeAt(1)+";"});var r=t(n,e);return r!==n||r.match(/^[\s\n]*$/i)||(r=g(r).replace(/((.|\n)+?)(\n\n+|$)/g,function(n,e){return l("p",e)})),r.replace(/&#(\d+);/g,function(n,e){return String.fromCharCode(parseInt(e))})};return{parse:p,block:t,inline:r,inlineBlock:g}}();
|
|
|
|
function html(unsafe)
|
|
{
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
const url = location.href;
|
|
|
|
const PREVIEW_TYPES = /^image\/(png|webp|svg|jpeg|jpg|gif|png)|^application\/pdf|^text\/|^audio\/|^video\//;
|
|
|
|
const upload_form = `<div class="a">
|
|
<input class="mkdir" type="button" value="New directory" />
|
|
<input type="file" style="display: none;" />
|
|
<input class="mkfile" type="button" value="New text file" />
|
|
<input class="upload" type="button" value="Upload file" />
|
|
</div>`;
|
|
|
|
const file_buttons = `<td><input class="rename" type="button" value="Rename" />
|
|
<input class="delete" type="button" value="Delete" /></td>`;
|
|
|
|
const edit_button = `<input class="edit" type="button" value="Edit" />`;
|
|
|
|
const mkdir_dialog = `<input type="text" name="mkdir" placeholder="Directory name" />`;
|
|
const mkfile_dialog = `<input type="text" name="mkfile" placeholder="File name" />`;
|
|
const rename_dialog = `<input type="text" name="rename" placeholder="New file name" />`;
|
|
const edit_dialog = `<textarea name="edit" cols="70" rows="30"></textarea>`;
|
|
const markdown_dialog = `<div id="mdp"><textarea name="edit" cols="70" rows="30"></textarea><div id="md"></div></div>`;
|
|
const delete_dialog = `<h3>Confirm delete ?</h3>`;
|
|
|
|
const dialog_tpl = `<dialog open><p class="close"><input type="button" value="✖ Close" class="close" /></p><form><div>%s</div>%b</form></dialog>`;
|
|
|
|
const req = (method, url, body, headers) => {
|
|
fetch(url, {method, body, headers}).then((r) => location.reload());
|
|
return false;
|
|
};
|
|
|
|
var evt;
|
|
|
|
const dialog = (html, ok_btn = true) => {
|
|
var tpl = dialog_tpl.replace(/%b/, ok_btn ? '<p><input type="submit" value="OK" /></p>' : '');
|
|
$('body').insertAdjacentHTML('beforeend', tpl.replace(/%s/, html));
|
|
$('.close input').onclick = close;
|
|
evt = document.addEventListener('keyup', (e) => {
|
|
if (e.key != 'Escape') return;
|
|
e.preventDefault();
|
|
close();
|
|
return false;
|
|
});
|
|
if (a = $('dialog form input, dialog form textarea')) a.focus();
|
|
};
|
|
|
|
const close = () => {
|
|
if (!$('dialog')) return;
|
|
$('dialog').remove();
|
|
document.removeEventListener('keyup', evt);
|
|
evt = null;
|
|
};
|
|
|
|
const $ = (a) => document.querySelector(a);
|
|
|
|
$('h1').insertAdjacentHTML('afterend', upload_form);
|
|
|
|
Array.from($('table').rows).forEach((tr) => {
|
|
var $$ = (a) => tr.querySelector(a);
|
|
var file_url = $$('a').href;
|
|
var file_name = $$('a').innerText;
|
|
var dir = $$('[colspan]');
|
|
var type = !dir ? $$('td:nth-child(3)').innerText : null;
|
|
|
|
if (dir && url.match('..')) {
|
|
dir.setAttribute('colspan', 4);
|
|
return;
|
|
}
|
|
|
|
tr.insertAdjacentHTML('beforeend', file_buttons);
|
|
|
|
if (type.match(PREVIEW_TYPES)) {
|
|
$$('a').onclick = () => {
|
|
if (file_url.match(/\.md$/)) {
|
|
dialog('<div class="md_preview"></div>', false);
|
|
fetch(file_url).then((r) => r.text().then((t) => {
|
|
$('.md_preview').innerHTML = microdown.parse(html(t));
|
|
}));
|
|
}
|
|
else if (type.match(/^image\//)) {
|
|
dialog(`<img src="${file_url}" />`, false);
|
|
}
|
|
else {
|
|
dialog(`<iframe src="${file_url}" />`, false);
|
|
}
|
|
$('dialog').className = 'preview';
|
|
return false;
|
|
};
|
|
}
|
|
|
|
if (type.match(/^text\/|application\/x-empty/)) {
|
|
$$('td:nth-child(5)').insertAdjacentHTML('beforeend', edit_button);
|
|
|
|
$$('.edit').onclick = (e) => {
|
|
fetch(file_url).then((r) => r.text().then((t) => {
|
|
let md = file_url.match(/\.md$/);
|
|
dialog(md ? markdown_dialog : edit_dialog);
|
|
var txt = $('textarea[name=edit]');
|
|
txt.value = t;
|
|
|
|
// Markdown editor
|
|
if (md) {
|
|
let pre = $('#md');
|
|
|
|
txt.oninput = () => {
|
|
pre.innerHTML = microdown.parse(html(txt.value));
|
|
};
|
|
|
|
txt.oninput();
|
|
|
|
// Sync scroll, not perfect but better than nothing
|
|
txt.onscroll = (e) => {
|
|
var p = e.target.scrollTop / (e.target.scrollHeight - e.target.offsetHeight);
|
|
var target = e.target == pre ? txt : pre;
|
|
target.scrollTop = p * (target.scrollHeight - target.offsetHeight);
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
}
|
|
|
|
document.forms[0].onsubmit = () => {
|
|
var content = txt.value;
|
|
|
|
return req('PUT', file_url, content);
|
|
};
|
|
}));
|
|
};
|
|
}
|
|
|
|
$$('.delete').onclick = (e) => {
|
|
dialog(delete_dialog);
|
|
document.forms[0].onsubmit = () => {
|
|
return req('DELETE', file_url, '');
|
|
};
|
|
};
|
|
|
|
$$('.rename').onclick = () => {
|
|
dialog(rename_dialog);
|
|
let t = $('input[name=rename]');
|
|
t.value = file_name;
|
|
t.select();
|
|
document.forms[0].onsubmit = () => {
|
|
var name = t.value;
|
|
|
|
if (!name) return false;
|
|
|
|
return req('MOVE', file_url, '', {'Destination': location.href + name});
|
|
};
|
|
};
|
|
|
|
});
|
|
|
|
$('.mkdir').onclick = () => {
|
|
dialog(mkdir_dialog);
|
|
document.forms[0].onsubmit = () => {
|
|
var name = $('input[name=mkdir]').value;
|
|
|
|
if (!name) return false;
|
|
|
|
return req('MKCOL', url + name);
|
|
};
|
|
};
|
|
|
|
$('.mkfile').onclick = () => {
|
|
dialog(mkfile_dialog);
|
|
document.forms[0].onsubmit = () => {
|
|
var name = $('input[name=mkfile]').value;
|
|
|
|
if (!name) return false;
|
|
|
|
return req('PUT', url + name, '');
|
|
};
|
|
};
|
|
|
|
var fi = $('input[type=file]');
|
|
|
|
$('.upload').onclick = () => fi.click();
|
|
|
|
fi.onchange = () => {
|
|
if (!fi.files.length) return;
|
|
|
|
var body = new Blob(fi.files);
|
|
var name = fi.files[0].name;
|
|
|
|
return req('PUT', url + name, body);
|
|
};
|