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

   1 "use strict";
   2
   3 module.exports = function (ngApp, events) {
   4
   5     ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService',
   6         function ($scope, $attrs, $http, $timeout, imageManagerService) {
   7             $scope.images = [];
   8             $scope.imageType = $attrs.imageType;
   9             $scope.selectedImage = false;
  10             $scope.dependantPages = false;
  11             $scope.showing = false;
  12             $scope.hasMore = false;
  13             $scope.imageUpdateSuccess = false;
  14             $scope.imageDeleteSuccess = false;
  15             var page = 0;
  16             var previousClickTime = 0;
  17             var dataLoaded = false;
  18             var callback = false;
  19
  20             /**
  21              * Simple returns the appropriate upload url depending on the image type set.
  22              * @returns {string}
  23              */
  24             $scope.getUploadUrl = function () {
  25                 return '/images/' + $scope.imageType + '/upload';
  26             };
  27
  28             /**
  29              * Runs on image upload, Adds an image to local list of images
  30              * and shows a success message to the user.
  31              * @param file
  32              * @param data
  33              */
  34             $scope.uploadSuccess = function (file, data) {
  35                 $scope.$apply(() => {
  36                     $scope.images.unshift(data);
  37                 });
  38                 events.emit('success', 'Image uploaded');
  39             };
  40
  41             /**
  42              * Runs the callback and hides the image manager.
  43              * @param returnData
  44              */
  45             function callbackAndHide(returnData) {
  46                 if (callback) callback(returnData);
  47                 $scope.showing = false;
  48             }
  49
  50             /**
  51              * Image select action. Checks if a double-click was fired.
  52              * @param image
  53              */
  54             $scope.imageSelect = function (image) {
  55                 var dblClickTime = 300;
  56                 var currentTime = Date.now();
  57                 var timeDiff = currentTime - previousClickTime;
  58
  59                 if (timeDiff < dblClickTime) {
  60                     // If double click
  61                     callbackAndHide(image);
  62                 } else {
  63                     // If single
  64                     $scope.selectedImage = image;
  65                     $scope.dependantPages = false;
  66                 }
  67                 previousClickTime = currentTime;
  68             };
  69
  70             /**
  71              * Action that runs when the 'Select image' button is clicked.
  72              * Runs the callback and hides the image manager.
  73              */
  74             $scope.selectButtonClick = function () {
  75                 callbackAndHide($scope.selectedImage);
  76             };
  77
  78             /**
  79              * Show the image manager.
  80              * Takes a callback to execute later on.
  81              * @param doneCallback
  82              */
  83             function show(doneCallback) {
  84                 callback = doneCallback;
  85                 $scope.showing = true;
  86                 // Get initial images if they have not yet been loaded in.
  87                 if (!dataLoaded) {
  88                     fetchData();
  89                     dataLoaded = true;
  90                 }
  91             }
  92
  93             // Connects up the image manger so it can be used externally
  94             // such as from TinyMCE.
  95             imageManagerService.show = show;
  96             imageManagerService.showExternal = function (doneCallback) {
  97                 $scope.$apply(() => {
  98                     show(doneCallback);
  99                 });
 100             };
 101             window.ImageManager = imageManagerService;
 102
 103             /**
 104              * Hide the image manager
 105              */
 106             $scope.hide = function () {
 107                 $scope.showing = false;
 108             };
 109
 110             /**
 111              * Fetch the list image data from the server.
 112              */
 113             function fetchData() {
 114                 var url = '/images/' + $scope.imageType + '/all/' + page;
 115                 $http.get(url).then((response) => {
 116                     $scope.images = $scope.images.concat(response.data.images);
 117                     $scope.hasMore = response.data.hasMore;
 118                     page++;
 119                 });
 120             }
 121
 122             $scope.fetchData = fetchData;
 123
 124             /**
 125              * Save the details of an image.
 126              * @param event
 127              */
 128             $scope.saveImageDetails = function (event) {
 129                 event.preventDefault();
 130                 var url = '/images/update/' + $scope.selectedImage.id;
 131                 $http.put(url, this.selectedImage).then((response) => {
 132                     events.emit('success', 'Image details updated');
 133                 }, (response) => {
 134                     if (response.status === 422) {
 135                         var errors = response.data;
 136                         var message = '';
 137                         Object.keys(errors).forEach((key) => {
 138                             message += errors[key].join('\n');
 139                         });
 140                         events.emit('error', message);
 141                     } else if (response.status === 403) {
 142                         events.emit('error', response.data.error);
 143                     }
 144                 });
 145             };
 146
 147             /**
 148              * Delete an image from system and notify of success.
 149              * Checks if it should force delete when an image
 150              * has dependant pages.
 151              * @param event
 152              */
 153             $scope.deleteImage = function (event) {
 154                 event.preventDefault();
 155                 var force = $scope.dependantPages !== false;
 156                 var url = '/images/' + $scope.selectedImage.id;
 157                 if (force) url += '?force=true';
 158                 $http.delete(url).then((response) => {
 159                     $scope.images.splice($scope.images.indexOf($scope.selectedImage), 1);
 160                     $scope.selectedImage = false;
 161                     events.emit('success', 'Image successfully deleted');
 162                 }, (response) => {
 163                     // Pages failure
 164                     if (response.status === 400) {
 165                         $scope.dependantPages = response.data;
 166                     } else if (response.status === 403) {
 167                         events.emit('error', response.data.error);
 168                     }
 169                 });
 170             };
 171
 172             /**
 173              * Simple date creator used to properly format dates.
 174              * @param stringDate
 175              * @returns {Date}
 176              */
 177             $scope.getDate = function (stringDate) {
 178                 return new Date(stringDate);
 179             };
 180
 181         }]);
 182
 183
 184     ngApp.controller('BookShowController', ['$scope', '$http', '$attrs', '$sce', function ($scope, $http, $attrs, $sce) {
 185         $scope.searching = false;
 186         $scope.searchTerm = '';
 187         $scope.searchResults = '';
 188
 189         $scope.searchBook = function (e) {
 190             e.preventDefault();
 191             var term = $scope.searchTerm;
 192             if (term.length == 0) return;
 193             $scope.searching = true;
 194             $scope.searchResults = '';
 195             var searchUrl = '/search/book/' + $attrs.bookId;
 196             searchUrl += '?term=' + encodeURIComponent(term);
 197             $http.get(searchUrl).then((response) => {
 198                 $scope.searchResults = $sce.trustAsHtml(response.data);
 199             });
 200         };
 201
 202         $scope.checkSearchForm = function () {
 203             if ($scope.searchTerm.length < 1) {
 204                 $scope.searching = false;
 205             }
 206         };
 207
 208         $scope.clearSearch = function () {
 209             $scope.searching = false;
 210             $scope.searchTerm = '';
 211         };
 212
 213     }]);
 214
 215
 216     ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', function ($scope, $http, $attrs, $interval, $timeout) {
 217
 218         $scope.editorOptions = require('./pages/page-form');
 219         $scope.editorHtml = '';
 220         $scope.draftText = '';
 221         var pageId = Number($attrs.pageId);
 222         var isEdit = pageId !== 0;
 223         var autosaveFrequency = 30; // AutoSave interval in seconds.
 224         $scope.isDraft = Number($attrs.pageDraft) === 1;
 225         if ($scope.isDraft) $scope.draftText = 'Editing Draft';
 226
 227         var autoSave = false;
 228
 229         var currentContent = {
 230             title: false,
 231             html: false
 232         };
 233
 234         if (isEdit) {
 235             setTimeout(() => {
 236                 startAutoSave();
 237             }, 1000);
 238         }
 239
 240         $scope.editorChange = function () {}
 241
 242         /**
 243          * Start the AutoSave loop, Checks for content change
 244          * before performing the costly AJAX request.
 245          */
 246         function startAutoSave() {
 247             currentContent.title = $('#name').val();
 248             currentContent.html = $scope.editorHtml;
 249
 250             autoSave = $interval(() => {
 251                 var newTitle = $('#name').val();
 252                 var newHtml = $scope.editorHtml;
 253
 254                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
 255                     currentContent.html = newHtml;
 256                     currentContent.title = newTitle;
 257                     saveDraftUpdate(newTitle, newHtml);
 258                 }
 259             }, 1000 * autosaveFrequency);
 260         }
 261
 262         /**
 263          * Save a draft update into the system via an AJAX request.
 264          * @param title
 265          * @param html
 266          */
 267         function saveDraftUpdate(title, html) {
 268             $http.put('/ajax/page/' + pageId + '/save-draft', {
 269                 name: title,
 270                 html: html
 271             }).then((responseData) => {
 272                 $scope.draftText = responseData.data.message;
 273                 $scope.isDraft = true;
 274             });
 275         }
 276
 277         /**
 278          * Discard the current draft and grab the current page
 279          * content from the system via an AJAX request.
 280          */
 281         $scope.discardDraft = function () {
 282             $http.get('/ajax/page/' + pageId).then((responseData) => {
 283                 if (autoSave) $interval.cancel(autoSave);
 284                 $scope.draftText = '';
 285                 $scope.isDraft = false;
 286                 $scope.$broadcast('html-update', responseData.data.html);
 287                 $('#name').val(currentContent.title);
 288                 $timeout(() => {
 289                     startAutoSave();
 290                 }, 1000);
 291                 events.emit('success', 'Draft discarded, The editor has been updated with the current page content');
 292             });
 293         };
 294
 295     }]);
 296
 297 };