Finished migration of last angular code

This commit is contained in:
Dan Brown 2017-09-30 13:26:48 +01:00
parent a3557d5bb2
commit 61fad6a665
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
7 changed files with 163 additions and 176 deletions

View File

@ -25,11 +25,6 @@
"yargs": "^7.1.0" "yargs": "^7.1.0"
}, },
"dependencies": { "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", "axios": "^0.16.1",
"babel-polyfill": "^6.23.0", "babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",

View File

@ -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: These are the great open-source projects used to help build BookStack:
* [Laravel](http://laravel.com/) * [Laravel](http://laravel.com/)
* [AngularJS](https://angularjs.org/)
* [jQuery](https://jquery.com/) * [jQuery](https://jquery.com/)
* [TinyMCE](https://www.tinymce.com/) * [TinyMCE](https://www.tinymce.com/)
* [CodeMirror](https://codemirror.net) * [CodeMirror](https://codemirror.net)

View File

@ -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'));
});
};
}]);
};

View File

@ -58,16 +58,6 @@ window.$http = axiosInstance;
Vue.prototype.$http = axiosInstance; Vue.prototype.$http = axiosInstance;
Vue.prototype.$events = window.$events; 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 // Translation setup
// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
const Translations = require("./translations"); const Translations = require("./translations");
@ -79,9 +69,6 @@ window.trans_choice = translator.getPlural.bind(translator);
require("./vues/vues"); require("./vues/vues");
require("./components"); require("./components");
// Load in angular specific items
const Controllers = require('./controllers');
Controllers(ngApp, window.$events);
//Global jQuery Config & Extensions //Global jQuery Config & Extensions

View File

@ -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,
};

View File

@ -11,6 +11,7 @@ let vueMapping = {
'image-manager': require('./image-manager'), 'image-manager': require('./image-manager'),
'tag-manager': require('./tag-manager'), 'tag-manager': require('./tag-manager'),
'attachment-manager': require('./attachment-manager'), 'attachment-manager': require('./attachment-manager'),
'page-editor': require('./page-editor'),
}; };
window.vues = {}; window.vues = {};

View File

@ -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>
<div class="col-sm-4 faded text-center"> <div class="col-sm-4 faded text-center">
<div ng-show="draftsEnabled" dropdown class="dropdown-container draft-display"> <div v-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> <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" ng-class="{visible: draftUpdated}"></i> <i class="zmdi zmdi-check-circle text-pos draft-notification" :class="{visible: draftUpdated}"></i>
<ul> <ul>
<li> <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> <a href="{{ $model->getUrl('/delete') }}" class="text-neg"><i class="zmdi zmdi-delete"></i>{{ trans('entities.pages_edit_delete_draft') }}</a>
</li> </li>
<li> <li v-if="isUpdateDraft">
<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> <a type="button" @click="discardDraft" class="text-neg"><i class="zmdi zmdi-close-circle"></i>{{ trans('entities.pages_edit_discard_draft') }}</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-sm-4 faded"> <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"> <ul class="wide">
<li class="padded"> <li class="padded">
<p class="text-muted">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p> <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> </li>
</ul> </ul>
</div> </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" <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> @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> </div>
@ -98,7 +98,7 @@
<div class="">{{ trans('entities.pages_md_preview') }}</div> <div class="">{{ trans('entities.pages_md_preview') }}</div>
</div> </div>
<div class="markdown-display"> <div class="markdown-display">
<div class="page-content" ng-bind-html="displayContent"></div> <div class="page-content"></div>
</div> </div>
</div> </div>
<input type="hidden" name="html"/> <input type="hidden" name="html"/>