Upgraded app to Laravel 5.7

resources/js/vues/page-editor.js

@@ -0,0 +1,150 @@
+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,
+};