merge main

src/js/views/gitDemonstrationView.js

@@ -20,7 +20,8 @@ var GitDemonstrationView = ContainedBase.extend({
   template: _.template($('#git-demonstration-view').html()),
 
   events: {
-    'click div.command > p.uiButton': 'positive'
+    'click div.command > p.uiButton:not([target="reset"])': 'positive',
+    'click div.command > p.uiButton[target="reset"]': 'onResetButtonClick',
   },
 
   initialize: function(options) {
@@ -59,6 +60,7 @@ var GitDemonstrationView = ContainedBase.extend({
     this.navEvents = Object.assign({}, Backbone.Events);
     this.navEvents.on('positive', this.positive, this);
     this.navEvents.on('negative', this.negative, this);
+    this.navEvents.on('onResetButtonClick', this.onResetButtonClick, this);
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,
       aliasMap: {
@@ -139,6 +141,11 @@ var GitDemonstrationView = ContainedBase.extend({
     this.demonstrate();
   },
 
+  onResetButtonClick: function() {
+    this.takeControl();
+    this.reset();
+  },
+
   demonstrate: function() {
     this.$el.toggleClass('demonstrating', true);
 

src/style/main.css

@@ -1146,6 +1146,10 @@ div.gitDemonstrationView {
   opacity: 0;
 }
 
+.gitDemonstrationView  p.uiButton[target="reset"] {
+  display: none;
+}
+
 .gitDemonstrationView.demonstrated div.afterText {
   opacity: 1;
 }
@@ -1155,7 +1159,12 @@ div.gitDemonstrationView {
 }
 
 .gitDemonstrationView.demonstrated p.uiButton {
-  opacity: 0.4;
+  display: none;
+}
+
+.gitDemonstrationView.demonstrated p.uiButton[target="reset"] {
+  display: block;
+  opacity: 0.5;
 }
 
 /* LeftRightView */

src/template.index.html

@@ -155,6 +155,9 @@
         -->
           <%= command.replace(' --aboveAll', '') %>
         </p>
+        <p class="uiButton uiButtonPink transitionOpacity" target="reset">
+            (Reset Animation)
+        </p>
       </div>
 
       <div class="afterText transitionOpacity">