From 61fad6a665013f079c9ff2a88c2dd32d5b87bdda Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 30 Sep 2017 13:26:48 +0100 Subject: [PATCH] Finished migration of last angular code --- package.json | 5 - readme.md | 1 - resources/assets/js/controllers.js | 144 ----------------------- resources/assets/js/global.js | 13 --- resources/assets/js/vues/page-editor.js | 149 ++++++++++++++++++++++++ resources/assets/js/vues/vues.js | 1 + resources/views/pages/form.blade.php | 26 ++--- 7 files changed, 163 insertions(+), 176 deletions(-) delete mode 100644 resources/assets/js/controllers.js create mode 100644 resources/assets/js/vues/page-editor.js diff --git a/package.json b/package.json index ed8338abb..23b01cf6e 100644 --- a/package.json +++ b/package.json @@ -25,11 +25,6 @@ "yargs": "^7.1.0" }, "dependencies": { - "angular": "^1.5.5", - "angular-animate": "^1.5.5", - "angular-resource": "^1.5.5", - "angular-sanitize": "^1.5.5", - "angular-ui-sortable": "^0.17.0", "axios": "^0.16.1", "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.24.1", diff --git a/readme.md b/readme.md index 1d4ed682e..e048e8ea6 100644 --- a/readme.md +++ b/readme.md @@ -76,7 +76,6 @@ The BookStack source is provided under the MIT License. These are the great open-source projects used to help build BookStack: * [Laravel](http://laravel.com/) -* [AngularJS](https://angularjs.org/) * [jQuery](https://jquery.com/) * [TinyMCE](https://www.tinymce.com/) * [CodeMirror](https://codemirror.net) diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js deleted file mode 100644 index 6a7fa9890..000000000 --- a/resources/assets/js/controllers.js +++ /dev/null @@ -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')); - }); - }; - - }]); -}; diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index faf5a499d..352616c5a 100644 --- a/resources/assets/js/global.js +++ b/resources/assets/js/global.js @@ -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 diff --git a/resources/assets/js/vues/page-editor.js b/resources/assets/js/vues/page-editor.js new file mode 100644 index 000000000..11413131f --- /dev/null +++ b/resources/assets/js/vues/page-editor.js @@ -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, +}; \ No newline at end of file diff --git a/resources/assets/js/vues/vues.js b/resources/assets/js/vues/vues.js index a70d32009..be6092287 100644 --- a/resources/assets/js/vues/vues.js +++ b/resources/assets/js/vues/vues.js @@ -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 = {}; diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php index 6769240d5..c4a639898 100644 --- a/resources/views/pages/form.blade.php +++ b/resources/views/pages/form.blade.php @@ -1,5 +1,5 @@ -
+
{{ csrf_field() }} @@ -15,30 +15,30 @@
-
-   - +
+   +
-
+
- +

  • {{ trans('entities.pages_edit_enter_changelog_desc') }}

    - +
@@ -86,7 +86,7 @@
-
+
@@ -98,7 +98,7 @@
{{ trans('entities.pages_md_preview') }}
-
+