Merge pull request #450 from DigitalCurationCentre/issue_438

auto-saving functionality. #438

Author: vyruss

app/views/answers/_new_edit.html.erb

@@ -2,7 +2,7 @@
   This partial creates a form for each type of question. The local variables are: plan, answer, question, readonly
 -->
 <% q_format = question.question_format %>
-<%= semantic_form_for answer, :url => {controller: :answers, action: :update }, html: {method: "put", class: "roadmap-form"}, remote: true do |f| %>
+<%= semantic_form_for answer, :url => {controller: :answers, action: :update }, html: {method: "put", class: "roadmap-form", 'data-autosave': question.id }, remote: true do |f| %>
       <fieldset class="standard">
         <% if !readonly %>
           <%= f.input :id, as: :hidden, input_html: { value: answer.id } %>
@@ -74,7 +74,7 @@
               <p><%= raw(answer.text) %></p>
             <% else %>
               <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %>
-              <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.change_answer", content_css: asset_path('application.css')) %>
+              <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %>
             <% end %>
           <%end%>
         <% end %>
@@ -90,7 +90,7 @@
             <p><%= raw(answer.text) %></p>
           <% else %>
             <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %>
-            <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.change_answer", content_css: asset_path('application.css')) %>
+            <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %>
           <% end %>
         <% end %>
 

app/views/phases/_answer_form.html.erb

@@ -18,7 +18,7 @@
      end
    %>
   <div class="question-form">
-    <div id="<%= "answer-locking-#{question.id}" %>"></div>
+    <div id="<%= "answer-locking-#{question.id}" %>" class="answer-locking"></div>
     <div id="<%= "answer-form-#{question.id}" %>">
       <%= render(partial: 'answers/new_edit', locals: { question: question, answer: answer, readonly: readonly }) %>
     </div>

app/views/phases/edit.html.erb

@@ -1,7 +1,7 @@
 <%- model_class = Plan -%>
-<% javascript "plans.js" %>
-<% javascript "answers/status.js" %>
-<% javascript "notes/index.js" %>
+<% javascript('plans.js') %>
+<% javascript('answers/status.js') %>
+<% javascript ('notes/index.js') %>
 <!--
   editing plan details is handled through plan#show
   so if we come this way then we are editing a phase

config/application.rb

@@ -86,6 +86,7 @@ class Application < Rails::Application
     config.assets.precompile += %w(answers/status.js)
     config.assets.precompile += %w(notes/index.js)
     config.assets.precompile += %w(bootstrap_listeners.js)
+    config.assets.precompile += %w(Dmproadmap.js)
 
     config.autoload_paths += %W(#{config.root}/lib)
     config.action_controller.include_all_helpers = true

lib/assets/javascripts/Dmproadmap.js

@@ -0,0 +1,35 @@
+window.DMPROADMAP = (function(){
+    return {
+        /*
+            Delays invoking of the function passed until after wait milliseconds have elapsed since
+            the last time the debounced function was invoked.
+            @param {function} func - the function to execute later on
+            @param {number} wait - the number of milliseconds to wait until func is executed
+            @returns The debounced function. It comes with a cancel method to cancel delayed func invocation
+        */
+        debounce: function(func, wait){
+            var timeoutID = null;
+            function cancel() {
+                if(timeoutID !== null){
+                    clearTimeout(timeoutID);
+                    return true;
+                }
+                return false;    
+            }
+            return (function() {
+                var debounced = function() {
+                    var ctx = this;
+                    var args = arguments;
+                    var later = function() {
+                        timeoutID = null;
+                        func.apply(ctx, args);
+                    }
+                    clearTimeout(timeoutID);
+                    timeoutID = setTimeout(later, wait || 5000);
+                }
+                debounced.cancel = cancel;
+                return debounced;
+            })();
+        }
+    };
+})();

lib/assets/javascripts/answers/status.js

@@ -1,27 +1,86 @@
 //= require jquery.timeago.js
 
 $(document).ready(function(){
-    $("form.answer").submit(function(){
+    /*--------------
+        START Autosaving
+    ----------------*/
+    // debounced object holds a set of debounced functions, one for each form present in the page. Note,
+    // each debounced function stored at funcs is created on demand, i.e. once the user changes any element of a form
+    var debounced = (function(){
+        var funcs = {};
+        return {
+            has: function(id){
+                return funcs[id] !== undefined;
+            },
+            get: function(id){
+
+                return funcs[id];
+            },
+            set: function(id, func){
+                funcs[id] = DMPROADMAP.debounce(func, 5000);
+            }
+        }
+    })();
+    // This function triggers a form submit, if and only if the answer has not been optimistically locked
+    function autoSaving(){
+        if($(this).closest('.question-form').find('.answer-locking').children().length === 0){
+            $(this).closest('form.answer').submit();
+        }
+    };
+    /*--------------
+        END Autosaving
+    ----------------*/
+    // Listener for submit event triggered
+    $('.question-form').on('submit', 'form.answer', function(){
+        var id = $(this).attr('data-autosave');
+        if(debounced.has(id)){  
+            debounced.get(id).cancel(); //Cancels the execution of its debounced function, if not already, since submit() could have been trigerred through Save button
+        }
         var container = $(this).closest('.question-form');
         var saving = container.find('.saving-message');
         saving.show();
     });
-    $("form.answer fieldset input, form.answer fieldset select").change(function(){
+    // Listener for changes at any element value from question-form
+    $('.question-form').on('change', 'form.answer fieldset input, form.answer fieldset select', function(){
         var unsaved = $(this).closest('.question-form').find('.answer-unsaved');
         unsaved.show();
         var notAnswered = $(this).closest('.question-form').find('.not-answered');
         notAnswered.hide();
     });
-    $.fn.change_answer = function(editor){
-        editor.on('change', function(event){
+    // Listener for changes at any element value from question-form. This triggers the debounced function
+    $('.question-form').on('change', 'form.answer fieldset input, form.answer fieldset select', function(){
+        var id = $(this).closest('form.answer').attr('data-autosave');
+        if(!debounced.has(id)){
+            debounced.set(id, autoSaving); 
+        }
+        debounced.get(id).apply($(this),[id]);
+    });
+    // Function bounded to Jquery scope that setup event handlers for tinymce instances
+    $.fn.tinymce_answer_events = function(editor){
+        editor.on('change', function(){
             var unsaved = $('#'+editor.id).closest('.question-form').find('.answer-unsaved');
             unsaved.show();
             var notAnswered = $('#'+editor.id).closest('.question-form').find('.not-answered');
             notAnswered.hide();
         });
+        editor.on('blur', function(){
+            var id = $('#'+editor.id).closest('form.answer').attr('data-autosave');
+            $('#'+editor.id).val($('#'+editor.id).tinymce().getContent());  // Forces Updating content textarea with the value from tinymce
+            if(!debounced.has(id)){
+                debounced.set(id, autoSaving); 
+            }
+            debounced.get(id).apply($('#'+editor.id),[id]);
+        });
+        editor.on('focus', function(){
+            var id = $('#'+editor.id).closest('form.answer').attr('data-autosave');
+            if(debounced.has(id)){
+                debounced.get(id).cancel(); //Cancels the execution of its debounced function either because user transitioned from question with options
+                // to the comments or because textarea lost focus and gained again before the delay being met
+            }
+        });
     }
     $.fn.init_answer_status = function() {
-        $('abbr.timeago').timeago();
+        $('abbr.timeago').timeago();    //TODO examine if possible refactoring as event-delegated
     }
     $.fn.init_answer_status();
 });

lib/assets/javascripts/application.js

@@ -23,3 +23,4 @@
 //= require gettext/all
 //= require jquery-accessible-autocomplet-list-aria.js
 //= require bootstrap_listeners.js
+//= require Dmproadmap.js