Replace Load / Save Buttons with a History Slider

runestone/activecode/css/activecode.css

@@ -92,6 +92,10 @@
     border: 2px solid black;
 }
 
+.ac_section>.col-md-12 {
+	max-width: 100% !important;
+}
+
 .full_width ol {
 	max-width: 100% !important;
 }

runestone/activecode/js/activecode.js

@@ -2,6 +2,9 @@
  * Created by bmiller on 3/19/15.
  */
 
+var isMouseDown = false;
+document.onmousedown = function() { isMouseDown = true };
+document.onmouseup   = function() { isMouseDown = false };
 
 var edList = {};
 
@@ -37,6 +40,11 @@ ActiveCode.prototype.init = function(opts) {
     this.graphics = null; // create div for turtle graphics
     this.codecoach = null;
     this.codelens = null;
+    this.controlDiv = null;
+    this.historyScrubber = null;
+    this.history = [this.code]
+    this.timestamps = ["Original"]
+    this.autorun = $(orig).data('autorun');
 
     if(this.includes !== undefined) {
         this.includes = this.includes.split(/\s+/);
@@ -58,7 +66,7 @@ ActiveCode.prototype.init = function(opts) {
     }
     this.addCaption();
 
-    if ($(orig).data('autorun')) {
+    if (this.autorun) {
         $(document).ready(this.runProg.bind(this));
     }
 };
@@ -109,41 +117,25 @@ ActiveCode.prototype.createEditor = function (index) {
 ActiveCode.prototype.createControls = function () {
     var ctrlDiv = document.createElement("div");
     $(ctrlDiv).addClass("ac_actions");
-
+    $(ctrlDiv).addClass("col-md-12");
     // Run
     var butt = document.createElement("button");
     $(butt).text("Run");
-    $(butt).addClass("btn btn-success");
+    $(butt).addClass("btn btn-success run-button");
     ctrlDiv.appendChild(butt);
     this.runButton = butt;
     $(butt).click(this.runProg.bind(this));
 
-    // Save
-    if (this.useRunestoneServices) {
-        butt = document.createElement("button");
-        $(butt).addClass("ac_opt btn btn-default");
-        $(butt).text("Save");
-        $(butt).css("margin-left", "10px");
-        this.saveButton = butt;
-        this.saveButton.onclick = this.saveEditor.bind(this);
+    if (! this.hidecode) {
+        var butt = document.createElement("button");
+        $(butt).text("Load History");
+        $(butt).addClass("btn btn-default");
         ctrlDiv.appendChild(butt);
-        if (this.hidecode) {
-            $(butt).css("display", "none")
-        }
-    }
-    // Load
-    if (this.useRunestoneServices) {
-        butt = document.createElement("button");
-        $(butt).addClass("ac_opt btn btn-default");
-        $(butt).text("Load");
-        $(butt).css("margin-left", "10px");
-        this.loadButton = butt;
-        this.loadButton.onclick = this.loadEditor.bind(this);
-        ctrlDiv.appendChild(butt);
-        if (this.hidecode) {
-            $(butt).css("display", "none")
-        }
+        this.histButton = butt;
+        $(butt).click(this.addHistoryScrubber.bind(this));
     }
+
+
     if ($(this.origElem).data('gradebutton')) {
         butt = document.createElement("button");
         $(butt).addClass("ac_opt btn btn-default");
@@ -162,8 +154,11 @@ ActiveCode.prototype.createControls = function () {
         this.showHideButt = butt;
         ctrlDiv.appendChild(butt);
         $(butt).click( (function() { $(this.codeDiv).toggle();
-        $(this.loadButton).toggle();
-        $(this.saveButton).toggle();
+            if (this.historyScrubber == null) {
+                this.addHistoryScrubber(true);
+            } else {
+                $(this.historyScrubber.parentElement).toggle();
+            }
         }).bind(this));
     }
 
@@ -200,9 +195,70 @@ ActiveCode.prototype.createControls = function () {
     }
 
     $(this.outerDiv).prepend(ctrlDiv);
+    this.controlDiv = ctrlDiv;
 
 };
 
+// Activecode -- If the code has not changed wrt the scrubber position value then don't save the code or reposition the scrubber
+//  -- still call runlog, but add a parameter to not save the code
+// add an initial load history button
+// if there is no edit then there is no append   to_save (True/False)
+
+ActiveCode.prototype.addHistoryScrubber = function (pos_last) {
+
+    var data = {acid: this.divid};
+    if (this.sid !== undefined) {
+        data['sid'] = this.sid;
+    }
+    jQuery.getJSON(eBookConfig.ajaxURL + 'gethist.json', data, function(data, status, whatever) {
+        if (data.history !== undefined) {
+            this.history = this.history.concat(data.history);
+            for (t in data.timestamps) {
+                this.timestamps.push( (new Date(data.timestamps[t])).toLocaleString() )
+            }
+        }
+
+        var scrubberDiv = document.createElement("div");
+        $(scrubberDiv).css("display","inline-block");
+        $(scrubberDiv).css("margin-left","10px");
+        $(scrubberDiv).css("margin-right","10px");
+        $(scrubberDiv).width("180px");
+        scrubber = document.createElement("div");
+        var slideit = function() {
+            this.editor.setValue(this.history[$(scrubber).slider("value")]);
+            var curVal = this.timestamps[$(scrubber).slider("value")];
+            //this.scrubberTime.innerHTML = curVal;
+            var tooltip = '<div class="sltooltip"><div class="sltooltip-inner">' +
+                curVal + '</div><div class="sltooltip-arrow"></div></div>';
+            $(scrubber).find(".ui-slider-handle").html(tooltip);
+            setTimeout(function () {
+                $(scrubber).find(".sltooltip").fadeOut()
+            }, 4000);
+        }.bind(this);
+        $(scrubber).slider({
+            max: this.history.length-1,
+            value: this.history.length-1,
+            slide: slideit,
+            change: slideit
+        });
+        scrubberDiv.appendChild(scrubber);
+
+        if (pos_last) {
+            scrubber.value = this.history.length-1
+            this.editor.setValue(this.history[scrubber.value]);
+        } else {
+            scrubber.value = 0;
+        }
+
+        $(this.histButton).remove();
+        this.histButton = null;
+        this.historyScrubber = scrubber;
+        $(scrubberDiv).insertAfter(this.runButton)
+
+    }.bind(this));
+}
+
+
 ActiveCode.prototype.createOutput = function () {
     // Create a parent div with two elements:  pre for standard output and a div
     // to hold turtle graphics output.  We use a div in case the turtle changes from
@@ -640,6 +696,7 @@ ActiveCode.prototype.buildProg = function() {
 
 ActiveCode.prototype.runProg = function() {
         var prog = this.buildProg();
+        var saveCode;
 
         $(this.output).text('');
 
@@ -661,16 +718,34 @@ ActiveCode.prototype.runProg = function() {
             return Sk.importMainWithBody("<stdin>", false, prog, true);
         });
 
+        if (this.historyScrubber === null && !this.autorun) {
+            this.addHistoryScrubber();
+        }
+
+        if (this.historyScrubber === null || (this.history[$(this.historyScrubber).slider("value")] == this.editor.getValue())) {
+            saveCode = "False"
+        } else {
+            saveCode = "True"
+        }
+
         myPromise.then((function(mod) { // success
             $(this.runButton).removeAttr('disabled');
-            this.logRunEvent({'div_id': this.divid, 'code': prog, 'errinfo': 'success'}); // Log the run event
+            this.logRunEvent({'div_id': this.divid, 'code': prog, 'errinfo': 'success', 'to_save':saveCode}); // Log the run event
         }).bind(this),
             (function(err) {  // fail
             $(this.runButton).removeAttr('disabled');
-            this.logRunEvent({'div_id': this.divid, 'code': prog, 'errinfo': err.toString()}); // Log the run event
+            this.logRunEvent({'div_id': this.divid, 'code': prog, 'errinfo': err.toString(), 'to_save':saveCode}); // Log the run event
             this.addErrorMessage(err)
                 }).bind(this));
 
+
+        if (this.historyScrubber && (this.history[$(this.historyScrubber).slider("value")] != this.editor.getValue())) {
+            this.history.push(this.editor.getValue());
+            this.timestamps.push((new Date()).toLocaleString());
+            $(this.historyScrubber).slider("option", "max", this.history.length - 1)
+            $(this.historyScrubber).slider("option", "value", this.history.length - 1)
+        }
+
         if (typeof(allVisualizers) != "undefined") {
             $.each(allVisualizers, function (i, e) {
                 e.redrawConnectors();
@@ -1600,6 +1675,10 @@ $(document).ready(function() {
 
 });
 
+$(document).bind("runestone:login", function() {
+    $(".run-button").text("Save & Run");
+});
+
 // This seems a bit hacky and possibly brittle, but its hard to know how long it will take to
 // figure out the login/logout status of the user.  Sometimes its immediate, and sometimes its
 // long.  So to be safe we'll do it both ways..

runestone/common/css/runestone-custom-sphinx-bootstrap.css

@@ -636,3 +636,40 @@ color: #000000;
 border-color: #000000;
 }
 /* END TIMED ASSESSMENT BUTTON STYLES */
+
+.sltooltip {
+    position: absolute;
+    z-index: 1020;
+    display: block;
+    padding-bottom: 5px;
+    font-size: 11px;
+    visibility: visible;
+    margin-top: -2px;
+    bottom:120%;
+    margin-left: -2em;
+}
+
+.sltooltip .sltooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-top: 5px solid #000000;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.sltooltip-inner {
+    max-width: 200px;
+    padding: 3px 8px;
+    color: #ffffff;
+    text-align: center;
+    text-decoration: none;
+    background-color: #000000;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+}
+

runestone/common/js/runestonebase.js

@@ -12,6 +12,9 @@ RunestoneBase.prototype.logBookEvent = function (eventInfo) {
 
 RunestoneBase.prototype.logRunEvent = function (eventInfo) {
     eventInfo.course = eBookConfig.course;
+    if (! 'to_save' in eventInfo) {
+        eventInfo.save_code = "True"
+    }
     if (eBookConfig.useRunestoneServices && eBookConfig.logLevel > 0) {
         jQuery.post(eBookConfig.ajaxURL + 'runlog', eventInfo); // Log the run event
     }

runestone/datafile/__init__.py

@@ -39,8 +39,7 @@ def setup(app):
 
 TEMPLATE = """
 <pre data-component="datafile" id=%(divid)s %(hidden)s data-edit="%(edit)s" data-rows="%(rows)s" data-cols="%(cols)s">
-%(filecontent)s
- </pre>
+%(filecontent)s</pre>
 """
 
 class DataFileNode(nodes.General, nodes.Element):