github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-03 08:13:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merged branch autosaving_drafts into master

Browse Source
This commit is contained in:
Dan Brown
2016-03-12 16:31:37 +00:00
parent e9c213f803 bf7852ce85
commit ced8c8e497
24 changed files with 473 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
resources/assets/js/controllers.js
View File

@ -213,4 +213,85 @@ module.exports = function (ngApp, events) {
}]);
ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', function ($scope, $http, $attrs, $interval, $timeout) {
$scope.editorOptions = require('./pages/page-form');
$scope.editorHtml = '';
$scope.draftText = '';
var pageId = Number($attrs.pageId);
var isEdit = pageId !== 0;
var autosaveFrequency = 30; // AutoSave interval in seconds.
$scope.isDraft = Number($attrs.pageDraft) === 1;
if ($scope.isDraft) $scope.draftText = 'Editing Draft';
var autoSave = false;
var currentContent = {
title: false,
html: false
};
if (isEdit) {
setTimeout(() => {
startAutoSave();
}, 1000);
}
$scope.editorChange = function () {}
/**
* 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(() => {
var newTitle = $('#name').val();
var newHtml = $scope.editorHtml;
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
currentContent.html = newHtml;
currentContent.title = newTitle;
saveDraftUpdate(newTitle, newHtml);
}
}, 1000 * autosaveFrequency);
}
/**
* Save a draft update into the system via an AJAX request.
* @param title
* @param html
*/
function saveDraftUpdate(title, html) {
$http.put('/ajax/page/' + pageId + '/save-draft', {
name: title,
html: html
}).then((responseData) => {
$scope.draftText = responseData.data.message;
$scope.isDraft = true;
});
}
/**
* Discard the current draft and grab the current page
* content from the system via an AJAX request.
*/
$scope.discardDraft = function () {
$http.get('/ajax/page/' + pageId).then((responseData) => {
if (autoSave) $interval.cancel(autoSave);
$scope.draftText = '';
$scope.isDraft = false;
$scope.$broadcast('html-update', responseData.data.html);
$('#name').val(currentContent.title);
$timeout(() => {
startAutoSave();
}, 1000);
events.emit('success', 'Draft discarded, The editor has been updated with the current page content');
});
};
}]);
};

37
resources/assets/js/directives.js
View File

@ -162,5 +162,42 @@ module.exports = function (ngApp, events) {
};
}]);
ngApp.directive('tinymce', ['$timeout', function($timeout) {
return {
restrict: 'A',
scope: {
tinymce: '=',
mceModel: '=',
mceChange: '='
},
link: function (scope, element, attrs) {
function tinyMceSetup(editor) {
editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
var content = editor.getContent();
$timeout(() => {
scope.mceModel = content;
});
scope.mceChange(content);
});
editor.on('init', (e) => {
scope.mceModel = editor.getContent();
});
scope.$on('html-update', (event, value) => {
editor.setContent(value);
editor.selection.select(editor.getBody(), true);
editor.selection.collapse(false);
scope.mceModel = editor.getContent();
});
}
scope.tinymce.extraSetups.push(tinyMceSetup);
tinymce.init(scope.tinymce);
}
}
}])
};

14
resources/assets/js/global.js
View File

@ -54,10 +54,10 @@ $.expr[":"].contains = $.expr.createPseudo(function (arg) {
// Global jQuery Elements
$(function () {
var notifications = $('.notification');
var successNotification = notifications.filter('.pos');
var errorNotification = notifications.filter('.neg');
var warningNotification = notifications.filter('.warning');
// Notification Events
window.Events.listen('success', function (text) {
successNotification.hide();
@ -66,6 +66,10 @@ $(function () {
successNotification.show();
}, 1);
});
window.Events.listen('warning', function (text) {
warningNotification.find('span').text(text);
warningNotification.show();
});
window.Events.listen('error', function (text) {
errorNotification.find('span').text(text);
errorNotification.show();
@ -119,11 +123,5 @@ function elemExists(selector) {
return document.querySelector(selector) !== null;
}
// TinyMCE editor
if (elemExists('#html-editor')) {
var tinyMceOptions = require('./pages/page-form');
tinymce.init(tinyMceOptions);
}
// Page specific items
require('./pages/page-show');
require('./pages/page-show');

7
resources/assets/js/pages/page-form.js
View File

@ -1,4 +1,4 @@
module.exports = {
var mceOptions = module.exports = {
selector: '#html-editor',
content_css: [
'/css/styles.css'
@ -51,8 +51,13 @@ module.exports = {
args.content = '';
}
},
extraSetups: [],
setup: function (editor) {
for (var i = 0; i < mceOptions.extraSetups.length; i++) {
mceOptions.extraSetups[i](editor);
}
(function () {
var wrap;

9
resources/assets/sass/_header.scss
View File

@ -161,6 +161,12 @@ form.search-box {
}
}
.faded span.faded-text {
display: inline-block;
padding: $-s;
opacity: 0.5;
}
.faded-small {
color: #000;
font-size: 0.9em;
@ -183,6 +189,9 @@ form.search-box {
padding-left: 0;
}
}
&.text-center {
text-align: center;
}
}
.setting-nav {

1
resources/assets/sass/_variables.scss
View File

@ -38,6 +38,7 @@ $primary-dark: #0288D1;
$secondary: #e27b41;
$positive: #52A256;
$negative: #E84F4F;
$warning: $secondary;
$primary-faded: rgba(21, 101, 192, 0.15);
// Item Colors

4
resources/assets/sass/styles.scss
View File

@ -88,6 +88,10 @@ body.dragging, body.dragging * {
background-color: $negative;
color: #EEE;
}
&.warning {
background-color: $secondary;
color: #EEE;
}
}
// Loading icon

2
resources/views/pages/create.blade.php
View File

@ -8,7 +8,7 @@
@section('content')
<div class="flex-fill flex" ng-non-bindable>
<div class="flex-fill flex">
<form action="{{$book->getUrl() . '/page'}}" method="POST" class="flex flex-fill">
@include('pages/form')
@if($chapter)

4
resources/views/pages/edit.blade.php
View File

@ -8,8 +8,8 @@
@section('content')
<div class="flex-fill flex" ng-non-bindable>
<form action="{{$page->getUrl()}}" method="POST" class="flex flex-fill">
<div class="flex-fill flex">
<form action="{{$page->getUrl()}}" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
<input type="hidden" name="_method" value="PUT">
@include('pages/form', ['model' => $page])
</form>

16
resources/views/pages/form.blade.php
View File

@ -1,7 +1,7 @@
<div class="page-editor flex-fill flex" ng-non-bindable>
<div class="page-editor flex-fill flex" ng-controller="PageEditController" page-id="{{ $model->id or 0 }}" page-draft="{{ $page->isDraft or 0 }}">
{{ csrf_field() }}
<div class="faded-small toolbar">
@ -9,12 +9,16 @@
<div class="row">
<div class="col-sm-4 faded">
<div class="action-buttons text-left">
<a href="{{ back()->getTargetUrl() }}" class="text-button text-primary"><i class="zmdi zmdi-arrow-left"></i>Back</a>
<a onclick="$('body>header').slideToggle();" class="text-button text-primary"><i class="zmdi zmdi-swap-vertical"></i>Toggle Header</a>
</div>
</div>
<div class="col-sm-8 faded">
<div class="action-buttons">
<a href="{{ back()->getTargetUrl() }}" class="text-button text-primary"><i class="zmdi zmdi-close"></i>Cancel</a>
<div class="col-sm-4 faded text-center">
<span class="faded-text" ng-bind="draftText"></span>
</div>
<div class="col-sm-4 faded">
<div class="action-buttons" ng-cloak>
<button type="button" ng-if="isDraft" ng-click="discardDraft()" class="text-button text-neg"><i class="zmdi zmdi-close-circle"></i>Discard Draft</button>
<button type="submit" id="save-button" class="text-button text-pos"><i class="zmdi zmdi-floppy"></i>Save Page</button>
</div>
</div>
@ -22,13 +26,13 @@
</div>
</div>
<div class="title-input page-title clearfix">
<div class="title-input page-title clearfix" ng-non-bindable>
<div class="input">
@include('form/text', ['name' => 'name', 'placeholder' => 'Page Title'])
</div>
</div>
<div class="edit-area flex-fill flex">
<textarea id="html-editor" name="html" rows="5"
<textarea id="html-editor" tinymce="editorOptions" mce-change="editorChange" mce-model="editorHtml" name="html" rows="5"
@if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
@if($errors->has('html'))
<div class="text-neg text-small">{{ $errors->first('html') }}</div>

10
resources/views/pages/revisions.blade.php
View File

@ -24,10 +24,10 @@
<table class="table">
<tr>
<th>Name</th>
<th colspan="2">Created By</th>
<th>Revision Date</th>
<th>Actions</th>
<th width="40%">Name</th>
<th colspan="2" width="20%">Created By</th>
<th width="20%">Revision Date</th>
<th width="20%">Actions</th>
</tr>
@foreach($page->revisions as $revision)
<tr>
@ -38,7 +38,7 @@
@endif
</td>
<td> @if($revision->createdBy) {{$revision->createdBy->name}} @else Deleted User @endif</td>
<td><small>{{$revision->created_at->format('jS F, Y H:i:s')}} ({{$revision->created_at->diffForHumans()}})</small></td>
<td><small>{{$revision->created_at->format('jS F, Y H:i:s')}} <br> ({{$revision->created_at->diffForHumans()}})</small></td>
<td>
<a href="{{$revision->getUrl()}}" target="_blank">Preview</a>
<span class="text-muted">&nbsp;|&nbsp;</span>

8
resources/views/partials/notifications.blade.php
View File

@ -1,8 +1,12 @@
<div class="notification anim pos" @if(!Session::has('success')) style="display:none;" @endif>
<i class="zmdi zmdi-check-circle"></i> <span>{{ Session::get('success') }}</span>
<i class="zmdi zmdi-check-circle"></i> <span>{!! nl2br(htmlentities(Session::get('success'))) !!}</span>
</div>
<div class="notification anim warning stopped" @if(!Session::has('warning')) style="display:none;" @endif>
<i class="zmdi zmdi-info"></i> <span>{!! nl2br(htmlentities(Session::get('warning'))) !!}</span>
</div>
<div class="notification anim neg stopped" @if(!Session::has('error')) style="display:none;" @endif>
<i class="zmdi zmdi-alert-circle"></i> <span>{{ Session::get('error') }}</span>
<i class="zmdi zmdi-alert-circle"></i> <span>{!! nl2br(htmlentities(Session::get('error'))) !!}</span>
</div>