webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-27 06:01:54 +03:00
Code Activity

Added UI components of page autosaving

Browse Source
This commit is contained in:
Dan Brown
2016-03-12 15:52:19 +00:00
parent 93ebdf724b
commit 30214fde74
12 changed files with 237 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
resources/assets/js/controllers.js
View File

@ -213,49 +213,85 @@ module.exports = function (ngApp, events) {
}]);
ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', function ($scope, $http, $attrs, $interval) {
ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', function ($scope, $http, $attrs, $interval, $timeout) {
$scope.editorOptions = require('./pages/page-form');
$scope.editorHtml = '';
$scope.draftText = '';
var pageId = Number($attrs.pageId);
var isEdit = pageId !== 0;
var autosaveFrequency = 30; // AutoSave interval in seconds.
$scope.isDraft = Number($attrs.pageDraft) === 1;
if ($scope.isDraft) $scope.draftText = 'Editing Draft';
var autoSave = false;
var currentContent = {
title: false,
html: false
};
if (isEdit) {
startAutoSave();
setTimeout(() => {
startAutoSave();
}, 1000);
}
$scope.editorChange = function() {
$scope.draftText = '';
}
$scope.editorChange = function () {}
/**
* Start the AutoSave loop, Checks for content change
* before performing the costly AJAX request.
*/
function startAutoSave() {
var currentTitle = $('#name').val();
var currentHtml = $scope.editorHtml;
currentContent.title = $('#name').val();
currentContent.html = $scope.editorHtml;
console.log('Starting auto save');
$interval(() => {
autoSave = $interval(() => {
var newTitle = $('#name').val();
var newHtml = $scope.editorHtml;
if (newTitle !== currentTitle || newHtml !== currentHtml) {
currentHtml = newHtml;
currentTitle = newTitle;
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
currentContent.html = newHtml;
currentContent.title = newTitle;
saveDraftUpdate(newTitle, newHtml);
}
}, 1000*5);
}, 1000 * autosaveFrequency);
}
/**
* Save a draft update into the system via an AJAX request.
* @param title
* @param html
*/
function saveDraftUpdate(title, html) {
$http.put('/ajax/page/' + pageId + '/save-draft', {
name: title,
html: html
}).then((responseData) => {
$scope.draftText = 'Draft saved'
})
$scope.draftText = responseData.data.message;
$scope.isDraft = true;
});
}
/**
* Discard the current draft and grab the current page
* content from the system via an AJAX request.
*/
$scope.discardDraft = function () {
$http.get('/ajax/page/' + pageId).then((responseData) => {
if (autoSave) $interval.cancel(autoSave);
$scope.draftText = '';
$scope.isDraft = false;
$scope.$broadcast('html-update', responseData.data.html);
$('#name').val(currentContent.title);
$timeout(() => {
startAutoSave();
}, 1000);
events.emit('success', 'Draft discarded, The editor has been updated with the current page content');
});
};
}]);
};