test merge code mirror with angular in lesson view

hacklabr · Oct 28, 2013 · 72d916d · 72d916d
1 parent b7b3cc4
commit 72d916d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/lesson/static/js/lesson.js b/lesson/static/js/lesson.js
@@ -1,3 +1,15 @@
+/** TODO: initialize this in proprer way (fabio) */
+function initialize_code_mirror() {
+    var body = $('#empty').contents().find('body');
+    var cm = CodeMirror.fromTextArea($('#texto')[0], CodeMirrorConf);
+    cm.markText({line:0, ch:0}, {line:4, ch:0}, {atomic: true, readOnly: true, inclusiveLeft: true});
+    cm.markText({line:4, ch:1000}, {line:7, ch:0}, {atomic: true, readOnly: true, inclusiveRight: true});
+    cm.on('change', function (instance) {
+        data = instance.getValue();
+        $('#empty').contents().find('body').html(data);
+    });
+}
+
 (function (angular) {
     "use strict";
 
@@ -57,6 +69,7 @@
                 var unit = $scope.currentUnit = lesson.units[$scope.currentUnitPos];
                 $scope.currentUnitId = unit.id;
                 $scope.activity_template = unit.activity.template;
+
                 if (unit.activity.alternatives) {
                     $scope.alternatives = unit.activity.alternatives.map(
                         function(a,i) { return {'title': a }; }
@@ -67,6 +80,9 @@
                     $scope.answer.given = $scope.alternatives.map(
                         function(a,i){ return false; }
                     );
+                } else if(unit.activity.type === 'html5') {
+                    /** TODO: initialize this in proprer way (fabio) */
+                    setTimeout(initialize_code_mirror, 200);
                 }
 
             });

diff --git a/lesson/static/templates/activity_html5.html b/lesson/static/templates/activity_html5.html
@@ -1,17 +1,11 @@
-    <div class="course-activity {{currentUnit.activity.type}} col-lg-12">
-        <div class="question textcenter">
-            <h1>{{ currentUnit.activity.dica }}</h1>
-        </div>
-        <div class="answers">
-            <textarea id="html5editor">
-hi
-            </textarea>
-            <div class="submit textcenter clearfix">
-                <div class="alignleft"><button class="btn btn-default">Pular</button></div>
-                <div class="alignright">
-                    <button class="btn btn-info">Rever Vídeo</button>
-                    <button class="btn btn-success" ng-click="sendAnswer()">Enviar</button>
-                </div>
-            </div>
-        </div>
-    </div>
+<div>
+<textarea id="texto" name="" rows="20">
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <p>Hello world! This is HTML5 Boilerplate.</p>
+  </body>
+</html></textarea>
+<iframe style="width:100%;border:1px solid #272822;" id="empty" src="/empty/"></iframe>
+</div>