mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-31 16:12:42 +01:00
d3d8ddbe52
404 handling now not a hack-around and uses Laravel 'fallback' routes instead. Prevents errors with the session when you have mulitple errors on a page where a post/put/delete is made.
150 lines
4.5 KiB
JavaScript
150 lines
4.5 KiB
JavaScript
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;
|
|
let newTitle = document.getElementById('name').value.trim();
|
|
let 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;
|
|
|
|
let data = {
|
|
name: document.getElementById('name').value.trim(),
|
|
html: this.editorHTML
|
|
};
|
|
|
|
if (this.editorType === 'markdown') data.markdown = this.editorMarkdown;
|
|
|
|
let 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) + '...';
|
|
}
|
|
};
|
|
|
|
module.exports = {
|
|
mounted, data, methods, computed,
|
|
}; |