mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-30 04:15:58 +08:00
Finished migration of last angular code
This commit is contained in:
Dan Brown
@ -1,144 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const moment = require('moment');
|
||||
require('moment/locale/en-gb');
|
||||
|
||||
moment.locale('en-gb');
|
||||
|
||||
module.exports = function (ngApp, events) {
|
||||
|
||||
|
||||
ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce',
|
||||
function ($scope, $http, $attrs, $interval, $timeout, $sce) {
|
||||
|
||||
$scope.editorHTML = '';
|
||||
$scope.editorMarkdown = '';
|
||||
|
||||
$scope.draftText = '';
|
||||
let pageId = Number($attrs.pageId);
|
||||
let isEdit = pageId !== 0;
|
||||
let autosaveFrequency = 30; // AutoSave interval in seconds.
|
||||
let isMarkdown = $attrs.editorType === 'markdown';
|
||||
$scope.draftsEnabled = $attrs.draftsEnabled === 'true';
|
||||
$scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
|
||||
$scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
|
||||
|
||||
// Set initial header draft text
|
||||
if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
|
||||
$scope.draftText = trans('entities.pages_editing_draft');
|
||||
} else {
|
||||
$scope.draftText = trans('entities.pages_editing_page');
|
||||
}
|
||||
|
||||
let autoSave = false;
|
||||
|
||||
let currentContent = {
|
||||
title: false,
|
||||
html: false
|
||||
};
|
||||
|
||||
if (isEdit && $scope.draftsEnabled) {
|
||||
setTimeout(() => {
|
||||
startAutoSave();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
let lastSave = 0;
|
||||
|
||||
/**
|
||||
* Start the AutoSave loop, Checks for content change
|
||||
* before performing the costly AJAX request.
|
||||
*/
|
||||
function startAutoSave() {
|
||||
currentContent.title = $('#name').val();
|
||||
currentContent.html = $scope.editorHTML;
|
||||
|
||||
autoSave = $interval(() => {
|
||||
// Return if manually saved recently to prevent bombarding the server
|
||||
if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return;
|
||||
let newTitle = $('#name').val();
|
||||
let newHtml = $scope.editorHTML;
|
||||
|
||||
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
||||
currentContent.html = newHtml;
|
||||
currentContent.title = newTitle;
|
||||
saveDraft();
|
||||
}
|
||||
|
||||
}, 1000 * autosaveFrequency);
|
||||
}
|
||||
|
||||
let draftErroring = false;
|
||||
/**
|
||||
* Save a draft update into the system via an AJAX request.
|
||||
*/
|
||||
function saveDraft() {
|
||||
if (!$scope.draftsEnabled) return;
|
||||
|
||||
let data = {
|
||||
name: $('#name').val(),
|
||||
html: $scope.editorHTML
|
||||
};
|
||||
if (isMarkdown) data.markdown = $scope.editorMarkdown;
|
||||
|
||||
let url = window.baseUrl('/ajax/page/' + pageId + '/save-draft');
|
||||
$http.put(url, data).then(responseData => {
|
||||
draftErroring = false;
|
||||
let updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
|
||||
$scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
|
||||
if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
|
||||
showDraftSaveNotification();
|
||||
lastSave = Date.now();
|
||||
}, errorRes => {
|
||||
if (draftErroring) return;
|
||||
events.emit('error', trans('errors.page_draft_autosave_fail'));
|
||||
draftErroring = true;
|
||||
});
|
||||
}
|
||||
|
||||
function showDraftSaveNotification() {
|
||||
$scope.draftUpdated = true;
|
||||
$timeout(() => {
|
||||
$scope.draftUpdated = false;
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
$scope.forceDraftSave = function() {
|
||||
saveDraft();
|
||||
};
|
||||
|
||||
// Listen to save draft events from editor
|
||||
window.$events.listen('editor-save-draft', saveDraft);
|
||||
|
||||
// Listen to content changes from the editor
|
||||
window.$events.listen('editor-html-change', html => {
|
||||
$scope.editorHTML = html;
|
||||
});
|
||||
window.$events.listen('editor-markdown-change', markdown => {
|
||||
$scope.editorMarkdown = markdown;
|
||||
});
|
||||
|
||||
/**
|
||||
* Discard the current draft and grab the current page
|
||||
* content from the system via an AJAX request.
|
||||
*/
|
||||
$scope.discardDraft = function () {
|
||||
let url = window.baseUrl('/ajax/page/' + pageId);
|
||||
$http.get(url).then(responseData => {
|
||||
if (autoSave) $interval.cancel(autoSave);
|
||||
|
||||
$scope.draftText = trans('entities.pages_editing_page');
|
||||
$scope.isUpdateDraft = false;
|
||||
window.$events.emit('editor-html-update', responseData.data.html);
|
||||
window.$events.emit('editor-markdown-update', responseData.data.markdown || responseData.data.html);
|
||||
|
||||
$('#name').val(responseData.data.name);
|
||||
$timeout(() => {
|
||||
startAutoSave();
|
||||
}, 1000);
|
||||
events.emit('success', trans('entities.pages_draft_discarded'));
|
||||
});
|
||||
};
|
||||
|
||||
}]);
|
||||
};
|
||||
@ -58,16 +58,6 @@ window.$http = axiosInstance;
|
||||
Vue.prototype.$http = axiosInstance;
|
||||
Vue.prototype.$events = window.$events;
|
||||
|
||||
|
||||
// AngularJS - Create application and load components
|
||||
const angular = require("angular");
|
||||
require("angular-resource");
|
||||
require("angular-animate");
|
||||
require("angular-sanitize");
|
||||
require("angular-ui-sortable");
|
||||
|
||||
let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
|
||||
|
||||
// Translation setup
|
||||
// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
|
||||
const Translations = require("./translations");
|
||||
@ -79,9 +69,6 @@ window.trans_choice = translator.getPlural.bind(translator);
|
||||
require("./vues/vues");
|
||||
require("./components");
|
||||
|
||||
// Load in angular specific items
|
||||
const Controllers = require('./controllers');
|
||||
Controllers(ngApp, window.$events);
|
||||
|
||||
//Global jQuery Config & Extensions
|
||||
|
||||
|
||||
149
resources/assets/js/vues/page-editor.js
Normal file
149
resources/assets/js/vues/page-editor.js
Normal file
@ -0,0 +1,149 @@
|
||||
const moment = require('moment');
|
||||
require('moment/locale/en-gb');
|
||||
moment.locale('en-gb');
|
||||
|
||||
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 draft events from editor
|
||||
window.$events.listen('editor-save-draft', this.saveDraft);
|
||||
|
||||
// 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;
|
||||
let updateTime = moment.utc(moment.unix(response.data.timestamp)).toDate();
|
||||
if (!this.isNewPageDraft) this.isUpdateDraft = true;
|
||||
this.draftNotifyChange(response.data.message + moment(updateTime).format('HH:mm'));
|
||||
lastSave = Date.now();
|
||||
}, errorRes => {
|
||||
if (draftErroring) return;
|
||||
window.$events('error', trans('errors.page_draft_autosave_fail'));
|
||||
draftErroring = true;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
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,
|
||||
};
|
||||
@ -11,6 +11,7 @@ let vueMapping = {
|
||||
'image-manager': require('./image-manager'),
|
||||
'tag-manager': require('./tag-manager'),
|
||||
'attachment-manager': require('./attachment-manager'),
|
||||
'page-editor': require('./page-editor'),
|
||||
};
|
||||
|
||||
window.vues = {};
|
||||
|
||||
Reference in New Issue
Block a user