cavern/include/js/edit.js
2019-05-30 14:18:07 +08:00

177 lines
5.6 KiB
JavaScript

let edtior;
editormd.urls = {
atLinkBase : "user.php?username="
};
// create editor instance
editor = editormd('markdownEditor', {
height: 450,
path: "https://pandao.github.io/editor.md/lib/",
markdown: document.edit.content.value,
htmlDecode : "script,iframe|on*",
placeholder: '',
styleActiveLine: false,
"font-size": '14px',
emoji: true,
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true,
watch: false,
lineNumbers: false,
lineWrapping: false,
toolbarAutoFixed: false,
toolbarIcons : function() {
return [
"search", "|",
"undo", "redo", "|",
"bold", "del", "italic", "|",
"list-ul", "list-ol", "emoji", "html-entities", "|",
"link", "image", "|",
"preview", "fullscreen", "||",
"help", "info",
]
},
toolbarIconsClass: {
preview: 'fa-eye'
},
onload: function() {
var __this__ = this;
$('ul.editormd-menu').addClass('unstyled'); // remove style of TocasUI
$('ul.editormd-menu i[name="emoji"]').parent().click(function () { // remove style of TocasUI from emoji tab (hack)
setTimeout(()=>{ $('ul.editormd-tab-head').addClass('unstyled'); }, 300);
});
this.resize();
loadDraft();
document.edit.title.addEventListener("keydown", function () {
saveDraft(__this__);
})
this.cm.on("change", function(_cm, _changeObj) {
saveDraft(__this__);
});
},
onresize: function() {
if (this.state.preview) {
requestAnimationFrame(()=>{
this.previewed();
this.previewing();
});
}
},
onpreviewing: function() {
this.save();
// use tocas-ui style tables
$('table').each((_i,e) => {
$(e).addClass('ts celled table').css('display','table');
});
// prevent user from destroying page style
var parser = new cssjs();
let stylesheets = document.querySelectorAll('.markdown-body style');
for (let style of stylesheets) {
let ruleSource = style.innerHTML;
let cssObject = parser.parseCSS(ruleSource);
for (let rule of cssObject) {
let valid = false;
let validPrefix = [".markdown-body ", ".editormd-preview-container ", ".markdown-body.editormd-preview-container ", ".editormd-preview-container.markdown-body "];
validPrefix.forEach((e, _i) => {
valid = valid || rule.selector.startsWith(e);
});
if (!rule.selector.startsWith('@')) { // '@keyframe' & '@import'
if (!valid) {
rule.selector = ".editormd-preview-container " + rule.selector;
}
}
}
style.innerHTML = parser.getCSSForEditor(cssObject);
}
}
});
// save draft data
function saveDraft(editor) {
localStorage.setItem('cavern_draft_title', document.edit.title.value);
localStorage.setItem('cavern_draft_id', document.edit.pid.value);
localStorage.setItem('cavern_draft_content', editor.getMarkdown());
localStorage.setItem('cavern_draft_time', new Date().getTime());
}
// Ask if user want to load draft
function loadDraft() {
if ($('#pid').val() == localStorage.getItem('cavern_draft_id')) {
swal({
type: 'question',
title: '要載入上次備份嗎?',
showCancelButton: true,
confirmButtonText: '載入',
cancelButtonText: '取消',
}).then((result) => {
if (result.value) { // confirm
document.edit.title.value = localStorage.getItem('cavern_draft_title');
editor.setValue(localStorage.getItem('cavern_draft_content'));
}
});
}
}
// Post an article
$(document.edit).on('submit', function(e) {
e.preventDefault();
var _this = this;
let fd = new URLSearchParams(new FormData(this)).toString();
axios.request({
method: "POST",
data: fd,
url: "post.php",
headers: {
'Content-Type': "application/x-www-form-urlencoded"
}
}).then(function (res) {
if (_this.pid.value == localStorage.getItem('cavern_draft_id')) {
['id', 'title', 'content', 'time'].forEach((name) => {
localStorage.removeItem(`cavern_draft_${name}`);
});
}
location.href = res.headers["axios-location"];
}).catch(function (error) {
if (error.response) {
location.href = error.response.headers["axios-location"];
}
});
});
// Delete post confirm message
$('.action.column .delete').on('click', function(e) {
e.preventDefault();
var el = this;
var href = el.getAttribute('href');
swal({
type: 'question',
title: '確定要刪除嗎?',
showCancelButton: true,
confirmButtonText: '確定',
cancelButtonText: '取消',
}).then((result) => {
if (result.value) { // confirm
axios.request({
method: "GET",
url: href
}).then(function (res) {
location.href = res.headers["axios-location"];
}).catch(function (error){
if (error.response) {
location.href = error.response.headers["axios-location"];
}
});
}
});
});
// session keep alive
setInterval(function() {
$.get('ajax/posts.php');
}, 5*60*1000);