Added UI components of page autosaving

resources/assets/js/controllers.js

@@ -213,49 +213,85 @@ module.exports = function (ngApp, events) {
     }]);
 
 
-    ngApp.controller('PageEditController',  ['$scope', '$http', '$attrs', '$interval', function ($scope, $http, $attrs, $interval) {
+    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) {
-            startAutoSave();
+            setTimeout(() => {
+                startAutoSave();
+            }, 1000);
         }
 
-        $scope.editorChange = function() {
-            $scope.draftText = '';
-        }
+        $scope.editorChange = function () {}
 
+        /**
+         * Start the AutoSave loop, Checks for content change
+         * before performing the costly AJAX request.
+         */
         function startAutoSave() {
-            var currentTitle = $('#name').val();
-            var currentHtml = $scope.editorHtml;
+            currentContent.title = $('#name').val();
+            currentContent.html = $scope.editorHtml;
 
-            console.log('Starting auto save');
-
-            $interval(() => {
+            autoSave = $interval(() => {
                 var newTitle = $('#name').val();
                 var newHtml = $scope.editorHtml;
 
-                if (newTitle !== currentTitle || newHtml !== currentHtml) {
-                    currentHtml = newHtml;
-                    currentTitle = newTitle;
+                if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
+                    currentContent.html = newHtml;
+                    currentContent.title = newTitle;
                     saveDraftUpdate(newTitle, newHtml);
                 }
-            }, 1000*5);
+            }, 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 = 'Draft saved'
-            })
+                $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');
+            });
+        };
+
     }]);
 
 };

resources/assets/js/directives.js

@@ -162,7 +162,7 @@ module.exports = function (ngApp, events) {
         };
     }]);
 
-    ngApp.directive('tinymce', [function() {
+    ngApp.directive('tinymce', ['$timeout', function($timeout) {
         return {
             restrict: 'A',
             scope: {
@@ -173,14 +173,24 @@ module.exports = function (ngApp, events) {
             link: function (scope, element, attrs) {
 
                 function tinyMceSetup(editor) {
-                    editor.on('keyup', (e) => {
+                    editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
                         var content = editor.getContent();
-                        console.log(content);
-                        scope.$apply(() => {
+                        $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);

resources/assets/js/global.js

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

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

@@ -54,8 +54,6 @@ var mceOptions = module.exports = {
     extraSetups: [],
     setup: function (editor) {
 
-        console.log(mceOptions.extraSetups);
-
         for (var i = 0; i < mceOptions.extraSetups.length; i++) {
             mceOptions.extraSetups[i](editor);
         }

resources/assets/sass/_header.scss

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

resources/assets/sass/_variables.scss

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

resources/assets/sass/styles.scss

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

resources/views/pages/form.blade.php

@@ -1,7 +1,7 @@
 
 
 
-<div class="page-editor flex-fill flex" ng-controller="PageEditController" page-id="{{ $model->id or 0 }}">
+<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,15 +9,19 @@
             <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-4 faded text-center">
-                    <span ng-bind="draftText"></span>
+                    <div class="action-buttons text-center" ng-cloak>
+                        <span class="faded-text" ng-bind="draftText"></span>
+                        <button type="button" ng-if="isDraft" ng-click="discardDraft()" class="text-button text-neg"><i class="zmdi zmdi-close-circle"></i>Discard Draft</button>
+                    </div>
                 </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>
                     </div>
                 </div>

resources/views/partials/notifications.blade.php

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