Merge pull request #569 from MITx/feature/rocha/wiki-cheatsheet

Refactored wiki cheatsheet code.

lms/djangoapps/course_wiki/editors.py

@@ -4,9 +4,12 @@ from django.utils.encoding import force_unicode
 from django.utils.html import conditional_escape
 from django.utils.safestring import mark_safe
 
+from django.template.loader import render_to_string
+
 from wiki.editors.base import BaseEditor
 from wiki.editors.markitup import MarkItUpAdminWidget
 
+
 class CodeMirrorWidget(forms.Widget):
     def __init__(self, attrs=None):
         # The 'rows' and 'cols' attributes are required for HTML correctness.
@@ -18,9 +21,15 @@ class CodeMirrorWidget(forms.Widget):
     
     def render(self, name, value, attrs=None):
         if value is None: value = ''
+
         final_attrs = self.build_attrs(attrs, name=name)
-        return mark_safe(u'<div><textarea%s>%s</textarea></div>' % (flatatt(final_attrs),
-                conditional_escape(force_unicode(value))))
+
+        # TODO use the help_text field of edit form instead of rendering a template
+
+        return render_to_string('wiki/includes/editor_widget.html',
+                                {'attrs': mark_safe(flatatt(final_attrs)),
+                                 'content': conditional_escape(force_unicode(value)),
+                                 })
 
 
 class CodeMirror(BaseEditor):
@@ -50,5 +59,6 @@ class CodeMirror(BaseEditor):
               "js/vendor/CodeMirror/xml.js",
               "js/vendor/CodeMirror/mitx_markdown.js",
               "js/wiki/CodeMirror.init.js",
+              "js/wiki/cheatsheet.js",
               )
 

lms/static/js/wiki/cheatsheet.js

+$(document).ready(function () {
+    $('#cheatsheetLink').click(function() {
+        $('#cheatsheetModal').modal('show');
+    });
+    
+    $('#cheatsheetModal .close-btn').click(function(e) {
+        $('#cheatsheetModal').modal('hide');
+    });
+});
\ No newline at end of file

lms/static/sass/course/wiki/_wiki.scss

@@ -391,6 +391,18 @@ section.wiki {
     line-height: 1.4em;
   }
 
+  #div_id_content {
+    position: relative;
+  }
+
+  #hint_id_content {
+    position: absolute;
+    top: 10px;
+    right: 0%;
+    font-size: 12px;
+    text-align:right;
+  }
+
   .CodeMirror {
     background: #fafafa;
     border: 1px solid #c8c8c8;
@@ -567,13 +579,6 @@ section.wiki {
     background: #f00 !important;
   }
 
-  .cheatsheet {
-    float: right;
-    position: relative;
-    top: -26px;
-    font-size: 12px;
-  }
-
   #cheatsheetLink {
     text-align: right;
     display: float;

lms/templates/wiki/base.html

@@ -39,18 +39,6 @@
     {% with mathjax_mode='wiki' %}
       {% include "mathjax_include.html" %}
     {% endwith %}
-    <script type="text/javascript">
-	    $(document).ready(function () {
-          editor = $('#div_id_content div.controls');
-          cs = editor.prepend('<p class="cheatsheet">Markdown syntax is allowed. See the <a id="cheatsheetLink" href="#">cheatsheet</a> for help.</p>');
-          cs.find('#cheatsheetLink').click(function() {
-              $('#cheatsheetModal').modal('show');
-          });
-          $('#cheatsheetModal .close-btn').click(function(e) {
-            $('#cheatsheetModal').modal('hide');
-          });
-	    });
-    </script>
   {% endaddtoblock %}
 
 {% endblock %}
@@ -81,8 +69,6 @@
       {% endblock %}
     </div>
 
-    {% include "wiki/includes/cheatsheet.html" %}
-
   </section>
 
 {% endblock %}

lms/templates/wiki/create.html

@@ -42,6 +42,7 @@
             {% trans "Go back" %}
           </a>
       </div>  
+      {% include "wiki/includes/cheatsheet.html" %}
     </form>
 
   </article>

lms/templates/wiki/edit.html

@@ -40,7 +40,10 @@
       </a>
     </div>
   </div>
+  {% include "wiki/includes/cheatsheet.html" %}
 </form>
 
 {% endblock %}
 
+
+

lms/templates/wiki/includes/cheatsheet.html

-<section id="cheatsheetModal" class="modal hide fade">
+<div class="modal hide fade" id="cheatsheetModal">
 	<a href="#" class="close-btn">×</a>
 	<div id="cheatsheet-body" class="modal-body">
 		<div class="left-column">
@@ -53,4 +53,4 @@ Smaller Header
 
 		</div>
 	</div>
-</section>
+</div>

lms/templates/wiki/includes/editor_widget.html

+<textarea {{ attrs }}>{{ content }}</textarea>
+<p id="hint_id_content" class="help-block">
+  Markdown syntax is allowed. See the <a id="cheatsheetLink" href="#">cheatsheet</a> for help.
+</p>