From 8430be3d185cfb935f042ed2edff1083ef6f73a7 Mon Sep 17 00:00:00 2001
From: dragonfi <david.gabor.bodor@gmail.com>
Date: Sat, 3 May 2014 19:15:23 +0200
Subject: [PATCH] Fix #3347: "Run Code" reloads page in Matlab Problem

Instead of refreshing only the necessary parts,
"Run Code" reloads the whole page.

This commit fixes this behaviour, by refreshing the
specific elements belonging to the Problem instead.

Also tidies up indentation.
---
 .../lib/capa/capa/templates/matlabinput.html  | 46 ++++++++++---------
 lms/static/sass/base/_animations.scss         | 20 ++++++++
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/common/lib/capa/capa/templates/matlabinput.html b/common/lib/capa/capa/templates/matlabinput.html
index 2b28f4cacf..63187f214b 100644
--- a/common/lib/capa/capa/templates/matlabinput.html
+++ b/common/lib/capa/capa/templates/matlabinput.html
@@ -39,7 +39,7 @@
   <div class="external-grader-message" aria-live="polite">
     ${msg|n}
   </div>
-  <div class="external-grader-message" aria-live="polite">
+  <div class="external-grader-message ungraded-matlab-result" aria-live="polite">
     ${queue_msg|n}
   </div>
 
@@ -55,13 +55,11 @@
           if($(parent_elt).find('.capa_alert').length) {
               $(parent_elt).find('.capa_alert').remove();
           }
-          var alert_elem = "<div>" + msg + "</div>";
-          alert_elem = $(alert_elem).addClass('capa_alert');
+          var alert_elem = $("<div>" + msg + "</div>");
+          alert_elem.addClass('capa_alert').addClass('is-fading-in');
           $(parent_elt).find('.action').after(alert_elem);
-          $(parent_elt).find('.capa_alert').css({opacity: 0}).animate({opacity: 1}, 700);
       }
 
-
       // hook up the plot button
       var plot = function(event) {
           var problem_elt = $(event.target).closest('.problems-wrapper');
@@ -72,7 +70,7 @@
           // since there could be multiple codemirror instances on the page,
           // save all of them.
           $('.CodeMirror').each(function(i, el){
-            el.CodeMirror.save();
+              el.CodeMirror.save();
           });
           var input = $("#input_${id}");
 
@@ -81,33 +79,39 @@
 
           answer = input.serialize();
 
-          // setup callback for after we send information to plot
+          // a chain of callbacks, each querying the server on success of the previous one
+
+          var get_callback = function(response) {
+              var new_result_elem = $(response.html).find(".ungraded-matlab-result");
+              new_result_elem.addClass("is-fading-in");
+              result_elem = $(problem_elt).find(".ungraded-matlab-result");
+              result_elem.replaceWith(new_result_elem);
+              console.log(response.html);
+          }
+
           var plot_callback = function(response) {
               if(response.success) {
-                  window.location.reload();
+                  $.postWithPrefix(url + "/problem_get", get_callback);
+              } else {
+                  gentle_alert(problem_elt, response.message);
+              }
+          }
+
+          var save_callback = function(response) {
+              if(response.success) {
+                  // send information to the problem's plot functionality
+                  Problem.inputAjax(url, input_id, 'plot',
+                      {'submission': submission}, plot_callback);
               }
               else {
                   gentle_alert(problem_elt, response.message);
               }
           }
 
-          var save_callback = function(response) {
-                  if(response.success) {
-                      // send information to the problem's plot functionality
-                      Problem.inputAjax(url, input_id, 'plot',
-                        {'submission': submission}, plot_callback);
-                  }
-                  else {
-                      gentle_alert(problem_elt, response.message);
-                  }
-          }
-
           // save the answer
           $.postWithPrefix(url + '/problem_save', answer, save_callback);
-
       }
       $('#plot_${id}').click(plot);
-
     });
   </script>
 </section>
diff --git a/lms/static/sass/base/_animations.scss b/lms/static/sass/base/_animations.scss
index 4c4620ca27..28d5d770da 100644
--- a/lms/static/sass/base/_animations.scss
+++ b/lms/static/sass/base/_animations.scss
@@ -241,3 +241,23 @@
 @-webkit-keyframes video-appear { @include video-appear-keyframes; }
    @-moz-keyframes video-appear { @include video-appear-keyframes; }
         @keyframes video-appear { @include video-appear-keyframes; }
+
+// quick fade-in animation to get user attention
+//************************************************************************//
+
+.is-fading-in {
+  @include animation(fade-in-animation 0.8s);
+}
+
+@mixin fade-in-keyframes {
+  0% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+
+@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
+   @-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
+        @keyframes fade-in-animation{ @include fade-in-keyframes; }