From 2c42fcec14c79b37436f74ade40f89167b075735 Mon Sep 17 00:00:00 2001
From: Brian Schiller <bgschiller@gmail.com>
Date: Fri, 29 Sep 2017 10:48:09 -0600
Subject: [PATCH] flash background when 'run' is clicked.

Provide a visual cue that the code was re-run, as I was getting
feedback that, when restructuring code that shouldn't have changed
output, They were worried about whether the program had actually run
again.
---
 runestone/activecode/css/activecode.css | 13 +++++++++++++
 runestone/activecode/js/activecode.js   | 12 ++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/runestone/activecode/css/activecode.css b/runestone/activecode/css/activecode.css
index 2b0a4b03f..a0cf7d50d 100644
--- a/runestone/activecode/css/activecode.css
+++ b/runestone/activecode/css/activecode.css
@@ -116,3 +116,16 @@
 .ac-disabled {
 	pointer-events: none;
 }
+
+.ac_output pre.ac-code-changed {
+	background: initial;
+	animation: flash-background 1s;
+}
+@keyframes flash-background {
+	0% {
+		background: rgba(255, 255, 0, 0.3);
+	}
+	100% {
+		background: initial;
+	}
+}
diff --git a/runestone/activecode/js/activecode.js b/runestone/activecode/js/activecode.js
index b3780416c..d9adfe7e8 100755
--- a/runestone/activecode/js/activecode.js
+++ b/runestone/activecode/js/activecode.js
@@ -671,10 +671,22 @@ ActiveCode.prototype.buildProg = function() {
     return prog;
 };
 
+ActiveCode.prototype.flashBackground = function() {
+  // Provide a visual cue that the code was re-run, as I was getting feedback
+  // that, when restructuring code that shouldn't have changed output, they
+  // were worried about whether the program had actually run again.
+  this.output.classList.remove('ac-code-changed');
+  // reflow to ensure that the class removal is synced to DOM
+  void this.output.offsetWidth;
+  // add .ac-code-changed to trigger background animation
+  this.output.classList.add('ac-code-changed');
+};
+
 ActiveCode.prototype.runProg = function() {
         var prog = this.buildProg();
 
         $(this.output).text('');
+        this.flashBackground();
 
         $(this.eContainer).remove();
         Sk.configure({output : this.outputfun.bind(this),