Moved page editing to angular controller and started work on update drafts

resources/assets/js/controllers.js

@@ -213,4 +213,49 @@ module.exports = function (ngApp, events) {
     }]);
 
 
+    ngApp.controller('PageEditController',  ['$scope', '$http', '$attrs', '$interval', function ($scope, $http, $attrs, $interval) {
+
+        $scope.editorOptions = require('./pages/page-form');
+        $scope.editorHtml = '';
+        $scope.draftText = '';
+        var pageId = Number($attrs.pageId);
+        var isEdit = pageId !== 0;
+
+        if (isEdit) {
+            startAutoSave();
+        }
+
+        $scope.editorChange = function() {
+            $scope.draftText = '';
+        }
+
+        function startAutoSave() {
+            var currentTitle = $('#name').val();
+            var currentHtml = $scope.editorHtml;
+
+            console.log('Starting auto save');
+
+            $interval(() => {
+                var newTitle = $('#name').val();
+                var newHtml = $scope.editorHtml;
+
+                if (newTitle !== currentTitle || newHtml !== currentHtml) {
+                    currentHtml = newHtml;
+                    currentTitle = newTitle;
+                    saveDraftUpdate(newTitle, newHtml);
+                }
+            }, 1000*5);
+        }
+
+        function saveDraftUpdate(title, html) {
+            $http.put('/ajax/page/' + pageId + '/save-draft', {
+                name: title,
+                html: html
+            }).then((responseData) => {
+                $scope.draftText = 'Draft saved'
+            })
+        }
+
+    }]);
+
 };

resources/assets/js/directives.js

@@ -162,5 +162,31 @@ module.exports = function (ngApp, events) {
         };
     }]);
 
+    ngApp.directive('tinymce', [function() {
+        return {
+            restrict: 'A',
+            scope: {
+                tinymce: '=',
+                ngModel: '=',
+                ngChange: '='
+            },
+            link: function (scope, element, attrs) {
+
+                function tinyMceSetup(editor) {
+                    editor.on('keyup', (e) => {
+                        var content = editor.getContent();
+                        scope.$apply(() => {
+                            scope.ngModel = content;
+                        });
+                        scope.ngChange(content);
+                    });
+                }
+
+                scope.tinymce.extraSetups.push(tinyMceSetup);
+                tinymce.init(scope.tinymce);
+            }
+        }
+    }])
+
 
 };

resources/assets/js/global.js

@@ -119,11 +119,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');

resources/assets/js/pages/page-form.js

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

resources/views/pages/create.blade.php

@@ -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)

resources/views/pages/edit.blade.php

@@ -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>

resources/views/pages/form.blade.php

@@ -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 }}">
 
     {{ csrf_field() }}
     <div class="faded-small toolbar">
@@ -12,7 +12,10 @@
                         <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="col-sm-4 faded text-center">
+                    <span ng-bind="draftText"></span>
+                </div>
+                <div class="col-sm-4 faded">
                     <div class="action-buttons">
                         <a href="{{ back()->getTargetUrl() }}" class="text-button text-primary"><i class="zmdi zmdi-close"></i>Cancel</a>
                         <button type="submit" id="save-button" class="text-button  text-pos"><i class="zmdi zmdi-floppy"></i>Save Page</button>
@@ -22,13 +25,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" ng-change="editorChange" ng-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>

resources/views/pages/revisions.blade.php

@@ -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>