BookStack Code Mirror - bookstack/blob - resources/assets/js/controllers.js

   1 "use strict";
   2
   3 const moment = require('moment');
   4 require('moment/locale/en-gb');
   5
   6 moment.locale('en-gb');
   7
   8 module.exports = function (ngApp, events) {
   9
  10
  11     ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce',
  12         function ($scope, $http, $attrs, $interval, $timeout, $sce) {
  13
  14         $scope.editorHTML = '';
  15         $scope.editorMarkdown = '';
  16
  17         $scope.draftText = '';
  18         let pageId = Number($attrs.pageId);
  19         let isEdit = pageId !== 0;
  20         let autosaveFrequency = 30; // AutoSave interval in seconds.
  21         let isMarkdown = $attrs.editorType === 'markdown';
  22         $scope.draftsEnabled = $attrs.draftsEnabled === 'true';
  23         $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
  24         $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
  25
  26         // Set initial header draft text
  27         if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
  28             $scope.draftText = trans('entities.pages_editing_draft');
  29         } else {
  30             $scope.draftText = trans('entities.pages_editing_page');
  31         }
  32
  33         let autoSave = false;
  34
  35         let currentContent = {
  36             title: false,
  37             html: false
  38         };
  39
  40         if (isEdit && $scope.draftsEnabled) {
  41             setTimeout(() => {
  42                 startAutoSave();
  43             }, 1000);
  44         }
  45
  46         let lastSave = 0;
  47
  48         /**
  49          * Start the AutoSave loop, Checks for content change
  50          * before performing the costly AJAX request.
  51          */
  52         function startAutoSave() {
  53             currentContent.title = $('#name').val();
  54             currentContent.html = $scope.editorHTML;
  55
  56             autoSave = $interval(() => {
  57                 // Return if manually saved recently to prevent bombarding the server
  58                 if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return;
  59                 let newTitle = $('#name').val();
  60                 let newHtml = $scope.editorHTML;
  61
  62                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
  63                     currentContent.html = newHtml;
  64                     currentContent.title = newTitle;
  65                     saveDraft();
  66                 }
  67
  68             }, 1000 * autosaveFrequency);
  69         }
  70
  71         let draftErroring = false;
  72         /**
  73          * Save a draft update into the system via an AJAX request.
  74          */
  75         function saveDraft() {
  76             if (!$scope.draftsEnabled) return;
  77
  78             let data = {
  79                 name: $('#name').val(),
  80                 html: $scope.editorHTML
  81             };
  82             if (isMarkdown) data.markdown = $scope.editorMarkdown;
  83
  84             let url = window.baseUrl('/ajax/page/' + pageId + '/save-draft');
  85             $http.put(url, data).then(responseData => {
  86                 draftErroring = false;
  87                 let updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
  88                 $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
  89                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
  90                 showDraftSaveNotification();
  91                 lastSave = Date.now();
  92             }, errorRes => {
  93                 if (draftErroring) return;
  94                 events.emit('error', trans('errors.page_draft_autosave_fail'));
  95                 draftErroring = true;
  96             });
  97         }
  98
  99         function showDraftSaveNotification() {
 100             $scope.draftUpdated = true;
 101             $timeout(() => {
 102                 $scope.draftUpdated = false;
 103             }, 2000)
 104         }
 105
 106         $scope.forceDraftSave = function() {
 107             saveDraft();
 108         };
 109
 110         // Listen to save draft events from editor
 111         window.$events.listen('editor-save-draft', saveDraft);
 112
 113         // Listen to content changes from the editor
 114         window.$events.listen('editor-html-change', html => {
 115             $scope.editorHTML = html;
 116         });
 117         window.$events.listen('editor-markdown-change', markdown => {
 118             $scope.editorMarkdown = markdown;
 119         });
 120
 121         /**
 122          * Discard the current draft and grab the current page
 123          * content from the system via an AJAX request.
 124          */
 125         $scope.discardDraft = function () {
 126             let url = window.baseUrl('/ajax/page/' + pageId);
 127             $http.get(url).then(responseData => {
 128                 if (autoSave) $interval.cancel(autoSave);
 129
 130                 $scope.draftText = trans('entities.pages_editing_page');
 131                 $scope.isUpdateDraft = false;
 132                 window.$events.emit('editor-html-update', responseData.data.html);
 133                 window.$events.emit('editor-markdown-update', responseData.data.markdown || responseData.data.html);
 134
 135                 $('#name').val(responseData.data.name);
 136                 $timeout(() => {
 137                     startAutoSave();
 138                 }, 1000);
 139                 events.emit('success', trans('entities.pages_draft_discarded'));
 140             });
 141         };
 142
 143     }]);
 144 };