From 4e987286ee83f10b081d3a032242cbb81dd0eeb1 Mon Sep 17 00:00:00 2001
From: Kyle Drake <kyle@kyledrake.net>
Date: Thu, 23 Oct 2014 17:25:14 -0700
Subject: [PATCH] improvements to text editor

---
 views/site_files/text_editor.erb | 40 ++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb
index fe57afb3..d7c27f82 100644
--- a/views/site_files/text_editor.erb
+++ b/views/site_files/text_editor.erb
@@ -74,19 +74,19 @@
   <div class="row">
     <div class="col col-33">
       <div class="txt-Center">
-        <a class="btn-Action" href="/dashboard"><i class="fa fa-remove"></i>&nbsp;&nbsp;Finish Without Saving</a>
+        <a class="btn-Action" href="/dashboard"><i class="fa fa-remove"></i>&nbsp;&nbsp;Exit Without Saving</a>
       </div>
     </div>
 
     <div class="col col-33">
       <div class="txt-Center">
-        <a class="btn-Action" href="#" onclick="saveTextFile(false); return false"><i class="fa fa-save"></i>&nbsp;&nbsp;Save Changes</a>
+        <a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save Changes</a>
       </div>
     </div>
 
     <div class="col col-33">
       <div class="txt-Center">
-        <a class="btn-Action" href="#" onclick="saveTextFile(true); return false"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Finish</a>
+        <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a>
       </div>
     </div>
   </div>
@@ -103,6 +103,8 @@
 <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 
 <script>
+  var unsavedChanges = false
+
   function setTheme(name) {
     var editorTheme = $('#theme option:selected')
     editor.setTheme(editorTheme.val())
@@ -119,6 +121,8 @@
   <% end %>
 
   function saveTextFile(quit) {
+    if(unsavedChanges == false)
+      return
     $.ajax({
       url: '/site_files/save/<%= @filename %>?csrf_token=<%= csrf_token %>',
       data: editor.getValue(),
@@ -130,10 +134,12 @@
       },
       success: function(response){
         if(response == 'ok') {
+          unsavedChanges = false
           if(quit === true) {
-            window.location = '/dashboard';
+            window.location = '/dashboard'
           } else {
-            $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<span style="font-size: 14pt">Your file has been saved.</span>');
+            $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<span style="font-size: 14pt">Your file has been saved.</span>')
+            $('a#saveButton,a#saveAndExitButton').css('opacity', 0.5)
             setTimeout(function() {
               $('#editorUpdates').fadeOut();  //.addClass('hidden');
             }, 2000)
@@ -162,6 +168,30 @@
     editor.setOptions({
       maxLines: Infinity
     })
+
+    editor.on('change', function(obj) {
+      $('a#saveButton,a#saveAndExitButton').css('opacity', 1)
+      unsavedChanges = true
+    })
+  })
+
+  $(window).keypress(function(event) {
+    if(event.ctrlKey == true && event.key == 's') {
+      saveTextFile(false)
+      event.preventDefault()
+      return false
+    }
+  })
+
+  window.onbeforeunload = function() {
+    if(unsavedChanges == true)
+      return "You have unsaved changes!"
+  }
+
+  $('a#saveButton,a#saveAndExitButton').click(function() {
+    if(!unsavedChanges)
+      return false
+    return true
   })
 
 </script>
\ No newline at end of file