Add captions

Author: bnmnetp

runestone/activecode/activecode.py

@@ -54,20 +54,11 @@ def setup(app):
 
 
 TEMPLATE = """
-<pre data-component="activecode" id=%(divid)s data-lang="%(language)s" %(autorun)s %(hidecode)s %(include)s %(timelimit)s %(coach)s %(codelens)s data-audio='%(ctext)s' %(sourcefile)s %(datafile)s %(stdin)s %(gradebutton)s>
+<pre data-component="activecode" id=%(divid)s data-lang="%(language)s" %(autorun)s %(hidecode)s %(include)s %(timelimit)s %(coach)s %(codelens)s data-audio='%(ctext)s' %(sourcefile)s %(datafile)s %(stdin)s %(gradebutton)s %(caption)s>
 %(initialcode)s
 </pre>
 """
 
-
-CAPTION = ''' 
-<div class="clearfix"></div>
-<p class="ac_caption"><span class="ac_caption_text">%(caption)s (%(divid)s)</span> </p>
-'''
-
-
-
-
 class ActivcodeNode(nodes.General, nodes.Element):
     def __init__(self, content):
         """
@@ -175,6 +166,8 @@ def run(self):
 
         if 'caption' not in self.options:
             self.options['caption'] = ''
+        else:
+            self.options['caption'] = "data-caption='%s'" % self.options['caption']
 
         if 'include' not in self.options:
             self.options['include'] = ''

runestone/activecode/js/activecode.js

@@ -60,6 +60,12 @@ ActiveCode.prototype.init = function(opts) {
     this.createEditor();
     this.createOutput();
     this.createControls();
+    if ($(orig).data('caption')) {
+        this.caption = $(orig).data('caption');
+    } else {
+        this.caption = ""
+    }
+    this.addCaption()
 
     if ($(orig).data('autorun')) {
         $(document).ready(this.runProg.bind(this));
@@ -224,6 +230,16 @@ ActiveCode.prototype.createOutput = function () {
 
 };
 
+ActiveCode.prototype.addCaption = function() {
+    //someElement.parentNode.insertBefore(newElement, someElement.nextSibling);
+    var capDiv = document.createElement('p');
+    $(capDiv).html(this.caption + " (" + this.divid + ")");
+    $(capDiv).addClass("ac_caption");
+    $(capDiv).addClass("ac_caption_text");
+
+    this.outerDiv.parentNode.insertBefore(capDiv, this.outerDiv.nextSibling);
+};
+
 ActiveCode.prototype.saveEditor = function () {
 
 };