Finished migration of last angular code

diff --git a/package.json b/package.json
index ed8338abbcae0e595a1b014593378cdc99d010d4..23b01cf6ef070b85345e4290dc27b1ba441ecbf0 100644 (file)
--- a/package.json
+++ b/package.json
@@ -25,11 +25,6 @@
     "yargs": "^7.1.0"
   },
   "dependencies": {
     "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",
     "axios": "^0.16.1",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",

diff --git a/readme.md b/readme.md
index 1d4ed682e9e4b684a20542919a5e1e00389f2f12..e048e8ea63663078e53dfaca590adea7f35f2681 100644 (file)
--- 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/)
 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)
 * [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 (file)
index 6a7fa98..0000000
--- 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 faf5a499d34e906f71f3cedaaf0d9d2f4ed6f3f0..352616c5a2e00c73a7b88e521f84e9eca414b76c 100644 (file)
--- 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;
 
 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");
 // 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");
 
 require("./vues/vues");
 require("./components");
 

-// Load in angular specific items
-const Controllers = require('./controllers');
-Controllers(ngApp, window.$events);

 
 //Global jQuery Config & Extensions
 
 
 //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 (file)
index 0000000..1141313
--- /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 a70d32009a04a6747f68a4f4daf06d67b8ed31c2..be609228727bf0098ae44e3f1b72e443c4892a81 100644 (file)
--- 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'),
     'image-manager': require('./image-manager'),
     'tag-manager': require('./tag-manager'),
     'attachment-manager': require('./attachment-manager'),

+    'page-editor': require('./page-editor'),

 };
 
 window.vues = {};
 };
 
 window.vues = {};

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 6769240d5a6b2ce2fb2b22037244670be8b4b7a1..c4a63989855fb16f004e19f417467687fa7aa1b2 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -1,5 +1,5 @@
 
 

-<div class="page-editor flex-fill flex" ng-controller="PageEditController" drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}" editor-type="{{ setting('app-editor') }}" page-id="{{ $model->id or 0 }}" page-new-draft="{{ $model->draft or 0 }}" page-update-draft="{{ $model->isDraft or 0 }}">
+<div class="page-editor flex-fill flex" id="page-editor" drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}" editor-type="{{ setting('app-editor') }}" page-id="{{ $model->id or 0 }}" page-new-draft="{{ $model->draft or 0 }}" page-update-draft="{{ $model->isDraft or 0 }}">

 
     {{ csrf_field() }}
 
 
     {{ csrf_field() }}
 


@@ -15,30 +15,30 @@
                 </div>
                 <div class="col-sm-4 faded text-center">
 
                 </div>
                 <div class="col-sm-4 faded text-center">
 

-                    <div ng-show="draftsEnabled" dropdown class="dropdown-container draft-display">
-                        <a dropdown-toggle class="text-primary text-button"><span class="faded-text" ng-bind="draftText"></span>&nbsp; <i class="zmdi zmdi-more-vert"></i></a>
-                        <i class="zmdi zmdi-check-circle text-pos draft-notification" ng-class="{visible: draftUpdated}"></i>
+                    <div v-show="draftsEnabled" dropdown class="dropdown-container draft-display">
+                        <a dropdown-toggle class="text-primary text-button"><span class="faded-text" v-text="draftText"></span>&nbsp; <i class="zmdi zmdi-more-vert"></i></a>
+                        <i class="zmdi zmdi-check-circle text-pos draft-notification" :class="{visible: draftUpdated}"></i>

                         <ul>
                             <li>
                         <ul>
                             <li>

-                                <a ng-click="forceDraftSave()" class="text-pos"><i class="zmdi zmdi-save"></i>{{ trans('entities.pages_edit_save_draft') }}</a>
+                                <a @click="saveDraft()" class="text-pos"><i class="zmdi zmdi-save"></i>{{ trans('entities.pages_edit_save_draft') }}</a>

                             </li>
                             </li>

-                            <li ng-if="isNewPageDraft">
+                            <li v-if="isNewDraft">

                                 <a href="{{ $model->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('entities.pages_edit_delete_draft') }}</a>
                             </li>
                                 <a href="{{ $model->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('entities.pages_edit_delete_draft') }}</a>
                             </li>

-                            <li>
-                                <a type="button" ng-if="isUpdateDraft" ng-click="discardDraft()" class="text-neg"><i class="zmdi zmdi-close-circle"></i>{{ trans('entities.pages_edit_discard_draft') }}</a>
+                            <li v-if="isUpdateDraft">
+                                <a type="button" @click="discardDraft" class="text-neg"><i class="zmdi zmdi-close-circle"></i>{{ trans('entities.pages_edit_discard_draft') }}</a>

                             </li>
                         </ul>
                     </div>
                 </div>
                 <div class="col-sm-4 faded">
                             </li>
                         </ul>
                     </div>
                 </div>
                 <div class="col-sm-4 faded">

-                    <div class="action-buttons" ng-cloak>
+                    <div class="action-buttons" v-cloak>

                         <div dropdown class="dropdown-container">
                         <div dropdown class="dropdown-container">

-                            <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-edit"></i> <span ng-bind="(changeSummary | limitTo:16) + (changeSummary.length>16?'...':'') || '{{ trans('entities.pages_edit_set_changelog') }}'"></span></a>
+                            <a dropdown-toggle class="text-primary text-button"><i class="zmdi zmdi-edit"></i> <span v-text="changeSummaryShort"></span></a>

                             <ul class="wide">
                                 <li class="padded">
                                     <p class="text-muted">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
                             <ul class="wide">
                                 <li class="padded">
                                     <p class="text-muted">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>

-                                    <input name="summary" id="summary-input" type="text" placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" ng-model="changeSummary" />
+                                    <input name="summary" id="summary-input" type="text" placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" v-model="changeSummary" />

                                 </li>
                             </ul>
                         </div>
                                 </li>
                             </ul>
                         </div>


@@ -86,7 +86,7 @@
                         </div>
                     </div>
 
                         </div>
                     </div>
 

-                    <div markdown-input md-change="editorChange" md-model="editContent" class="flex flex-fill">
+                    <div markdown-input class="flex flex-fill">

                         <textarea  id="markdown-editor-input"  name="markdown" rows="5"
                             @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
                     </div>
                         <textarea  id="markdown-editor-input"  name="markdown" rows="5"
                             @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
                     </div>


@@ -98,7 +98,7 @@
                         <div class="">{{ trans('entities.pages_md_preview') }}</div>
                     </div>
                     <div class="markdown-display">
                         <div class="">{{ trans('entities.pages_md_preview') }}</div>
                     </div>
                     <div class="markdown-display">

-                        <div class="page-content" ng-bind-html="displayContent"></div>
+                        <div class="page-content"></div>

                     </div>
                 </div>
                 <input type="hidden" name="html"/>
                     </div>
                 </div>
                 <input type="hidden" name="html"/>