webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +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');
});
};
}]);
};

18
resources/assets/js/directives.js
View File

@ -162,7 +162,7 @@ module.exports = function (ngApp, events) {
};
}]);
ngApp.directive('tinymce', [function() {
ngApp.directive('tinymce', ['$timeout', function($timeout) {
return {
restrict: 'A',
scope: {
@ -173,14 +173,24 @@ module.exports = function (ngApp, events) {
link: function (scope, element, attrs) {
function tinyMceSetup(editor) {
editor.on('keyup', (e) => {
editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
var content = editor.getContent();
console.log(content);
scope.$apply(() => {
$timeout(() => {
scope.mceModel = content;
});
scope.mceChange(content);
});
editor.on('init', (e) => {
scope.mceModel = editor.getContent();
});
scope.$on('html-update', (event, value) => {
editor.setContent(value);
editor.selection.select(editor.getBody(), true);
editor.selection.collapse(false);
scope.mceModel = editor.getContent();
});
}
scope.tinymce.extraSetups.push(tinyMceSetup);

6
resources/assets/js/global.js
View File

@ -54,10 +54,10 @@ $.expr[":"].contains = $.expr.createPseudo(function (arg) {
// Global jQuery Elements
$(function () {
var notifications = $('.notification');
var successNotification = notifications.filter('.pos');
var errorNotification = notifications.filter('.neg');
var warningNotification = notifications.filter('.warning');
// Notification Events
window.Events.listen('success', function (text) {
successNotification.hide();
@ -66,6 +66,10 @@ $(function () {
successNotification.show();
}, 1);
});
window.Events.listen('warning', function (text) {
warningNotification.find('span').text(text);
warningNotification.show();
});
window.Events.listen('error', function (text) {
errorNotification.find('span').text(text);
errorNotification.show();

2
resources/assets/js/pages/page-form.js
View File

@ -54,8 +54,6 @@ var mceOptions = module.exports = {
extraSetups: [],
setup: function (editor) {
console.log(mceOptions.extraSetups);
for (var i = 0; i < mceOptions.extraSetups.length; i++) {
mceOptions.extraSetups[i](editor);
}