BookStack/resources/js/vues/page-editor.js

150 lines
4.5 KiB
JavaScript
Raw Normal View History

import * as Dates from "../services/dates";
let autoSaveFrequency = 30;
let autoSave = false;
let draftErroring = false;
let currentContent = {
title: false,
html: false
};
let lastSave = 0;
function mounted() {
let elem = this.$el;
this.draftsEnabled = elem.getAttribute('drafts-enabled') === 'true';
this.editorType = elem.getAttribute('editor-type');
this.pageId= Number(elem.getAttribute('page-id'));
this.isNewDraft = Number(elem.getAttribute('page-new-draft')) === 1;
this.isUpdateDraft = Number(elem.getAttribute('page-update-draft')) === 1;
if (this.pageId !== 0 && this.draftsEnabled) {
window.setTimeout(() => {
this.startAutoSave();
}, 1000);
}
if (this.isUpdateDraft || this.isNewDraft) {
this.draftText = trans('entities.pages_editing_draft');
} else {
this.draftText = trans('entities.pages_editing_page');
}
// Listen to save events from editor
window.$events.listen('editor-save-draft', this.saveDraft);
window.$events.listen('editor-save-page', this.savePage);
// Listen to content changes from the editor
window.$events.listen('editor-html-change', html => {
this.editorHTML = html;
});
window.$events.listen('editor-markdown-change', markdown => {
this.editorMarkdown = markdown;
});
}
let data = {
draftsEnabled: false,
editorType: 'wysiwyg',
pagedId: 0,
isNewDraft: false,
isUpdateDraft: false,
draftText: '',
draftUpdated : false,
changeSummary: '',
editorHTML: '',
editorMarkdown: '',
};
let methods = {
startAutoSave() {
currentContent.title = document.getElementById('name').value.trim();
currentContent.html = this.editorHTML;
autoSave = window.setInterval(() => {
// Return if manually saved recently to prevent bombarding the server
if (Date.now() - lastSave < (1000 * autoSaveFrequency)/2) return;
const newTitle = document.getElementById('name').value.trim();
const newHtml = this.editorHTML;
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
currentContent.html = newHtml;
currentContent.title = newTitle;
this.saveDraft();
}
}, 1000 * autoSaveFrequency);
},
saveDraft() {
if (!this.draftsEnabled) return;
const data = {
name: document.getElementById('name').value.trim(),
html: this.editorHTML
};
if (this.editorType === 'markdown') data.markdown = this.editorMarkdown;
const url = window.baseUrl(`/ajax/page/${this.pageId}/save-draft`);
window.$http.put(url, data).then(response => {
draftErroring = false;
if (!this.isNewDraft) this.isUpdateDraft = true;
this.draftNotifyChange(`${response.data.message} ${Dates.utcTimeStampToLocalTime(response.data.timestamp)}`);
lastSave = Date.now();
}, errorRes => {
if (draftErroring) return;
window.$events.emit('error', trans('errors.page_draft_autosave_fail'));
draftErroring = true;
});
},
savePage() {
this.$el.closest('form').submit();
},
draftNotifyChange(text) {
this.draftText = text;
this.draftUpdated = true;
window.setTimeout(() => {
this.draftUpdated = false;
}, 2000);
},
discardDraft() {
let url = window.baseUrl(`/ajax/page/${this.pageId}`);
window.$http.get(url).then(response => {
if (autoSave) window.clearInterval(autoSave);
this.draftText = trans('entities.pages_editing_page');
this.isUpdateDraft = false;
window.$events.emit('editor-html-update', response.data.html);
window.$events.emit('editor-markdown-update', response.data.markdown || response.data.html);
document.getElementById('name').value = response.data.name;
window.setTimeout(() => {
this.startAutoSave();
}, 1000);
window.$events.emit('success', trans('entities.pages_draft_discarded'));
});
},
};
let computed = {
changeSummaryShort() {
let len = this.changeSummary.length;
if (len === 0) return trans('entities.pages_edit_set_changelog');
if (len <= 16) return this.changeSummary;
return this.changeSummary.slice(0, 16) + '...';
}
};
export default {
mounted, data, methods, computed,
};